/* [Master Stylesheet] */

/* ----------------------------------------------------------
    :: Template : Green Code
    :: Author:  Turbo
    :: Author URL: Max7.info
    :: Version: 1.0
    :: Created: 08 July 2020
    :: Last Updated: 02 July 2020
    ---------------------------------------------------------- */

/* -------------------------------------------------
    ============ PLACE YOUR CUSTOM CSS HERE ============
    ------------------------------------------------- */



/*start my style */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: 'Cairo', sans-serif;
}

.navbar-nav {
    float: left;
}

.navbar-nav>li>.dropdown-menu:before {

    right: 15px;
    top: -15px;
    left: unset;
}
.navbar .dropdown-menu>li>a:focus, .navbar .dropdown-menu>li>a:hover {
    color: #262626;
    text-decoration: none;
    background-color: #6ebe01;
    padding-left: 15px;
    padding-right: 25px;

}
.slider img {
    transform: scaleX(-1);

}
.slider #slider-one {
    background: url(../images/slider/slide1-ar.jpg);
    background-size: cover;
}

.slider #slider-two {
    background: url(../images/slider/slide2-ar.jpg)center;
    background-size: cover;
}

.slider #slider-three {
    background: url(../images/slider/slide3-ar.jpg)center;
    background-size: cover;
}

.slider #slider-four {
    background: url(../images/slider/slide4-ar.jpg)center;
    background-size: cover;
}

.slider #slider-five {
    background: url(../images/slider/slide5-ar.jpg)center;
    background-size: cover;
}

.slider #slider-six {
    background: url(../images/slider/slide6-ar.jpg)center;
    background-size: cover;
}

.slider #slider-seven {
    background: url(../images/slider/slide7-ar.jpg)center;
    background-size: cover;
}

.slider #slider-eight {
    background: url(../images/slider/slide8-ar.jpg)center;
    background-size: cover;
}

.slider-box {
    text-align: right;
}

.slider .carousel-indicators {
    left: unset;
    right: 109%;
}

@media (max-width:767px) {
    .slider .carousel-indicators {
        left: unset;
        right: 63%;
    }
    .navbar-toggle {
        float: left;
    }
    .navbar-nav {
        float: none;
    }
}


.about-us .line,
.hosting .line,
.recruitment .line,
.footer .line, .single-project .line, .single-services .line  {
    color: #fff;
    shape-outside: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
    clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%);
}


.about-us .line h1,
.hosting .line h1,
.recruitment .line h1,
.footer .line h1, .single-project .line h1, .single-services .line h1 {
    padding-right: 133px;
    padding-left: unset;
}

@media (max-width:767px) {

    .about-us .line h1,
    .hosting .line h1,
    .recruitment .line h1,
    .footer .line h1, .single-project .line h1, .single-services .line h1 {
        padding-right: 10px;
        padding-left: unset;
    }
}

.services h1::after,
.projects h1::after,
.testimonials h1::after,
.contact h1::after,
.team h1::after {

    margin-right: 20px;
    margin-left: unset;

}

.services h1::before,
.projects h1::before,
.testimonials h1::before,
.contact h1::before,
.team h1::before {

    margin-right: -35px;
    margin-left: unset;

}

.hosting .package .info {
    text-align: right;
}

.projects .owl-carousel {
    direction: ltr;
}

.carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next {
    transform: rotate(180deg);
}

.testimonials p,
.testimonials h3 {
    text-align: right;
}
.faq .panel-default>.panel-heading i{
    float: left;
    color: #6FBE00;
}

.recruitment {
    padding: 60px 0;
    padding-top: 80px;
    color: #fff;
    background: url(../images/recruitment/bg-ar.jpg);
    background-size: cover;
    position: relative;
    /* height: 50vh; */
    overflow-x: hidden;
}
@media only screen and (max-width: 600px) {
    .recruitment {
        height: unset;
        padding: 80px 0;
        background: url(../images/recruitment/bg-ar.jpg) center;

    }

}
.contact {
    padding: 80px 0;
    background: url(../images/contact/bg-ar.jpg) center;
    background-size: cover;
    color: #fff;
    overflow-x: hidden;
    padding-bottom: 120px;
}
.contact-inter {
    background-image: none;
    background-color: #191c18;
}
/* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */
.social-bar .icon-bar {
    position: fixed;
    padding-left: unset;
    padding-right: 15px;
    right: unset;
    left: 0;
    margin-right: unset;
    margin-left: -35px;

}

.social-bar .icon-bar:hover,
.social-bar .icon-bar:focus,
.social-bar .icon-bar:active {
    margin-right: unset;
    margin-left: 0;
    color: #fff;

}


/* Style the social media icons with color, if you want */

.package.package-left {
    margin-right: unset;
    margin-left: -30px;

}

.package.package-right {
    margin-left: unset;
    margin-right: -30px;


}

.contact .styledSelect {
    background: #8F9E7A5E url(../images/contact/arrow.png) no-repeat 4%;
}

.contact-internal .styledSelect {
    padding-right: 15px;
    background: #8F9E7A5E url(../images/contact/arrow.png) no-repeat 4%;
}


/* start single project */

.single-project .carousel-indicators {
    position: absolute;
    bottom: -50px;
    z-index: 15;
    width: unset;
    padding-left: 0;
    margin-left: unset;
    text-align: unset;
    list-style: none;
    margin-left: unset;
    right: 75%;
}
.single-project .info h2::before {
    position: absolute;
    height: 35px;
    width: 200px;
    background-color: #6ebe01;
    left: unset;
    right: -220px;
    content: "";
}

