@font-face {
    font-family: D-DIN-PRO;
    src: url("fonts/D-DIN-PRO-400-Regular.otf");
    font-weight: normal;
}

@font-face {
    font-family: D-DIN-PRO;
    src: url("fonts/D-DIN-PRO-500-Medium.otf");
    font-weight: 500;
}

@font-face {
    font-family: D-DIN-PRO;
    src: url("fonts/D-DIN-PRO-600-SemiBold.otf");
    font-weight: 600;
}

@font-face {
    font-family: D-DIN-PRO;
    src: url("fonts/D-DIN-PRO-700-Bold.otf");
    font-weight: 700;
}

@font-face {
    font-family: D-DIN-PRO;
    src: url("fonts/D-DIN-PRO-700-ExtraBold.otf");
    font-weight: 800;
}
*{
    transition:all 0.5s;
}

body,
html {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: D-DIN-PRO, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

/*----------------------------------------------Navbar--------------------------------------------------*/
header {
    position: fixed;
    top:0px;
    z-index:99;
    width:100%;
    background:#fff;
    border-bottom:1px solid grey;
}

.fj-navbar-mobile {
    display: none;


}

.fj-navbar {
    display: flex;
    justify-content: space-between;
/*    background: rgba(15, 12, 12, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);*/
    background:#fff;
    position: sticky;
    top: 0px;
    width: 100%;
    left: 0px;
    z-index: 999;
    padding-top: 10px;
    padding-bottom:0px;
/*    box-shadow: 1px 2px 5px 0px rgba(0 0 0 / 10%);*/
}

.fj-navbar .header-logo img {
    width: 140px;
    margin-left: 20px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.fj-navbar ul {
    list-style: none;
    display: flex;
    margin-bottom: 0px;
    padding-top:20px;
}

.fj-navbar ul li {
    padding: 5px;
    text-align: center;
   


}

.fj-navbar ul li.nav-lk {
    border-left: 1px solid grey;
    text-align: center;
    margin-right: 0px;
}

.fj-navbar ul li.nav-lk i {
    padding-left: 5px;
    padding-right: 5px;
    color:#000;
}

.fj-navbar ul li a {
    display: inline-block;
    color: #000;
    display: inline-block;
    text-decoration: none;
    font-size:15px;

}

.fj-navbar ul img {
    width: 20px;
}

.has-menu {
    position: relative;

}

/* .has-menu .dd-mega-menu {
    position: absolute;
    background: #fff;
    top: 75px;
    padding-top: 40px;
    /* box-shadow: -1px 1px 5px 6px rgba(0, 0, 0, 0.75) !important;
    -webkit-box-shadow: -1px 1px 5px 6px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -1px 1px 5px 6px rgba(0, 0, 0, 0.75); */
/* width: 820px;
    left: -360px;
    /* clip-path: polygon(52.5% 3%, 100% 3%, 100% 100%, 0 100%, 0 3%, 48% 3%, 50.2% 0); */
/* padding-bottom: 20px;
    text-align: left !important;
    display: none;
    transition: all 0.5s; */


/* }  */
.has-menu .dd-mega-menu {
    position: absolute;
    background: #fff;
    top: 64px; 
    padding-top: 40px;
/*     box-shadow: -1px 1px 5px 6px rgba(0, 0, 0, 0.75) !important;
  -webkit-box-shadow: -1px 1px 5px 6px rgba(0, 0, 0, 0.75); */
    width: 1250px;
    left: -400px;
    /* clip-path: polygon(52.5% 3%, 100% 3%, 100% 100%, 0 100%, 0 3%, 48% 3%, 50.2% 0); */
    padding-bottom: 20px;
    text-align: left !important;
    display: none;
    transition: all 0.5s;
    
/*    border-top:1px solid #1d1a35;*/
}
.nav-bar-contact{
    display:flex;
    justify-content:space-between;
    position: relative;
    padding-right:20px;
}
.nav-bar-contact i{
    font-size:35px;
    margin-right:10px;
    color:#151a42;
    font-weight:500;
    margin-top: 10px;
    
}
.nav-bar-tools{
    margin-top:-15px;
}
.nav-bar-contact a{
    font-size:20px !important;
    color:#000;
    font-weight:bold;
}
.nav-bar-contact:after{
    position:absolute;
    right:0px;
    top:15px;
    content:"";
    background:#efefef;
    width:2px; 
    height:25px;
}
.content-box div{
    line-height:20px;
    padding-top:4px;
}
.nav-bar-tools .item-open{
    padding-top:20px;
    cursor:pointer;
}

.menu-box{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255 255 255 / 0.8);
    z-index: 1040;
    -webkit-transition: unset;
    -o-transition: unset;
    transition: unset;
    display: none;
}
.menu-box .inner-menu{
    width: 400px;
    padding: 100px 50px;
    position: absolute;
    right: -402px;
    height: 100%;
    background-color: #FFF;
    overflow-y: scroll;
}
.menu-box.active .inner-menu{
    right: 0;
    -webkit-box-shadow: 0px 0px 30px rgb(0 0 0 / 0.2);
            box-shadow: 0px 0px 30px rgb(0 0 0 / 0.2);
}
.menu-box .inner-menu .website-info{
    margin-bottom: 30px;
}
.menu-box .inner-menu .website-info .logo{
    display: block;
    margin-bottom: 30px;
}
.menu-box .inner-menu .website-info .logo img{
    width: 140px;
}
.menu-box .inner-menu .website-info p{
    text-transform: capitalize;
    font-size: 14px;
}
.menu-box .inner-menu .contact-info h4,
.menu-box .inner-menu .follow-us h4{
    position: relative;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 20px;
    text-transform: capitalize;
    color: #1C1A30;
}
.menu-box .inner-menu .contact-info .contact-box,
.contact-info .contact-box{
    margin-bottom: 30px;
}
.menu-box .inner-menu .contact-info .contact-box i,
.contact-info .contact-box i{
    float: left;
    font-size: 30px;
    line-height: 1;
    color: #F57009;
    position: relative;
    z-index: 2;
    padding: 10px 0 0 10px;
}
.menu-box .inner-menu .contact-info .contact-box .box,
.contact-info .contact-box .box{
    padding-left: 55px;
}
.menu-box .inner-menu .contact-info .contact-box .box a.phone,
.menu-box .inner-menu .contact-info .contact-box .box a.mail,
.menu-box .inner-menu .contact-info .contact-box .box p,
.contact-info .contact-box .box a,
.contact-info .contact-box .box p{
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 2;
    position: relative;
    display: block;
    color: #9B9B9B;
    font-family: 'Barlow', sans-serif;
}
.menu-box .inner-menu .contact-info .contact-box .box a.phone:hover,
.menu-box .inner-menu .contact-info .contact-box .box a.mail:hover,
.menu-box .inner-menu .contact-info .contact-box .box p:hover,
.contact-info .contact-box .box a:hover,
.contact-info .contact-box .box p:hover{
    color: #F57009;
}
.menu-box .inner-menu .follow-us .icon-follow{
    padding-left:0px;
}
.menu-box .inner-menu .follow-us .icon-follow li{
    display: inline-block;
    cursor: pointer;
}
.menu-box .inner-menu .follow-us .icon-follow li a{
    background-color: #FDE4D0;
    display: inline-block;
    color: #F57009;
    height: 40px;
    line-height: 40px;
    width: 40px;
    text-align: center;
    font-size: 14px;
    border-radius: 3px;
    margin-right: 10px;
}
.menu-box .inner-menu .follow-us .icon-follow li:hover a{
    background-color: #F57009;
    color: #FFF;
}
.menu-box-icon{
    font-size: 13px;
    position: absolute;
    top: 30px;
    right: 30px;
    background-color: #F57009;
    width: 35px;
    color: #FFF;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
}
.menu-box-icon:hover{
    -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
            transform: rotate(360deg);
}

.has-menu:hover .dd-mega-menu {
    display: block;
}

.has-mobile-menu a img {
    width: 10px;
    margin-left: 180px;
}

.mega-menu-link-pos {
    display: flex;
}

.mega-menu-link-pos .mega-menu-links:nth-child(2) {
    padding-top: 24px;
}

.has-menu .dd-mega-menu h5 {
    padding-left: 18px;
    color: #375989
}

.has-menu .dd-mega-menu ul {
    display: block;
    padding-left: 10px;
    list-style: none;


}

.has-menu .dd-mega-menu ul li {
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    text-align: left !important;

}

/*.fj-navbar ul li:not(.nav-lk):hover {
    background: #9d9995;
    
}*/


.has-menu .dd-mega-menu ul li a {
    color: #202020;
    /* font-size: 13px; */

}

.has-menu .dd-mega-menu ul li {
    border-bottom: 1px solid #efefef;
}

/*.has-menu .dd-mega-menu ul li:hover a {
    color: #fff;
}*/

.has-dd-menu {
    position: relative;
}

.has-dd-menu .dd-menu {
    position: absolute;
    background: #fff;
    top: 64px;
    width: 200px;
    left: 0px;
    text-align: left !important;
    display: none;
    transition: all 0.5s;
    list-style: none;
    padding-left: 0px;
    padding-bottom: 10px;
    padding-top: 10px;
/*  border-top:1px solid #1d1a35;*/
}

.dd-menu li {
    padding: 0px 0px 0px 0px !important;
    text-align: left !important;
    border-bottom: 1px solid #efefef;
    margin-right: 0px !important;
}

.dd-menu li:last-child {
    border-bottom: none;
}

.dd-menu li:hover {
    background: none !important;
}

.dd-menu li a {
    color: #000 !important;
    padding-left: 10px;
    display: block;
    padding: 7px 7px 7px 7px !important;
    width: 90%;
    margin-left: 10px;
    margin-right: 10px;
}

.dd-menu li a:hover {
    background: #9d9995;
    color: #fff !important;
}

.has-dd-menu:hover .dd-menu {
    display: block;
}

.has-dd-menu-options {
    position: relative;
    width: 100%;
}

.has-dd-menu-options ul {
    position: absolute;
    left: 100%;
    top: 0px;
    width: 200px;
    background: #fff;
    display: block;
    padding-left: 0px;
    display: none;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #efefef
}

.has-dd-menu-options ul li a {
    display: inline-block;
}

.has-dd-menu-options ul li a:hover {
    color: #375989;
}

.has-dd-menu-options:hover ul {
    display: block;
}

.active-nav {
    border-bottom: 2px solid #375989;
    background: #9d9995 !important;
    color: #fff !important;
}








.fj-mep h1 {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 700;
}

.fj-mep p {
    font-size: 16px;
    text-align: justify;

}

.fj-mep-media-mec {
    width: 100%;
    background-image: linear-gradient(180deg, rgba(73, 96, 118, 0.35) 0%, rgba(28, 26, 54, 0.55) 100%), url('images/mechanical.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 450px;

}

.col-mp:hover .fj-mep-media-mec {
    background-image: url('images/mechanical.webp');

}

.fj-mep-media-ele {
    width: 100%;
    background-image: linear-gradient(180deg, rgba(73, 96, 118, 0.35) 0%, rgba(28, 26, 54, 0.55) 100%), url('images/electrical.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 450px;

}

.col-mp:hover .fj-mep-media-ele {
    background-image: url('images/electrical.webp');

}

.fj-mep-media-plum {
    width: 100%;
    background-image: linear-gradient(180deg, rgba(73, 96, 118, 0.35) 0%, rgba(28, 26, 54, 0.55) 100%), url('images/plumbing.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 450px;

}

.col-mp:hover .fj-mep-media-plum {
    background-image: url('images/plumbing.webp');

}

.fj-mep-media-pod {
    width: 100%;
    background-image: linear-gradient(180deg, rgba(73, 96, 118, 0.35) 0%, rgba(28, 26, 54, 0.55) 100%), url('images/pod.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 450px;

}

.col-mp:hover .fj-mep-media-pod {
    background-image: url('images/pod.jpg');

}

.row-mp,
.col-mp {
    padding-left: 0;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
    position: relative;
    overflow: hidden;


}

.row-mp .col-mp .mep-detail-card {
    position: absolute;
    left: 15px;
    width: 300px;
    bottom: 0px;
    height: 210px;
    background: none;
    z-index: 2;
    clip-path: inset(0 100% 0 0);
}

.row-mp .col-mp:hover .mep-detail-card {
    animation: showDetails 0.5s steps(20, end) forwards;
}

@keyframes showDetails {
    100% {
        clip-path: inset(0 0% 0 0);
    }
}


.row-mp .col-mp:after {
    position: absolute;
    z-index: 1;
    left: -390px;
    content: '';
    height: 230px;
    bottom: 0px;
    width: 390px;
    background: #fff;
    animation-name: animateDet2;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;

}


.row-mp .col-mp:hover:after {
    animation-name: animateDet;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;


}

@keyframes animateDet {
    0% {
        left: -390px;
    }

    100% {
        left: 0px;
    }
}

@keyframes animateDet2 {
    0% {
        left: 0px;
    }

    100% {
        left: -390px;
    }
}

.row-mp .col-mp .mep-detail-card h4 {
    color: #000;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 550;
}

.row-mp .col-mp .mep-detail-card img {
    border: 1px solid #8b8888;
    color: #8b8888;
    padding: 3px 4px;
    width: 15px;
    vertical-align: middle;
    border-radius: 50%;
    margin-left: 40px;

}

.mep-icon {
    position: relative;
}

.mep-icon h4 {
    color: #fff;
    position: absolute;
    left: 25px;
    bottom: 50px;
    font-size: 18px;
    text-transform: uppercase;
  
}

.mep-icon img {
    border: 1px solid #efefef;
    padding: 3px 5px;
    width: 20px;
    border-radius: 50%;
    margin-left: 40px;
}

/*----------------------- CEO -----------------------------*/
.ceo {
    background: #e6ebef;
    padding-right: 0px;
    margin-right: 0px;
}

.ceo-2 {
    padding-left: 0px;
    margin-left: 0px;
}

.ceo-message {
    padding-top: 20px;
    padding-bottom: 50px;
}

.ceo-message p {
    font-size: 18px;
    padding-right: 80px;
    padding-left: 40px;
    position: relative;
    padding-top: 10px;
    text-align:justify;

}

.ceo-message p .fa-quote-left {
    position: absolute;
    left: 0px;
    width: 30px;
}

.ceo-message p .fa-quote-right {
    position: absolute;
    right: 40px;
    bottom: -20px;
    width: 30px;
}

.ceo-message img {
    font-size: 40px;
}

.ceo-message h4 {
    margin-left: 40px;
    font-size:20px;
    line-height:20px;
}

.ceo-message div {
    margin-left: 40px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight:600;
}

.ceo-image {
    background-image: url('images/ceo.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 200px;
    border-radius:50%;
    height: 200px;
    border:2px solid #fff;

}
.ceo-image-pos{
    position:relative;
}
.ceo-image-pos .ceo-image-container{
    position:absolute;
      right: -70px;
    bottom: -81px;
}

.ceo-image a {
    padding: 10px 12px;
    position: absolute;
    bottom: -17px;
    right: -3px;
}

.ceo-image a img {
    width: 35px;
}
.ceo-image-container {
    position: absolute;
    right: 20px;
    bottom: 0px;
}

#ceo-message{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: auto;
    position: relative;
    padding-bottom:70px;
}
#ceo-message .ceo-content{
    padding-top:50px;
}
#ceo-message .ceo-content h2{

    text-transform:uppercase;
    line-height:0px;
    font-size:25px;   
}
#ceo-message .ceo-content h3{

    text-transform:uppercase;
    font-weight:bold;
    font-size:50px;  
}

#ceo-message .ceo-message-text{
    background:#efefef;
/*    width:80%;*/
    padding:50px 0px 50px 30px;
}
.ceo-image-container {
    position: absolute;
    right: 20px;
    bottom: 77px;
}

/*---------------------video---------------------------*/
.modal-body {
    position: relative;
    padding: 0px !important;
    padding-bottom: -10px !important;
    background: black;
}

.modal-body img {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 999;
    color: rgb(161, 158, 158);
    width: 40px;
    padding: 10px 15px;
    cursor: pointer;
}

.video {
    margin-bottom: -10px;
}
.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; 
    background: #000;
    overflow: hidden;
}

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

/*------------------------------------------ Better living --------------------------------------------*/
.mep-better-living {
    background-color: #1d1a35;
    padding-top: 70px;
    padding-bottom: 70px;

}

.mep-better-living h1 {
    text-align: center;
    font-size: 30px;
    text-transform: uppercase;
    color: #fff;
}

.mep-better-living h3 {
    text-align: center;
    font-size: 20px;
    color: #d4d4d9;
    margin-bottom: 40px;
}

.mbl-card h4 {
    color: #dddde1;
    font-size: 35px;
}

.mbl-card div {
    color: #d1d1d6;
    font-size: 18px;
    margin-bottom: 30px;


}

.mbl-card p {
    color: #757485;
    font-size: 17px;
    text-align: justify;
}

/*-------------------------------------------  FJ Solutions ------------------------------------------*/
.fj-solutions {
    display: flex;
    justify-content: space-between;
}

.fj-content h3 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 20px;
}

.fj-content p {
    font-size: 16px;
    padding-right: 40px;
    text-align: justify;
}

.fj-solution-icons {
    display: flex;
    margin-top: 0px;
}

.fj-solution-icons img {

    border: 1px solid #8b8888;
    color: #8b8888;
    padding: 3px 5px;
    width: 20px;
    vertical-align: middle;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
}
.own-carousel__container {
  position: relative;
}

/* common styles */
.fj-solution-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;
  cursor: pointer;
}

/* left arrow */
.fj-left {
  left: -60px; /* adjust distance */
}

