*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    font-family: "Poppins", sans-serif;
    font-style: normal;
}

p{
    margin: 0;
}
h1,h2,h3,h4,h5,h6{
    margin: 0;
    padding: 0;
}

ul{
    margin: 0;
    padding: 0;
    li{
        margin: 0;
        padding: 0;
    }
}
a{
    text-decoration: none;
}
.container{
    max-width: 1300px;
}


header{
    background-color: #fff;
    padding: 13px 0;
    position: sticky;
    top: 0;
    z-index: 999;
    .divide-are{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .logo-area{
           .images{
              max-width: 214px;
              a{
                display: inline-block;
                img{
                    width: 100%;
                }
              }
           }
        }
        .menu-list{
            .cont{
                margin-bottom: 15px;
                text-align: right;
                a{
                    display: inline-block;
                    color: #2F80C1;
                    font-family: "Inter", sans-serif;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    padding-left: 10px;
                    margin-left: 10px;
                    border-left: 1px solid #2F80C1;
                    &:first-child{
                        padding-left: 0;
                        margin-left: 0;
                        border-left: 0;
                    }
                }
            }
            ul{
                li{
                    display: inline-block;
                    padding-left: 20px;
                    &:first-child{
                        padding-left: 0;
                    }
                    a{
                        color: #000;
                        font-family: "Inter", sans-serif;
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: normal;
                        transition: 0.3s ease;
                        &:hover{
                            color: #001373;
                            font-weight: 600;
                        }
                    }
                }
            }
        }
    }
}

.mobilemenu{
    background-color: #fff;
    position: fixed;
    width: 100%;
    top: 111px;
    padding: 0 20px 15px 20px;
    z-index: 999;
    ul{
        li{
            list-style: none;
            margin-top: 10px;
            a{
                  font-size: 14px;
                  color: #000;
            }
        }
    }
}
#menu{
    background-color: transparent;
    width: 20px;
    height: 20px;
    border: none;
}

.banner-section{
    background-color: #001373;
    padding-top: 80px;
    .left-area{
        h1{
            color: #fff;
            font-size: 40px;
            font-style: normal;
            font-weight: 700;
            line-height: 65px;
            text-transform: capitalize;
            span{
             color: #2F80C1;
            }
        }
    }
    .right-area{
        .image-area{
            width: 100%;
            img{
                width: 100%;
            }
        }
    }
}

.about-section{
    padding-top:80px;
    h4{
        color: #010818;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 36px;
        span{
            color: #0AF;
        }
    }
}

.why-choose-section{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    padding-bottom: 80px;
    h4{
        color: #333;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 44px; 
        text-transform: capitalize;
        margin-bottom: 20px;
    }
    p{
        color: #4D4D4D;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
    }
    .img-area{
        text-align: right;
        max-width: 100%;
        padding: 60px;
        padding-top: 0;
        img{
            width:742px;
            max-width: 100%;
        }
    }
    .spacer{
        padding-top: 100px;
    }
    .accordin{
        width: 660px;
        max-width: 100%;
        padding-left: 80px;
        .accordion{
            .accordion-item{
                border: none;
                background-color: transparent;
                margin-bottom: 15px;
                border-bottom: 1px solid #D9D9D9;
                padding-bottom: 15px;
                border-radius: 0;
                .accordion-header{
                    border-bottom: none !important;
                    button{
                       background-color: transparent;
                       color: #000;
                        font-size: 18px;
                        font-style: normal;
                        font-weight: 600;
                        line-height: 34px;
                        padding: 0;
                        border: none;
                        box-shadow: none;
                    }
                }
                .accordion-collapse{
                    .accordion-body{
                        padding: 0;
                        border: none;
                        padding-top: 20px;
                        p{
                            color: #4D4D4D;
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 28px;
                        }
                    }
                }
            }
        }
    }
}

