.project {
    margin: 250px 0 100px
}

.main {
    position: relative;
    z-index: 10
}


.display-768{
    display:none
}

.headerDeactive {
    background-color: #5a5c5e;
    padding: 1% 3%;
    margin: 0 7.5px;
    transition: all 0.3s ease-out 0s
}



.ProjectHeader a {
    display: flex
}

.ProjectHeader h2 {
    margin-bottom: 0;
    color: white;
    font-family: Ebrima;
    font-size: 180%
}


.admLogo {
    width: 36px;
    height: 26px;
    margin: 9px 10px 0 0;
}


.card-body img {
    width: 100%;
    height: 100%;
    margin-top: 0
}


.mainContent {
    padding: 6% 15% 0;
    background-image: url('../../Image/BG3.png');
    background-size: cover;
    background-repeat: no-repeat
}

.firstRow {
    margin-bottom: 10px
}


.padding-left-right {
    padding: 0 5px !important
}

.padding-right {
    padding: 0 5px 0 0 !important
}


.padding-left {
    padding: 0 0 0 5px !important
}

.firstRow img {
    margin: 0
}


.secondRow img, .firstRow img {
    box-shadow: 0 0 10PX #D7D6D6
}


.collapseItem {
    margin-bottom: 30px
}


.mainContent2 {
    padding: 6% 15% 0;
    background-image: url('../../Image/BG4.png');
    background-size: cover;
    background-repeat: no-repeat
}


.card-body {
    position: relative
}



.projectInfo {
    position: absolute;
    bottom: 13%;
    right: 17%;
    text-align: right
}

.custom-container {
    width: 1200px
}

.projectInfo h4 {
    text-transform: uppercase;
    font-weight: 600;
    color: #717070;
    margin-bottom: 0
}


.projectInfo p {
    text-transform: uppercase;
    color: #717070;
    margin-bottom: 0;
    font-size: 120%
}


#collapse-1 h4 {
    font-size: 203%
}


.icon img {
    position: absolute;
    right: 0;
    width: 18px;
    height: 16px;
    margin-top: 15px;
    margin-right: 0;
    transition: transform .4s ease-in-out !important;
    transform: rotate(0deg);
}

.headerDeactive a {
    position: relative
}





a[aria-expanded="true"] .icon img {
    transition: transform .4s ease-in-out;
    transform: rotate(180deg);
}


.padding-20-fixed {
    padding: 0 16% !important
}

.padding-10-fix {
    padding: 0 10%
}

.padding-17-fix {
    padding: 0 17%
}


.workflow-section {
    padding-top: 100px
}

.mainContent {
    height: 996px
}

.mainContent2 {
    height: 637px
}


@media only screen and (max-width:1400px) {
    .custom-container {
        width: 1000px
    }


    .workflow-section .area-title h1 {
        font-size: 200%
    }


    .single-workflow h2 {
        font-size: 165%;
        margin: 20px 0 4px
    }


    .ProjectHeader h2 {
        font-size: 160%
    }


    .project {
        margin: 100px 0 0 !important;
    }

    .mainContent {
        height: 830px
    }

    .mainContent2 {
        height: 532px
    }
}



@media only screen and (max-width:1200px) {
    .custom-container {
        width: 850px
    }


    .blog-image {
        max-width: 100%
    }


    .ProjectHeader h2 {
        font-size: 135%
    }


    .admLogo {
        width: 30px;
        height: 22px;
        margin: 6px 10px 0 0
    }


    .icon img {
        width: 15px;
        height: 13px;
        margin-top: 11px
    }

    .project {
        margin: 50px 0 0 !important;
    }


    footer {
        margin-top: -70px
    }

    .mainContent {
        height: 702px;
        padding: 5% 12% 0
    }

    .mainContent2 {
        height: 450px;
        padding: 5% 12% 0
    }
}


@media only screen and (max-width:991px) {
    .custom-container {
        width: 680px
    }

    .workflow-section {
        padding-top: 70px
    }

    .single-workflow {
        background-color: #f4f4f470;
        border: 0.5px solid #e3e3e396
    }

    .blog-image img {
        width: 100%
    }


    .single-workflow {
        display: flex
    }

    .display-grid- {
        display: grid
    }

    .mainContent {
        height: 562px;
        padding: 4% 11% 0
    }

    .mainContent2 {
        height: 360px;
        padding: 4% 11% 0
    }

    .main .col-md-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }

    .headerDeactive {
        margin: 0 3px
    }
}


@media only screen and (max-width:768px) {
    .custom-container {
        width: 500px
    }

    .display-grid- {
        display: grid
    }

    .workflow-details {
        padding: 2% 4% 5%
    }

    .workflow-phone-padding {
        padding: 0 15px
    }

    .ProjectHeader h2 {
        font-size: 120%
    }


    .sliderHeader {
        background-color: #5a5c5e;
        display: flex
    }

    .main i {
        color: #5a5c5e;
        font-size: 36px !important
    }


    .next {
        width: 9%;
        text-align: center;
        background-color: #f2f2f2;
        border-bottom: 0.5px solid #e3e3e396;
        padding: 2% 0
    }

    .prev {
        width: 9%;
        text-align: center;
        background-color: #f2f2f2;
        border-bottom: 0.5px solid #e3e3e396;
        padding: 2% 0
    }

        .prev:hover {
            cursor: pointer;
        }

    .next:hover {
        cursor: pointer
    }

    .header {
        width: 82%;
        padding: 2% 0;
    }

    .sliderHeader h2 {
        font-size: 22px;
        color: white;
        margin: 0;
        line-height: 33px;
        text-align: center
    }

    .owl-carousel.owl-loaded {
        padding: 4% 0
    }


    .shadow {
        border: 0.5px solid #e3e3e396
    }

    .single-workflow {
        display: grid
    }

    .order-2 {
        order: unset !important
    }


    .sliderItem{
        margin-bottom:50px
    }


    .display-768{
        display:block
    }

    .hide-768{
        display:none
    }


    .workflow-details{
        max-width:100%;
        width:100% !important
    }
}


@media only screen and (max-width:602px) {
    .custom-container {
        width: 80%
    }

    .main {
        margin-bottom: 100px
    }

    .workflow-details {
        padding: 2% 4% 6%
    }

    .sliderHeader h2{
        font-size:21px;
        line-height:37px
    }
    .prev, .next, .header{
        padding:1% 0
    }

    .sliderHeader h2{
        font-size:20px
    }

    .main i {
        font-size: 32px !important
    }
}


@media only screen and (max-width:480px){
    #slider5-next, #slider5-prev {
        padding: 7% 0
    }
}


@media only screen and (max-width:447px) {
    #slider3-next, #slider3-prev {
        padding: 7% 0
    }
}



@media only screen and (max-width:500px) {
    .custom-container {
        width: 90%
    }

    .workflow-section .area-title h1 {
        font-size: 150%
    }


    .single-workflow h2 {
        font-size: 130%
    }

    .header{
        padding:1%
    }

    .owl-carousel.owl-loaded{
        padding:6% 0
    }
}

@media only screen and (max-width:400px){
    .sliderHeader h2{
        font-size:17px
    }

    

    .owl-carousel.owl-loaded{
        padding:9% 0
    }
}