/* right arrow */
.fj-right {
  right: -60px; /* adjust distance */
}

/* optional hover effect */
.fj-solution-icon img {
   border: 1px solid #00225c;
    color: #00225c;
    padding: 3px 5px;
    width: 20px;
    vertical-align: middle;
    border-radius: 50%;
    cursor: pointer;
}

.fj-solution-icon:hover img {
  transform: scale(1.1);
}

.own-carousel__container {
    position: relative;
}

.own-carousel__container .fj-solution-icons {
    position: absolute;
    top: -50px;
    right: 80px;
    z-index: 100;
}

.solution-card-1 {

    background-image: linear-gradient(180deg, rgba(43, 91, 132, 0.2) 1.55%, rgba(28, 26, 54, 0.7) 95%, #1C1A36 100%), url('images/solution-3.webp');
    height: 450px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.solution-card-1:hover {
    background-image: linear-gradient(180deg, rgba(43, 91, 132, 0.2) 1.55%, #1C1A36 100%), url('images/solution-3.webp');

}

.solution-card-2 {
    background-image: linear-gradient(180deg, rgba(43, 91, 132, 0.2) 1.55%, rgba(28, 26, 54, 0.7) 95%, #1C1A36 100%), url('images/solution-6.webp');
    height: 450px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.solution-card-2:hover {
    background-image: linear-gradient(180deg, rgba(43, 91, 132, 0.2) 1.55%, #1C1A36 100%), url('images/solution-6.webp');

}

.solution-card-3 {
    background-image: linear-gradient(180deg, rgba(43, 91, 132, 0.2) 1.55%, rgba(28, 26, 54, 0.7) 95%, #1C1A36 100%), url('images/solution-7.webp');
    height: 450px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.solution-card-3:hover {
    background-image: linear-gradient(180deg, rgba(43, 91, 132, 0.2) 1.55%, #1C1A36 100%), url('images/solution-7.webp');

}

.solution-card-4 {
    background-image: linear-gradient(180deg, rgba(43, 91, 132, 0.2) 1.55%, rgba(28, 26, 54, 0.7) 95%, #1C1A36 100%), url('images/solution-8.webp');
    height: 450px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.solution-card-4:hover {
    background-image: linear-gradient(180deg, rgba(43, 91, 132, 0.2) 1.55%, #1C1A36 100%), url('images/solution-8.webp');

}

.solution-card-5 {
    background-image: linear-gradient(180deg, rgba(43, 91, 132, 0.2) 1.55%, rgba(28, 26, 54, 0.7) 95%, #1C1A36 100%), url('images/solution-2.webp');
    height: 450px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.solution-card-5:hover {
    background-image: linear-gradient(180deg, rgba(43, 91, 132, 0.2) 1.55%, #1C1A36 100%), url('images/solution-2.webp');

}

.solution-card-6 {
    background-image: linear-gradient(180deg, rgba(43, 91, 132, 0.2) 1.55%, rgba(28, 26, 54, 0.7) 95%, #1C1A36 100%), url('images/solution-1.webp');
    height: 450px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.solution-card-6:hover {
    background-image: linear-gradient(180deg, rgba(43, 91, 132, 0.2) 1.55%, #1C1A36 100%), url('images/solution-1.webp');

}

.solution-card-7 {
    background-image: linear-gradient(180deg, rgba(43, 91, 132, 0.2) 1.55%, rgba(28, 26, 54, 0.7) 95%, #1C1A36 100%), url('images/solution-4.webp');
    height: 450px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.solution-card-7:hover {
    background-image: linear-gradient(180deg, rgba(43, 91, 132, 0.2) 1.55%, #1C1A36 100%), url('images/solution-4.webp');

}

.solution-card-8 {
    background-image: linear-gradient(180deg, rgba(43, 91, 132, 0.2) 1.55%, rgba(28, 26, 54, 0.7) 95%, #1C1A36 100%), url('images/solution-5.webp');
    height: 450px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.solution-card-8:hover {
    background-image: linear-gradient(180deg, rgba(43, 91, 132, 0.2) 1.55%, #1C1A36 100%), url('images/solution-5.webp');

}

.solution-card-9 {
    background-image: linear-gradient(180deg, rgba(43, 91, 132, 0.2) 1.55%, rgba(28, 26, 54, 0.7) 95%, #1C1A36 100%), url('images/solution-9.webp');
    height: 450px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.solution-card-9:hover {
    background-image: linear-gradient(180deg, rgba(43, 91, 132, 0.2) 1.55%, #1C1A36 100%), url('images/solution-9.webp');

}

.card-position {
    position: relative;
    overflow: hidden;

}

.card-position .solution-card-content {
    position: absolute;
    bottom: -110px;
    left: 0px;
    animation-name: animateText2;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.card-position .solution-card-content h4 {
    font-size: 16px;
    color: #fff;
    padding-left: 15px;
}

.card-position .solution-card-content p {
    font-size: 15px;
    color: #a8a4a4;
    padding-left: 15px;
    padding-right: 10px;
    line-height: 17px;
    margin-top: 20px;
    width: 290px;
    height: 90px;
}

.card-position:hover .solution-card-content {
    animation-name: animateText;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.card-position:hover .solution-card-content p {
    margin-top: 10px;
}

@keyframes animateText {
    0% {
        bottom: -110px;
    }

    30% {
        bottom: 7px;
    }

    100% {
        bottom: 0px;
    }

}

@keyframes animateText2 {
    0% {
        bottom: 0px;
    }

    70% {
        bottom: -120px;
    }

    100% {
        bottom: -110px;
    }
}

/*--------------------------- trusted partners ---------------------------------------*/
.trusted-partner {
    text-align: center;
}

.trusted-partner h5 {
    font-size: 25px;
    font-weight: bold;
    text-transform: uppercase;
}


.section {
    margin-bottom: 50px;
}

.trusted-partner p {
    font-size: 20px;
    padding-right: 300px;
    padding-left: 300px;

}

.row-1 {
    display: flex;
    justify-content: space-between;
    padding-left: 100px;
    padding-right: 100px;
    margin-top: 30px;
}

.row-1 img {
    width: 150px;
}

.row-2 {
    display: flex;
    justify-content: space-around;
    margin-top: 60px;
    padding-left: 120px;
    padding-right: 120px;
}

.row-2 img {
    width: 200px;
}

.carousel-indicators {
    bottom: -70px;
}

.carousel-indicators button {
    width: 10px !important;
    height: 10px !important;
    background: #dcdcdc !important;
    border-radius: 50%;
    border-bottom: 0px !important;
    border-top: 0px !important;
}

.carousel-indicators .active {
    width: 30px !important;
    height: 10px !important;
    border-radius: 5px;
    background: #adadad !important;

}

/*------------------------------------------- Home Slider------------------------------------------------*/

.carousel-video {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.carousel-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Same effect as background-size: cover */
    object-position: top;
}
.carousel-image {
    width: 100%;
    height: 100vh;
    background-image: url('images/mep-slide2.jpg');
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    display:flex;
    justify-content:center;
    align-items:center;
   

}
.carousel-image span{
    animation-name: animate-mep;
    animation-duration:2s;
    animation-fill-mode: forwards;
    animation-timing-function: linear ease-in-aout;
    opacity:0;
    color:#fff;
    font-size:170px;
    display:block;
    font-weight:bold;
    line-height:140px;
    filter: blur(20px);
    animation-delay:1s;
  
}
.carousel-image h1{
    color:#fff;
    opacity:0;
    
    animation-name: animate-mep;
    animation-duration:2s;
    animation-fill-mode: forwards;
    font-weight:bold;
    font-size:32px;
    animation-delay:1.5s;

   
    
}
.carousel-image p{
    color:#fff;
    opacity:0;
    animation-name: animate-mep;
    animation-duration:2s;
    animation-fill-mode: forwards;
    font-weight:bold;
    font-size:18px;
    padding-left:10px;
    animation-delay:1.9s;

   
    
}


@keyframes animate-mep{
    0%{
        opacity:0;
         filter: blur(18px);
         -webkit-backdrop-filter: blur(18px);
    }
    100%{
        opacity:1;
        filter: blur(0px);
         -webkit-backdrop-filter: blur(0px);
    }
}


.carousel-image-2 {
    width: 100%;
    height: 100vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-attachment:fixed;
}

.carousel-image-3 {
    width: 100%;
    height: 100vh;
    background-image: url('images/new-slider/electric-banner.jpg');
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-attachment:fixed;
   

}

.carousel-image-4 {
    width: 100%;
     height: 100vh;
    background-image: url('images/new-slider/plumbing.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-attachment:fixed;

}
.carousel-image-5 {
    width: 100%;
     height: 100vh;
    background-image: url('images/new-slider/pre-fab.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-attachment:fixed;

}
.carousel-image-6 {
    width: 100%;
     height: 100vh;
    background-image: url('images/new-slider/mechanical.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-attachment:fixed;

}

/*----------------custom-----------------*/


.carousel-content {
    position: absolute;
    padding-left:50px;
    clip-path: polygon(0% 0%, 88% 0, 94% 51%, 100% 99%, 0% 100%);
    padding-bottom:20px;
    padding-right:30px;
    left: 0px;
    bottom: -3px;
    background:rgba(29, 26, 53, 1);
    padding-top:50px;
    width:850px;
}

.carousel-content .carousel-content-animate {
    animation-name: bounceUp;
    animation-duration: 0.7s;
    animation-fill-mode: forwards;
   
}

.carousel-content .carousel-content-animate h2 {
    font-size: 30px;
    color: #fff;
    font-weight: 500;
    letter-spacing: 2px;
    width: 600px;
}

.carousel-content .carousel-content-animate p {
    font-size: 20px;
    color: #fff;
    width: 650px;
    line-height: 23px;
}

.carousel-content a {
    color: #fff;
    border: 2px solid #cfcfcf;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
    margin-top: 20px;
}


/*----------------------------------------*/

.home-indicators {
    bottom: 100px !important;
    width: 200px;
    display: flex;
    justify-content: center;
    transform: rotate(90deg);
    margin-left: 90% !important;
    margin-right: 0% !important;

}

.home-indicators .active {
    width: 100px !important;
    height: 5px !important;
    border-radius: 5px;
    background: #b5b6b7 !important;
    opacity: 1 !important;
    animation-name: bounceDown;
    animation-duration: 0.7s;
    animation-fill-mode: forwards;
}

.home-indicators button {
    width: 5px !important;
    height: 5px !important;
    background: #b5b6b7 !important;
    border-radius: 50%;
    border-bottom: 0px !important;
    border-top: 0px !important;
    opacity: 1 !important;
}

@keyframes bounceUp {
    0% {
        margin-bottom: 0px;
    }

    70% {
        margin-bottom: 40px;
    }

    100% {
        margin-bottom: 30px;
    }
}

@keyframes bounceDown {
    0% {
        margin-left: 5px;
    }

    70% {
        margin-left: 15px;
    }

    100% {
        margin-left: 7px;
    }
}

.home-carousel-inner {
    margin-bottom: 0px !important;
}

/*-----------------------------------End home slider -----------------------*/
.showhidelogo {
    display: none;
}

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

/*-------------------------------- latest news ----------------------------------------------*/
.latest-news {
    display: flex;
    justify-content: space-between;
    margin-bottom:20px;

}

.latest-news div h6 {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
}

.latest-news div h3 {
    font-size: 20px;
    font-weight: bold;
    margin-top:5px;
}

.latest-news div a {
    border: 2px solid #8d8c9a;
    padding: 10px 20px;
    color: #636174;
    text-decoration: none;



}

.latest-news div a img {
    margin-left: 10px;
    color: #636174;
    width: 15px;
}

.latest-news-image-1 {
    background-image: url('images/dubai-image-1.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 500px;
    position: relative;
}

.latest-news-image-2 {
    background-image: url('images/dubai-2.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 340px;
    position: relative;
    margin-bottom: 20px;
}

.latest-news-image-3 {
    background-image: url('images/dubai-2.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 340px;
    position: relative;
}

.news-image{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 530px;
}
.news-page-image{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 315px;
}

.ltn-text {
    background-color: rgba(27, 24, 40, 0.67);
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding-left: 20px;
    padding-top: 10px;
}

.ltn-text h5 {
    color: #fff;
    font-size: 20px;
    margin-bottom: 5px;
    position: relative;
}

.ltn-text h5 img {
    position: absolute;
    right: 40px;
    top: 5px;
    width: 20px;
    border: 1px solid #a8a4a4;
    padding: 5px 6px;
    border-radius: 50%;


}

.ltn-text p {
    font-size: 16px;
    color: #e2e2e6;
    padding-right: 150px;
    line-height: 18px;
}

.ltn-text-2 {
    background-color: rgba(27, 24, 40, 0.67);
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.ltn-text-2 h5 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 5px;
    position: relative;
    font-weight: normal;
    padding-right: 100px;
}

.ltn-text-3 {
    background-color: rgba(27, 24, 40, 0.67);
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.ltn-text-3 h5 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 5px;
    position: relative;
    font-weight: normal;
    padding-right: 100px;
}

.ltn-text-2 h5 img,
.ltn-text-3 h5 img {
    position: absolute;
    right: 40px;
    top: 5px;
    width: 20px;
    border: 1px solid #a8a4a4;
    padding: 5px 6px;
    border-radius: 50%;


}

.home-arrows {
    position: absolute;
    ;
    bottom: 15%;
    z-index: 4;
    right: 180px;
}

.partner-arrows {
    position: relative;
    height: 50px;
    width: 100px;
    display: inline-block;
    margin-left: 50%;
    transform: translateX(-50%);

}

.partner-arrows img {

    border: 1px solid #8b8888;
    padding: 3px 5px;
    width: 25px;
    vertical-align: middle;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;

}

.partner-arrows .home-slider-prev,
.partner-arrows .home-slider-next {
    background: none;
    width: 30px;
    height: 30px;
}

.partner-arrows .home-slider-prev {
    left: 20px;
}

.home-slider-prev {
    width: 38px;
    height: 38px;
    background: #9d9995;
    border-radius: 50%;
    opacity: 0.8;
}

.home-slider-next {
    width: 38px;
    height: 38px;
    background: #9d9995;
    border-radius: 50%;
    opacity: 0.8;
    left: 50px;

}

.carousel-control-prev-icon {
    width: 15px;
    height: 15px;
}

.carousel-control-next-icon {
    width: 15px;
    height: 15px;
}


/*-------------------------------------- form -----------------------------------*/
.subscribe {


    background-image: linear-gradient(180deg, rgba(28, 26, 54, 0.4) 1.55%, rgba(28, 26, 54, 0.9) 100%), url('images/form-bg.webp');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 500px;
    text-align: center;
}

.sub-content {
    padding-top: 160px;
}

.sub-content h4 {
    color: #fff;
    text-transform: uppercase;
    font-size: 25px;
}

.sub-content p {
    font-size: 22px;
    color: #dcdbdc;
    padding-left: 220px;
    padding-right: 220px;
    line-height: 26px;
}

.sub-content form .myinput {
    background: transparent;
    outline: none;
    border: 2px solid #d1d1d6;
    width: 40%;
    padding: 7px 20px;
    color: #fff;
}

.sub-content form .myinput::placeholder {
    color: #d1d1d6;
}

.btn-submit {
    background: #1c1a36;
    color: #d4d3d8;
    padding: 8px 20px;
    border: 1px solid #d4d3d8;
}

.btn-submit img {
    padding-left: 15px;
    width: 30px;
}



/*--------------------Footer-----------------------------*/
/*footer {
    background-color: #1c1a36;
    padding-top: 20px;
    padding-bottom: 20px;
}

.footer-col-1 {
    margin-top: 30px;
}

.footer-col-1 p {
    color: #d1d1d6;
    margin-top: 40px;
    margin-bottom: 20px;
    text-transform: none;

    text-align: justify;
}

.footer-col-1 .ft1-content {
    display: flex;
    justify-content: space-between;
}

.footer-col-1 img {
    width: 100px;


}

.footer-col-1 .ft1-content div img {
    margin-top: 10px;
    margin-right: 10px;
    width: 20px;
}

.footer-col-2 h4 {
    color: #e3e2e6;
    font-size: 18px;
    font-weight: bold;
    margin-top: 40px;
    text-transform: uppercase;
}

.footer-col-2 ul {
    padding-left: 0px;
    list-style-type: none;
    padding-top: 10px;
}

.footer-col-2 ul li a {
    color: #757485;
    text-decoration: none;
    margin-top: 3px;
    display: inline-block;
    transition: all 0.3s;

}

.footer-col-2 ul li a:hover {
    color: #d1d1d6;
    margin-left: 3px;
}

.footer-col-2 ul li h4 {
    margin-top: 4px;
}

.footer-col-2 ul li h4 a {
    color: #e3e2e6;
}*/


.footer{
    padding-top: 100px;
    background-color: #1C1A30;
}
.footer .logo,
.footer .links{
    margin-bottom: 30px;
    padding-left:0px;
}
.footer .logo img{
    width: 160px;
}
.footer .logo p{
    margin: 30px 0 30px 0;
    color: #F9F9F9;
}
.footer-title h4 {
    color: #FFF;
    font-size: 18px;
    font-weight: 700;
    text-transform: capitalize;
    line-height: 1;
    margin-bottom: 25px;
}
.footer .links li a{
    display: inline-block;
    position: relative;
    color: #F9F9F9;
    font-size: 15px;
    line-height: 33px;
}
.footer .links li:hover a{
    color: #F57009;
}
.footer .links li a:after{
    content: "\f061";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    font-size: 12px;
    opacity: 0;
    margin-left: 0;
    visibility: hidden;
    -webkit-transition: all 0.8s cubic-bezier(0.38, 0.17, 0.09, 0.99);
    -o-transition: all 0.8s cubic-bezier(0.38, 0.17, 0.09, 0.99);
    transition: all 0.8s cubic-bezier(0.38, 0.17, 0.09, 0.99);
}
.footer .links li a:hover:after{
    opacity: 1;
    margin-left: 15px;
    visibility: visible;
    color: #F57009;
}
.footer .newsletter p{
    color: #F9F9F9;
    margin-bottom: 26px;
    font-size: 15px;
    font-weight: 500;
}

.footer .newsletter form{
    position: relative
}
.footer .newsletter form input{
    width: 100%;
    color: #9B9B9B;
    background-color: transparent;
    font-size: 13px;
    text-transform: capitalize;
    padding: 0 15px;
    line-height: 44px;
    border-radius: 3px;
    letter-spacing: 0.25px;
    position: relative;
    border: 1px solid rgb(204 204 204 / 0.1);
}
.footer .newsletter form input:focus{
    border-color: #F57009;
}
.footer .newsletter form button{
    border: none;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 15px;
    background-color: #F57009;
    font-size: 11px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 2px;
    color: #FFF;
}
.footer .newsletter form button:hover{
    color: #F57009;
    background-color: #FFF;
}
.footer ul.icon{
    margin: 30px 0;
}
.footer ul.icon li{
    display: inline-block;
}
.footer ul.icon li a{
    width: 35px;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background-color: #262442;
    color: #FFF;
    font-size: 13px;
    margin-right: 5px;
    border-radius: 2px;
}
.footer ul.icon li:hover a{
    background-color: #FFF;
    color: #F57009;
}
.copyright{
    margin-top: 70px;
    padding: 20px 0;
    background-color: #262442;
    overflow: hidden
}
.copyright p{
    margin: 0;
    color: #F4F4F4;
    float: left;
    font-family: 'Barlow', sans-serif;
    font-size: 18px;
    font-weight: 500;
}
.copyright p a{
    color: #F57009;
}
.copyright ul{
    float: right;
}
.copyright ul li{
    display: inline-block;
    margin-left: 10px;
}
.copyright ul li a{
    color: #FFF !important
}
.copyright ul li:hover a{
    color: #F57009 !important;
}

/* :: Scroll Up */
.scroll-up {
    position: fixed;
    z-index: 100;
    bottom: 30px;
    right: 30px;
    -webkit-box-shadow: 0px 0px 40px 4px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 0px 40px 4px rgba(0, 0, 0, 0.05);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}
.scroll-up.active {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.scroll-up a {
    background-color: #F57009;
    font-size: 16px;
    color: #FFF;
    line-height: 42px;
    width: 44px;
    height: 44px;
    display: inline-block;
    text-align: center;
    border: 1px solid #F57009;
    border-radius: 3px;
    outline: none;
}
.scroll-up:hover a{
    background-color: #1C1A30;
    border: 1px solid #1C1A30;
}



/*------------------------------------------------------------------------- About us ------------------------------------------------------*/
.about-content h2 {
    font-size: 25px;
    text-transform: uppercase;
    font-weight: bold;
}

.about-content p {
    font-size: 16px;
    text-align: justify;
}

.innerHeader {
    background-image: linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.62)), url('images/about-us-banner.webp');
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 500px;
    background-size: cover;

}

.innerHeader h1 {
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 40px;
    z-index: 2;
    padding-top: 400px;
}

/*-------------------------------------------------- Divisiions--------------------------------------*/
.divisionHeader {
    background-image: linear-gradient(180deg, rgba(26, 49, 71, 0.14) 0%, rgba(28, 26, 54, 0.7) 100%), url('images/divisions-banner-2.webp');
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 500px;
    background-size: cover;

}

.divisionHeader h1 {
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 40px;
    z-index: 2;
    padding-top: 400px;
}

.division-image {
    background-image: url('images/divisions/division-img.webp');
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 270px;
    background-size: cover;
    margin-top: 5px;

}

.division-content h2 {
    font-size: 22px;
    color: #1c1a36;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-top: 45px;
}

.division-content p {
    font-size: 18px;
    padding-right: 100px;
    text-align: justify;
}

.division-uae h3 {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 50px;
}

.card {
    width: 26rem;
    margin-left: 50%;
    transform: translateX(-50%);
}

.facility-page-card {
    width: 100%;
    margin-left: 50%;
    transform: translateX(-50%);
}

.border-mec {
    position: relative;
}

.border-mec:after {
    position: absolute;
    left: 19px;
    width: 563px;
    height: 2px;
    content: "";
    background: #375989;
    bottom: -4px;
}

.border-mec2 {
    position: relative;
}

.border-mec2::after {
    position: absolute;

    left: 19px;

    width: 158px;

    height: 2px;

    content: "";

    background: #375989;

    bottom: -4px;

}

.facility-card-body h3 {
    font-size: 25px;
}

.facility-card-body p {
    margin-bottom: 5px;
}

.card {
    height: 100%;
}

.card img {
    height: 350px;
}

.division-card-image {
    background-image: url('images/divisions/promaster.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;
    transition: all 0.2s;
}

.division-card-image:hover {
    /* background-image: url('images/divisions/promaster-actual.webp'); */
    transform: scale(1.2);

}

.divParent {
    width: 100%;
    height: 350px;
    overflow: hidden;
}

.division-card-image-2 {
    background-image: url('images/divisions/flowtech.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;
    transition: all 0.5s;
}

.division-card-image-2:hover {
    transform: scale(1.2);
}

.division-card-image-3 {
    background-image: url('images/divisions/multiplast.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;
    transition: all 0.2s;
}

.division-card-image-3:hover {
    transform: scale(1.2);
}

.division-card-image-4 {
    background-image: url('images/divisions/TPS.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;
    transition: all 0.2s;
}

.division-card-image-4:hover {
    transform: scale(1.2);
}

.division-card-image-5 {
    background-image: url('images/divisions/fjenergy.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;
    transition: all 0.2s;
}

.division-card-image-5:hover {
    transform: scale(1.2);
}

.division-card-image-6 {
    background-image: url('images/divisions/dcserve.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;
    transition: all 0.2s;
}

.division-card-image-6:hover {
    transform: scale(1.2);
}

.division-card-image-7 {
    background-image: url('images/divisions/fjcare.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;
    transition: all 0.2s;
}

.division-card-image-7:hover {
    transform: scale(1.2);
}

.division-card-image-8 {
    /* background-image: url('images/divisions/EUROCLIMA.webp'); */
    background-image: url('images/divisions/EUROCLIMA.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;
    transition: all 0.2s;
}

.division-card-image-8:hover {
    transform: scale(1.2);
}

.division-card-image-9 {
    background-image: url('images/divisions/alphaducts.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;
    transition: all 0.2s;
}

.division-card-image-9:hover {
    transform: scale(1.2);
}

.division-card-image-10 {
    background-image: url('images/divisions/metaform.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;
    transition: all 0.2s;
}

.division-card-image-10:hover {
    transform: scale(1.2);
}

.division-card-image-11 {
    background-image: url('images/divisions/ksa-division.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;
    transition: all 0.2s;
}

.division-card-image-11:hover {
    transform: scale(1.2);
}

.division-card-image-12 {
    background-image: url('images/divisions/qatar-division.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;
    transition: all 0.2s;
}

.division-card-image-12:hover {
    transform: scale(1.2);
}

.division-card-image-13 {
    background-image: url('images/divisions/oman-division.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;
    transition: all 0.2s;
}

.division-card-image-13:hover {
    transform: scale(1.2);
}

.card-body h6 {
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 18px;
}

.card-body p {
    font-size: 15px !important;
}

.fj-divisions h5 {
    font-size: 25px;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
    letter-spacing: 1px;
}

.products-link {
    text-decoration: none;
    color: #212529;
    transition: all 0.5s;
}

.products-link:hover {
    color: #212529;
}

.fj-divisions-card {
    width: 100%;
    background-image: linear-gradient(to bottom, rgba(55, 89, 137, 0.22), rgba(55, 89, 137, 0.62)), url('images/divisions/ksa.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 450px;
    position: relative;

}

.fj-divisions-card-2 {
    width: 100%;
    background-image: linear-gradient(to bottom, rgba(55, 89, 137, 0.22), rgba(55, 89, 137, 0.62)), url('images/divisions/qatar.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 450px;
    position: relative;

}

.fj-divisions-card-3 {
    width: 100%;
    background-image: linear-gradient(to bottom, rgba(55, 89, 137, 0.22), rgba(55, 89, 137, 0.62)), url('images/divisions/oman.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 450px;
    position: relative;

}
.fj-divisions-card-4 {
    width: 100%;
    background-image: linear-gradient(to bottom, rgba(55, 89, 137, 0.22), rgba(55, 89, 137, 0.62)), url('images/iraq.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 450px;
    position: relative;

}

.col-mp-div {
    padding-right: 2px;
    margin-left: 0px;
    padding-left: 0px;
}

.col-mp-div-2 {
    margin-right: 0px;
    padding-right: 0px;
    margin-left: 0px;
    padding-left: 0px;
}

.division-card-detail {
    position: absolute;
    left: 40px;
    bottom: 20px;
    color: #fff;

}

.division-card-detail h6 {
    color: #fff;
    font-size: 18px;
    letter-spacing: 1px;

}

.division-card-detail p {
    padding-right: 50px;
    line-height: 19px;
}


/*-------------------facility------------------------*/

.facility-card-1 {
    /* background-image: linear-gradient(180deg, rgba(43, 91, 132, 0.2) 1.55%, #1C1A36 100%), url('images/facility-1.webp'); */
    background-image: url('images/facilities/facility-1.jpg');
    height: 450px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1);
    overflow: hidden;
    transition: all 0.4s;
}

.facility-card-1:hover {
    transform: scale(1.3);

}

.facility-card-2 {
    /* background-image: linear-gradient(180deg, rgba(43, 91, 132, 0.2) 1.55%, #1C1A36 100%), url('images/facility-2.webp'); */
    background-image: url('images/facilities/facility-3.jpg');
    height: 450px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    transition: all 0.4s;
}

.facility-card-2:hover {
    transform: scale(1.3);
}

.card-position:hover .facility-card-1,
.card-position:hover .facility-card-2,
.card-position:hover .facility-card-3 {
    /* transform: scale(1.3); */
}

.facility-card-3 {
    /* background-image: linear-gradient(180deg, rgba(43, 91, 132,0.2) 1.55%, #1C1A36 100%), url('images/facility-3.webp'); */
    background-image: url('images/facilities/facility-2.jpg');
    height: 450px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    transition: 0.4s;
}

.facility-card-3:hover {
    transform: scale(1.3);

}



.card-position {
    position: relative;
    overflow: hidden;

}

.card-position .facility-card-content {
    position: absolute;
    bottom: -50px;
    left: 0px;
    animation-name: animateText6;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.animate-text {
    width: 290px;
    height: 90px;
    padding-top: 10px;
    position: relative;
    bottom: 0px;
    left: 0px;
    overflow: hidden
}

.animate-text p {
    position: absolute;
    top: 80px;
    animation-name: animateText5;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.card-position .facility-card-content h4 {
    font-size: 16px;
    color: #fff;
    padding-left: 15px;
}

.card-position .facility-card-content p {
    font-size: 15px;
    color: #fff;
    padding-left: 15px;
    padding-right: 10px;
    line-height: 17px;
    margin-top: 0px;

}

.card-position .facility-card-content .badge {
    position: absolute;
    top: -150px;

    left: -4px;
    background-color: #1D1A35 !important;
    height: 50px;
    padding: 14px 20px;
    text-align: left !important;
    border-radius: 0px !important;
    font-size: 20px;
    width: 300px;
}

.card-position .facility-card-content .badge a {
    color: #fff;
    text-decoration: none;
}

.card-position:hover .facility-card-content {
    /*    bottom:40px;*/
    /* animation-name: animateText4;
    animation-duration: 1s;
    animation-fill-mode: forwards; */
}

.card-position:hover .animate-text p {
    animation-name: animateText3;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes animateText3 {
    0% {
        top: 70px;
        opacity: 0;
    }

    70% {
        top: 0px;
        opacity: 0.4;
    }

    100% {
        top: 2px;
        opacity: 1;
    }
}

@keyframes animateText4 {
    0% {
        bottom: -50px;
    }

    30% {
        bottom: 25px;
    }

    100% {
        bottom: 20px;
    }

}

@keyframes animateText5 {
    0% {
        top: 2px;
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        top: 70px;
        opacity: 0;
    }
}

@keyframes animateText6 {
    0% {
        bottom: 40px;
    }

    30% {
        bottom: -55px;
    }

    100% {
        bottom: -50px;
    }

}

@keyframes animateText {
    0% {
        bottom: -110px;
    }

    30% {
        bottom: 7px;
    }

    100% {
        bottom: 0px;
    }

}

@keyframes animateText2 {
    0% {
        bottom: 0px;
    }

    70% {
        bottom: -120px;
    }

    100% {
        bottom: -110px;
    }
}

.slider-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(55, 89, 137, 0.32)), url('images/new-images/project-1.jpg');
    width: 100%;
    height: 1000px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.slider-bg-2 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(55, 89, 137, 0.32)), url('images/new-images/project-2.jpg');
    width: 100%;
    height: 1000px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.slider-bg-3 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(55, 89, 137, 0.32)), url('images/new-images/project-3.jpg');
    width: 100%;
    height: 1000px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.slider-bg-4 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(55, 89, 137, 0.32)), url('images/new-images/project-4.jpg');
    width: 100%;
    height: 1000px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}


.mycarouselIndicators {
    bottom: 60px;
    display: flex;
    justify-content: flex-end;
    z-index: 1000;
    margin-right: 4% !important;
}

.mycarouselIndicators .active {
    background: none !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;


}

.mycarouselIndicators img.active {
    border: 3px solid #fff;
    margin-top: 8px;
}

.mycarouselIndicators img {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    margin-right: 10px;
    opacity: 1 !important;
}

.mycarouselIndicators div {
    background: grey;
    width: 30px;
    height: 30px;
    margin-top: 10px;
    border-radius: 50%;
    padding-top: 1px;
    cursor: pointer;

}

.mycarouselIndicators div img {
    width: 25px !important;
    height: 25px !important;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 3px;
    padding-top: 5px;
}

.about-us-slider-content {
    position: absolute;
    left: 30px;
    bottom: 50px;
    color: #fff;
}

.about-us-slider-content h6 {
    font-size: 14px;
    font-weight: bold;
}

.about-us-slider-content h3 {
    font-size: 25px;
    width: 800px;
}

.client-heading h4 {
    text-align: center;
    font-weight: bold;
    font-size: 25px;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.project-carousel-inner {
    margin-bottom: 0px !important;
}

.our-clients img {
    width: 150px;
    margin-bottom: 30px;
}


/*------------------------------------ Facilities page -------------------------------------*/
.facilitiesHeader {

    background-image: url('images/facilities/banner.jpg');
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 500px;
    background-size: cover;

}

.facilitiesHeader h1 {
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 40px;
    z-index: 2;
    padding-top: 400px;
}

.fp-bh-text h2 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 17px;
}

.fp-bh-text p {
    font-size: 18px;
    font-weight: 400;
    line-height: 29.76px;
    color: #151623;
    text-align: justify;

}

.fp-row {
    padding-left: 0;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.fp-col-mp {
    padding-left: 0px;
    margin-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    position: relative;


}

.fp-left-content {
    padding-left: 18%;
    padding-right: 85px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.fp-left-content h3 {
    font-size: 27px;
    line-height: 39.71px;
    font-weight: 500;
}

.fp-left-content p {
    font-size: 17px;
    line-height: 29.76px;
    font-weight: 400;
    text-align: justify;
}

.fp-left-content-image {

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 400px;

}

.fp-right-content-image {
    background-image: linear-gradient(180deg, rgba(73, 96, 118, 0) 0%, #1C1A36 100%), url('images/facilities/facility-alpha.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 400px;

}

.fp-right-content {
    padding-left: 40px;
    padding-right: 200px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

}

.fp-right-content h3 {
    font-size: 27px;
    line-height: 39.71px;
    font-weight: 500;
}

.fp-right-content p {
    font-size: 17px;
    line-height: 29.76px;
    font-weight: 400;
    text-align: justify;
}

/*----------------------------------
   products
  ---------------------------------*/

.pageHeader {
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 500px;
    background-size: cover;
}

.pageHeader h1 {
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 40px;
    z-index: 2;
    padding-top: 400px;
}

.breadcrumb {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: ">";
    padding: 0 4px;
    color: #1D1A35;
}

.breadcrumb-item a {
    text-decoration: none;
    color: #375989;
    font-size: 18px;
}

.breadcrumb-item a:hover {
    text-decoration: none;
}

.breadcrumb-item.active {
    color: #1D1A35;
    font-size: 18px;
}

.connect-experts-btn {
    background: #1D1A35;
    padding: 10px;
    text-align: center;
    display: block;
    width: 50%;
    text-decoration: none;
    color: #fff;
    margin-left: 50%;
    transform: translateX(-50%);
}

.connect-experts-btn:hover {
    color: #fff;
}

.building-materials h2 {
    font-size: 22px;
    color: #1c1a36;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-top: 45px;
}

.building-materials p {
    font-size: 18px;
    text-align: justify;
}

.product-detail {
    padding-top: 30px;

}

.product-image {
    display: flex;
    justify-content: center;
    padding-top: 40px;
}

.product-image img {
    width: 400px;
    height: 400px;
}


.tawreed-product-image {
    display: flex;
    justify-content: center;
    padding-top: 40px;
}

.tawreed-product-image img {
    width: 400px;
    height: 400px;
}




.product-detail h2 {
    font-size: 22px;
}

.product-detail ul {
    padding-left: 17px;
}

.bm-logo {
    width: 100px;
    margin-left: 50%;
    transform: translateX(-50%);
}

.bm-heading {
    margin-bottom: 50px;
}

.bm-icons {
    display: flex;
    justify-content: center;

}

.bm-icons div img {
    border: 1px solid #8b8888;
    color: #8b8888;
    padding: 3px 5px;
    width: 20px;
    vertical-align: middle;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
}

.bm-services {
    padding-left: 17px;
}

.bm-heading-1 {
    position: relative;
    margin-bottom: 20px;
    color: #1c1a36;
    display: inline-block;
}

.bm-heading-1:after {
    position: absolute;
    left: 0px;
    bottom: -5px;
    width: 100%;
    background: #1c1a36;
    height: 6px;
    content: "";
    border-radius: 6px;
}

.bm-heading-2 {
    position: relative;
    margin-bottom: 20px;
    color: #1c1a36;
    display: inline-block;
    
}

.bm-heading-2:after {
    position: absolute;
    left: 0px;
    bottom: -5px;
    width: 100%;
    background: #1c1a36;
    height: 6px;
    content: "";
    border-radius: 6px;
}

.pr-heading {
    position: relative;
    margin-bottom: 20px;
    color: #1c1a36;
    display: inline-block;
}

.pr-heading:after {
    position: absolute;
    left: 0px;
    bottom: -5px;
    width: 70%;
    background: #1c1a36;
    height: 5px;
    content: "";
    border-radius: 6px;
}

.nav-tabs .nav-item .nav-link {
    font-size: 16px;
    background: #1c1a36;
    color: #fff;
    margin-right: 3px;
    margin-bottom: 5px;
}

.nav-tabs {
    padding-left: 0px;
    padding-right: 0px;
}

.tab-content {
    background: #efefef;
    padding-bottom: 20px;
}

.pd-heading {
    margin-bottom: 50px;
    text-align: left;
    text-transform: capitalize !important;
}

.pd-logo {
    width: 150px;
}

.pd-explore-more {
    background: #1D1A35;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
    transition: all 0.5s;

}

.pd-explore-more:hover {
    background: #375989;
    color: #fff;
}

.prd-padding {
    padding: 0px 0px 0px 0px;
    text-align: center;

}

.prd-padding img {
    height: 280px;
}

.tawreed {
    padding: 20px 20px 0px 20px;
    margin-bottom: 15px;
}

.tawreed img {
    height: 250px;
}

.tawreed h6 {
    font-size: 18px;
    margin-top: 15px;
}

.types {
    display: inline-block;
    position: relative;
}

.types:after {
    position: absolute;
    left: 0px;
    bottom: -5px;
    content: "";
    width: 100%;
    height: 4px;
    border-radius: 5px;
    background: #1D1A35;
}

.tab-pm {
    display: flex;
    justify-content: center;
    align-content: center;
    background-color: #efefef;
    color: #000;
    padding: 20px;
}
.tawreed-logo{
    padding-top: 70px;
}

.tawreed-logo img{
    width:100%;
}

.fj-care-logo{
    padding-top: 70px;
}

.fj-care-logo img{
    width:100%;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------
                                                          Tawreed CSS
/*----------------------------------------------------------------------------------------------------------------------------------------------*/

.loading {
    position: fixed;
    background-color: #FFF;
    left: 0;
    top: 0;
    z-index: 99999;
    width: 100%;
    height: 100%;
    -webkit-transition: unset;
    -o-transition: unset;
    transition: unset;
}
.loading .loading-box {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0.8);
    -ms-transform: translate(-50%, -50%) scale(0.8);
    transform: translate(-50%, -50%) scale(0.8);
}
.loading .lds-roller {
    display: inline-block;
    position: relative;
    width: 100px;
    height: 100px;
}
.loading .lds-roller div {
    -webkit-animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
            animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    -webkit-transform-origin: 40px 40px;
        -ms-transform-origin: 40px 40px;
            transform-origin: 40px 40px;
}
.loading .lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #F57009;
    margin: -5px 0 0 -5px;
}
.loading .lds-roller div:nth-child(1) {
    -webkit-animation-delay: -0.036s;
            animation-delay: -0.036s;
}
.loading .lds-roller div:nth-child(1):after {
    top: 63px;
    left: 63px;
}
.loading .lds-roller div:nth-child(2) {
    -webkit-animation-delay: -0.072s;
            animation-delay: -0.072s;
}
.loading .lds-roller div:nth-child(2):after {
    top: 68px;
    left: 56px;
}
.loading .lds-roller div:nth-child(3) {
    -webkit-animation-delay: -0.108s;
            animation-delay: -0.108s;
}
.loading .lds-roller div:nth-child(3):after {
    top: 71px;
    left: 48px;
}
.loading .lds-roller div:nth-child(4) {
    -webkit-animation-delay: -0.144s;
            animation-delay: -0.144s;
}
.loading .lds-roller div:nth-child(4):after {
    top: 72px;
    left: 40px;
}
.loading .lds-roller div:nth-child(5) {
    -webkit-animation-delay: -0.18s;
            animation-delay: -0.18s;
}
.loading .lds-roller div:nth-child(5):after {
    top: 71px;
    left: 32px;
}
.loading .lds-roller div:nth-child(6) {
    -webkit-animation-delay: -0.216s;
            animation-delay: -0.216s;
}
.loading .lds-roller div:nth-child(6):after {
    top: 68px;
    left: 24px;
}
.loading .lds-roller div:nth-child(7) {
    -webkit-animation-delay: -0.252s;
            animation-delay: -0.252s;
}
.loading .lds-roller div:nth-child(7):after {
    top: 63px;
    left: 17px;
}
.loading .lds-roller div:nth-child(8) {
    -webkit-animation-delay: -0.288s;
            animation-delay: -0.288s;
}
.loading .lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12px;
}
@-webkit-keyframes lds-roller {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@keyframes lds-roller {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

.about-us .about-us-img-box{
	position: relative;
    padding-right: 20px;
    height: 100%;
}
.about-us .about-us-img-box .img-box{
	position: relative;
    border-radius: 10px;
    height: 100%;
    background-size: cover;
    background-repeat:no-repeat;
    background-position: right;
    -webkit-box-shadow: 0 5px 40px rgb(9 29 62 / 11%);
            box-shadow: 0 5px 40px rgb(9 29 62 / 11%);
}
.about-us .about-us-text-box .sec-title{
    margin-bottom: 30px;
}
.about-us .about-us-text-box .sec-title h3{
    margin-bottom: 20px;
}
.about-us .about-us-text-box p.providing{
    font-size: 22px;
    font-weight: 500;
    line-height: 31px;
    margin-bottom: 25px;
    text-transform: capitalize;
    position: relative;
    color: #1C1A30;
}
.about-us-core-list{
    margin-bottom: 0px;
    padding-left:0px;
    list-style:none;
    overflow: hidden;
}
.about-us-core-list .item{
    position: relative;
    margin-bottom: 12px;
}
.about-us-core-list .item:last-of-type{
    margin-bottom: 0;
}
.about-us-core-list .item i{
    font-size: 12px;
    background-color: #F57009;
    margin-right: 8px;
    color: #FFF;
    border-radius: 2px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    position: absolute;
    top: 3px;
    left: 0;
}
.about-us-core-list .item h4{
    display: inline-block;
    position: relative;
    font-size: 15px;
    line-height: 26px;
    font-weight: 500;
    color: #6c757d;
    text-transform: capitalize;
    padding-left: 30px;
}
.about-us .about-us-text-box .img-person .about-us-person{
    border-radius: 50%;
    width: 60px;
    margin-right: 20px;
}
.about-us .about-us-text-box .img-person .signature{
    width: 250px;
}
.about-us .about-us-text-box .about-us-features-carousel{
    background: #F8F6F7 url(../images/01_pattern.png);
    overflow: hidden;
    border-radius: 5px;
    width:100%;
    background-position: center;
}
.about-us .about-us-text-box .about-us-features-carousel .item{
    padding: 40px;
}
.about-us .about-us-text-box .about-us-features-carousel .item i,
.services-carousel-item i,
.provide-core-list .provide-core-list-item i,
.statistic-item i{
    font-size: 55px;
    line-height: 1.1;
    display: inline-block;
    margin-bottom: 30px;
    color: #F57009;
    position: relative;
    padding: 15px 0 0 15px;
}
.about-us .about-us-text-box .about-us-features-carousel .item i:before,
.services-carousel-item i:before,
.provide-core-list .provide-core-list-item i:before,
.menu-box .inner-menu .contact-info .contact-box i:before,
.contact-info .contact-box i:before,
.statistic-item i:before{
    display: inline-block;
    position: relative;
    z-index: 1;
}

.services.home-2{
	background-color: #F8F6F7;
        position:relative;
        padding-bottom:30px;
}
.services.home-2 .services-carousel-item{
    padding: 0;
}
.services.home-2 .services-carousel-item .services-item-img-box{
    height: 250px;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    overflow: hidden;
    position: relative;
}
.services.home-2 .services-carousel-item .services-item-img-box:before{
    font-family: 'ar-coder';
    position: absolute;
    z-index: 1;
    font-size: 45px;
    line-height: 1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
}
.services.home-2 .services-carousel-item.item-1 .services-item-img-box:before{
    content: "\e934";
}
.services.home-2 .services-carousel-item.item-2 .services-item-img-box:before{
    content: "\e93d"
}
.services.home-2 .services-carousel-item.item-3 .services-item-img-box:before{
    content: "\e916"
}
.services.home-2 .services-carousel-item.item-4 .services-item-img-box:before{
    content: "\e917"
}
.services.home-2 .services-carousel-item.item-5 .services-item-img-box:before{
    content: "\e910"
}
.services.home-2 .services-carousel-item.item-6 .services-item-img-box:before{
    content: "\e90d"
}
.services.home-2 .services-carousel-item:hover .services-item-img-box:before{
    opacity: 1;
    visibility: visible;
    color: #FFF;
    z-index: 4;
}
.services.home-2 .services-carousel-item .services-item-img-box span,
.projects-item span,
.services.home-3 .item-box span{
    position: absolute;
    z-index: 1;
    display: block;
    width: 0px;
    height: 0px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 1;
    background-color: rgb(245 112 9 / 85%);
}
.services.home-2 .services-carousel-item:hover .services-item-img-box span,
.projects-item:hover span,
.services.home-3 .item-box:hover span{
    width: 2000px;
    height: 2000px;
}
.item-box{
    background:#fff;
}
.services.home-2 .item-box,
.services.home-3 .item-box{
    position: relative;
    padding: 20px 35px;
}
.services.home-2 .services-carousel-item .item-box i{
/*    float: left;*/
    padding: 0;
    line-height: 1.3;
    margin: 0;
    font-size: 45px;
}
.services.home-2 .services-carousel-item .item-box i:after{
	display: none;
}
.services.home-2 .services-carousel-item .item-box .content-box{
    padding-left: 0px;
}
.services.home-2 .services-carousel-item .item-box .content-box h4{
	font-size: 22px;
}
.services.home-2 .services-carousel-item .item-box .content-box .more,
.services.home-3 .item-box .content-box .more{
    position: relative;
    text-transform: capitalize;
    font-size: 15px;
    line-height: 1;
    display: inline-block;
    font-weight: 600;
    color: #6c757d;
    margin-top: 10px;
}
.services.home-2 .services-carousel-item .item-box .content-box .more:hover,
.services.home-3 .item-box .content-box .more:hover{
	color: #F57009;
}
.services.home-2 .services-carousel-item .item-box .content-box .more:after,
.services.home-3 .item-box .content-box .more:after{
    content: "\f061";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    font-size: 12px;
    opacity: 0;
    margin-left: 0;
    visibility: hidden;
    -webkit-transition: all 0.8s cubic-bezier(0.38, 0.17, 0.09, 0.99);
    -o-transition: all 0.8s cubic-bezier(0.38, 0.17, 0.09, 0.99);
    transition: all 0.8s cubic-bezier(0.38, 0.17, 0.09, 0.99);
}
.services.home-2 .services-carousel-item .item-box .content-box .more:hover:after,
.services.home-3 .item-box .content-box .more:hover:after{
    opacity: 1;
    margin-left: 15px;
    visibility: visible;
    color: #F57009;
}
.services.home-2 .services-carousel.owl-theme .owl-dots .owl-dot span{
	background-color: #1C1A30
}
.services.home-2 .services-carousel.owl-theme .owl-dots .owl-dot.active span,
.services.home-2 .services-carousel.owl-theme .owl-dots .owl-dot:hover span{
	background-color: #F57009
}
.owl-theme .owl-nav.disabled+.owl-dots{
    margin-top:30px !important;
}

@-webkit-keyframes icon-scale {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }

    25% {
      -webkit-transform: scale(0.75);
              transform: scale(0.75);
    }

    50% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }

    75% {
      -webkit-transform: scale(0.75);
              transform: scale(0.75);
    }

    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
}
@keyframes icon-scale {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }

    25% {
      -webkit-transform: scale(0.75);
              transform: scale(0.75);
    }

    50% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }

    75% {
      -webkit-transform: scale(0.75);
              transform: scale(0.75);
    }

    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
}
.about-us .about-us-text-box .about-us-features-carousel .item i:after,
.services-carousel-item i:after,
.provide-core-list .provide-core-list-item i:after,
.menu-box .inner-menu .contact-info .contact-box i:after,
.contact-info .contact-box i:after,
.statistic-item i:after{
    content: '';
    background-color: #FDE4D0;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    border-radius: 40% 45% 40% 30%;
}
a{
    text-decoration:none !important;
}

.menu-box .inner-menu .contact-info .contact-box i:after,
.contact-info .contact-box i:after{
    width: 35px;
    height: 35px;
}
.about-us .about-us-text-box .about-us-features-carousel .item h5{
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
    text-transform: capitalize;
    position: relative;
    margin-bottom: 30px;
}
.about-us .about-us-text-box .about-us-features-carousel .item .btn-1{
    min-width: auto;
    width: 100%;
    text-decoration:none;
}


.video-presentation{
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.1) 1.55%, rgba(0, 0, 0, 0.7) 100%),url(../../images/form-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 70px;
    width: 100%;
    height: 450px;
    border-radius: 5px;
    overflow: hidden;
    -webkit-box-shadow: 0 5px 40px rgb(9 29 62 / 11%);
            box-shadow: 0 5px 40px rgb(9 29 62 / 11%);
}
.presentation-box{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    z-index: 1;
}
.pulse{
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}
.pulse i{
    background-color: #1d1a35;
    width: 55px;
    color:#fff;
    height: 55px;
    line-height: 55px;
    border-radius: 50%;
    border-bottom:none;
    font-size: 16px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    overflow: hidden;
    -webkit-animation: video-pulse-presentation 2s linear infinite;
    animation: video-pulse-presentation 2s linear infinite;
}
.pulse i:hover{
    background-color: #FFF;
    color: #F57009;
}
@-webkit-keyframes video-pulse-presentation{
    0%{
        -webkit-box-shadow: 0 0 0 0 rgb(29 26 53 / 70%), 0 0 0 0 rgb(29 26 53 / 70%);
                box-shadow: 0 0 0 0 rgb(29 26 53 / 70%), 0 0 0 0 rgb(29 26 53 / 70%);
    }
    40%{
        -webkit-box-shadow: 0 0 0 0 rgb(29 26 53 / 0%), 0 0 0 0 rgb(29 26 53 / 70%);
                box-shadow: 0 0 0 0 rgb(29 26 53 / 0%), 0 0 0 0 rgb(29 26 53 / 70%);
    }
    80%{
        -webkit-box-shadow: 0 0 0 0 rgb(29 26 53 / 0%), 0 0 0 30px rgb(29 26 53 / 0%);
                box-shadow: 0 0 0 0 rgb(29 26 53 / 0%), 0 0 0 30px rgb(29 26 53 / 0%);
    }
    100%{
        -webkit-box-shadow: 0 0 0 0 rgb(29 26 53 / 0%), 0 0 0 30px rgb(29 26 53 / 0%);
                box-shadow: 0 0 0 0 rgb(29 26 53 / 0%), 0 0 0 30px rgb(29 26 53 / 0%);
    }
}
@keyframes video-pulse-presentation{
    0%{
        -webkit-box-shadow: 0 0 0 0 rgb(29 26 53 / 70%), 0 0 0 0 rgb(29 26 53 / 70%);
                box-shadow: 0 0 0 0 rgb(245 112 9 / 70%), 0 0 0 0 rgb(245 112 9 / 70%);
    }
    40%{
        -webkit-box-shadow: 0 0 0 0 rgb(29 26 53 / 0%), 0 0 0 0 rgb(29 26 53 / 70%);
                box-shadow: 0 0 0 0 rgb(29 26 53 / 0%), 0 0 0 0 rgb(29 26 53 / 70%);
    }
    80%{
        -webkit-box-shadow: 0 0 0 0 rgb(29 26 53 / 0%), 0 0 0 30px rgb(29 26 53 / 0%);
                box-shadow: 0 0 0 0 rgb(29 26 53 / 0%), 0 0 0 30px rgb(29 26 53 / 0%);
    }
    100%{
        -webkit-box-shadow: 0 0 0 0 rgb(29 26 53 / 0%), 0 0 0 30px rgb(29 26 53 / 0%);
                box-shadow: 0 0 0 0 rgb(29 26 53 / 0%), 0 0 0 30px rgb(29 26 53 / 0%);
    }
}
.ar-icons-play-button:before {
  content: "\e929";
}

.statistic{
    padding: 50px 0 20px 0;
    border-bottom: 1px solid #E9E9E9;
}
.statistic-item{
    margin-bottom: 30px;
    overflow: hidden;
}
.statistic-item i{
    float: left;
    margin-bottom: 0;
    font-size: 45px;
    padding: 12px 0 0 12px;
}
.statistic-item i:after{
    width: 40px;
    height: 40px;
}
.statistic-item .content{
    padding-left: calc(57px + 20px);
}
.statistic-item .statistic-counter{
    font-size: 50px;
    font-weight: 600;
    line-height: 0.9;
    margin-bottom: 10px;
    color: #1C1A30;
    font-family: 'Barlow', sans-serif;
}
.statistic-item .counter-name{
    color: #1C1A30;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    text-transform: capitalize;
}

.bg-section{
    background-image: linear-gradient(rgba(28, 26, 48, 0.75),rgba(28, 26, 48, 0.75)),url('./images/02_services-bg.jpg');
    width:100%;
    height: calc(100% - (650px / 2));
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    position:absolute;
    left:0px;
    top:0px;
}
    
.service-container{
/*    height:850px;*/
    background:#f8f6f7;
    padding-bottom:30px;
}


.own-carousel__item{
    background:#fff;
    position:relative;
}

.solution-content{
    color:#fff;
    padding-top:100px;
    margin-bottom:50px;
    position:relative;
}
.solution-content h3{
    font-weight:bold;
}
.solution-content p{
    font-size:17px;
}
.item-box{
    padding:25px;
}


.blog-item{
    margin-bottom: 30px;
}
.blog-item .img-box{
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}
.blog-item:hover .img-box .open-post img{
    -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
            transform: scale(1.3);
    -webkit-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out
}
.blog-item .img-box ul{
    position: absolute;
    bottom: 10px;
    left: 30px;
    background-color: #FFF;
    padding: 2px 15px;
    border-radius: 3px;
}
.blog-item .img-box ul li{
    display: inline-block;
}
.blog-item .img-box ul li a{
    font-size: 13px;
    color: #F57009;
    text-transform: capitalize;
}
.blog-item .img-box ul li:hover a{
    color: #1C1A30;
}
.blog-item .text-box{
    padding: 30px 0px 0px 30px;
}
.blog-item .text-box .title-blog{
    display: block;
}
.blog-item .text-box h5{
    position: relative;
    font-size: 22px;
    line-height: 30px;
    margin: 0 0 15px 0;
    font-weight: 600;
    color: #1C1A30;
    text-transform: capitalize;
}
.blog-item .text-box .title-blog:hover,
.blog-item .text-box h5:hover{
    color: #F57009;
}
.blog-item .text-box .blog-date{
    margin-bottom: 15px;
    display: inline-block;
    font-weight: 500;
    color: #F57009;
}
.blog-item .text-box .link{
    min-width: 120px;
    height: 45px;
    line-height: 45px;
	margin-top: 10px;
}
.blog-item .text-box .author-name{
    margin-left: 25px;
    display: inline-block;
    font-weight: 500;
}

.blog a{
    text-decoration:none;
}
.btn-1{
    text-transform: capitalize;
    position: relative;
    text-align: center;
    background-color: #F57009;
    z-index: 1;
    font-size: 14px;
    font-weight: 600;
    min-width: 180px;
    height: 60px;
    line-height: 60px;
    padding: 0 15px;
    border-radius: 3px;
    overflow: hidden;
    font-family: 'Heebo', sans-serif;
    display: -ms-inline-grid;
    display: inline-grid;
    cursor: pointer;
    -webkit-transition: color 1s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
    -o-transition: color 1s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
    transition: color 1s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
}
.btn-1 span{
    position: relative;
    z-index: 2;
}
.btn-1:after,
.btn-1:before{
    content: '';
    position: absolute;
    height: 50%;
    width: 0;
    background-color: #F57009;
    z-index: 1;
    -webkit-transition: .3s cubic-bezier(.785,.135,.15,.86);
    -o-transition: .3s cubic-bezier(.785,.135,.15,.86);
    transition: .3s cubic-bezier(.785,.135,.15,.86);
}
.btn-1:after{
    top: 0;
    left: 0;
    right: auto;
}
.btn-1:hover:after{
    width: 100%;
    right: 0;
    left: auto;
}
.btn-1:before{
    bottom: 0;
    right: 0;
    left: auto;
}
.btn-1:hover:before{
    width: 100%;
    left: 0;
    right: auto;
}
.btn-1:hover span{
    color: #F57009;
}
.btn-1:hover:after,
.btn-1:hover:before{
    background-color: #FFF;
}
.btn-3{
    background-color: #F57009;
}
.btn-3 span{
    color: #FFF;
}
.btn-3:hover span{
    color: #F57009;
}
.btn-3:hover:after,
.btn-3:hover:before{
    background-color: #1C1A30;
}
.own-carousel__item{
    border-top-left-radius:6px;
    border-top-right-radius:6px;
}
.has-menu .dd-mega-menu ul li:hover{
       background: #9d9995;
       color:#fff !important;
}
.has-menu .dd-mega-menu ul li:hover a{
       color:#fff !important;
}

.business-entities-section{
    background:#efefef;
    margin-bottom:20px !important;
    padding-top:50px;
    padding-bottom:30px;
    margin-top:50px;
}
.trusted-partner-section{

    padding-top:50px;
}
 .top-mtb {
            margin-bottom: 60px;
        }
        .tawreed-carousel-arrow{
            width:10px;
        }
        .tawreed-thumbnails{
            width:60px;
        }
        .tawreed-thumbnails-2{
            width:180px;
        }
        .tawreed-thumbnails-3{
            width:120px;
        }
        
 .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color:#000;
    background-color: #efefef !important;
    border-color: #dee2e6 #dee2e6 #fff;
}
.nav-tabs .nav-item .nav-link {
    margin-right: 5px;
}

        .pd-logo {
    width: 100%;
}
 .product-image-2{
            margin-top: 60px;
            overflow: hidden;
          
        }
        .product-image-2 img{
              margin-left: 50%;
            transform: translateX(-50%);
          
        }
        .fj-care-logo{
            padding-top:60px;
        }
        .fj-care-logo img{
            margin-top: 0px;
        }
        .tawreed-mtb a{
            text-decoration:none;
            color:#000;
        }
         .f-padding{
                padding-top:45px;
            }
            .pav-img{
                height:auto !important;
            }
            .tawreed-product-image-2{
                border:2px solid gray;
                padding: 20px;
                display: flex;
                justify-content: center;
            }
            .key-benefits h6{
                margin-bottom:0px;
            }
            .key-benefits p{
                margin-bottom:5px;
            }

            .home-about-title{
                text-align:center;
                margin-bottom:30px;
            }

/*----------------------------------------------------------------------------------------------------------------------------------------------
                                                         End Tawreed CSS
 ----------------------------------------------------------------------------------------------------------------------------------------------*/




@media screen and (max-width:1482px) {
    .ceo-image-pos{
        padding-right:100px;
        padding-left:100px;
    }
    .ceo-image-pos .ceo-image-container {
    right: 4px;
}
.has-menu .dd-mega-menu {
    left: -450px;
}
}
@media screen and (max-width:1399px) {
    .fj-mep p {
        font-size: 16px;

        /*        padding-right: 400px;*/
    }
    

    /*----------------------- CEO -----------------------------*/
    .ceo-message p {
        font-size: 18px;
        padding-right: 30px;
        padding-left: 30px;
        position: relative;

    }

    .ceo-message {
        padding-bottom: 30px;
    }

    .ceo-message p .fa-quote-right {
        right: 30px;
    }

    .ceo-message h4 {
        margin-left: 29px;
    }

    .ceo-message div {
        margin-left: 70px;
        font-size: 16px;
    }
     
    .ceo-image-pos .ceo-image-container {
    right: 4px;
}

#ceo-message .ceo-content {
    padding-top: 50px;
    padding-left: 0px;
}
#ceo-message .ceo-message-text {
    width: 90%;
    padding: 45px 50px 50px 70px;
}

.ceo-message p .fa-quote-left {
               left: 29px;
        top: -5px;
}
.ceo-image-container {
    position: absolute;
    right: 47px;
}
    #ceo-message .ceo-message-text {
        width: 100%;
        padding: 45px 29px 50px 20px;
    }
    .ceo-image-container {
    position: absolute;
    right: 20px;
    bottom: 0px;
}
 .ceo-image-pos{
        padding-right:100px !important;
        padding-left:100px !important;
    }

  

    /*-----------------------------------------better living ----------------------------------*/
    .mep-better-living h1 {
        font-size: 28px;
    }

    .mep-better-living h3 {
        font-size: 18px;
        margin-bottom: 40px;
    }

    .mbl-card h4 {
        color: #dddde1;
        font-size: 30px;
    }

    .mbl-card div {
        font-size: 17px;


    }

    .mbl-card p {
        font-size: 16px;
    }

    /*---------------------solution------------------------*/
    .fj-content p {
        font-size: 16px;
        padding-right: 100px;
    }

    /*--------------------------- trusted partners ---------------------------------------*/
    .trusted-partner p {
        font-size: 22px;
        padding-right: 160px;
        padding-left: 160px;
        word-spacing: 1px;
        line-height: 24px;

    }

    .row-1 img {
        width: 120px;
    }

    .row-2 img {
        width: 150px;
    }


    .ltn-text-2 h5 {
        padding-right: 60px;
    }

    .ltn-text-3 h5 {
        padding-right: 60px;
    }

    .ltn-text p {
        font-size: 15px;
        padding-right: 70px;
    }

    /*------------form-----------*/
    .sub-content p {
        font-size: 18px;
    }

    /*-------------------footer----------------*/
    .footer-col-2 h4 {
        font-size: 16px;
        margin-top: 40px;
    }


    /*-------------------about us--------------------*/
    .our-clients img {
        width: 110px;
    }

    /*---------------------------------------------------------- home slider ----------------------------------------------------------*/
    .home-indicators {
        bottom: 100px !important;
        width: 200px;
        margin-left: 87% !important;
        margin-right: 0% !important;

    }

    .innerHeader {
        height: 450px;

    }

    .innerHeader h1 {
        font-size: 35px;
        padding-top: 360px;
    }

    .divisionHeader {
        height: 450px;

    }

    .divisionHeader h1 {
        font-size: 35px;
        padding-top: 360px;
    }

    .facilitiesHeader {

        height: 450px;

    }

    .facilitiesHeader h1 {
        font-size: 35px;
        padding-top: 360px;
    }

    .pageHeader {
        height: 450px;
    }

    .pageHeader h1 {
        font-size: 35px;
        padding-top: 360px;
    }

    .card {
        width: 23rem;
        margin-left: 50%;
        transform: translateX(-50%);
    }

    .card {
        height: 100%;
    }

    .card img {
        height: 350px;
    }

    .fp-left-content {
        padding-right: 44px;
    }

    .fp-right-content {
        width: 560px;
        padding-left: 30px;
        padding-right: 0px;

    }

    .footer-col-2 ul li a {
        font-size: 15px;

    }

    .service-padding {
        padding-left: 0px;
        padding-right: 0px;
        margin-left: 0px;
    }

    .home-arrows {
        bottom: 100px;
    }

    .facility-page-card {
        width: 100%;
    }

    .fp-left-content-image {
        height: 377px;
    }

    .facility-card-body h3 {
        font-size: 24px;
    }

    .plp {
        padding-left: 30px;
    }

    .bm-heading-1 {
        margin-bottom: 20px;
        font-size: 30px;
    }

    .bm-heading-1:after {
        bottom: -5px;

    }

    .bm-heading-2 {
        margin-bottom: 20px;
        font-size: 30px;
    }

    .bm-heading-2:after {
        bottom: -5px;
  
    }

    .nav-tabs>.nav-item>.nav-link {
        font-size: 13px;
        margin-right: 5px;

    }

    .prd-padding img {
        height: 260px;

    }

    .prd-padding {
        width: 360px;

    }

    .pd-heading {
        margin-bottom: 30px;
        text-align: left;
    }

    .tawreed {
        padding: 20px 20px 0px 20px;
        margin-bottom: 15px;
    }

    .tawreed img {
        height: 250px;
    }

    .tawreed h6 {
        font-size: 18px;
        margin-top: 15px;
    }
    .tawreed-logo{
    padding-top: 70px;
}
.has-menu .dd-mega-menu {
    position: absolute;
    background: #fff;
    top: 64px; 
    padding-top: 30px;
    width: 1165px;
    left: -440px;
}

}

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

    .fj-mep-media-mec,
    .fj-mep-media-ele,
    .fj-mep-media-plum,.fj-mep-media-pod {
        height: 380px;

    }

    .row-mp .col-mp:after {
        left: -340px;
        height: 230px;
        bottom: 0px;
        width: 340px;

    }

    .row-mp .col-mp .mep-detail-card {
        left: 25px;
        width: 310px;
        bottom: 0px;
        height: 210px;
        clip-path: inset(0 100% 0 0);
    }

    .fj-mep p {
        font-size: 16px;
        /*        padding-right: 200px;*/
    }


    /*----------------------- CEO -----------------------------*/
    .ceo-message p {
        font-size: 18px;
        padding-right: 30px;
        padding-left: 30px;
        position: relative;

    }

    .ceo-message {
        padding-bottom: 30px;
    }

    .ceo-message p .fa-quote-left {
        left: 0px;
        width: 20px;
    }

    .ceo-message p .fa-quote-right {
        right: -6px;
        width: 30px;
        bottom:-20px;
 
    }

    .ceo-message h4 {
        margin-left: 30px;
    }

    .ceo-message div {
        margin-left: 30px;
        font-size: 16px;
    }

  

    .fj-content p {
        font-size: 16px;
        padding-right: 310px;
    }
        .ceo-message p .fa-quote-left {
        left: 10px;
        width: 30px;
        top: -6px;
    }
 #ceo-message .ceo-content h2 {
    font-size: 20px;
}
 #ceo-message .ceo-content h3{
    font-size: 40px;
}

    /*--------------------------- trusted partners ---------------------------------------*/
    .trusted-partner p {
        font-size: 22px;
        padding-right: 80px;
        padding-left: 80px;
        word-spacing: 1px;
        line-height: 24px;

    }

    .row-1 {
        padding-left: 150px;
        padding-right: 150px;
        margin-top: 30px;
    }

    .row-1 img {
        width: 90px;
    }

    .row-2 {
        margin-top: 60px;
        padding-left: 220px;
        padding-right: 220px;
    }

    .row-2 img {
        width: 90px;
    }

    .carousel-indicators {
        bottom: -70px;
    }

    .showhidelogo {
        display: none;
    }

    /*----------------form*------------------*/
    .sub-content p {
        padding-left: 120px;
        padding-right: 120px;
    }

    /*-------------------footer----------------*/
    .footer-col-2 h4 {
        font-size: 16px;
        margin-top: 40px;
    }

    /*----------------------------------------------------------------------about us------------------------------------------------*/
    .mycarouselIndicators {
        bottom: 60px;
        margin-right: 4% !important;
    }

    /*-------------- home slider ----------------*/
    .home-indicators {
        bottom: 110px !important;
        width: 200px;
        margin-left: 80% !important;
        margin-right: 0% !important;

    }

    /*----------------------------------------------------------- home slider -----------------------------------------------------------*/

    /*----------------------------------------------------------------------about end ----------------------------------------------*/


    .division-image {
        height: 250px;
        margin-top: 5px;

    }

    .division-content h2 {
        font-size: 20px;

    }

    .division-content p {
        font-size: 18px;
        padding-right: 20px;
    }

    .card {
        width: 19rem;
    }

    .card img {
        height: 270px;
    }

    .division-card-image {
        height: 270px;
    }

    .divParent {
        height: 270px;
    }

    .division-card-image-2 {
        height: 270px;
    }

    .division-card-image-3 {
        height: 270px;
    }

    .card-body p {
        font-size: 14px;
    }


    .fj-divisions h5 {
        font-size: 25px;
        margin-bottom: 50px;
    }

    .fj-divisions-card {
        height: 400px;

    }

    .fj-divisions-card-2 {
        height: 400px;

    }

    .fj-divisions-card-3 {
        height: 400px;

    }
    .fj-divisions-card-4 {
        height: 400px;

    }

    .division-card-detail p {
        padding-right: 40px;
        line-height: 19px;
        font-size: 14px;

    }

    .division-card-detail h6 {
        font-size: 16px;

    }

    .division-card-detail {
        left: 30px;
        bottom: 20px;
    }

    .fp-left-content {
        padding-left: 20%;
    }

    .fp-left-content h3 {
        font-size: 27px;
    }


    .fp-left-content p {
        font-size: 17px;
    }

    .fp-right-content {
        width: 480px;
        padding-left: 30px;
        padding-right: 0px;

    }

    .fp-right-content h3 {
        font-size: 27px;
        line-height: 39.71px;
        font-weight: 500;
    }

    .fp-right-content p {
        font-size: 17px;
        line-height: 29.76px;
        font-weight: 400;
    }

    .service-padding {
        padding-left: 30px;
    }

    .footer-col-1 {
        margin-top: 27px;
    }

    .footer-col-1 p {
        margin-bottom: 0px;
        margin-top: 15px;
    }

    .home-arrows {
        bottom: 100px;
        right: 12%;
    }

    .facility-page-card {
        width: 100%;
    }

    .fp-left-content-image {
        height: 330px;
    }

    .facility-card-body h3 {
        font-size: 24px;
    }

    .plp {
        padding-left: 10px;
    }

    .has-menu .dd-mega-menu {
        position: absolute;
        width: 950px;
        left: -430px;
    }

    .border-mec:after {
        width: 290px;
    }

    .bm-heading-1 {
        margin-bottom: 20px;
        font-size: 30px;
    }

    .bm-heading-1:after {
        bottom: -5px;

    }

    .bm-heading-2 {
        margin-bottom: 20px;
        font-size: 30px;
    }

    .bm-heading-2:after {
        bottom: -5px;
    }

    .nav-tabs>.nav-item>.nav-link {
        font-size: 16px;
        background: #1c1a36;
        color: #fff;
    }

    .prd-padding {
        width: 100%;
        padding: 0px 0px 0px 0px;

    }

    .prd-padding img {
        height: 290px;
    }

    .tawreed {
        padding: 10px 10px 0px 10px;
        margin-bottom: 15px;
    }

    .tawreed img {
        height: 200px;
    }

    .tawreed h6 {
        font-size: 16px;
        margin-top: 15px;
    }
  .about-us .about-us-img-box .img-box {
    height:400px;
    margin-bottom:30px;
}


 .fj-navbar {
        display: none;
    }

    .fj-navbar-mobile {
        display: block;

    }

    .mobile-menu {
        display: flex;
        justify-content: space-between;
        background: #fff;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        position: fixed;
        top: 0px;
        width: 100%;
        left: 0px;

        display: flex;
        padding-top: 10px;
        padding-bottom: 10px;
        z-index: 10;
    }
    .fa-bars{
        font-size:20px;
        font-weight:bold;
        cursor:pointer;
    }

    .mobile-menu .header-logo img {
        width: 100px;
        margin-left: 20px;
    }

    .fj-navbar-mobile .mobile-menu ul {
        list-style: none;
        display: flex;
        margin-bottom: 0px;



    }

    .fj-navbar-mobile .mobile-menu ul li {
        margin-right: 10px;
        padding: 14px 15px 10px 15px;
        text-align: center;


    }

    .fj-navbar-mobile .mobile-menu ul li img {
        width: 20px;
        color: #fff;
    }

    .fj-navbar-mobile {
        position: relative;
    }

    .fj-navbar-mobile .mb-menu {
        position: fixed;
        top: 0px;
        z-index: 9999;
        background: #fff;
        width: 300px;
        list-style: none;
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
        height: 100vh;
        margin-left: -300px;
        transition: all 0.4s;
        overflow-y: scroll;
        overflow-x: hidden;


    }

    .fj-navbar-mobile .mb-menu li a {
        display: block;
        text-decoration: none;
        border-bottom: 1px solid #efefef;
        padding: 10px 10px;
        color: #000;
    }

    .fj-navbar-mobile .mb-menu .mobile-dd-mega-menu {
        display: none;
        transition: 1s !important;

    }

    .show-mobile-menu {
        transition: all 0.5s ease-in-out;
        display: block !important;
    }

    .fj-navbar-mobile .mb-menu .mobile-dd-mega-menu .mobile-heading-img {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #efefef;
        margin-left: 10px;
        margin-right: 10px;
    }

    .fj-navbar-mobile .mb-menu .mobile-dd-mega-menu .mobile-heading-img img {
        width: 10px;
        margin-right: 18px;
    }

    .fj-navbar-mobile .mb-menu .mobile-dd-mega-menu h4 {
        font-size: 15px;
        padding-left: 15px;
        padding-top: 10px;
        color: #000;
        font-weight: normal;
    }

    .fj-navbar-mobile .mb-menu .mobile-dd-mega-menu ul {
        padding-left: 25px;
        padding-right: 20px;
        list-style: none;
        display: none;
    }

    .fj-navbar-mobile .mb-menu .mobile-dd-mega-menu li a {
        font-size: 13px;
        padding: 7px 0px;
        position: relative;
        padding-left: 30px;
    }

    .fj-navbar-mobile .mb-menu .mobile-dd-mega-menu li a:after {
        content: "";
        position: absolute;
        left: 12px;
        top: 14px;
        width: 0px;
        height: 0px;
        border-top: 3px solid transparent;
        border-left: 5px solid #000;
        border-bottom: 3px solid transparent;
        z-index: 9999;
    }

    .mobile-active {
        color: #375989 !important;
    }

    .fj-navbar-mobile .mb-menu .fst-li {
        display: flex !important;
        justify-content: space-between !important;
        padding-top: 0px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #efefef !important;
        background: #e7e7e7 !important;
        padding: 10px !important;


    }

    .fj-navbar-mobile .mb-menu li .img-1 {
        width: 70px;
        margin-left: 0px;
        padding-left: 0px;
    }

    .fj-navbar-mobile .mb-menu li .img-2 {
        width: 20px;

    }

    .show-mobile-nav {
        margin-left: 0px !important;
    }

    .innerHeader {
        height: 350px;

    }

    .mobile-about-dd a {
        border-bottom: none;
        padding: 5px 5px !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    .mobile-about-dd h4 {
        padding-top: 5px !important;
        margin-bottom: 5px !important;
        padding-left: 10px !important;

    }
    
    .has-mobile-menu a img {
        width: 10px;
        margin-left: 200px;
    }

    .has-mobile-menu-2 a {
        display: flex !important;
        justify-content: space-between !important;

    }

    .has-mobile-menu-2 a img {
        width: 10px;
        margin-right: 10px;
    }

    .mobile-dd-menu {
        width: 100%;
        list-style: none;
        padding-left: 0px;
        display: none;

    }

    .mobile-dd-menu li {
        margin-right: 10px;
        padding: 5px 10px 5px 10px !important;
        text-align: center;
    }

    .mobile-dd-menu li a {
        font-size: 13px;
        position: relative;
        padding-top: 4px !important;
        padding-left: 25px !important;

    }

    .mobile-dd-menu li a:after {
        content: "";
        position: absolute;
        left: 12px;
        top: 12px;
        width: 0px;
        height: 0px;
        border-top: 3px solid transparent;
        border-left: 5px solid #000;
        border-bottom: 3px solid transparent;
        z-index: 9999;
    }

}

@media screen and (max-width:991px) {
    .fj-mep p {
        font-size: 15px;
        /*        padding-right: 100px;*/
    }

    /*----------------------- CEO -----------------------------*/
    .ceo-message p {
        font-size: 18px;
        padding-right: 50px;
        padding-left: 50px;
        position: relative;

    }

    .ceo-message {
        padding-bottom: 50px;

    }

    .ceo-message p .fa-quote-left {
        left: 10px;
        width: 30px;
    }

    .ceo-message p .fa-quote-right {
        right: 22px;
        width: 30px;
    }

    .ceo-message h4 {
        margin-left: 50px;
    }

    .ceo-message div {
        margin-left: 50px;
        font-size: 16px;
    }


    .ceo {
        background: #e6ebef;
        padding-right: 10px;
        margin-right: 10px;
    }

    .ceo-2 {
        padding-left: 0px;
        margin-left: 0px;
        padding-right: 0px;
        margin-right: 0px;
    }
        #ceo-message .ceo-content {
        padding-top: 50px;
        padding-left: 50px;
    }
    #ceo-message .ceo-content h2 {
    font-size: 20px;
}
#ceo-message .ceo-content h3 {
    font-size: 40px;
}
   

    .fj-content p {
        font-size: 16px;
        padding-right: 110px;
    }

    .own-carousel__container .fj-solution-icons {
        top: -50px;
        right: 50px;
    }
        .ceo-image-pos .ceo-image-container {
        right: unset;
        left: 50%;
        transform: translateX(-50%);
    }
    .ceo-image-pos {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
    #ceo-message {
    padding-bottom: 93px;
}

    /*--------------------------- trusted partners ---------------------------------------*/
    .trusted-partner p {
        font-size: 16px;
        padding-right: 10px;
        padding-left: 10px;
        word-spacing: 1px;
        line-height: 24px;

    }

    .row-1 {
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 30px;
    }

    .row-1 img {
        width: 90px;
    }

    .row-2 {
        margin-top: 60px;
        padding-left: 70px;
        padding-right: 70px;
    }

    .row-2 img {
        width: 90px;
    }

    .carousel-indicators {
        bottom: -70px;
    }

    /*-------------lates ---------------*/

    .latest-news-image-1 {
        height: 400px;
        position: relative;
        margin-bottom: 10px;
    }

    /*----------------form*------------------*/
    .sub-content p {
        font-size: 16px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .sub-content form .myinput {
        width: 50%;
        padding: 7px 20px;
    }

    /*-------------------footer----------------*/
    .footer-col-2 h4 {
        font-size: 16px;
        margin-top: 40px;
    }

    .footer-col-1 p {
        margin-bottom: 0px;
        margin-top: 15px;
    }

    /*----------------------------------------------------------------------about us------------------------------------------------*/
    .mycarouselIndicators {
        bottom: 60px;
        margin-right: 4% !important;
    }

    .slider-bg {
        height: 600px;
    }

    .slider-bg-2 {
        height: 600px;
    }

    .slider-bg-3 {
        height: 600px;
    }
    .slider-bg-4 {
        height: 600px;
    }

    .about-us-slider-content h3 {
        font-size: 22px;
        width: 100%;
        padding-right: 280px;
    }

    .our-clients img {
        width: 120px;
        margin-bottom: 30px;
    }

    .client-heading h4 {
        font-size: 25px;
        margin-bottom: 30px;
    }

    .hide-column {
        display: none;
    }

  
    .carousel-content {
    width:670px;
    }

    .carousel-content .carousel-content-animate h2 {
        font-size: 25px;
        letter-spacing: 2px;
        width: 500px;
    }

    .carousel-content .carousel-content-animate p {
        font-size: 20px;
        width: 500px;
        line-height: 23px;
    }

    .carousel-content a {
        color: #cfcfcf;
        border: 2px solid #cfcfcf;
        padding: 10px 20px;
        margin-top: 15px;
    }

    .has-menu .dd-mega-menu {
        width: 650px;
        left: -250px;
    }

/*    .fj-navbar {
        display: none;
    }

    .fj-navbar-mobile {
        display: block;

    }

    .mobile-menu {
        display: flex;
        justify-content: space-between;
        background: rgba(15, 12, 12, 0.2);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        position: fixed;
        top: 0px;
        width: 100%;
        left: 0px;

        display: flex;
        padding-top: 10px;
        padding-bottom: 10px;
        z-index: 10;
    }

    .mobile-menu .header-logo img {
        width: 100px;
        margin-left: 20px;
    }

    .fj-navbar-mobile .mobile-menu ul {
        list-style: none;
        display: flex;
        margin-bottom: 0px;



    }

    .fj-navbar-mobile .mobile-menu ul li {
        margin-right: 10px;
        padding: 14px 15px 10px 15px;
        text-align: center;


    }

    .fj-navbar-mobile .mobile-menu ul li img {
        width: 20px;
        color: #fff;
    }

    .fj-navbar-mobile {
        position: relative;
    }

    .fj-navbar-mobile .mb-menu {
        position: fixed;
        top: 0px;
        z-index: 9999;
        background: #fff;
        width: 300px;
        list-style: none;
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
        height: 100vh;
        margin-left: -300px;
        transition: all 0.4s;
        overflow-y: scroll;
        overflow-x: hidden;


    }

    .fj-navbar-mobile .mb-menu li a {
        display: block;
        text-decoration: none;
        border-bottom: 1px solid #efefef;
        padding: 10px 10px;
        color: #000;
    }

    .fj-navbar-mobile .mb-menu .mobile-dd-mega-menu {
        display: none;
        transition: 1s !important;

    }

    .show-mobile-menu {
        transition: all 0.5s ease-in-out;
        display: block !important;
    }

    .fj-navbar-mobile .mb-menu .mobile-dd-mega-menu .mobile-heading-img {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #efefef;
        margin-left: 10px;
        margin-right: 10px;
    }

    .fj-navbar-mobile .mb-menu .mobile-dd-mega-menu .mobile-heading-img img {
        width: 10px;
        margin-right: 18px;
    }

    .fj-navbar-mobile .mb-menu .mobile-dd-mega-menu h4 {
        font-size: 15px;
        padding-left: 15px;
        padding-top: 10px;
        color: #000;
        font-weight: normal;
    }

    .fj-navbar-mobile .mb-menu .mobile-dd-mega-menu ul {
        padding-left: 25px;
        padding-right: 20px;
        list-style: none;
        display: none;
    }

    .fj-navbar-mobile .mb-menu .mobile-dd-mega-menu li a {
        font-size: 13px;
        padding: 7px 0px;
        position: relative;
        padding-left: 30px;
    }

    .fj-navbar-mobile .mb-menu .mobile-dd-mega-menu li a:after {
        content: "";
        position: absolute;
        left: 12px;
        top: 14px;
        width: 0px;
        height: 0px;
        border-top: 3px solid transparent;
        border-left: 5px solid #000;
        border-bottom: 3px solid transparent;
        z-index: 9999;
    }

    .mobile-active {
        color: #375989 !important;
    }

    .fj-navbar-mobile .mb-menu .fst-li {
        display: flex !important;
        justify-content: space-between !important;
        padding-top: 0px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #efefef !important;
        background: #e7e7e7 !important;
        padding: 10px !important;


    }

    .fj-navbar-mobile .mb-menu li .img-1 {
        width: 70px;
        margin-left: 0px;
        padding-left: 0px;
    }

    .fj-navbar-mobile .mb-menu li .img-2 {
        width: 20px;

    }

    .show-mobile-nav {
        margin-left: 0px !important;
    }*/

    .innerHeader {
        height: 350px;

    }

/*    .mobile-about-dd a {
        border-bottom: none;
        padding: 5px 5px !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    .mobile-about-dd h4 {
        padding-top: 5px !important;
        margin-bottom: 5px !important;
        padding-left: 10px !important;

    }
    
    .has-mobile-menu a img {
        width: 10px;
        margin-left: 200px;
    }

    .has-mobile-menu-2 a {
        display: flex !important;
        justify-content: space-between !important;

    }

    .has-mobile-menu-2 a img {
        width: 10px;
        margin-right: 10px;
    }

    .mobile-dd-menu {
        width: 100%;
        list-style: none;
        padding-left: 0px;
        display: none;

    }

    .mobile-dd-menu li {
        margin-right: 10px;
        padding: 5px 10px 5px 10px !important;
        text-align: center;
    }

    .mobile-dd-menu li a {
        font-size: 13px;
        position: relative;
        padding-top: 4px !important;
        padding-left: 25px !important;

    }

    .mobile-dd-menu li a:after {
        content: "";
        position: absolute;
        left: 12px;
        top: 12px;
        width: 0px;
        height: 0px;
        border-top: 3px solid transparent;
        border-left: 5px solid #000;
        border-bottom: 3px solid transparent;
        z-index: 9999;
    }*/

    .innerHeader h1 {
        font-size: 30px;
        padding-top: 260px;
    }

    .divisionHeader {
        height: 350px;

    }

    .divisionHeader h1 {
        font-size: 30px;
        padding-top: 260px;
    }

    .facilitiesHeader {
        height: 350px;
    }

    .facilitiesHeader h1 {
        font-size: 30px;
        padding-top: 260px;
    }

    .pageHeader {
        height: 350px;
    }

    .pageHeader h1 {
        font-size: 30px;
        padding-top: 260px;
    }


    /*----------------------------------------------------------------------about end ----------------------------------------------*/

    .division-image {
        height: 300px;
        margin-top: 5px;
        margin-bottom: 20px;

    }

    .division-content h2 {
        font-size: 23px;
        padding-top: 10px;
    }

    .division-content p {
        font-size: 16px;
        padding-right: 20px;
    }

    .division-content p:last-of-type {
        margin-bottom: -20px;
    }

    .division-uae h3 {
        margin-bottom: 40px;
    }

    .col-mp-div-2 {
        margin-top: 0px;
    }

    .fp-bh-text h2 {
        font-size: 24px;
        line-height: 25px;
    }



    .fp-left-content {
        padding-left: 10px;
        width: 100%;
        padding-right: 10px;
        position: relative;
        max-width: 720px;
        margin-left: 50%;
        transform: translate(-50%, 0%);
        top: 0%;
    }

    .fp-right-content {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        position: relative;
        max-width: 720px;
        margin-left: 50%;
        transform: translate(-50%, 0%);
        top: 0%;

    }

    

    .service-padding {
        padding-left: 10px;
    }

    .home-arrows {
        bottom: 105px;
        right: 14%;
    }

    .facility-page-card {
        width: 100%;
    }

    .fp-left-content-image {
        height: 330px;
    }

    .facility-card-body h3 {
        font-size: 22px;
    }

    .card-position .facility-card-content .badge {
        position: absolute;
        top: -150px;

        left: -4px;

        padding: 15px 20px;

        font-size: 20px;
        width: 500px;
    }

    .nav-tabs>.nav-item>.nav-link {
        font-size: 13px;
        margin-right: 3px;
    }

    .bm-heading-1 {
        margin-bottom: 20px;
        font-size: 27px;
    }

    .bm-heading-1:after {
        bottom: -5px;
        height: 6px;
    }

    .bm-heading-2 {
        margin-bottom: 20px;
        font-size: 27px;
    }

    .bm-heading-2:after {
        bottom: -5px;
        height: 6px;
    }

    .product-image {
        display: flex;
        justify-content: center;
        padding-top: 0px;
        padding-bottom: 20px;
    }
    .product-image img {
        width: 100%;
    }
    .tawreed-product-image {
        display: flex;
        justify-content: center;
        padding-top: 0px;
        padding-bottom: 20px;
    }
    .tawreed-product-image img {
        width: 100%;
        height:auto;
    }

    .product-detail {
        padding-top: 10px;
    }

    

    .section {
        margin-bottom: 30px;
    }

    .prd-padding {
        width: 100%;
    }

    .prd-padding img {
        height: 230px;
    }

    .pd-heading {
        margin-bottom: 30px;
        text-align: left;
        font-size: 22px !important;
    }

    .pd-explore-more {
        margin-bottom: 30px;
    }

    .tawreed {
        padding: 10px 10px 0px 10px;
    }

    .tawreed img {
        height: 200px;
    }

    .tawreed h6 {
        font-size: 16px;
        margin-top: 15px;
    }

    .tawreed-mtb {
        margin-bottom: 20px;
    }
       .tawreed-logo{
    padding-top: 0px;
}
.product-detail{
    padding-left: 0px !important;
}
 .about-us .about-us-img-box .img-box {
    height:300px;
    margin-bottom:30px;
}
    .product-image-2{
            margin-top: 20px;
            overflow: hidden;
          
        }
         .fj-care-logo img{
            height: auto;
            
        }
}

@media screen and (max-width:767px) {
    .copyright{
    margin-top: 10px;
    padding: 20px 0;
    background-color: #262442;
    overflow: hidden
}

    /*----------------------- CEO -----------------------------*/
    .ceo-message p {
        font-size: 16px;
    }

        .ceo-message p .fa-quote-right {
        right: 21px;
    }
        .ceo-image-container {
        position: absolute;
        right: 33px;
        bottom: 72px;
    }

        .ceo-message {
        padding-bottom: 80px;
    }
        .ceo-image-pos .ceo-image-container {
        bottom: -94px;
    }
    /*-----------------------------------------better living ----------------------------------*/
    .mep-better-living {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .mep-better-living h3 {
        padding-left: 20px;
        padding-right: 20px;
    }

    .mbl-card div {
        font-size: 18px;
        margin-bottom: 10px;


    }

    .fj-content p {
        font-size: 16px;
        padding-right: 80px;
    }

    .own-carousel__container .fj-solution-icons {
        top: -50px;
        right: 50px;
    }

    /*--------------------------- trusted partners ---------------------------------------*/
    .trusted-partner p {
        font-size: 16px;
        padding-right: 10px;
        padding-left: 10px;
        word-spacing: 1px;
        line-height: 24px;

    }

    .row-1 {
        padding-left: 0px;
        padding-right: 0px;
        margin-top: 30px;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .row-1 img {
        width: 100px;
        margin-right: 30px;
        margin-left: 30px;
        margin-bottom: 30px;

    }

    .showhidelogo {
        display: block;
    }

    .row-2 {
        margin-top: 60px;
        padding-left: 70px;
        padding-right: 70px;
        flex-wrap: wrap;
        display: none;
    }

    .row-2 img {
        width: 90px;
    }

    .carousel-indicators {
        bottom: -70px;
    }

    /*---------------latest------*/

    .latest-news-image-1 {
        height: 300px;
        margin-bottom: 10px;
    }

    .latest-news-image-2 {
        height: 300px;
    }

    .latest-news-image-3 {
        height: 300px;
    }

    .ltn-text-2 h5 {
        padding-right: 60px;
    }

    .ltn-text-3 h5 {
        padding-right: 60px;
    }

    .ltn-text p {
        font-size: 15px;
        padding-right: 70px;
    }

    .ltn-text h5 i {
        right: 20px;
        top: 5px;
    }

    .ltn-text-2 h5 i,
    .ltn-text-3 h5 i {
        right: 20px;
        top: 5px;
    }

    .latest-news div a {
        margin-top: 5px;
        display: inline-block;
        font-size: 13px;

    }

    /*-------------------- footer----------------------------*/
    .fpl {
        padding-left: 140px;
    }

    /*----------------------------------------------------------------------about us------------------------------------------------*/
    .mycarouselIndicators {
        bottom: 60px;
        margin-right: 4% !important;
    }

    .slider-bg {
        height: 600px;
    }

    .slider-bg-2 {
        height: 600px;
    }

    .slider-bg-3 {
        height: 600px;
    }
    .slider-bg-4 {
        height: 600px;
    }

    .about-us-slider-content h3 {
        font-size: 20px;
        width: 100%;
        padding-right: 250px;
    }

    /*-------------- home slider ----------------*/
    .home-indicators {
        bottom: 110px !important;
        width: 200px;
        margin-left: 75% !important;
        margin-right: 0% !important;

    }

      .carousel-content {
    padding-left:20px;
    padding-bottom:20px;
    padding-right:30px;
    left: 0px;
    bottom: -3px;
    padding-top:50px;
    width:570px;
    }

    .carousel-content .carousel-content-animate h2 {
        font-size: 25px;
        letter-spacing: 2px;
        width: 300px;
    }

    .carousel-content .carousel-content-animate p {
        font-size: 20px;
        width: 450px;
        line-height: 23px;
    }

    .carousel-content a {
        color: #cfcfcf;
        border: 2px solid #cfcfcf;
        padding: 10px 20px;
        margin-top: 15px;
    }

    .innerHeader {
        height: 300px;

    }

    .innerHeader h1 {
        font-size: 25px;
        padding-top: 200px;
    }

    .divisionHeader {
        height: 300px;

    }

    .divisionHeader h1 {
        font-size: 25px;
        padding-top: 200px;
    }

    .facilitiesHeader {
        height: 300px;
    }

    .facilitiesHeader h1 {
        font-size: 25px;
        padding-top: 200px;
    }

    .pageHeader {
        height: 300px;
    }

    .pageHeader h1 {
        font-size: 25px;
        padding-top: 200px;
    }

    /*----------------------------------------------------------- home slider -----------------------------------------------------------*/
    /*----------------------------------------------------------------------about end ----------------------------------------------*/

    .division-image {
        height: 250px;
        margin-top: 5px;
        margin-bottom: 20px;

    }

    .division-content h2 {
        font-size: 20px;

    }

    .division-content p {
        font-size: 16px;
        padding-right: 0px;
    }

    .card {
        width: 16rem;
    }

    .card img {
        height: 240px;
    }

    .division-card-image {
        height: 240px;
    }

    .divParent {
        height: 240px;
    }

    .division-card-image-2 {
        height: 240px;
    }

    .division-card-image-3 {
        height: 240px;
    }

    .card-body p {
        font-size: 14px;
    }

    .col-mp-div {
        margin-top: 2px;
    }

    .fp-bh-text h2 {
        font-size: 22px;
        line-height: 25px;
    }

    .fp-bh-text p {
        font-size: 16px;
        line-height: 25px;
    }

    .fp-left-content {
        padding-left: 10px;
        width: 100%;
        padding-right: 10px;
        position: relative;
        max-width: 540px;
        margin-left: 50%;
        transform: translate(-50%, 0%);
        top: 0%;


    }

    .fp-left-content h3 {
        font-size: 22px;
        line-height: 25px;
    }

    .fp-left-content p {
        font-size: 16px;
        line-height: 25px;
    }

    .fp-right-content {
        padding-left: 10px;
        width: 100%;
        padding-right: 10px;
        position: relative;
        max-width: 540px;
        margin-left: 50%;
        transform: translate(-50%, 0%);
        top: 0%;

    }

    .fp-right-content h3 {
        font-size: 22px;
        line-height: 25px;
        font-weight: 500;
    }

    .fp-right-content p {
        font-size: 16px;
        line-height: 25px;
        font-weight: 400;
    }

    .section {
        margin-bottom: 30px;
    }

    .hidemobile {
        display: none;
    }

    .service-padding {
        padding-left: 10px;

    }

    .home-arrows {
        bottom: 64px;
        right: 18%;
    }

    .carousel-inner {
        margin-bottom: 20px;
    }

    .facility-page-card {
        width: 100%;
    }

    .fp-left-content-image {
        height: 330px;
    }

    .facility-card-body h3 {
        font-size: 22px;
    }

    .plp {
        padding-left: 0px;
    }

    .nav-tabs>.nav-item>.nav-link {
        font-size: 13px;
        margin-right: 3px;
    }

    .bm-heading-1 {
        margin-bottom: 20px;
        font-size: 27px;
    }

    .bm-heading-1:after {
        bottom: -5px;
        height: 6px;
    }

    .bm-heading-2 {
        margin-bottom: 20px;
        font-size: 27px;
    }

    .bm-heading-2:after {
        bottom: -5px;
        height: 6px;
    }

    .product-image {
        display: flex;
        justify-content: center;
        padding-top: 0px;
        padding-bottom: 20px;
    }

    .product-detail {
        padding-top: 10px;
    }

    .product-image img {
        width: 100%;
        height: 300px;
    }

    .hmdisplay {
        margin-top: -14px;
    }

    .section {
        margin-bottom: 30px;
    }

    .prd-padding {
        width: 100%;
    }

    .prd-padding img {
        height: 150px;
    }

    .prd-padding h6 {
        font-size: 14px;
    }

    .tawreed {
        padding: 10px 10px 0px 10px;
        width: 100%;
    }

    .tawreed img {
        height: 290px;
    }

    .tawreed h6 {
        font-size: 16px;
        margin-top: 15px;
    }

    .tawreed-mtb {
        margin-bottom: 20px;
    }

    .building-materials h2 {
        font-size: 20px;
        padding-top: 20px;
        text-align: center;
    }
    .latest-news div h3 {
    margin-top:15px;
}

.news-image{
    height: 330px;
}
.news-page-image{
    height: 340px;
}
.carousel-image,
    .carousel-image-2,
    .carousel-image-3,
    .carousel-image-4,  .carousel-image-5 {
        background-attachment:unset;
    }
     .about-us .about-us-img-box .img-box {
    height:250px;
    margin-bottom:30px;
}
.about-us .about-us-img-box{
    padding-right:0px;
}
}

@media screen and (max-width:575px) {
    .fj-mep p {
        font-size: 15px;
        padding-right: 10px;
    }

    .fj-mep-media-mec,
    .fj-mep-media-ele,
    .fj-mep-media-plum,.fj-mep-media-pod {
        height: 340px;

    }

    .mep-detail-card {
        bottom: 2px;
    }

    .mep-icon h4 {
        left: 20px;
        bottom: 30px;
        font-size: 20px;
        text-transform: uppercase;
    }

    /*----------------------- CEO -----------------------------*/
    .ceo-message {
        padding-bottom: 53px;
        margin-bottom: 20px;
        margin-left: 0px;
        margin-right: 20px;
    }

    .ceo-message p .fa-quote-left {
        left: 10px;
        font-size: 30px;
    }
        .ceo-message p {
        padding-right: 15px;
  
    }
        #ceo-message .ceo-content h3 {
        font-size: 30px;
    }
        #ceo-message .ceo-content h2 {
        font-size: 17px;
    }
    

       .ceo-message p .fa-quote-right {
        right: -20px;
        bottom:-30px;
        font-size: 30px;
    
    }
    

    .ceo-message h4 {
        margin-left: 50px;
    }

    .ceo-message div {
        margin-left: 50px;
        font-size: 16px;
    }



    .ceo {
        background: none;
        padding-right: 10px;
        margin-right: 10px;
    }

    .ceo-2 {
        padding-left: 30px;
        padding-right: 30px;
    }
    .ceo-image-pos{
        padding-left:30px !important;
        padding-right:30px !important;
    }

    .fj-content p {
        font-size: 16px;
        padding-right: 20px;
    }

    .own-carousel__container .fj-solution-icons {
        top: -50px;
        right: 10px;
    }

    .row-1 img {
        width: 100px;
        margin-right: 30px;
        margin-left: 30px;
        margin-bottom: 30px;

    }
        #ceo-message .ceo-content {
        padding-top: 32px;
        padding-left: 30px;
    }
        #ceo-message .ceo-message-text {
              padding: 21px 20px 50px 10px;
    }
        .ceo-image-container {
        position: absolute;
        right: 18px;
        bottom: 53px;
    }

    /*--------------------latest ---------------------*/
    .latest-news-image-1 {
        height: 300px;
        margin-bottom: 10px;
    }

    .latest-news-image-2 {
        height: 300px;
    }

    .latest-news-image-3 {
        height: 300px;
    }

    .ltn-text h5 {
        padding-right: 60px;
        font-size: 18px;
    }

    .ltn-text-2 h5 {
        padding-right: 60px;
        font-size: 18px;
    }

    .latest-news div a {
        padding: 8px 10px;
    }

    .ltn-text-3 h5 {
        padding-right: 60px;
        font-size: 18px;
    }

    .ltn-text p {
        font-size: 15px;
        padding-right: 70px;
    }

    .ltn-text h5 i {
        right: 20px;
        top: 5px;
    }


    /*----------------form*------------------*/
    .subscribe {
        height: 350px;
        text-align: center;
    }

    .sub-content {
        padding-top: 80px;
    }

    .sub-content p {
        font-size: 16px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .sub-content form .myinput {
        width: 60%;
        padding: 7px 20px;
        font-size: 14px;
    }

    .btn-submit {
        padding: 10px 10px;
        font-size: 14px;
    }

    /*-------------footer-------------------*/
    .fpl {
        padding-left: 18%;
    }

    /*----------------------------------------------------------------------about us------------------------------------------------*/
    .mycarouselIndicators {
        bottom: 30px;
        margin-right: 15% !important;
        justify-content: center;
    }

    .slider-bg {
        height: 400px;
    }

    .slider-bg-2 {
        height: 400px;
    }

    .slider-bg-3 {
        height: 400px;
    }
    .slider-bg-4 {
        height: 400px;
    }

    .about-us-slider-content {
        top: 50px;
    }

    .about-us-slider-content h3 {
        font-size: 20px;
        width: 100%;
        padding-right: 60px;
    }

    .our-clients {
        display: flex;
        justify-content: center;
    }

    .our-clients img {
        width: 120px;
        margin-bottom: 30px;
    }

    .client-heading h4 {
        font-size: 25px;
        margin-bottom: 30px;
    }

    /*-------------- home slider ----------------*/
    .home-indicators {
        bottom: 10px !important;
        width: 100%;
        margin-left: 0% !important;
        margin-right: 0% !important;
        transform: rotate(0deg);
        justify-content: center;

    }

/*     .carousel-content {
    padding-left:20px;
    padding-bottom:50px;
    padding-right:30px;
    left: 0px;
    bottom: -3px;
    padding-top:50px;
    width:400px;
    }*/
    .carousel-content {
    position: absolute;
    padding-left:50px;
    clip-path: unset;
    padding-bottom:20px;
    padding-right:30px;
    left: 0px;
    bottom: 30px;
    background:none;
    padding-top:50px;
    width:100%;
    z-index:2;
   
}
.carousel-image-2:after{
    position:absolute;
    content:"";
    left:0px;
    right:0px;
    bottom:0px;
    height:300px;
    width:100%;
    background:linear-gradient(180deg, rgba(26, 49, 71, 0) 0%, rgba(28, 26, 54, 0.9) 100%);
    z-index:1;
}
.carousel-image-3:after{
    position:absolute;
    content:"";
    left:0px;
    right:0px;
    bottom:0px;
    height:300px;
    width:100%;
    background:linear-gradient(180deg, rgba(26, 49, 71, 0) 0%, rgba(28, 26, 54, 0.9) 100%);
    z-index:1;
}
.carousel-image-4:after{
    position:absolute;
    content:"";
    left:0px;
    right:0px;
    bottom:0px;
    height:300px;
    width:100%;
    background:linear-gradient(180deg, rgba(26, 49, 71, 0) 0%, rgba(28, 26, 54, 0.9) 100%);
    z-index:1;
}
.carousel-image-5:after{
    position:absolute;
    content:"";
    left:0px;
    right:0px;
    bottom:0px;
    height:300px;
    width:100%;
    background:linear-gradient(180deg, rgba(26, 49, 71, 0) 0%, rgba(28, 26, 54, 0.9) 100%);
    z-index:1;
}

    .carousel-content .carousel-content-animate h2 {
        font-size: 20px;
        letter-spacing: 2px;
        width: 320px;
    }

    .carousel-content .carousel-content-animate p {
        font-size: 14px;
        width: 310px;
        line-height: 18px;
    }
        .home-slider-next {
        left: 29px;
    }

    .carousel-content a {
        color: #cfcfcf;
        border: 2px solid #cfcfcf;
        padding: 5px 10px;
        margin-top: 10px;
        font-size: 16px;
    }

    .carousel-content a i {
        padding-left: 10px;
    }

    .carousel-image,
    .carousel-image-2,
    .carousel-image-3,
    .carousel-image-4,  .carousel-image-5 {
        height: 480px;
        background-attachment:unset;
    }

    .innerHeader {
        height: 250px;

    }

    .innerHeader h1 {
        font-size: 25px;
        padding-top: 180px;
    }

    .divisionHeader {
        height: 250px;

    }

    .divisionHeader h1 {
        font-size: 25px;
        padding-top: 180px;
    }

    .facilitiesHeader {
        height: 250px;
    }

    .facilitiesHeader h1 {
        font-size: 25px;
        padding-top: 180px;
    }

    .pageHeader {
        height: 250px;
    }

    .pageHeader h1 {
        font-size: 25px;
        padding-top: 180px;
    }

    /*----------------------------------------------------------- home slider -----------------------------------------------------------*/
    /*----------------------------------------------------------------------about end ----------------------------------------------*/

    .division-image {
        height: 200px;
        margin-top: 5px;
        margin-bottom: 20px;

    }

    .division-content h2 {
        font-size: 20px;
    }

    .division-content p {
        font-size: 16px;
        padding-right: 0px;
    }

    .card {
        width: 19rem;
    }

    .card img {
        height: 290px;
    }

    .division-card-image {
        height: 290px;
    }

    .divParent {
        height: 290px;
    }

    .division-card-image-2 {
        height: 290px;
    }

    .division-card-image-3 {
        height: 290px;
    }

    .card-body p {
        font-size: 14px;
    }

    .division-content p:last-of-type {
        margin-bottom: 0px;
    }

    .fj-divisions h5 {
        font-size: 22px;
        margin-top: -20px;
        margin-bottom: 30px;
    }

    .card-position .solution-card-content {
        margin-bottom: 10px !important;
        animation-name: animateText;
    }

    .fp-left-content {
        padding-left: 10px;
        width: 100%;
        padding-right: 10px;
        position: relative;
        width: 100%;
        margin-left: 50%;
        transform: translate(-50%, 0%);
        top: 0%;


    }

    .fp-left-content h3 {
        font-size: 22px;
        line-height: 20px;
        font-weight: 500;
    }

    .fp-left-content p {
        font-size: 16px;
        line-height: 25px;
        font-weight: 400;
    }

    .fp-left-content-image {
        height: 300px;
    }

    .fp-right-content-image {
        height: 300px;
    }

    .fp-right-content {
        padding-left: 10px;
        width: 100%;
        padding-right: 10px;
        position: relative;
        max-width: 540px;
        margin-left: 50%;
        transform: translate(-50%, 0%);
        top: 0%;

    }

    .fp-right-content h3 {
        font-size: 22px;
        line-height: 25px;
        font-weight: 500;
    }

    .fp-right-content p {
        font-size: 16px;
        line-height: 25px;
        font-weight: 400;
    }

    .service-padding {
        padding-left: 15px;

    }

    .footer-col-2 ul li h4 {
        margin-top: 7px;
    }

    .home-arrows {
        right: unset;
        left:66px;
        height: 30px;
        bottom: 28px;
        padding-left: 50px;

    }

    /*    .carousel-control-prev{
        left:43%;
    }
     .home-slider-next{
        left:55% !important;
    }*/
    .carousel-inner {
        margin-bottom: 20px;
    }

    .facility-page-card {
        width: 100%;
    }

    .fp-left-content-image {
        height: 330px;
    }

    .facility-card-body h3 {
        font-size: 22px;
    }

    .facility-card-body p {
        margin-bottom: 0px;
    }

    .prd-padding {
        width: 100%;
    }

    .prd-padding img {
        height: 270px;
    }

    .prd-padding h6 {
        font-size: 20px;
    }

    .home-slider-prev {
        left: -20px;
    }

    .home-slider-next {
        left: 30px;
    }

    .partner-arrows .home-slider-prev {
        left: 23px;
    }

    .partner-arrows .home-slider-next {
        margin-left: 22px;
    }

    .tawreed {
        padding: 10px 10px 0px 10px;
        width: 100%;
    }

    .tawreed img {
        height: 280px;
    }

    .tawreed h6 {
        font-size: 16px;
        margin-top: 15px;
    }

    .tawreed-mtb {
        margin-bottom: 20px;
    }
    .fj-care-logo{
    padding-top: 10px;
}
.news-image{
    height: 300px;
    
    
}
.news-page-image{
    height: 300px;
}
.president{
    margin-top:31px;
}

.carousel-image span{
    font-size:104px;
    line-height:100px;
  
}
.carousel-image h1{
    font-size:20px;
    padding-left:5px;


   
    
}
.solution-content {
    padding-top:40px;
}
.trusted-partner-section{
    padding-top:50px;
    margin-top:50px;
}
  .top-mtb {
                margin-bottom: 20px;
            }
             .f-padding{
                padding-top:10px;
            }
}

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

    .fj-mep-media-mec,
    .fj-mep-media-ele,
    .fj-mep-media-plum,.fj-mep-media-pod {
        height: 330px;
    }

     .ceo-message p {
        font-size: 16px;
        padding-right: 5px;
        padding-left: 15px;
 
    }
        .ceo-image-pos {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
        .ceo-message h4 {
        margin-left: 14px;
    }
        #ceo-message .ceo-message-text {
       padding: 17px 10px 50px 13px;
    }
        .ceo-message p .fa-quote-right {
                right: 3px;
        font-size: 30px;
        bottom: -35px;
    }

    .section {
        margin-bottom: 30px;
    }

    .fj-content p {
        font-size: 16px;
        padding-right: 0px;
    }

    /*-----------form-----------*/
    .sub-content form .myinput {
        width: 70%;
        padding: 7px 20px;
        font-size: 14px;
    }

    .carousel-inner {
        margin-bottom: 20px;
    }

    .footer-col-1 i {
        margin-top: 20px;
    }

    footer {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .copyright p {
    clear:left;
    text-align:center;
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    font-weight: 500;
    width:100%;
}
    .copyright {
        padding: 15px 0;

    }

    /*-------------------------- about us-----------------------------------*/
    .our-clients img {
        width: 100px;
        margin-bottom: 25px;
    }

    .client-heading h4 {
        font-size: 25px;
        margin-bottom: 30px;
    }

    /*-------------- home slider ----------------*/
    .home-indicators {
        bottom: 10px !important;
        width: 100%;
        margin-left: 0% !important;
        margin-right: 0% !important;
        transform: rotate(0deg);
        justify-content: center;

    }

     .carousel-content {
    padding-left:20px;
    padding-bottom:50px;
    padding-right:30px;
    left: 0px;
    bottom: -3px;
    padding-top:30px;
    width:360px;
    }
        .home-arrows {
        right: unset;
        left:40px;
        height: 30px;
        bottom: 27px;
        padding-left: 50px;
    }

    .carousel-content .carousel-content-animate h2 {
        font-size: 18px;
        letter-spacing: 2px;
        width: 90%;
    }

    .carousel-content .carousel-content-animate p {
        font-size: 14px;
        width: 96%;
        line-height: 20px;
    }

    .carousel-content a {
        color: #cfcfcf;
        border: 2px solid #cfcfcf;
        padding: 5px 10px;
        margin-top: 10px;
        font-size: 16px;
    }

    .carousel-content a i {
        padding-left: 10px;
    }

    /*----------------------------------------------------------- home slider -----------------------------------------------------------*/
    .card img {
        height: 270px;
    }

    .division-card-image {
        height: 270px;
    }

    .divParent {
        height: 270px;
    }

    .division-card-image-2 {
        height: 270px;
    }

    .division-card-image-3 {
        height: 270px;
    }

    /*    .carousel-control-prev{
        left:40%;
    }
     .home-slider-next{
        left:55% !important;
    }*/
    .fp-left-content-image {
        height: 300px;
    }

    .facility-card-body h3 {
        font-size: 22px;
    }

    .fpl {
        padding-left: 15%;
    }

    .product-image img {
        height: 270px;
    }

    .tawreed {
        padding: 10px 10px 0px 10px;
        width: 100%;
    }

    .tawreed img {
        height: 230px;
    }

    .tawreed h6 {
        font-size: 16px;
        margin-top: 15px;
    }

    .tawreed-mtb {
        margin-bottom: 20px;
    }
    
    .news-image{
    height: 230px;
    
    
}
.news-page-image{
    height: 240px;
}
.col-mp-div {
    padding-right: 0px;
}
    .about-us .about-us-img-box .img-box {
    height:220px;
    margin-bottom:30px;
}
}

@media screen and (max-width:359px) {
    .fj-navbar-mobile .mb-menu {
        width: 280px;
    }

    .home-arrows {
        bottom: 20px;
    }

     .carousel-content {
    padding-left:20px;
    padding-bottom:55px;
    padding-right:30px;
    left: 0px;
    bottom: -3px;
    padding-top:30px;
    width:320px;
    }

    .has-mobile-menu a img {
        margin-left: 180px;
    }

    .mep-better-living h1 {
        font-size: 25px;
    }

    .row-1 img {
        margin-left: 10px;
        margin-right: 10px;
        width: 80px;
    }

    .carousel-content a {
        margin-top: 0px;
    }

    .carousel-content .carousel-content-animate p {
        margin-bottom: -20px;
    }

    .own-carousel__container .fj-solution-icons {
        top: -200px;
    }

    .fpl {
        padding-left: 10%;
    }
}

.accreditationsHeader {
    background-image: linear-gradient(180deg, rgba(26, 49, 71, 0.14) 0%, rgba(28, 26, 54, 0.7) 100%), url('images/accreditations.webp');
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 500px;
    background-size: cover;

}

.accreditationsHeader h1 {
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 40px;
    z-index: 2;
    padding-top: 400px;
}

.accreditations-cards {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
}

.accreditations-content {
    padding: 10px;
    border-top: 5px solid #1D1A35;
}

.btn-accreditations {
    width: 100%;
    background-color: #375989;
    border-color: #375989;
}

.careersSearch {
    background-color: #1D1A35;
    padding: 10px 0px;
}

.careersSearch .form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    margin: 5px 0px;
}

.careersSearch .form-control::placeholder {
    color: #000;
    opacity: 1;
    /* Firefox */
}

.careersSearch .form-control::-ms-input-placeholder {
    color: #000;
    opacity: 1;
    /* Firefox */
}

.careersSearch .button {
    background-color: #375989;
    padding: 4px;
    border-radius: 5px;
    border: none !important;
    margin: 5px 0px;
}

.careers-cards {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
}

.careers-content {
    padding: 10px;
}

.careers-cards .fp-left-content-image {
    height: 250px;
}

.careers-content a {
    color: #1D1A35;
    text-decoration: underline;
    font-size: 15px;
}

.careerTogether {
    background-color: #375989;
    padding: 30px 0px
}

.careerTogether h2 {
    color: #fff;
    font-size: 30px;
    font-weight: bold;
}

.careerTogether p {
    color: #fff;
    font-size: 16px;
    font-weight: normal;
    padding-bottom: 10px;
}

.careerTogether a {
    color: #fff;
    font-size: 16px;
    font-weight: normal;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 10px;
    text-decoration: none;

}

.recruitmentProcess .img-1 {
    height: 450px;
    overflow: hidden;
    width: 100%;
    min-width: 100%;
}

.recruitmentProcess .otherimg {
    height: 212px;
    overflow: hidden;
    width: 100%;
    min-width: 100%;
}

@media screen and (max-width:1080px) {
    .recruitmentProcess .img-1 {
        height: auto;
        overflow: hidden;
        width: 100%;
        min-width: 100%;
    }

    .recruitmentProcess .otherimg {
        height: 175px;
        overflow: hidden;
        width: 100%;
        min-width: 100%;
    }
}

@media screen and (max-width:999px) {
    .recruitmentProcess .img-1 {
        height: auto;
        overflow: hidden;
        width: 100%;
        min-width: 100%;
    }

    .recruitmentProcess .otherimg {
        height: auto;
        overflow: hidden;
        width: 100%;
        min-width: 100%;
    }
}

.generalH3 {
    color: #1D1A35
}

.recruitmentProcess p {
    text-align: justify;
    padding: 20px 0px;
}

.recruitmentProcess h3 {

    display: inline-block;
    border-bottom: 3px solid #1D1A35;
}

.hiringProcess {
    padding: 50px 0px;
    background-color: #efefef;
}

.cardR {
    background-color: #fff;
    margin-top: 200px;
    margin-bottom: 100px;
    padding: 20px;
    text-align: justify;
}

.imgR {
    margin-top: 20px;
    margin-bottom: 20px;

}

@media screen and (max-width:999px) {
    .cardR {
        background-color: #fff;
        margin-top: 0px;
        margin-bottom: 50px;
        padding: 20px;
        text-align: justify;
    }

    .imgR {
        margin-top: 0px;
        margin-bottom: 0px;

    }
}

.sidebar {


    background-color: #f4f4f4;

    padding: 15px;


    height: 100%;

    left: 0;

    top: 0;

    display: block;
    /* Show on desktop */

}


.dropdown-content {

    display: none;
    /* Hide dropdown by default */

    background-color: #f4f4f4;

    padding: 15px;

    position: absolute;

    top: 50px;
    /* Adjust based on button position */

    left: 0;

    width: 250px;

    z-index: 1;

}


.dropdown-btn {

    display: none;
    /* Hide button on desktop */

}


/* Media Queries */

@media (max-width: 768px) {

    .sidebar {

        display: none;
        /* Hide sidebar on mobile */

    }


    .dropdown-btn {

        display: block;
        /* Show button on mobile */

    }

}

.jobsListing {
    border: 2px solid #efefef;
    padding: 20px;
    margin-top: 20px;
}

.jobsListing .form-check {
    margin-left: 10px;
}

.jobsListing .button {
    background-color: #375989;
    border-color: #375989;
    width: 100%;
    color: #fff;
    text-decoration: none;
}

.jobsListing a {
    color: #375989;
    text-decoration: underline;
}

#filter {
    display: none;
}

#mobile-filter {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 60%;
    z-index: 99999;
    background-color: #fff;
    border: 2px solid #efefef;
    padding: 20px;
    overflow: scroll;
    max-height: 100vh;
}

#mobile-filter a {
    color: #375989;
    text-decoration: underline;
}

#mobile-filter .button {
    background-color: #375989;
    border-color: #375989;
    width: 100%;
    color: #fff;
    text-decoration: none;
}

@media screen and (max-width:999px) {
    #filter {
        display: block;

    }

    #filter .button {
        background-color: #375989;
        border-color: #375989;
        width: 40%;
        color: #fff;
        text-decoration: none;
        margin-top: 20px;
    }

    #desktopSidebar {
        display: none !important;
    }

    .jobsCard h4 {
        color: #375989;
        font-size: 18px;
    }
}

.jobsContent {
    margin-top: 20px;
}

.jobsContent .form-control {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;

    padding: .375rem .75rem;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    margin: 5px 0px;
}

.jobsContent .button {
    background-color: #1D1A35;
    border-color: #1D1A35;

}

.jobsContent .jobsCard {
    border: 1px solid #efefef;
}

.jobsCard h4 {
    color: #375989;
}

.jobsCard .text-muted {
    color: #1D1A35 !important;
}

.jobsCard a {
    color: #1D1A35;
}

.jobsCard .button {
    float: right;
    padding: 5px;
    color: #fff;
    background-color: #1D1A35;
    border-color: #1D1A35;
}

.jobsCard .modal-body {
    background-color: #fff !important;
    padding: 20px !important
}

.jobsCard .modal-body .form-control {
    width: 100%;
    border-color: gray;
    padding: 5px;
    line-height: 18px;
    font-size: 14px;
}

.news-cards {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
}

.news-content {
    padding: 10px;
    border-top: 5px solid #1D1A35;
}

.btn-news {
    width: 100%;
    background-color: #375989;
    border-color: #375989;
}

.btn-news:hover {
    width: 100%;
    background-color: #375989;
    border-color: #375989;
}

.news-content .span1 {
    border-radius: 25px;
    padding: 5px 30px;
    background-color: #1D1A35;
    border-color: #1D1A35;
    color: #fff !important
}

.news h2 {
    padding: 20px 0px;
    color: #1D1A35;
}

.news-content .span2 {
    float: right;
    color: #375989;
    text-decoration: none;
}

.news-content h5 {
    padding: 10px 0px;
}

.news-content h5 a {
    color: #1d1a35;
    text-decoration: none;
}

.contact h3 {
    color: #1d1a35;
    padding: 20px 10px;
}

.contact-card-1 {
    background-color: #1D1A35;
    padding: 50px 30px;
    color: #fff !important;
    height: 335px;

}

.contact-card-1 h5 {
    font-size: 18px;
    color: #fff !important;
    line-height: 26px;
}

.contact-card-1 h5 a {
    font-size: 18px;
    color: #fff !important;
    line-height: 26px;
    text-decoration: none;
}

.contact-card-1 h5 a:hover {
    text-decoration: underline;
}

.contact-card-1 .first {
    border-bottom: 2px solid #fff;
    display: inline-block;


}

.contact-card-1 h3 {
    color: #fff !important;
    padding: 10px 0px;
}

.contact-card-2 {
    background-color: #efefef;
    padding: 40px 30px;
    height: 335px;
}

.contact-card-2 h3 {
    color: #fff !important;
    padding: 10px 0px;
}

.contact-card-2 h5 {
    font-size: 18px;
    color: #000 !important;
    line-height: 26px;
}

.contact-card-2 p {
    font-weight: 500;
}

.contact-card-2 a {

    color: #375989 !important;

    text-decoration: none;
}

.contact-card-2 h5 a:hover {
    text-decoration: underline;
}

.contact .accordion h3 {
    padding: 10px !important;
    font-size: 18px;
    margin-bottom: 0px !important;
    color: #375989;
}

.contact .accordion-button {
    padding: 10px !important;
}

.contact .accordion-button:not(.collapsed) {
    color: #1D1A35 !important;
    background-color: #fff !important;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}

.contact .accordion-body a {
    color: #375989 !important;

}

.contact .accordion-body h3 {
    color: #1D1A35;

}

.contact .headingBack {
    background-color: #C7C1C0;
}

.contact .accordion-body-inner {
    display: flex;
    background-color: #fff;
    border: 2px solid #efefef;
    padding: 20px;
    margin: 20px;
}

/* about projects */
#projects  {
    position: relative;
}
#projects .row{
margin-bottom:20px
}
#projects  .badge {
    position: relative;
    bottom: 100px;

    left: 0px;
    background-color: #1D1A35 !important;
    height: 50px;
    padding: 14px 20px;
    text-align: left !important;
    border-radius: 0px !important;
    font-size: 20px;
    width: 300px;
}