.staffing-solution{
    padding: 80px 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #001373;
    .head-title{
        text-align: center;
        h5{
            color: #FFF;
            font-size: 40px;
            font-style: normal;
            font-weight: 700;
            line-height: 58px;
            text-transform: capitalize;
            margin-bottom: 20px;
            padding-bottom: 20px;
            position: relative;
            &::after{
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                width: 136.121px;
                max-width: 100%;
                background: #2F80C1;
                content: '';
                height: 2px;
                margin: 0 auto;
            }
        }
    p{
        color: #FFF;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
    }
    }
    .slider-area{
        padding-top: 80px;
        padding-left: 60px;
        margin: 0 auto;
        overflow: hidden;
        .owl-carousel{
            .owl-item{
                .item{
                    backdrop-filter: blur(32px);
                    border-image: linear-gradient(to top, #ffffff00 0%, #ffffff4d 100%) 1;
                    border-width: 1px;
                    border-style: solid;
                    border-bottom-width: 0;
                    padding-bottom: 40px;
                    transition: 0.3s ease;
                    &:hover{
                        background: #fff;
                        a{
                            .icon{
                                .arrow{
                                    opacity: 1;
                                }
                            }
                            .content{
                                color: #000;
                            }
                        }
                    }
                    a{
                        padding: 30px;
                        display: inline-block;
                       
                        .icon{
                            display: flex;
                            justify-content: space-between;
                            img{
                                width: 76px;
                                height: 76px;
                                object-fit: contain;
                                &.arrow{
                                    width: 15.4px;
                                    height: 15.5px;
                                    opacity: 0;
                                }
                            }

                        }
                        .content{
                            color: #FFF;
                            h5{
                                font-size: 20px;
                                padding: 20px 0;
                            }
                            p{
                                 line-height: 28px;
                                font-size: 16px;
                            }
                        }
                    }
                }
            }
            .owl-nav{
                text-align: right;
                margin-top: 50px;
                position: relative;
                margin-right: 40px;
                &::after{
                    position: absolute;
                    left: 0;
                    width: 100%;
                    top: 44%;
                    height: 2px;
                    background-color: #FFFFFF57;
                    content: '';
                }
                &::before{
                    position: absolute;
                    left: 0;
                    width: 40%;
                    top: 44%;
                    height: 2px;
                    background-color: #2F80C1;
                    content: '';
                }
                button{
                    position: relative;
                    z-index: 3;
                    padding: 10px 20px !important;
                    border-radius: 4px 0px 0px 4px;
                    background: rgba(255, 255, 255, 1);
                    border-right: 1px solid #2F80C1; 
                    &:last-child{
                        border-radius: 0px 4px 4px 0px;
                        background: rgba(255, 255, 255, 1);
                    }
                }
            }
        }
    }
}

.progess-section{
    padding-top: 60px;
    position: relative;
    .container{
        max-width: 1600px;
    }
    .head-ti{
        h4{
            color: #333;
            font-size: 32px;
            font-style: normal;
            font-weight: 700;
            line-height: 44px; 
            text-transform: capitalize;
            margin-bottom: 20px;
        }
        p{
            color: #4D4D4D;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 30px;
        }
    }
    .cover-set{
        position: relative;
        overflow: hidden;
        margin-top: 30px;
        .arrow-img{
            position: absolute;
            left: -227px;
            bottom: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            transform: scale(0.9);
            img{
                width: 100%;
            }
        }
        .conteyt{
       
        margin-top: 30px;
        ul{
            padding-bottom: 160px;
            li{
                padding: 30px 0;
                position: relative;
                list-style: none;
                width: 770px;
                img{
                    display: none;
                }
                &::after{
                    position: absolute;
                    left: 0;
                    right: 0;
                    width: 100%;
                    content: '';
                    height: 1px;
                    top: 0;
                    background-color: #ABBBD3;
                }
                &::before{
                    position: absolute;
                    right: 0;
                    top: 0;
                    height: 385px;
                    background-color: #ABBBD3;
                    content: '';
                    width: 1px;
                    transform: rotate(347deg);
                    transform-origin: top;
                }
                &:nth-child(2){
                    width: 667.395px;
                    &::after{
                        width: 667.395px;
                    }
                    &::before{
                        height: 313px;
                        transform: rotate(345deg);
                    }
                }
                &:nth-child(3){
                   width: 565.395px;
                    &::after{
                       width: 565.395px;
                    }
                    &::before{
                        height: 241px;
                        transform: rotate(348deg);
                    }
                }
                &:nth-child(4){
                    width: 439.034px;
                    &::after{
                        width: 439.034px;
                     }
                     &::before{
                        height: 139px;
                        transform: rotate(347deg);
                    }
                 }
                
                 
                p{
                    color: #4D4D4D;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 34px;
                    span{
                        color: #2F80C1;
                        font-weight: 600;
                    }
                }
            }
            &.teo{
                position: absolute;
                right: 0;
                left: unset;
                bottom: 0;
                padding-bottom: 50px;
                li{
                    &:nth-child(1){
                        width: 342.722px;
                          &::after{
                            width: 342.722px;
                            bottom: unset;
                            top: 0;
                          }
                          &::before{
                            height: 190px;
                            transform: rotate(96deg);
                            right: unset;
                            left: 0;
                        }
                      }
                      &:nth-child(2){
                        width: 342.722px;
                          &::after{
                            width: 342.722px;
                            bottom: unset;
                            top: 0;
                          }
                          &::before{
                            height: 294px;
                            transform: rotate(120deg);
                            right: unset;
                            left: 0;
                        }
                      }
                }
            }
        }
        }
    }
    .icon-area{
       ul{
        li{
            width: 160px;
            height: 160px;
            border-radius: 50%;
            background-color: #ABBBD3;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 398px;
            bottom: 38px;
            transition: 0.3s ease;
            &:hover{
                background-color: #2F4ECE;
            }
            &:nth-child(2){
                bottom: 132px;
                width: 128px;
                height: 128px;
                left: 556px;
                img{
                    width: 71px;
                }
            }
            &:nth-child(3){
                bottom: 201px;
                width: 112px;
                height: 112px;
                left: 694px;
                img{
                    width: 61px;
                }
            }
            &:nth-child(4){
                bottom: 273px;
                width: 96px;
                height: 96px;
                left: 811px;
            }
            &:nth-child(5){
                bottom: 323px;
                width: 80px;
                height: 80px;
                left: 918px;
            }
            &:nth-child(6){
                bottom: 367px;
                width: 64px;
                height: 64px;
                left: 1006px;
            }
        }
       }
    }
}

.industy-serve{
    background: rgba(0, 175, 240, 0.04);
    .spaer{
        padding-top: 40px;
    }
    h4{
        color: #333;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 44px; 
        text-transform: capitalize;
        margin-bottom: 20px;
    }
    p{
        color: #4D4D4D;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
    }
    ul{
        li{
            list-style: none;
            display: inline-flex;
            gap: 10px;
            margin: 5px;
            a{
                display: flex;
                align-items: center;
                border: 1px solid #2F80C1;
                padding:10px 15px;
                color: #2F80C1;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                color: #2F80C1;
                p{
                    color: #2F80C1;
                    padding-right: 5px;
                }
            }
        }
    }
    .img-area{
        max-width: 100%;
        margin-top: -50px;
        img{
            width: 100%;
        }
    }
}

.partnr{
    padding:80px 0;
    h4{
        color: #333;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 44px; 
        text-transform: capitalize;
        margin-bottom: 20px;
        span{
            color: #0AF;
        }
    }
    p{
        color: #4D4D4D;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
        margin-bottom: 15px;
        a{
            color: #4D4D4D;
            text-decoration: underline;
        }
    }
}

footer{
    background: #0F0155;
    padding: 20px 0;
        p{
            color: #FFF;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 28px;
        }
        .logo-btm{
            display: block;
            text-align: center;
            a{
                display: inline-block;
                text-align: center;
                img{
                    text-align: center;
                }
            }
        }
        .links{
            a{
                display: inline-block;
                color: #FFF;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 28px;
                padding-right: 20px;
            }
            ul{
                display: inline-block;
                li{
                    display: inline-block;
                    padding-right: 10px;
                    &:last-child{
                        padding-right: 0;
                    }
                    a{
                         padding: 0;
                        
                        img{
                            width: 30px;
                            height: 30px;
                            object-fit: contain;
                        }
                    }
                }
            }
        }
}

@media only screen and (max-width: 1600px) {
    .staffing-solution {
        .slider-area {
            padding: 20px 30px;
        }
    }
}

@media only screen and (max-width: 1580px) {
    .staffing-solution {
        .slider-area {
            padding: 20px 30px;
        }
    }
    .progess-section {
        .container{
            max-width: 1300px;
        }
        .cover-set {
            display: flex;
            .arrow-img{
                display: none;
            }
            .conteyt {
                ul {
                    padding: 0;
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
                    gap: 10px;
                    &.teo {
                       position: unset;
                    }
                    li{
                       width: 100% !important;
                        padding: 20px;
                        border: 1px solid #ddd;
                        margin: 10px 0;
                        &::before{
                            content: none;
                        }
                        &::after{
                            content: none !important;
                        }
                        img{
                            display: block;
                            width: 80px;
                            height: 80px;
                            object-fit: contain;
                            filter: invert(1);
                            margin-bottom: 10px;
                        }
                    }
                }
            }
            .icon-area{
                display: none;
                ul{
                    li{
                        position: unset;
                        transform: scale(1) !important;
                        width: 150px;
                        height: 150px;
                    }
                }
            }
        }
    }
}
@media only screen and (max-width: 1370px) {
.partnr {
    padding: 40px 0;
}
}


@media only screen and (max-width: 1260px) {
    .banner-section .left-area h1 {
        font-size: 32px;
        line-height: 48px;
    }
    .about-section {
        padding-top: 40px;
        h4{
            font-size: 18px;
            line-height: 30px;
        }
    }
    .why-choose-section {
        padding-bottom: 40px;
        h4 {
            font-size: 20px;
            margin-bottom: 10px;
            line-height: 25px;
        }
        p{
            font-size: 14px;
            line-height: 25px;
        }
        .spacer{
            padding-top: 20px;
        }
        .accordin {
            padding-left: 30px;
            .accordion {
                .accordion-item{
                    padding-bottom: 10px;
                    margin-bottom: 10px;
                    .accordion-collapse {
                        .accordion-body {
                            p{
                                line-height: 24px;
                            }
                        }
                    }
                }
            }
        }
    }
 .staffing-solution{
    padding: 40px 0;
    .slider-area {
        .owl-carousel {
            .owl-item {
                .item {
                     padding-bottom: 20px;
                    a {
                        padding: 15px;
                        .content {
                            h5{
                                padding: 10px 0;
                                font-size: 18px;
                            }
                            p{
                                font-size: 14px;
                                line-height: 24px;
                            }
                        }
                    }
                }
            }
            .owl-nav {
                margin-top: 20px;
            }
        }
    }
 }
 .progess-section {
    padding-top: 40px;
    .head-ti {
        h4 {
           font-size: 25px;
           margin-bottom: 10px;
           line-height: 24px;
        }
        p{
            font-size: 14px;
            line-height: 24px;
        }
    }
    .cover-set{
        margin-top: 0;
        .conteyt{
            margin-top: 10px;
            ul{
                li{
                    p{
                        font-size: 14px;
                        line-height: 24px;
                    }
                }
            }
        }
    }
}
.industy-serve{
    .row{
        align-items: center;
    }
    .img-area{
        margin-top: 0;
    }
    h4{
        font-size: 25px;
        line-height: 24px;
        margin-bottom: 10px;
    }
    p{
        font-size: 14px;
        line-height: 24px;
    }
    ul{
        margin-top: 10px;
        li{
            a{
                padding: 5px;
                p{
                   font-size: 14px;
                }
            }
        }
    }
}
.partnr {
    padding-bottom: 10px;
    h4 {
        font-size: 25px;
        line-height: 24px;
        margin-bottom: 10px;
    }
    p{
        font-size: 14px;
        line-height: 24px;
    }
}
footer{
    padding: 10px 0;
    p{
        font-size: 14px;
    }
}
header {
    .divide-are {
        .logo-area {
            .images {
                width: 160px;
            }
        }
    }
}
.banner-section{
    padding-top: 40px;
}
}


@media only screen and (max-width: 1100px) {
    .banner-section .left-area h1 {
        font-size: 27px;
        line-height: 40px;
    }
    .about-section {
        padding-bottom: 20px;
        h4 {
            font-size: 16px;
            line-height: 27px;
        }
    }
    .staffing-solution {
        .head-title {
            h5 {
                font-size: 27px;
                margin-bottom: 13px;
                padding-bottom: 13px;
            }
        }
    }
    footer {
        .links {
            text-align: center;
            
        }
    }
    header {
        .divide-are {
            .menu-list {
                .cont{
                    margin-bottom: 5px;
                }
                ul {
                    li {
                        padding-left: 10px;
                        a{
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
}


@media only screen and (max-width: 820px) {
    .banner-section .left-area h1 {
        font-size: 23px;
        line-height: 36px;
    }
    .about-section{
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .why-choose-section {
        padding: 20px 0;
        .img-area {
            padding: 20px;
        }
    }
    .staffing-solution{
        padding: 20px 0;
        .head-title {
            p {
                font-size: 13px;
                line-height: 24px;
            }
        }
    }
    .progess-section{
        padding: 20px 0;
        .cover-set {
            .conteyt {
                ul {
                     gap: 10px;
                     &.teo{
                        margin-top: 10px;
                     }
                    li{
                       margin: 0;
                       
                    }
                    &.teo{
                        padding-bottom: 0;
                    }
                }
            }
        }
    }
    .industy-serve {
        .img-area {
            text-align: center;
            img{
                width: 500px;
                max-width: 100%;
                margin: 0 auto;
            }
        }
    }
    footer {
        p {
            font-size: 12px;
        }
    }
   
}

@media only screen and (max-width: 767px) {
    .banner-section .left-area h1{
        text-align: center;
    }
    .banner-section  .right-area {
        .image-area {
            text-align: center;
            img{
                width: 60%;
            }
        }
    }
    header {
        .divide-are {
            gap: 10px;
            .menu-list {
                display: flex;
                gap: 10px;
            }
            .logo-area{
                .images{
                    width: 125px;
                }
            }
        }
    }
    .mobilemenu {
        top: 92px;
    }
    .why-choose-section {
        h4 br{
            display: none;
        }
        .accordin{
            padding-left: 0;
            padding-top: 20px;
            width: 100% !important;
            .accordion{
               
                .accordion-item {
                    .accordion-header {
                        button{
                            font-size: 16px;
                            line-height: 20px;
                        }
                    }
                    .accordion-collapse {
                        .accordion-body{
                            padding-top: 10px;
                        }
                    }
                }
            }
        }
    }
    footer p{

    text-align: center;
    }
    footer .links{
        margin: 15px 0;
    }
}


@media only screen and (max-width: 500px) {
    .banner-section .right-area {
        .image-area {
            img {
                width: 80%;
            }
        }
    }
    .why-choose-section{
        padding-top: 0;
    }
}


@media only screen and (max-width: 460px) {
header {
    .divide-are {
        padding-top: 20px;
        .menu-list{
           flex-direction: column;
           align-items: end;
           .cont{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            text-align: center;
            background-color: #f1f9ff;
            padding: 2px 0;
            a{
                padding-left: 5px;
                margin-left: 5px;
            }
           }
           
        }
        .logo-area{
            .images{
                width: 109px;
            }
           }
    }
}
.mobilemenu {
    top: 96px;
}
.about-section {
    h4 {
        font-size: 14px;
        line-height: 24px;
    }
}
footer{
    .privacy{
        padding: 0 !important;
        margin-bottom: 5px;
    }
}
}