track-progress .text p.borderRadius{-moz-border-radius:5px; border-radius:5px; }
.borderRadiusTp{-moz-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0;}
.borderRadiusBtm{-moz-border-radius:0 0 5px 5px ; border-radius:0 0 5px 5px;}

.ddcommon {position:relative;display:-moz-inline-stack; zoom:1; display:inline-block; *display:inline; cursor:default;}
.ddcommon ul{padding:0;margin:0;}
.ddcommon ul li{list-style-type:none;}
.borderRadiusTp ul li:last-child{-moz-border-radius:0 0 5px 5px ; border-radius:0 0 5px 5px;border-bottom:0 none #c3c3c3; }
.borderRadiusBtm ul li:first-child{-moz-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0 ;border-bottom:1 solid #c3c3c3; }

.ddcommon .disabled img, .ddcommon .disabled span, .ddcommon.disabledAll{
    opacity: .5; /* standard: ff gt 1.5, opera, safari */
    -ms-filter:"alpha(opacity=50)"; /* ie 8 */
    filter:alpha(opacity=50); /* ie lt 7 */
    -khtml-opacity:.5; /* safari 1.x */
    -moz-opacity:.5; /* ff lt 1.5, netscape */
    color:#999999;
}
.ddcommon .clear{clear:both}
.ddcommon .shadow{-moz-box-shadow:5px 5px 5px -5px #888888;-webkit-box-shadow:5px 5px 5px -5px #888888;box-shadow: 5px 5px 5px -5px #888888;}
.ddcommon input.text{color:#7e7e7e;padding:0 0 0 0; position:absolute; background:#fff; display:block; width:98%; height:98%; left:2px; top:0; border:none;}
.ddOutOfVision{position:relative; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline;}
.borderRadius .shadow{-moz-box-shadow:5px 5px 5px -5px #888888;-webkit-box-shadow:5px 5px 5px -5px #888888;box-shadow: 5px 5px 5px -5px #888888;}
.borderRadiusBtm .shadow{-moz-box-shadow:-5px -5px 5px -5px #888888;-webkit-box-shadow:-5px -5px 5px -5px #888888;box-shadow: -5px -5px 5px -5px #888888}
.borderRadiusTp .border, .borderRadius .border{-moz-border-radius:0 0 5px 5px ; border-radius:0 0 5px 5px;}
.borderRadiusBtm .border{-moz-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0;}
img.fnone{float:none !important}
.ddcommon .divider{width:0; height:100%; position:absolute;}
.ddcommon .ddArrow{display:inline-block; position:absolute; top:50%; right:4px;}
.ddcommon .ddArrow:hover{background-position:0 100%;}
.ddcommon .ddTitle{padding:0; position:relative; display:inline-block; width:100%}
.ddcommon .ddTitle .ddTitleText{display:block;}
.ddcommon .ddTitle .ddTitleText .ddTitleText{padding:0;}
.ddcommon .ddTitle .description{display:block;}
.ddcommon .ddTitle .ddTitleText img{position:relative; vertical-align:middle; float:left}
.ddcommon .ddChild{position:absolute;display:none;width:100%;overflow-y:auto; overflow-x:hidden; zoom:1; z-index:9999}
.ddcommon .ddChild li{clear:both;}
.ddcommon .ddChild li .description{display:block;}
.ddcommon .ddChild li img{border:0 none; position:relative;vertical-align:middle;float:left}
.ddcommon .ddChild li.optgroup{padding:0;}
.ddcommon .ddChild li.optgroup .optgroupTitle{padding:0 5px; font-weight:bold; font-style:italic}
.ddcommon .ddChild li.optgroup ul li{padding:5px 5px 5px 15px}
.ddcommon .noBorderTop{border-top:none 0  !important; padding:0; margin:0;}

/*************** default theme **********************/
.dd{border:1px solid #c3c3c3;}
.dd .divider{border-left:1px solid #c3c3c3; border-right:1px solid #fff;; right:24px;}
.dd .ddArrow{width:16px;height:16px; margin-top:-8px; background:url(../../images/msdropdown/skin1/dd_arrow.gif) no-repeat;}
.dd .ddArrow:hover{background-position:0 100%;}
.dd .ddTitle{color:#000;background:#e2e2e4 url(../../images/msdropdown/skin1/title-bg.gif) repeat-x left top;}
.dd .ddTitle .ddTitleText{padding:5px 20px 5px 5px;}
.dd .ddTitle .ddTitleText .ddTitleText{padding:0;}
.dd .ddTitle .description{font-size:12px; color:#666}
.dd .ddTitle .ddTitleText img{padding-right:5px;}
.dd .ddChild{border:1px solid #c3c3c3; background-color:#fff; left:-1px;}
.dd .ddChild li{padding:5px; background-color:#fff; border-bottom:1px solid #c3c3c3;}
.dd .ddChild li .description{color:#666;}
.dd .ddChild li .ddlabel{color:#333;}
.dd .ddChild li.hover{background-color:#f2f2f2}
.dd .ddChild li img{padding:0 6px 0 0;}
.dd .ddChild li.optgroup{padding:0;}
.dd .ddChild li.optgroup .optgroupTitle{padding:0 5px; font-weight:bold; font-style:italic}
.dd .ddChild li.optgroup ul li{padding:5px 5px 5px 15px}
.dd .ddChild li.selected{background-color:#d5d5d5; color:#000;}

/*================ Start Rabe3 Edits ============*/

@font-face {
    font-family: "Open Sans";
    src: url("../fonts/Open_Sans/static/OpenSans/OpenSans-Bold.ttf");
}
p{
    line-height: 1.5 !important;
}
.account{
    background-color: #ed7233;
    padding: 15px 20px;
    margin-right: 10px;
}
.account a{
    color: #fff;
    font-size: 12px;
}
.account a.login{
    border: 1px solid #fff;
    border-radius: 50px;
    padding: 10px 20px;
}
.btn-custom-primary{
    background-color: #6f2f9f;
    color: #fff;
    padding: 15px 20px;
    font-weight: bold;
}
.btn-custom-warning{
    background-color: #ed7233;
    color: #fff;
    padding: 15px 20px;
    font-weight: bold;
}
.nav-item a{
    font-size: 20px;
    color: black !important;
}
header .header-wrapper {
    /* background-size: cover;
    width: 100%;
    height: calc(100vh - 103px); */
    position: relative;
}
header .header-wrapper::before {
    display: block;
    content: "";
    width: 100%;
    padding-top: calc((205 / 683) * 100%);
}
.header-wrapper .background{
    /* position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all .3s ease-in-out; */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.header-wrapper .background img{
    max-width: 100%;
    max-height: 100%;
}
.header-wrapper .background.scale{
    opacity: 1;
}
.header-wrapper .header-info{
    padding: 0 60px 120px;
    padding-bottom: 0;
    position: absolute;
    top: 20px;
    z-index: 2;
}
.header-wrapper .header-info .header-text{
    color: #fff;
}
.header-wrapper .header-info .header-text h1{
    font-family: 'Open Sans';
    font-size: 50px;
    font-weight: bold;
    line-height: 1.3;
    color: #fff;
}
.header-wrapper .header-info .header-text p{
    font-size: 27px;
    width: 70%;
    font-weight: bold;
    margin-bottom: 2rem;
    color: #fff;
    line-height: 1.5;
}
.header-info .btns a{
    font-size: 22px;
}


/* home page slider */
.slider-with-text {
    position: relative;
    background-color: #f0f2f5;
}
.slider-with-text .slider-with-text-img-block {
    position: relative;
}
.slider-with-text .slider-with-text-img-block::before {
    display: block;
    content: "";
    width: 100%;
    padding-top: calc((395 / 683) * 100%);
}
.slider-with-text .slider-with-text-img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.slider-with-text .slider-with-text-img img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
}
.slider-with-text .header-info {
    position: absolute;
    top: 30%;
    left: 8%;
}

.slider-with-text .header-info .header-text{
    color: #fff;
}
.slider-with-text .header-info .header-text h1{
    font-family: 'Open Sans';
    font-size: 50px;
    font-weight: bold;
    line-height: 1.3;
    color: #fff;
}
.slider-with-text .header-info .header-text p{
    font-size: 27px;
    width: 70%;
    font-weight: bold;
    margin-bottom: 2rem;
    color: #fff;
    line-height: 1.5;
}
.slider-with-text .btns button{
    display: block;
    border: none;
    background-color: #ed7233;
    color: #fff;
    font-size: 30px;
    width: 27%;
    margin-bottom: 30px;
    border-radius: 0 50px 50px 0;
    line-height: 1.5;
    padding: 0.5%;
}
.slider-with-text .btns a{
    font-size: 22px;
}
@media(max-width: 1025px) {
    .slider-with-text .header-info {
        top: 40%;
    }
    .slider-with-text .header-info .header-text h1{
        font-size: 30px;
    }
    .slider-with-text .header-info .header-text p{
        font-size: 20px;
        margin-bottom: 2rem;
    }
    .slider-with-text .btns a{
        font-size: 18px;
    }
}
@media(max-width: 767px) {
    .slider-with-text .header-info {
        top: 5%;
    }
    .slider-with-text .header-info .header-text h1{
        font-size: 22px;
    }
    .slider-with-text .header-info .header-text p{
        font-size: 18px;
        margin-bottom: 2rem;
        width: 100%;
    }
    .slider-with-text .btns a{
        font-size: 15px;
    }
}

/*carousal home page *Rabee*/

.carousel-inner, .carousel-item.active, .carousel-item{
    height: auto;
    background-color: #f0f2f5!important;
    padding: 0px!important;
}
}
.section-padding {
    /*padding: 40px 0;*/
}

.brand-carousel {
    margin-top: 0;
    margin-bottom: 0;
}
.brand-carousel .single-logo{
    height: 150px;
    max-height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.brand-carousel .single-logo img{
    max-width:50% !important;

}


.owl-dots {
    text-align: center;
    margin-top: 4%;
}

.owl-dot {
    display: inline-block;
    height: 15px !important;
    width: 15px !important;
    background-color: #878787 !important;
    opacity: 0.8;
    border-radius: 50%;
    margin: 0 5px;
}

.owl-dot.active {
    background-color: #000 !important;
}
/* .owl-carousel .owl-item img{
    width: 60%!important;
    height: 100%!important;
    vertical-align: bottom!important;
} */

/*end carousal */
/*==== What Is ==== */
.what-is{
    background-color: #f0f2f5;
    padding: 20px 0;
}
.what-is .container-fluid.odd{
    direction: rtl;
}
.what-is .odd img{
    width: 100%;
    height: 100%;
    object-fit:cover;
}
.what-is .text{
    padding-top: 98px;
    padding-left: 20px;
    direction: ltr;
}
.what-is .container-fluid.man .text{
    padding-top: 100px;
}
.what-is .text h1{
    font-family: 'Open Sans';
    font-weight: bold;
    font-size: 32px;
    color: #ed7233;
    margin-bottom: 50px;
    text-transform: unset
}
.what-is .text h4{
    font-weight: bold;
    font-size: 30px;
    color: #000;
}
.what-is .text ul{
    padding-bottom: 20px;
}
.what-is .text ul li{
    position: relative;
    direction: ltr;
    padding-left: 50px;
}
.what-is .text ul li{
    list-style-type: none;
}
.what-is .text ul li::before{
    content: "\f00c";
    font-family: FontAwesome;
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    width: 40px;
    border: 2px solid #000;
    border-radius: 50%;
    font-weight: bold;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.what-is .text ul li h6,
.what-is .text h6{
    font-weight: bold;
    color: #000;
    font-size: 18px;
    margin: 0;
}
.what-is .how-work .text h6{
    font-size: 22px;
    border-bottom: 2px solid #000;
    width: 70%;
}
.what-is .how-work .text p{
    margin: 30px 0;
}
.what-is .text ul li p{
    font-size: 14px;
}
.what-is .text p{
    color: #000;
    font-size: 20px;
}

@media(max-width: 1025px) {
    .what-is .container-fluid.man .text{
        padding-top: 30px;
    }
    .what-is .container-fluid.man .text {
        padding: 0;
    }
    .what-is .text h1 {
        font-size: 29px;
        margin-bottom: 20px;
    }
}
@media(max-width: 768px) {
    .what-is .text p {
        font-size: 15px;
    }
}
.how-work .how-work-img-block {
    position: relative;
}
.how-work .how-work-img-block::before {
    display: block;
    content: "";
    width: 100%;
    padding-top: calc((305 / 683) * 100%);
}
.how-work .how-work-img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.how-work .how-work-img-block img {
    max-width: 100%;
    max-height: 100%;
}

/*--- Community ---*/
.community{
    text-align: center;
    padding: 120px 0;
}
.community .section-title,
.connect-with .section-title{
    font-weight: bold;
    /*font-size: 50px;*/
    color: #ed7233;
    margin: 30px 0;
}
.connect-with .section-title{
    color: #f17223;
}
.community .box .title{
    background-color: #b2ccdd;
    font-weight: bold;
    padding: 20px;
    color: #000;
    font-size: 30px;
}
.image-with-text {
    position: relative;
}
.image-with-text .header-info .header-text h1{
    font-family: 'Open Sans';
    font-size: 50px;
    font-weight: bold;
    line-height: 1.3;
    color: #fff;
}
.image-with-text .header-info .header-text p {
    font-family: 'Open Sans';
    font-size: 50px;
}
.centered {
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
}

/*----- Connect With ------*/
.connect-with{
    overflow: hidden;
    background-color: #f0f2f5;
}
.connect-with.recently{
    padding-bottom: 40px;
}


.connect-with .recently-label{
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 20px;
    color: #000;
}
.connect-with.recently .carousel-box .details{
    display: flex;
    align-items: center;
    padding: 10px 20px !important;
}
.connect-with.recently .carousel-box{
    background-color: #fff;
}
.connect-with.recently .carousel-box .details .profile-img {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    border: 1px solid #ddd;
    overflow: hidden;
    margin-right: 10px;
}
.connect-with.recently .carousel-box .details h6{
    width: 70%;
}

.connect-with.recently #carouselExampleControls{
    height: 380px;
}
.carousel-inner,.carousel-item.active,.carousel-item{
    height: auto;
    background-color: #fff;
    padding: 0px!important;
}
.connect-with.recently .carousel-inner,
.connect-with.recently .carousel-item.active,
.connect-with.recently .carousel-item{
    background-color: transparent;
    padding: 2px 20px;
}
.carousel-inner .carousel-item .carousel-box{
    width: calc(92% /4);
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 4px #bdbdbd;
    border-radius: 5px;
    overflow: hidden;
    float: left;
}
.connect-with.recently .carousel-inner .carousel-item .carousel-box{
    width: calc(85% /4);
}
.carousel-inner .carousel-item .carousel-box:not(:last-of-type){
    margin-right: 30px;
}
.connect-with.recently .carousel-inner .carousel-item .carousel-box:not(:last-of-type){
    margin-right: 3%;
}
.connect-with.recently .carousel-inner .carousel-item .carousel-box:first-of-type{
    margin-left: 3%;
}
.carousel-inner .carousel-item .carousel-box .img{
    height: 50%;
}
.carousel-inner .carousel-item .carousel-box img{
    width: 100%;
    height: 100%;
}
.carousel-inner .carousel-item .carousel-box .details{
    height: 50%;
    padding: 20px;
}
.carousel-box .details h6.title{
    color: #000;
    font-size: 20px;
    font-weight: bold;
    margin: 0;
}
.carousel-box .details .rate{
    color: #ed7233;
}
.carousel-box .details span.label,
.carousel-box .details .rate span {
    color: #cdcdcd;
    font-size: 15px;
    margin-bottom: 10px;
    display: block;
}
.carousel-box .details p.desc{
    font-size: 15px;
}
.carousel-box .details .rate span{
    display: inline-block;
}
.carousel-control-prev{
    justify-content: flex-start !important;
}
.carousel-control-next{
    justify-content: flex-end !important;
}
.carousel-control-prev i,
.carousel-control-next i{
    background-color: #fff;
    color: #333;
    font-size: 30px;
    padding: 5px;
    border-radius: 50px;
    width: 40px;
    height: 40px;
    box-shadow: 0 0 4px #333;
    margin: 40px;
}
.carousel-control-next i{
    margin-right: 48px;
}
.connect-with.recently .carousel-control-next i{
    margin-right: 52px;
}
.connect-with.recently .carousel-control-prev i{
    margin-left: 52px;
}

/*=========== Join ============*/
.join{
    position: relative;
}
.join .section-background {
    position: relative;
}
.join .info{
    padding-top: 60px;
    padding-left: 60px;
    position: relative;
    z-index: 2;
}
.join .info .text h2{
    font-family: 'Open Sans';
    font-weight: bold;
    font-size: 60px;
    color: #ed7233;
    margin: 0;
}
.join .info .text p{
    font-size: 55px;
    color: #000;
    font-style: italic;
    line-height: 1.5;
}
.join .info .btns{
    margin-top: 40px;
}
.join .info .btns button{
    display: block;
    border: none;
    background-color: #ed7233;
    color: #fff;
    /*padding-left: 20px;*/
    font-size: 30px;
    width: 27%;
    /*height: 100px;*/
    margin-bottom: 30px;
    border-radius: 0 50px 50px 0;
    line-height: 1.5;
    padding: 0.5%;

}
.join .info .btns button:last-child{
    margin-bottom: 0;
}

.section-with-background {
    padding: 300px 20px 50px;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}
.section-with-background .info .text h2{
    font-family: 'Open Sans';
    font-weight: bold;
    font-size: 50px;
    color: #ed7233;
    margin: 0;
}
.section-with-background .info .text p{
    font-size: 40px;
    color: #000;
    font-style: italic;
    line-height: 1.3;
}
.section-with-background .info .btns{
    margin-top: 40px;
}
.section-with-background .info .btns button{
    display: block;
    border: none;
    background-color: #ed7233;
    color: #fff;
    /*padding-left: 20px;*/
    font-size: 30px;
    width: 27%;
    /*height: 100px;*/
    margin-bottom: 30px;
    border-radius: 0 50px 50px 0;
    line-height: 1.5;
    padding: 0.5%;

}

.img-with-text,
.img-with-text-block {
    position: relative;
    clear: both;
}
.img-with-text .img-with-text-block::before {
    display: block;
    content: "";
    width: 100%;
    padding-top: calc((384 / 683) * 100%);
}
.img-with-text.freelancer-section .img-with-text-block::before {
    padding-top: calc((128 / 225) * 65%);
}
.img-with-text .img-with-text-block .image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*background-color: #f0f2f5;*/
}
.img-with-text .img-with-text-block .image img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;


}
.img-with-text .info {
    position: absolute;
    top: 30%;
    left: 5%;
}
.img-with-text .info .text h2{

    font-weight: bold;
    font-size: 50px;
    color: #ed7233;
    margin: 0;
}
.img-with-text .info .text p{
    font-size: 40px;
    color: #ffffff;
    line-height: 1.3;
}
.img-with-text .info .btns{
    margin-top: 40px;
}
.img-with-text .info .btns button{
    display: block;
    border: none;
    background-color: #ed7233;
    color: #fff;
    font-size: 30px;
    width: fit-content;
    margin-bottom: 30px;
    /*border-radius: 0 50px 50px 0;*/
    line-height: 1.5;
    padding: 20px 25px;

}


@media(max-width: 767px) {
    .img-with-text .info .text h2 {
        font-size: 22px;
    }
    .img-with-text .info .text p {
        font-size: 20px;
        margin-bottom: 10px;
    }
    .img-with-text .info .btns button {
        font-size: 16px;
        padding: 5px 10px;
        margin-bottom: 10px;
    }

}

/*===== Freelancers =========*/
.freelancers .header{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    padding: 10px 0 40px;
}

.freelancers .text {
    width: 50%;
    padding: 30px 0 0 77px;
    margin-left: 2%;
    margin-top: 3%;
}

.freelancers .text h1{
    color: #1a4789;
    font-weight: bold;
    font-size: 42px;
    margin-bottom: 28px;
    width: 94%;
}
.freelancers .text p{
    color: #f17223;
    /*font-weight: bold;*/
    font-size: 24px;
}
@media(max-width: 1025px) {
    .img-with-text .info .text h2 {
        font-size: 25px;
    }
    .img-with-text .info .text p {
        font-size: 20px;
    }
    .img-with-text .info .btns button {
        font-size: 25px;
    }
    .connect-with .section-title {
        font-size: 25px;
    }
    .img-with-text .info .btns {
        margin-top: 10px;
    }
    .img-with-text .info {
        top: 20%;
        left: 42px;
    }
    .connect-with .recently-label {
        margin-left: 20px;
    }

    .freelancers .text {
        width: 100%;
        padding-top: 10px;
        padding-left: 10px;
    }
}
/*===== Get Started =====*/
.get-start{
    position: relative;
    background-color: #f0f2f5;
}
.get-start .img{
    /* position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%; */
}
.get-start .img img{
    width: 100%;
    height: 100%;
}
.get-start .text{
    padding-top: 60px;
    padding-left: 60px;
    position: relative;
    z-index: 2;
}
.get-start .text h1{
    font-family: 'Open Sans';
    font-weight: bold;
    font-size: 42px;
    color: #ed7233;
    margin: 0;
    margin-bottom: 30px;
}
.get-start .text p{
    position: relative;
    color: #000;
    font-size: 34px;
    padding-bottom: 20px;
}
.get-start .text p::before{
    content: "";
    position: absolute;
    width: 40%;
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: #ed7233;
}

/*===== To Start =====*/
.to-start{
    position: relative;
    height: 100vh;
}
.to-start.client{
    direction: rtl;
}
.getting-into.client{
    direction: rtl;
}
.getting-into.clients .text,
.to-start.clients .text{
    padding-right: 20px;
}
.to-start .img{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.to-start .img img{
    width: 100%;
    height: 100%;
}
.to-start .text{
    width: 55%;
    position: relative;
    z-index: 2;
    padding-top: 50px;
    padding-left: 50px;
    padding-right: 20px;
    direction: ltr;
}
.to-start.pay-easily{
    direction: ltr;
}
.to-start.pay-easily .text{
    width: 55%;
}
.to-start .text h1{
    font-family: 'Open Sans';
    font-weight: bold;
    font-size: 55px;
    color: #000;
    margin: 0;
    margin-bottom: 10px;
}
.to-start .text span.label{
    position: relative;
    color: #8b8686;
    font-weight: bold;
    font-size: 21px;
    padding-bottom: 40px;
    width: fit-content;
    display: block;
}
.to-start .text span.label::before{
    content: "";
    position: absolute;
    width: 70%;
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: #ed7233;
    border-radius: 10px;
}
.to-start p{
    margin-top: 60px;
    color: #8b8686;
    font-size: 17px;
    font-weight: 600;
}
.to-start .card-header{
    background-color: #fff;
}
.accordion>.card>.card-header button{
    color: #8b8686;
    font-size: 21px;
}
.accordion>.card>.card-header button i {
    transform: rotate(90deg);
    margin-left: 20px;
    color: #ed7233;
}

/*===== Getting Into =====*/
.getting-into{
    position: relative;
    height: 100vh;
}
.getting-into .img{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.getting-into .img img{
    width: 100%;
    height: 100%;
}
.getting-into .text{
    position: relative;
    z-index: 2;
    padding-top: 50px;
    padding-left: 50px;
    width: 55%;
    direction: ltr;
    padding-right: 30px;
}
.getting-into .text h1{
    font-family: 'Open Sans';
    font-weight: bold;
    font-size: 50px;
    color: #000;
    margin: 0;
    margin-bottom: 10px;
}
.getting-into .text span.label{
    position: relative;
    color: #8b8686;
    font-weight: bold;
    font-size: 21px;
    padding-bottom: 40px;
    width: fit-content;
    display: block;
}
.getting-into .text span.label::before{
    content: "";
    position: absolute;
    width: 70%;
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: #ed7233;
    border-radius: 10px;
}
.getting-into p{
    margin-top: 60px;
    color: #8b8686;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 40px;
}
.getting-into .text #accordionExample{
    width: 100%;
}
.getting-into .text #accordionExample .card-header{
    background-color: #fff;
}

/*===== Profit =====*/
.profit{
    position: relative;
    height: 100vh;
}
.profit .img{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.profit .img img{
    width: 100%;
    height: 100%;
}
.profit .text{
    position: relative;
    z-index: 2;
    padding-top: 50px;
    padding-left: 50px;
    width: 55%;
    direction: ltr;
    padding-right: 30px;
}
.profit .text h1{
    font-family: 'Open Sans';
    font-weight: bold;
    font-size: 50px;
    color: #000;
    margin: 0;
    margin-bottom: 10px;
}
.profit .text span.label{
    position: relative;
    color: #8b8686;
    font-weight: bold;
    font-size: 21px;
    padding-bottom: 40px;
    width: fit-content;
    display: block;
}
.profit .text span.label::before{
    content: "";
    position: absolute;
    width: 70%;
    height: 4px;
    bottom: 0;
    left: 0;
    background-color: #ed7233;
    border-radius: 10px;
}
.profit p{
    margin-top: 60px;
    color: #8b8686;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 40px;
}
.profit .text .input input{
    border-radius: 0;
    padding: 30px 20px;
}
.profit .text .input input::placeholder{
    color: #8b8686;
    font-size: 20px;
}
.profit .text #accordionExample .card-header{
    background-color: #fff !important;
}

/*=== Join Freelancers ===*/
.join.join-freelancers .text h2{
    margin-bottom: 25px;
}
.join.join-freelancers .text h2,
.join.join-freelancers .text p{
    color: #fff;
    font-weight: bold;
}
.join.join-freelancers .text p{
    font-size: 45px;
}

/*===== Clients =========*/
.clients{
    position: relative;
}
.clients .header{
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.clients .text{
    width: 50%;
    padding: 30px 0 0 75px;
}
.clients .text h1{
    color: #fff;
    font-weight: bold;
    font-size: 60px;
    margin-bottom: 80px;
    width: 84%;
}
.clients .text p{
    color: #fff;
    font-weight: bold;
    font-size: 26px;
}

/*======= Zillancers ======*/
.freelancers.zillancers{
    position: relative;
}
.freelancers.zillancers .text{
    width: 45%;
}
.freelancers.zillancers .text h1{
    color: #ed7233;
    width: 100%;
}
.freelancers.zillancers .text p{
    color: #000;
    line-height: 1.5;
}
.freelancers.zillancers .btns button{
    display: block;
    border: none;
    background-color: #ed7233;
    color: #fff;
    font-size: 30px;
    width: 100%;
    height: 80px;
    border-radius: 0 50px 50px 0;
    float: right;
    margin-right: 50px;
}

.help-choosing .text .btns button {
    display: block;
    border: none;
    background-color: #ed7233;
    color: #fff;
    font-size: 30px;
    width: fit-content;
    padding: 20px;
    height: 80px;
    border-radius: 0 50px 50px 0;
    margin-right: 50px;
}
@media(max-width: 1024px) {
    .help-choosing .text .btns button {
        font-size: 20px;
    }
    .what-is .text p{
        font-size: 18px;
    }
}

/*=========== Super Team ============*/
.freelancers.super-team{
    direction: rtl;
    margin-bottom: 20px;
}
.freelancers.super-team .text{
    width: 60%;
    padding-right: 10px;
}
.freelancers.super-team .text h1{
    color: #ed7233;
    width: 100%;
    margin-bottom: 20px;
    direction: ltr;
}
.freelancers.super-team .text h3{
    font-weight: bold;
    font-size: 40px;
    color: #000;
    font-style: italic;
}
.freelancers.super-team .text p{
    color: #000;
    font-weight: normal;
    line-height: 1.5;
}
.freelancers.super-team .btns button{
    display: block;
    border: none;
    background-color: #ed7233;
    color: #fff;
    font-size: 30px;
    /* width: 27%; */
    height: 80px;
    padding: 0 20px;
    border-radius: 0 50px 50px 0;
    float: right;
    margin-right: 50px;
    direction: ltr;
}

/*======== Help Choosing =======*/
.help-choosing{
    padding-bottom: 20px;
}
.help-choosing .image,
.help-choosing .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.help-choosing .text{
    padding: 40px 0 0 20px!important;
}
.help-choosing .text h2{
    font-size: 40px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    width: fit-content;
    position: relative;
}
.help-choosing .text h2::before{
    content: "";
    width: 70%;
    height: 4px;
    background-color: #ed7233;
    border-radius: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
}
.help-choosing .text p{
    font-size: 20px;
    color: #000;
}

/*======= Steps =========*/
.steps{
    padding-bottom: 20px;
    direction: rtl;
    background-color: #f0f2f5;
}
.steps .image,
.steps .image img{
    width: 100%;
    height: 100%;
}
.steps .text{
    padding: 40px 0 0 20px;
    direction: ltr;
}
.steps .text h2{
    font-size: 40px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    width: fit-content;
    position: relative;
}
.steps .text h2::before{
    content: "";
    width: 70%;
    height: 4px;
    background-color: #ed7233;
    border-radius: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
}
.steps .text p{
    font-size: 20px;
    color: #000;
}
.steps .text p:first-of-type{
    /*font-weight: bold;*/
    font-size: 20px;
}

/*======== Progress =======*/
.track-progress{
    padding-bottom: 20px;
}
.track-progress .image,
.track-progress .image img{
    width: 100%;
    height: 100%;
}
.track-progress .text{
    padding: 40px 0 0 20px;
}
.track-progress .text h2{
    font-size: 40px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    width: fit-content;
    position: relative;
}
.track-progress .text h2::before{
    content: "";
    width: 70%;
    height: 4px;
    background-color: #ed7233;
    border-radius: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
}
.track-progress .text p{
    font-size: 20px;
    color: #000;
}

/*======== Talk Expert ===========*/
.talk-exper{
    padding: 30px 0;
}
@media(max-width: 1024px) {
    .talk-exper .logos img {
        flex: 25%;
        max-width: 25%;
    }

}
@media(max-width: 767px) {
    .talk-exper .logos img {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
    }
    .join .info .btns button {
        height: 35px;
        font-size: 15px;
    }
}
.talk-exper .left{
    width: 100%;
    /*height: 100%;*/
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.talk-exper .left .text{
    width: 95%!important;
}
.talk-exper .left .text h2{
    font-weight: bold;
    /*color: #6c6c6c;*/
    /*margin-bottom: 4rem;*/
}
.talk-exper .left .text ul{
    position: relative;
    padding-bottom: 5px;
}
.talk-exper .left .text ul::before {
    position: absolute;
    content: "";
    width: 50%;
    height: 4px;
    background-color: #ed7233;
    border-radius: 10px;
    bottom: 10px;
    left: 5%;
}
.text-logo {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0 15px;
    margin-top: 15px;
}
.text-logo .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.text-logo .text h4 {
    font-size: 30px;
}
.text-logo .text p {
    text-align: center;
    font-size: 20px;
}
.text-logo .logo img {
    margin-right: 0;
}
@media(max-width: 767px) {
    .text-logo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px 0;
    }
}
.talk-exper .left .text ul li{
    margin-bottom: 2rem;
    padding-left: 60px;
    position: relative;
    list-style: none;
}
.talk-exper .left .text ul li span.before{
    position: absolute;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    background-color: #ed7233;
    color: #fff;
    border-radius: 50px;
}
.talk-exper .left .text ul li p{
    font-weight: bold;
    color:#000000 ;
    margin-bottom: 10px;
}
.talk-exper .left .text ul li span{
    font-size: 14px;
    color: #000000 ;
    display: block;
    width: 75%;
}
.talk-exper .right .form{
    background-color: #f0f2f5;
    padding: 20px 30px;
    border-radius: 20px;
}
.talk-exper .right .form h2.title{
    font-weight: bold;
    font-size: 40px;
    color: #ed7233;
}

.talk-exper .right .form form .desc{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24px;
    color: #000;
}
.talk-exper .right .form form .desc span{
    font-size: 18px;
    font-weight: bold;
}
.talk-exper .right .form form input,
.talk-exper .right .form form textarea{
    background-color: #b2ccdd;
}
.talk-exper .right .form form input{
    background-color: #b2ccdd;
    height: 11px;
}

.talk-exper .right .form form textarea.form-control{
    background-color: #b2ccdd;
    height: 60px;
}

.talk-exper .right .form form .submit{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.talk-exper .right .form form input.btn-submit{
    border: none;
    color: #fff;
    background-color: #ed7233;
    padding: 15px 50px;
    border-radius: 50px;
    height: 50px;
}

.talk-exper .right .form form .form-group>label{
    font-weight: bold;
    color: #545454;
}

/*===== Dynamics =========*/
.freelancers.dynamics .header{
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
    padding: 3%;
}
.freelancers.dynamics .text{
    /*width: 55%;*/
    padding: 30px 0 0 50px;
}
.freelancers.dynamics .text h1{
    color: #fff;
    font-weight: bold;
    font-size: 42px;
    margin-bottom: 14px;
    width: 94%;
}
.freelancers.dynamics .text p{
    color: #fff;
    /*font-weight: bold;*/
    font-size: 24px;
}

.freelancers.dynamics .textbtn{

    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    align-content: center;
}



.freelancers.dynamics .btns {
    margin-bottom: 100px;
}

.freelancers.dynamics .btns button{
    display: block;
    border: none;
    background-color: #ed7233;
    color: #fff;
    font-size: 30px;
    height: 80px;
    border-radius: 0 50px 50px 0;
    margin-left: 50px;
    padding: 0 25px;
}

/*===== Possibilities ======*/
.possibilities{
    padding-bottom: 20px;
}
.possibilities .image,
.possibilities .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.possibilities .text{
    padding: 30px;
}
.possibilities .text h2{
    font-size: 20px;
    font-weight: bold;
    width: 98%;
    margin-bottom: 2rem;
}
.possibilities .text ul li{
    font-size: 20px;
    padding: 5px 0;
    color:#000;
}
.possibilities .btns button{
    display: block;
    border: none;
    background-color: #ed7233;
    color: #fff;
    font-size: 30px;
    height: 80px;
    border-radius: 0 50px 50px 0;
    padding: 0 25px;
}

/*======= Talk Dynamics =======*/
.talk-dynamic .left{
    align-items: flex-start;
}
.talk-dynamic .left .text{
    width: 90%;
}
.talk-dynamic .left .text h2{
    color: #000;

}
.talk-dynamic .left .text ul{
    box-shadow: none;
    position: relative;
    padding-bottom: 10px;
}
.talk-dynamic .left .text ul::before{
    content: "";
    width: 50%;
    height: 4px;
    background-color: #ed7233;
    border-radius: 10px;
    position: absolute;
    bottom: 0;
    left: 50px;
}
.talk-dynamic .left .text ul li{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-left: 0;
}
.talk-dynamic .left .text ul li span.before{
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    color: #ed7233;
    border-radius: 50px;
    border: 3px solid #ed7233;
    background-color: transparent;
}
.talk-dynamic .left .text ul li span.before i{
    font-size: 30px;
}
.talk-dynamic .left .text ul li p{
    color: #000;
    margin-left: 10px;
    font-size: 20px;
}
.talk-dynamic .right .form h2.title{
    font-size: 20px;
}

/*==== SAP =====*/
.sap .text h1{
    font-size: 42px !important;
    margin-bottom: 30px !important;
}
.sap .text p{
    margin-bottom: 20px;
    font-weight: normal !important;
}
.sap .btns{
    margin: 60px 0 0;
    margin-left: 20px;
    color: #fff;
}
.freelancers.dynamics.sap .btns h4{
    font-size: 25px;
    white-space: nowrap;
    color: #fff !important;
}

/*===== SAP Possibilities =====*/
.support{
    position: relative;
}
.support .background,
.support .background img{
    width: 100%;
    height: 100%;
}
.support .info{
    position: relative;
    z-index: 2;
    padding: 60px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}
.support .info .text{
    width: 70%;
}
.support .info .text h2{
    font-size: 60px;
    font-weight: bold;
    color: #fff;
    width: fit-content;
}
.support .info .text span.note{
    font-size: 40px;
    font-style: italic;
    color: #fff;
}
.support .info .text p{
    margin-top: 30px;
    font-size: 22px;
    color: #fff;
    width: 75%;
}
.support .btns button{
    display: block;
    border: none;
    background-color: #ed7233;
    color: #fff;
    font-size: 30px;
    height: 80px;
    border-radius: 0 50px 50px 0;
    padding: 0 25px;
    line-height: 1.3;
}


#carouselExampleControls .owl-nav,
#carouselRecent .owl-nav {
    position: absolute;
    content: '';
    top: calc(50% - 20px);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#carouselExampleControls .owl-nav .owl-prev,
#carouselExampleControls .owl-nav .owl-next,
#carouselRecent .owl-nav .owl-prev,
#carouselRecent .owl-nav .owl-next {
    background-color: rgba(255, 255, 255, 1) ;
    color: #333;
    font-size: 30px;
    padding: 5px;
    border-radius: 50px;
    width: 40px;
    height: 40px;
    box-shadow: 0 0 4px #333;
}


@media(max-width: 1024px) {
    .support .info {
        padding: 40px;
        align-items: flex-start;
    }
    .support .info .text {
        width: 100%;
    }
    .support .info .text p {
        width: 100%;
    }
    .freelancers.dynamics .header {
        align-items: flex-start;
    }
    .support .info .text h2 {
        font-size: 25px;
    }
}
/*--------- Comming Soon ---------*/
.comming{
    padding: 60px;
}
.comming .section-title{
    font-size: 40px;
    /*font-style: italic;*/
    color: #ed7233;
    font-weight: normal;
    text-align: center;
    margin-bottom: 4rem;
}
.comming .box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 30px;
}
.comming .box .icon{
    width: 80px!important;
    height: 80px!important;
    margin-bottom: 20px;
}
.comming .box .icon img{
    width: 100%;
    height: 100%;
}
.comming .box h4{
    font-size: 20px;
}
.talk-exper.erp{
    direction: rtl;
}
.talk-exper.erp .left,
.talk-exper.erp .right{
    direction: ltr;
}
.talk-exper .logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 30px;
}
.talk-exper .logos img {
    flex: 30%;
    max-width: 12%;
}


/*------- About Us --------*/
.about_us .info{
    display: flex;
    /*flex-direction: column;*/
    /*justify-content: flex-end;*/
}
.about_us .text{
    text-align: center;
    width: 50% !important;
}
.about_us .text span.label{
    color: #fff;
    font-size: 30px;
}
.about_us .text h2{
    color: #fff !important;

}

.about{
    background-color: #f0f2f5;
    padding: 50px;
}
.about h2.title{
    font-size: 40px;
    font-weight: bold;
    color: #ed7233;
    margin-bottom: 20px;
}
.about p{
    font-size: 20px;
    color: #000;
}

/*--------- Community --------------*/
.community .text{
    text-align: left;
}
.community .text h2{
    font-weight: bold;
    color: #000;
}
.community .text h2::before{
    width: 100% !important;
}
.community .text p{
    margin-bottom: 30px;
}
.community .text p:first-of-type{
    font-weight: bold;
}

/*-------- Contact Us --------*/
.contact .text{
    padding-left: 30px;
}
.contact .social{
    margin-top: 30px;
}
.contact .social li{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.contact .social li img,
.contact .social li i{
    width: 40px;
    height: 40px;
    margin-right: 20px;
}
.contact .social li i{
    font-size: 40px;
}
.contact .social li p{
    margin: 0;
    font-weight: normal !important;
}
.help-choosing.community{
    /*padding: 0!important;*/
}

/*------ Footer -------*/
.footer {
    display: flex;
    justify-content: space-between;
    padding: 20px 30px;
    background: #f7f7f7;
    margin-top: 20px;
}
.footer p {
    margin: 0;
}
.footer p i{
    color: red;
}
.accordion > .card:first-of-type > .card-header {
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}
@keyframes scale {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

/*// bigger screens //*/
@media (min-width: 1441px){
    #carouselExampleControls {
        height: 850px;
    }
    .carousel-inner .carousel-item .carousel-box:first-of-type{
        margin-left: 50px;
    }
    header .header-wrapper,
    .join .header-wrapper{
        display: flex;
        align-items: center;
    }
    .header-wrapper .header-info .header-text h1{
        font-size: 20px;
        width: 80%;
    }
    .freelancers .text h1,
    .clients .text h1{
        font-size: 42px;
    }
    .header-wrapper .header-info .header-text p{
        font-size: 18px;
        width: 73%;
    }
    .freelancers .text p,
    .clients .text .to-start .text{
        font-size: 24px;
        line-height: 1.5;
    }
    .header-info .btns a{
        font-size: 18px;
        margin-right: 20px;
    }
    .what-is .text h2,
    .possibilities .text h2{
        font-size: 20px;
    }
    .what-is .text ul li{
        margin-bottom: 40px;
        padding-left: 90px;
    }
    .what-is .text ul li::before{
        width: 50px;
        height: 50px;
        font-size: 26px;
    }
    .what-is .text ul li h6, .what-is .text h6{
        font-size: 20px;
    }
    .what-is .text ul li p{
        font-size: 18px;
    }
    .what-is .text h4{
        font-size: 30px;
    }
    .what-is .text p {
        font-size:25px;
        line-height: 1.5;
    }
    .what-is .how-work .text h6{
        font-size: 20px;
    }
    .community .section-title, .connect-with .section-title{
        font-size: 20px!important;
    }
    .community .box .title{
        font-size: 20px;
    }
    .community .container-fluid{
        width: 80%;
    }
    .community .box p{
        font-size: 18px;
        line-height: 1.5;
    }
    .carousel-box .details h6.title{
        font-size: 20px;
        margin-bottom: 25px;
    }
    .carousel-box .details span.label{
        font-size: 25px;
        margin-bottom: 25px;
    }
    .carousel-box .details p.desc{
        font-size: 22px;
        line-height: 1.5;
    }
    .carousel-box .details .rate{
        font-size: 22px;
    }
    .connect-with .recently-label{
        font-size: 18px;
    }
    .join .info .text h2{
        font-size: 100px;
    }
    .join .info .text p{
        font-size: 18px;
    }
    .join .info .btns button{
        font-size: 20px;
        width: 65%;
    }
    .get-start .text{
        padding-top: 120px;
        padding-left: 120px;
    }
    .get-start .text h1,
    .to-start .text h1,
    .getting-into .text h1,
    .profit .text h1{
        font-size: 42px;
    }
    .get-start .text p{
        font-size: 20px;
        padding-bottom: 60px;
    }
    .get-start .text p::before{
        height: 6px;
    }
    .to-start .text span.label,
    .getting-into .text span.label,
    .profit .text span.label{
        font-size: 20px;
    }
    .to-start p,
    .getting-into p,
    .profit p{
        font-size: 20px;
        line-height: 1.5;
    }
    .accordion>.card>.card-header button{
        font-size: 20px;
    }
    .accordion .card-body{
        font-size: 18px;
        line-height: 1.5;
    }
    .profit .text .input input{
        height: unset;
        padding: 60px;
    }
    .profit .text .input input::placeholder{
        font-size: 18px;
    }
    .join.join-freelancers .info .btns button{
        font-size: 20px;
        width: 50%;
    }
    .help-choosing .text h2,
    .steps .text h2,
    .track-progress .text h2{
        font-size: 40px;
    }
    .talk-exper .left .text h2{
        font-size: 32px;
    }
    .talk-exper .left .text ul li{
        padding-left: 13px;
    }
    .help-choosing .text p,.steps .text p, .track-progress .text p, .talk-exper .left .text ul li p{
        font-size: 20px;
    }
    .talk-exper .left .text ul li span{
        font-size: 18px;
        line-height: 1.5;
    }
    .talk-exper .left .text ul li span.before{
        width: 40px;
        height: 40px;
        top: -9px;
        line-height: unset;
    }
    .steps .text p:first-of-type{
        font-size: 15px;
    }
    .talk-exper .right .form h2.title{
        font-size: 20px;
    }
    .talk-exper .right .form form .desc{
        font-size: 18px;
    }
    .talk-exper .right .form form .desc span,
    .talk-exper .right .form form .form-group>label,
    .form-check-label{
        font-size: 20px;
    }
    .form-check-label{
        height: 45px;
        line-height: 45px;
        margin-left: 50px;
    }
    .talk-exper .right .form form .form-check-input{
        width: 40px;
        height: 40px;
    }
    .form-check{
        margin-bottom: 40px;
    }
    .talk-exper .right .form form input.btn-submit {
        padding: 10px 85px;
        font-size: 20px;
    }
    .label-desc{
        font-size: 20px;
    }
    .freelancers.dynamics .text h1{
        font-size: 32px;
    }
    .freelancers.dynamics .text p{
        font-size: 24;
    }
    .freelancers.dynamics .btns button{
        font-size: 20px;
        height: 100px;
    }
    .possibilities .text ul li{
        /*font-size: 20px;*/
        /*margin-bottom: 20px;*/
    }
    .support .info .text h2{
        font-size: 20px;
    }
    .support .info .text span.note{
        font-size: 25px;
    }
    .support .info .text p{
        font-size: 18px;
    }
    .support .btns button{
        font-size: 20px;
        height: 100px;
    }

    .support .info  .btnlogo img{
        position: absolute;
        bottom: 80%;left: 37%;
        border-radius: 50%;
    }

    #headimg{
        padding-left: 2%!important;
        padding-right: 2%!important ;
        margin: 1%
    }


    .comming .section-title{
        font-size: 20px;
    }
    .comming .box .icon{
        width: 155px;
    }
    .comming .box h4{
        font-size: 20px;
    }
    .comming .box p{
        font-size: 15px;

    }
    .talk-exper.erp .left .text h2{
        font-size: 25px;
    }
    .talk-dynamic.erp .left .text ul li{
        padding-left: 0;
    }
    .talk-dynamic.erp .left .text ul li p {
        font-size: 20px;
        width: 85%;
    }
    .talk-exper.erp .left .text ul li span.before{
        top: 0;
    }
    .freelancers.dynamics.sap .text h1{
        font-size: 42px !important;
    }
    .freelancers.dynamics.sap .text p{
        font-size: 20px !important;
    }
    .freelancers.dynamics.sap .btns h4{
        font-size: 20px;
    }
}
@media (max-width: 1024px){
    .header-wrapper .header-info{
        padding-top: 0;
    }
    .carousel-inner .carousel-item .carousel-box{
        width: calc(90% /4);
    }
    .join .info .text h2{
        font-size: 40px;
    }
    .join .info .text p{
        font-size: 35px;
    }
    .join .info .btns button{
        font-size: 22px;
        height: 80px;
    }
    .freelancers .text h1,
    .get-start .text h1{
        font-size: 40px;
        margin-bottom: 25px;
    }
    .freelancers .text p{
        font-size: 22px;
        line-height: 1.2;
    }
    .get-start .text,
    .to-start .text{
        padding-top: 30px;
        padding-left: 30px;
    }
    .get-start .text p{
        font-size: 24px;
    }
    .to-start .text h1{
        font-size: 35px;
    }
    .to-start .text span.label,
    .to-start p{
        font-size: 14px;
    }
    .to-start .text span.label{
        padding-bottom: 25px;
    }
    .to-start p{
        width: 55%;
        margin-top: 20px;
    }
    .accordion>.card>.card-header button{
        font-size: 15px;
    }
    .accordion .card-body{
        font-size: 13px;
    }
    .freelancers.super-team .text h3{
        font-size: 25px;
    }
    .clients .text{
        width: 100%;
        padding-top: 20px;
        padding-left: 20px;
    }
    .clients .text h1{
        font-size: 40px;
        margin-bottom: 40px;
    }
    .get-start .text{
        padding: 40px;
    }
    .freelancers.dynamics .text h1{
        font-size: 32px;
    }
    .possibilities .text h2{
        font-size: 30px;
    }
    .possibilities .text ul li{
        font-size: 18px;
    }
    .possibilities .btns button{
        font-size: 22px;
    }
    .talk-dynamic .left .text h2{
        font-size: 25px;
    }
    .talk-dynamic .left .text ul li p{
        font-size: 15px;
    }
    .talk-dynamic .left .text {
        width: 100%;
        padding-left: 15px;
    }
    .talk-dynamic .right .form h2.title{
        font-size: 24px;
    }
    .talk-exper .right .form form .desc{
        font-size: 21px;
    }
    .talk-exper .right .form form .desc span{
        font-size: 16px;
    }
    .label-desc{
        font-size: 13px;
    }
    .support{
        height: auto;
    }
}
@media(max-width: 991px) {
    .header-wrapper .header-info .header-text h1{
        font-size: 24px;
    }
    .header-wrapper .header-info .header-text p {
        font-size: 20px;
        width: 90%;
    }
    .freelancers.dynamics .header{
        flex-direction: column;
    }
}
@media (max-width: 769px){
    .header-wrapper .header-info{
        padding-top: 0;
    }
    .header-wrapper .header-info .header-text h1{
        font-size: 22px;
    }
    .carousel-inner .carousel-item .carousel-box{
        width: calc(86% /4);
    }
    .join .info .text h2{
        font-size: 40px;
    }
    .header-info .btns a {
        font-size: 18px;
    }
    .join .info .text p{
        font-size: 30px;
    }
    .join .info .btns button{
        font-size: 22px;
        height: 80px;
    }
    .community .box .title{
        font-size: 20px;
    }
    .carousel-box .details h6.title{
        font-size: 18px;
        line-height: 1.2;
    }
    .carousel-box .details span.label,
    .carousel-box .details .rate span,
    .carousel-box .details p.desc{
        font-size: 12px;
        line-height: 1.2;
    }
    .join .info .text h2{
        font-size: 30px;
    }
    .getting-into .text h1,
    .profit .text h1{
        font-size: 30px;
    }
    .getting-into .text span.label,
    .profit .text span.label{
        font-size: 17px;
        padding-bottom: 20px;
    }
    .getting-into p,
    .profit p{
        font-size: 14px !important;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .freelancers.zillancers .text{
        width: 95%;
    }
    .freelancers .header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 20px 0;
    }
    .freelancers.super-team .text h1{
        font-size: 30px;
    }
    .freelancers.super-team .text h3,
    .freelancers .text p,
    .freelancers.super-team .btns button{
        font-size: 18px;
    }
    .freelancers.super-team .btns button{
        height: 60px;
    }
    .help-choosing .text h2,
    .steps .text h2,
    .track-progress .text h2,
    .talk-exper .right .form h2.title,
    .talk-exper .left .text h2{
        font-size: 24px;
    }
    .steps .text p:first-of-type{
        font-size: 15px;
    }
    .help-choosing .text p,
    .steps .text p,
    .track-progress .text p{
        font-size: 15px;
    }
    .to-start p{
        width: 100%;
    }
    .getting-into{
        height: auto !important;
    }
    .freelancers.dynamics .text {
        width: 90%;
        padding-top: 10%;
    }
    .freelancers.dynamics .text h1{
        font-size: 28px;
        margin-bottom: 20px;
        width: 100%;
    }
    .freelancers.dynamics .text p{
        font-size: 20px;
        margin-bottom: 0;
    }
    .freelancers.dynamics .btns button{
        font-size: 14px;
        height: 40px;
    }
    .possibilities .text h2{
        font-size: 24px;
    }
    .form-check-label{
        font-size: 10px;
    }
    .label-desc{
        font-size: 9px;
    }
    .freelancers.dynamics.sap .text{
        width: 90%;
        padding-top: 80px !important;
    }
    .freelancers.dynamics.sap .btns{
        width: 10%;
    }
    .possibilities.sap .btns{
        margin: 0;
    }
    .talk-dynamic .left .text ul li p{
        width: 70%;
    }
}
@media(max-width: 768px) {
    .header-wrapper .header-info .header-text p {
        width: 80%;
        font-size: 20px;
    }
    .btn-custom-warning,
    .btn-custom-primary {
        padding: 10px 15px;
    }
}
@media (max-width: 425px){
    section,
    .freelancers .header,
    .header-wrapper,
    .join .header-wrapper,
    .clients .header{
        height: auto !important;
    }
    .header-wrapper .header-info{
        padding: 20px;
        padding-top: unset;
    }
    .header-wrapper .header-info .header-text h1{
        font-size: 15px;
    }
    .header-wrapper .header-info .header-text p{
        width: 100%;
        font-size: 12px;
    }
    .header-info .btns a{
        font-size: 20px;
    }
    .what-is .text h2{
        margin-bottom: 20px;
    }
    .what-is .text h4{
        font-size: 22px;
    }
    .what-is .text p{
        font-size: 15px;
    }
    .community .section-title{
        font-size: 30px;
    }
    .join .info{
        padding-top: 20px;
        padding-left: 20px;
        padding-bottom: 30px;
    }
    .join .info .text h2{
        font-size: 20px;
        margin-bottom: 10px;
    }
    .join .info .text p{
        font-size: 17px;
        margin-bottom: 10px;
    }
    .join .info .btns{
        margin-top: 0;
    }
    .join .info .btns button{
        width: 60%;
        height: 50px;
        font-size: 19px;
        margin: 0;
        margin-bottom: 20px;
    }
    .to-start .text{
        padding-top: 20px;
        padding-right: 20px;
        padding-left: 20px;
    }
    .to-start p,
    #accordionExample{
        width: 100%;
    }
    .to-start .img img{
        display: none;
    }
    .getting-into .text,
    .profit .text{
        width: 100%;
    }
    .getting-into .img,
    .profit .img{
        display: none;
    }
    .join.join-freelancers .info{
        padding-top: 30px;
    }
    .freelancers .text{
        /*width: 85% !important;*/
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .freelancers .text h1{
        font-size: 25px;
    }
    .freelancers .text p{
        font-size: 15px;
    }
    .freelancers.zillancers .text{
        width: 100%;
    }
    .freelancers.zillancers .btns{
        bottom: 10px;
        right: 10px;
    }
    .freelancers.super-team .text{
        width: 100%;
    }
    .freelancers .header{
       background-image:none!important;
    }
    .profit .text{
        padding-left: 20px;
        padding-right: 20px;
    }
    .clients .text{
        width: 90%;
        padding-top: 20px;
        padding-left: 20px;
    }
    .clients .text h1{
        font-size: 20px;
        margin-bottom: 20px;
        width: 100%;
    }
    .clients .text p{
        font-size: 15px;
        padding-right: 20px;
    }
    .get-start{
        height: auto !important;
    }
    .get-start .text{
        padding: 20px;
    }
    .get-start .text h1{
        font-size: 30px;
    }
    .get-start .text p{
        font-size: 22px;
    }
    .to-start{
        height: auto !important;
    }
    .to-start .text,
    .to-start.pay-easily .text{
        width: 100%;
    }
    .getting-into .text{
        padding-left: 20px;
        padding-right: 20px;
    }

    .freelancers.dynamics .text{
        /*width: 100%;*/
        padding-left: 20px;
    }
    .freelancers.dynamics .btns button{
        margin-right: 20px;
    }
    .talk-dynamic .left .text ul{
        margin-bottom: 30px;
    }
    .talk-dynamic .right .form h2.title{
        font-size: 18px;
    }
    .support .info{
        flex-direction: column;
        padding: 20px;
        align-items: flex-start;
    }
    .support .info .text{
        width: 100%;
    }
    .support .info .text p{
        width: 100%;
    }
    .support .info .text h2{
        font-size: 30px;
    }
    .support .info .text span.note{
        font-size: 20px;
        display: block;
        margin-bottom: 10px;
    }
    .support .info .text p{
        font-size: 14px;
        margin-top: 0;
    }
    .support .btns button{
        font-size: 18px;
        height: 60px;
    }
    .comming .section-title{
        font-size: 37px;
    }
    .freelancers.dynamics.sap .text{
        padding-top: 20px;
        padding-left: 20px;
        background-color:none !important;
    }
    .possibilities.sap .btns{
        margin: 0;
    }
    .connect-with.recently .section-title{
        margin-left: 45px;
        font-size: 22px;
    }
    .freelancers .header{
        height: auto !important;
         background-image: none !important;
     
    }
    .freelancers.zillancers .text{
        width: 100%;
    }
    .freelancers.zillancers .btns button{
        font-size: 16px;
        width: 100%;
        height: 50px;
        margin-right: 0;
        padding: 5px;
    }
    .freelancers .text h1{
        font-size: 30px;
    }
    .freelancers .text p{
        font-size: 15px;
    }
    
     .freelancers #textcolor{
        color: white !important;
        
    }
    .freelancers.super-team .text h1{
        font-size: 20px;
    }
    .freelancers.super-team .text h3{
        font-size: 17px;
    }
    .freelancers.super-team .text p{
        font-size: 13px;
    }
    .freelancers.super-team .header{
        background-image: none !important;
    }
    .talk-exper .left{
        justify-content: flex-start;
        padding-left: 20px;
    }
    .talk-exper .left .text,
    .talk-exper .left .text ul li span{
        width: 100%;
    }
    .talk-exper .left{
        padding-top: 25px;
    }
    .freelancers.dynamics .text h1{
        font-size: 36px;
        margin-bottom: 20px;
    }
    .freelancers.dynamics .text p{
        font-size: 15px;
    }
    .freelancers.dynamics .btns{
        margin-bottom: 20px;
    }
    .possibilities .btns{
        margin-left: 20px;
    }
    .possibilities .btns button{
        font-size: 17px;
        height: 60px;
    }
    .talk-dynamic .left{
        padding: 0;
    }
    .freelancers.dynamics.sap .header{
        align-items: flex-start;
    }
    .freelancers.dynamics.sap .text{
        padding: 20px;
        padding-top: 20px !important;
    }
    .freelancers.dynamics.sap .text h1{
        font-size: 24px !important;
    }
    .freelancers.dynamics.sap .btns{
        width: 100%;
        margin: 0;
        padding-left: 20px;
    }
    .possibilities{
        padding-top: 20px;
    }
    .support.about_us .info{
        align-items: flex-start;
    }
    
      #backgroundrot{
        transform: scaleX(-1);
    }
    
    
        #texCol{
        width: 100% !important;
    }
    
    
    .support.about_us .info .text{
        width: 65% !important;
    }
    
    
    
    .about{
        padding: 20px;
    }
    .about h2.title{
        font-size: 30px;
        margin-bottom: 10px;
    }
    .about p{
        font-size: 20px;
    }
    .help-choosing.community{
        padding-top: 20px !important;
    }
    .contact .text{
        padding: 0;
        padding-left: 0;
    }
}
@media (min-width: 763px){
    .connect-with{
        display: block;
    }
    .connect-with.mobile{
        display: none;
    }
}
@media (max-width: 762px){
    .connect-with{
        display: inline-block;
    }
    .connect-with.mobile{
        display: none ;
    }
    .carousel-inner .carousel-item .carousel-box,
    .connect-with.recently .carousel-inner .carousel-item .carousel-box{
        width: 100%;
    }
}
@media (min-height: 900px){
    section,
    .freelancers .header,
    .header-wrapper,
    .join .header-wrapper,
    .clients .header{
        height: auto!important;
    }

    .header-wrapper .header-info{
        padding-top: 0;
        padding-bottom: 30px;
    }
    .get-start{
        padding-bottom: 20px;
    }
    .join .info{
        padding-bottom: 30px;
    }
}
.accordion>.card>.card-header{
    background-color: #fff !important;
}

/*!*=============== End Rabe3 Edit ====!**/


/*@media (min-width: 1200px) and (max-width: 1400px)*/
/*    .slider-area .hero__img {*/
/*        left: -215px;*/
/*        width: 622px;*/
/*    }*/


.slider-height {
    min-height: 600px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
    .slider-height {
        min-height:600px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .slider-height {
        min-height: 600px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-height {
        min-height: 550px;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider-height {
        min-height: 450px;
        
    }
     #hero__img {
        /*left: -63px!important;*/
             left: -5px!important;
          width: 183px!important;
          bottom: -70px!important;
        
    }
}

@media (max-width: 575px) {
    .slider-height {
        min-height: 460px;
    }
}
.slider-height2 {
    background-image: url(../img/hero/about_hero.png);
    min-height: 500px;
    background-repeat: no-repeat;
    background-position: center center;
}
@media (max-width: 575px) {
    .slider-height2 {
        min-height: 260px;
    }
}
.slider-area {
    overflow: hidden;
}
.slider-area .hero__img {
    position: relative;
}
@media (min-width: 1200px) and (max-width: 1400px) {
    .slider-area .hero__img {
        left: -104px;

    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .slider-area .hero__img img {
        height: 550px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-area .hero__img img {
        height: 500px;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider-area .hero__img img {
        height: 400px;
    }
}
.slider-area .hero__caption {
    overflow: hidden;
    padding-top: 16%;

}
@media (max-width: 575px) {
    .slider-area .hero__caption {
        /*padding-top: 38px!important;*/
        /*padding-left: 22px!important;*/
        text-align: initial!important;
    }
}
.slider-area .hero__caption h1 {
    text-transform: normal;
    font-size: 50px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 26px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .slider-area .hero__caption h1 {
        font-size: 60px;
        line-height: 1.2;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-area .hero__caption h1 {
        font-size: 50px;
        line-height: 1.2;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider-area .hero__caption h1 {
        font-size: 35px;
        line-height: 1.2;
        margin-bottom: 26px;
    }
}
@media (max-width: 575px) {
    .slider-area .hero__caption h1 {
        font-size: 33px;
        line-height: 1.2;
        margin-bottom: 26px;
    }
}
.slider-area .hero__caption p {
    font-size: 17px;
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: 39px;
    color: #212025;
    margin-bottom: 60px;
    padding-right: 50px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider-area .hero__caption p {
        padding-right: 0px;
        margin-bottom: 30px;
    }
}
@media (max-width: 575px) {
    .slider-area .hero__caption p {
        margin-bottom: 30px;
        padding-right: 0px;
        margin-bottom: 30px;
    }
}
.slider-area .hero-cap h2 {
    font-size: 70px;
    font-weight: 700;
    text-transform: capitalize;
}
@media (max-width: 575px) {
    .slider-area .hero-cap h2 {
        font-size: 28px;
    }
}



@media (max-width: 575px) {
    .slider-height {
        min-height: 430px;
        align-items: center !important;
        text-align: center !important;

    }


    .slide-bg {
        background: #f0f0f2;
    }

    .slider-active button.slick-arrow {
        position: absolute;
        top: 50%;
        left: 80px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        background: none;
        border: 0;
        padding: 0;
        z-index: 2;
        opacity: 0;
        visibility: hidden;
        height: 60px;
        width: 60px;
        border-radius: 50%;
        cursor: pointer;
        background: #ff2020;
        -webkit-transition: 0.4s;
        -o-transition: 0.4s;
        transition: 0.4s;
    }

    .slider-active button.slick-arrow i {
        font-size: 20px;
        line-height: 60px;
    }

    .slider-active button.slick-next {
        left: auto;
        right: 80px;
    }

    .slider-active button.slick-arrow .secondary-img {
        right: 26px;
    }

    .slider-active button:hover img {
        opacity: 0;
    }

    .slider-active button:hover .secondary-img {
        opacity: 1;
    }

    .slider-active:hover button.slick-prev {
        left: 100px;
    }

    @media only screen and (min-width: 1200px) and (max-width: 1600px) {
        .slider-active:hover button.slick-prev {
            left: 20px;
        }
    }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .slider-active:hover button.slick-prev {
            left: auto;
            right: 10px;
        }
    }
    .slider-active:hover button.slick-next {
        right: 100px;
    }

    @media only screen and (min-width: 1200px) and (max-width: 1600px) {
        .slider-active:hover button.slick-next {
            right: 20px;
        }
    }
    .slider-active:hover button {
        opacity: 1;
        visibility: visible;
    }

    .slider-active button:hover {
        background: #002d5b;
    }

    .slider-active .secondary-img {
        position: absolute;
        opacity: 0;
    }
}