.web-app h2::before {
    left: unset;
    right: -220px;
}
.design h2::before {
    position: absolute;
    height: 35px;
    width: 200px;
    background-color: #6ebe01;
    left: unset;
    right: -220px;
    content: "";
}
.faq .panel-heading  a:before {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    float: left;
    transition: all 0.5s;
    color: #6FBE00;
 }

.projects-shuffle .shuffle-btn {
    display: block;
    padding-left: 0;
    margin: -50px auto 0 auto;
    border-radius: 4px;
    width: 100%;
    position: absolute;
    right: 50%;
    margin-right: -171px;
}
.mobile-ltr {
    direction: ltr;
}
@media only screen and (max-width: 600px) {
    .design h2::before {
        left: unset;
        right: -207px;
    }
    .web-app h2::before {
        left: unset;
        right: -207px;
    }

    img.design {
        margin-top: 30px;
    }
    .package.package-left {
        margin-right: unset;
        margin-left: unset;

    }

    .package.package-right {
        margin-left: unset;
        margin-right: unset;


    }

    .projects-shuffle .shuffle-btn {
        display: block;
        padding-left: 0;
        margin: -105px auto 0 auto;
        border-radius: 4px;
        width: 100%;
        position: absolute;
        right: 40%;
        margin-right: -120px;
    }
    .projects-shuffle {
        padding-top: 120px;
    }
    .line.seo-line h1 {
        font-size: 10px !important;
    }
}

/*------------------------- media query ----------------------------*/

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

    .services h1,
    .projects h1,
    .team h1,
    .testimonials h1,
    .contact h1{
        font-size: 32px;
    }

    .services h1::after,
    .projects h1::after,
    .team h1::after,
    .testimonials h1::after,
    .contact h1::after {
        width: 13px;
        height: 13px;
        margin-left: 15px;
        margin-top: 12px;
    }

    .services h1::before,
    .projects h1::before,
    .team h1::before,
    .testimonials h1::before,
    .contact h1::before {
        width: 13px;
        height: 13px;
        margin-top: 12px;
        margin-left: -30px;
    }


}

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

    .about-us .line {
        padding: 3px 10px;
        max-width: 160px;

    }

    .hosting .line {
        max-width: 200px;
    }
    .single-services .line {
        max-width: 200px;
    }
    .single-services .line h1 {
        font-size: 17px;
    }
    .single-services .line h1.vr-line {
        font-size: 9px;
    }
    .single-services .line.special-line {
        max-width: 300px;

    }

    .recruitment .line {
        max-width: 170px
    }

    .about-us .line h1 {

        padding-left: 10px;
        font-size: 24px;
    }

    .hosting .line h1 {
        font-size: 20px;
    }

    .recruitment .line h1 {
        font-size: 24px;
    }
    .single-project .line h1
    {
        font-size: 24px;
        padding-left: 10px;
        font-size: 24px;
    }
    .contact .contact-info {
        text-align: center;
    }

    .contact .contact-img img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .single-project .carousel-indicators {

        right: 70%;
    }
    .single-project .info p {
        width: 100%;
    }
    .hosting .line {
        margin-right: -22px;
    }

}
/*------------------------ ipad -------------------- */

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .nav>li>a {
        padding-left: 3px;
        padding-right: 3px;
    }
    .about-us .line {
        padding: 6px 10px;
    }
    .hosting .line h1 {
        padding-left: unset;
        padding-right: 15px;
    }
    .about-us .line h1 {
        padding-left: unset;
        padding-right: 15px;
    }
    .recruitment .line h1{
        padding-left: unset;
        padding-right: 15px;
    }
    .hosting .package .info {
        padding: 20px;
    }

    .footer .line h1 {
        padding-right: 15px;
        padding-left: unset;

    }
}
@media only screen and (min-width: 993px) and (max-width: 1024px) {
    .nav>li>a {
        padding-left: 10px;
        padding-right: 10px;
    }
    .testimonials .carousel-control {
        width: 10%;
    }
}

.contact .styledSelect {
    padding-right: 15px;
    font-weight: 300;
}
/* start social bar */


.social-bar .menu {
    display: flex;
    position: fixed;
    right: unset;
    left: 15px;
    top: 82%;
    z-index: 2000;
}


.social-bar .menu .main-btn {
    position: relative;
    width: 50px;
    height: 50px;
    background: #151714;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.social-bar .menu a {
    text-decoration: none;
    color: #fff;
}

.social-bar .main-btn span {
    display: block;
    width: 60%;
    height: 4px;
    background: #6ebe01;
    margin: 3px 0px;
    border-radius: 10px;
    transition: all 300ms ease;
}

.social-bar .menu .list {
    display: flex;
}

.social-bar .menu .list .item {
    z-index: 1;
    position: absolute;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #151714;
    left: 0px;
    transition: all 400ms ease;
    font-size: 120%;
    color: #e7e7e7;
    border-radius: 50%;
    top: 0
}

.social-bar .menu.active .item:nth-child(4) {
    /* left: -70px; */
    top:-70px;
    transition-delay: 0ms;
    background: #0077B5;
}

.social-bar .menu.active .item:nth-child(3) {
    /* left: -140px; */
    top:-140px;
    transition-delay: 400ms;
    background: #dd4b39;
}

.social-bar .menu.active .item:nth-child(2) {
    /* left: -210px; */
    top:-210px;
    transition-delay: 800ms;
    background: #0084b4;
}

.social-bar .menu.active .item:nth-child(1) {
    /* left: -280px; */
    top:-280px;
    transition-delay: 1200ms;
    background: #3b5998;
}

.social-bar .menu.active .main-btn span:nth-child(2) {
    opacity: 0;
}

.social-bar .menu.active .main-btn span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.social-bar .menu.active .main-btn span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}
/* end social bar */