
/* Banner */
.inner_banner{ margin-bottom: 40px; padding: 80px 0 0px; position: relative; text-align: center;}
.inner_banner::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 350px; background: linear-gradient(180deg, #FFF4F4 60%, rgba(255,255,255,0) 100%); z-index: 1;}
.inner_banner h1{ margin: 0 0 17px; padding: 0; font-size: 65px; font-weight: 600; color: #F43336; text-align: center;letter-spacing: 0.01em;line-height: 1.5;}
.inner_banner .info{ margin: 0 35px 35px; padding: 0; font-size: 22px; line-height: 2; font-weight: 500; color: #111; letter-spacing: 0.02em; text-align: center;}
.inner_banner .banner_cap{ margin: 0 0 0px; padding: 0; display: flex; gap: 35px; justify-content: center; flex-wrap: wrap;}
.inner_banner .course_box{ margin: 0; padding: 0; display: flex; align-items: center; border: 2px solid #CCCCCC;border-radius: 100px;height: 65px;}
.inner_banner .course_box h3{ margin: 0; padding: 16px 25px 17px 15px; font-size: 18px; font-weight: 500; color: #000000; background: #fff; border-radius: 100px;}
.inner_banner .course_box i {
    margin: 0;
    padding: 15.5px;
    border-radius: 100px;
    border: 2px solid #CCCCCC;
    margin: -1px 0px -1px -1px;
}

.inner_banner .container {
    z-index: 100;
    position: relative;
}
.inner_banner h4 {
    color: #000000;
    text-align: center;
    font-size: 30px;
    letter-spacing: 0.03em;
    font-weight: 600;
    margin-bottom: 10px;
}
.inner_banner .course_box i img {
    width: 30px;
    aspect-ratio: auto;
}   
/* Approach */
/* .approach_sec h3{ margin: 0 0 15px; padding: 0; font-size: 40px; font-weight: 600; color: #000; letter-spacing: 0.02em; text-align: center;line-height: 1.16;} */
.approach_sec h4{font-size: 32px; font-weight: 600;color: #111111; letter-spacing: 0.02em; line-height: 1;}
.approach_block{ margin: 0 auto; padding: 185px 0 0; max-width: 1096px; position: relative;}
.approach_block::before{ content: ""; position: absolute; top: 0; left: 50%; background: url(/wp-content/themes/deskcodesolution/assets/images/approach_process_top.svg) center center no-repeat; background-size: 100% 100%; width: 35px; height: 185px; transform: translate(-50%,0);aspect-ratio: auto;}
.approach_block .approach_item{ margin: 0; padding: 0 0 140px; display: grid; grid-template-columns: 1fr 120px 1fr; grid-column-gap: 60px; position: relative;height: auto;width: 100%;}
/* .approach_block .approach_item:nth-child(2){
    padding: 0 0 110px;
}
.approach_block .approach_item:nth-child(7){
    padding: 0 0 80px;
} */
.approach_block .approach_item::before{ content: ""; position: absolute; bottom: 0px; left: 50%; background: url(/wp-content/themes/deskcodesolution/assets/images/approach_process_ic.svg) center center no-repeat; background-size: 100% 100%; width: 35px; height: 35px; transform: translate(-50%,0);aspect-ratio: auto;}
.approach_block .approach_item::after{ content: ""; position: absolute; bottom: 35px; left: 50%; background: url(/wp-content/themes/deskcodesolution/assets/images/approach_process_line.svg) center center; background-size: auto; width: 3px; height: calc(100% - 155px); transform: translate(-50%,0);aspect-ratio: auto;}
.approach_block .approach_item:last-child{ padding-bottom: 0;}
.approach_block .approach_item:last-child::before, .approach_block .approach_item:last-child::after{ display: none;}
.approach_block .approach_item img{
    aspect-ratio: auto;
    height: 80px;
    width: 80px;
}
.approach_block figure{         
    margin: auto;
    margin-top: 0px;
    aspect-ratio: auto;
    height: 100%;
}
.approach_block p{ margin: 0; padding: 0; font-size: 18px; line-height: 35px; color: #333; letter-spacing: 0.02em;line-height: 1.87;}
.approach_block .title{ margin: 0; padding: 0; font-size: 26px; font-weight: 600; letter-spacing: 0.02em; color: #000; text-align: right;line-height: 1.7;top: 20%;right: 0;}
.approach_block .title span{ font-size: 26px; display: block;padding-top: 3%;}

/* Achieve */   
.achieve_sec .top_part{ margin: 0; padding: 0; display: flex; gap: 30px; align-items: end;}
.achieve_sec .top_part .achieve_box:last-child{ margin-bottom: 20px;}
.achieve_box{ margin: 0; padding: 25px; max-width: 392px; border: 1.5px solid #CCCCCC; border-radius: 20px; position: relative;}
.achieve_sec .top_part .achieve_box:first-child{max-width: 432px;}
.main_archive_boxs {
    display: none;
}
.achieve_box::before{ content: ""; position: absolute; top: calc(100% - 11px); left: 50%; transform: translate(-50%, 0); background: url(/wp-content/themes/deskcodesolution/assets/images/achieve_curve2.svg) center center no-repeat; background-size: 100% 100%; height: 146px; width: 24px;}
.achieve_box h3{ margin: 0 0 10px; padding: 0; font-size: 20px; font-weight: 600; color: #F43336; letter-spacing: 0.02em;}
.achieve_box p{ margin: 0; padding: 0; font-size: 18px; line-height: 35px; letter-spacing: 0.02em; }
.achieve_sec i{ margin: -213px 0 20px; padding: 0; display: block; text-align: right;}
.achieve_sec i img{ width: 1150px;}
.achieve_sec .bottom_part{ margin: 0; padding: 0; display: flex; gap: 30px; align-items: start; justify-content: center;}
.achieve_sec .bottom_part .achieve_box:first-child{ margin-top: 65px;}
.achieve_sec .bottom_part .achieve_box::before{ bottom: calc(100% - 11px); top: auto; transform: translate(-50%, 0) rotate(180deg);}
.achieve_sec .archive_mobile_img {display: none;}
/* */
.technology-partner .heading-area{
    padding-top: 0;
    padding-right: 0;
}
.page-template-how-we-work .technology-partner .bg-grid {
    padding: 70px 78px;
}
.technology-partner p{
    font-size: 20px;
    line-height: 1.94;
    width: 95%;
}
/* */
 
@media only screen and (max-width: 1919px) {
    .inner_banner{padding: 70px 0 0; margin-bottom: 35px;}
    .inner_banner h1{ font-size: 55px;}
    .inner_banner h4{font-size: 26px;}
    .inner_banner .info{ font-size: 20px; }
    .inner_banner .banner_cap{gap: 30px;}
    .inner_banner .course_box{
        height: 60px;
    }
    .inner_banner .course_box i {
        margin: 0;
        padding: 13.9px;
        margin-left: -2px;
    }
    .story_sec .left_part{ width: 350px;}
    .story_sec .right_part{ width: calc(100% - 380px);}
    .story_sec .right_part p{ font-size: 16px; }
    .story_sec .count_box small{ font-size: 14px;}
    .story_sec .count_box h3{ font-size: 30px;}
    .story_sec .count_box{ padding: 30px 10px;}
    .story_sec .right_part strong{ font-size: 18px;}
    .vision_sec .nav-link{ font-size: 18px;}
    .vision_sec .tab-content h2{ font-size: 31px;}
    .vision_sec .tab-content p{ font-size: 16px;}
    .vision_sec .dflex{ max-width: 1000px;}
    .value_box span{ font-size: 24px;}
    .value_box p{ font-size: 16px; }
    .value_box{ padding: 22px 20px;}
    .leadership_sec .info{ font-size: 18px; }
    .leadership_box h3{ font-size: 22px;}
    .leadership_box h3 small{ font-size: 16px;}
    .experience_sec .info{ font-size: 18px; }
    .approach_sec h4{font-size: 30px;}
    .approach_block p{ font-size: 16px; }
    .approach_block .title,.approach_block .title span{ font-size: 24px;}
    .approach_block{ max-width: 1000px;}
    .approach_block .approach_item::after{
        bottom: 70px;
    }
    .approach_block .approach_item::before{
        bottom: 35px;
    }
    .achieve_sec .top_part .achieve_box:first-child{ max-width: 392px;}
    .achieve_box{ max-width: 361px; }
    .achieve_box h3{ font-size: 18px;}
    .achieve_box p{ font-size: 16px; line-height: 30px;}
    .approach_block figure{width: 80px;height: 80px;}
    .achieve_sec i img{ width: 1019px;}
    .achieve_sec .top_part .achieve_box:last-child{margin-bottom: 28px;}
    .achieve_sec i{ margin: -176px 0 5px;}
    .achieve_sec .bottom_part .achieve_box:first-child{ margin-top: 82px;}
    .achieve_sec .bottom_part{justify-self: right;padding-right: 150px;}
    .achieve_sec .bottom_part .achieve_box:last-child {margin-top: 10px;}
    .service_sec .info{ font-size: 18px; line-height: 35px; max-width: 950px;}
    .service_sec .service_box .service_title{ font-size: 18px;}
    .service_sec .service_box p{ font-size: 16px; line-height: 30px;}
    .geography_sec .geography_cap .cap_dtl{ font-size: 16px;}
    .geography_sec .geography_dtl figure{ max-width: 1140px;}
    .geography_sec .geography_cap{ top: 172px; max-width: 885px;}
    .client_sec .client_block p{ font-size: 16px; line-height: 30px;}
    .client_sec .client_block .review{ font-size: 18px;}
    .technology-partner p{font-size: 18px;}
}
@media (max-width: 1439px){
    .inner_banner h1{ font-size: 45px;margin-bottom: 10px;}
    .inner_banner h4{font-size: 24px;}
    .inner_banner {
        padding: 60px 0 0;
        margin-bottom: 30px;
    }
    .inner_banner .info {
        font-size: 18px;
    }
    .inner_banner .banner_cap {
        gap: 25px;
    }
    .inner_banner .course_box i img {
        width: 25px;

    }
    .inner_banner .course_box i {
        margin: 0;
        padding: 10px;
        margin-left: -2px;
    }
    .inner_banner .course_box {
        height: 50px;
    }
    .approach_sec h4 {
        font-size: 28px;
    }
    .inner_banner .course_box h3{padding: 12px 23px 12px 14px;font-size: 16px;}
    .achieve_box h3{ font-size: 17px;}
    section.achieve_sec {
        width: 1110px;
        margin: auto;
    }
}
@media (max-width: 1199px){
    .inner_banner h1{ font-size: 40px;}
    .inner_banner .info{ font-size: 18px; }   
    .inner_banner {
        padding: 50px 0 0;
        margin-bottom: 25px;
    }
    .inner_banner .banner_cap{ gap: 25px;padding: 0 20px;}
    .inner_banner h4{font-size: 24px;}
    
    .inner_banner .course_box h3{ padding: 12px 14px;font-size: 15px;}  
    .inner_banner .course_box i {
        height: 45px;
        min-width: 45px;
        width: 45px;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .inner_banner .course_box {
        height: 100%;
    }
    .story_sec .story_inn{ padding: 60px 50px;}
    .story_sec .left_part{ width: 300px;}
    .story_sec .left_part figure{ height: 300px; width: 300px;}
    .story_sec .left_part figure::before{ height: 250px; width: 250px;}
    .story_sec .left_part figure::after{ height: 200px; width: 200px;}
    .story_sec .left_part figure img{ width: 100px;}
    .story_sec .right_part{ width: calc(100% - 330px);}
    .story_sec .count_box{ padding: 20px 10px;}
    .story_sec .right_part p{ font-size: 15px; line-height: 28px;}
    .story_sec .right_part strong{ font-size: 15px;}
    .vision_sec .dflex{ gap: 50px;}
    .vision_sec .tab-content{ width: calc(100% - 300px);}
    .vision_sec .tab-content p{ font-size: 15px; line-height: 28px;}
    .leadership_box figure{ height: 290px;}
    .approach_block p{ font-size: 15px; line-height: 28px;}
    .approach_block .title{ font-size: 22px;}
    .approach_block .title span{ font-size: 22px;}
    .approach_block .approach_item{ padding-bottom: 100px; grid-template-columns: 1fr 100px 1fr;}
    .approach_block .approach_item::after{ height: calc(100% - 135px);bottom: 35px;}
    .approach_block .approach_item::before{bottom: 0;}
    .approach_block figure {
        width: auto;
        max-width: 80%;
    }
    .achieve_sec i img{ width: 860px;}
    .achieve_sec i{ margin: -155px 0 0; text-align: center;}
    .achieve_sec .top_part .achieve_box:last-child{ margin-bottom: 40px;}
    .achieve_sec .bottom_part .achieve_box:last-child {margin-top: 20px;}
    .achieve_sec .bottom_part .achieve_box:first-child{ margin-top: 70px;}
    section.achieve_sec {
        width: 100%;
    }
    .achieve_sec .top_part{ max-width: 952px; margin: 0 auto;}
    .achieve_sec .bottom_part{ max-width: 952px; margin: 0 auto;}
    .achieve_box p{ font-size: 15px; line-height: 28px;}
    .achieve_box h3{ font-size: 16px;}
    .achieve_box::before{ height: 120px; width: 20px;top: calc(100% - 9px);}
    .achieve_box{ max-width: 340px !important;}
    .service_sec .service_box p{ font-size: 15px; line-height: 28px;}
    .service_sec .service_box{ padding: 0 14px 20px;}
    .geography_sec .geography_dtl{ max-width: 950px; margin: 0 auto;}
    .geography_sec .geography_cap { top: 132px; max-width: 765px; grid-column-gap: 40px;}
    .client_sec .client_block p{ font-size: 15px; line-height: 28px;}
    .client_sec .client_block{ padding: 20px;}
    .client_sec .client_block .detail{ margin-bottom: 40px;}
    .technology-partner p {
        font-size: 16px;
    }
    .approach_block::before{
        width: 30px;
        height: 100px;
        background-size: cover;
        background-position: bottom;
    }
    .approach_block{
        padding: 110px 0 0;
    }
}
@media (max-width: 991px){
    .inner_banner{ padding: 00px 0; margin-bottom: 0;}
    .inner_banner h1{ font-size: 30px;}
    .inner_banner{ padding: 0px 0;}
    .inner_banner h1{ font-size: 35px;}
    .inner_banner .info{margin-bottom: 25px;font-size:16px;}
    .inner_banner h4{font-size: 22px;}
    .inner_banner .banner_cap{
        margin: 0 0 0px;
        padding: 0px;
    }
    .inner_banner .course_box h3{ font-size: 14px; padding: 12px;}
    .inner_banner .banner_cap{ gap: 15px 10px;}
    .story_sec{ padding: 50px 0;}
    .story_sec .story_inn{ padding: 30px;}
    .story_sec .left_part{ width: 240px;}
    .story_sec .left_part figure{ height: 240px; width: 240px;}
    .story_sec .left_part figure::before{ height: 200px; width: 200px;}
    .story_sec .left_part figure::after{ height: 160px; width: 160px;}
    .story_sec .left_part figure img{ width: 80px;}
    .story_sec .right_part{ width: calc(100% - 270px);}
    .story_sec .right_part p{ line-height: 25px;}
    .vision_sec{ padding: 50px 0;}
    .vision_sec .dflex{ gap: 30px;}
    .vision_sec .nav-link{ font-size: 17px; padding: 10px 20px;}
    .vision_sec .nav-tabs{ width: 210px;}
    .vision_sec .tab-content{ width: calc(100% - 240px);}
    .vision_sec .tab-content h2{ font-size: 26px;}
    .vision_sec .tab-content p{ line-height: 25px;}
    .value_sec{ padding: 50px 0 20px;}
    .value_box p{ line-height: 25px;}
    .leadership_sec{ padding-bottom: 20px;}
    .leadership_sec .info{ line-height: 30px;}
    .leadership_box figure{ height: 340px;}
    .experience_sec .info{ line-height: 30px;}
    .experience_sec figure{ padding: 15px;}
    .experience_sec{ padding-bottom: 50px;}
    .approach_sec h4{ font-size: 26px;}    
    .approach_block .approach_item{ padding-bottom: 60px; grid-template-columns: 1fr 80px 1fr; grid-column-gap: 30px;}
    .approach_block .title span,.approach_block .title {font-size: 16px;}
    .approach_block p{ line-height: 25px;font-size: 14px;}
    .approach_block .approach_item::after{ height: calc(100% - 115px);}
    .achieve_box p{ line-height: 25px;}
    .achieve_box{ padding: 20px; max-width: 290px !important;}
    .achieve_sec .bottom_part .achieve_box:last-child {
        margin-top: 22px;
    }
    .achieve_sec i{ margin: -115px 0 8px;}
    .achieve_sec i img{ width: 735px;}
    .achieve_sec .top_part,
    .achieve_sec .bottom_part{gap: 20px;}
    .achieve_sec .bottom_part .achieve_box:first-child{margin-top: 68px;}
    .achieve_sec .top_part .achieve_box:last-child{ margin-bottom: 30px;}
    .achieve_sec .bottom_part .achieve_box::before {bottom: calc(100% - 9px);}
    .achieve_sec .bottom_part{padding-right: 80px;}
    .service_sec .info{ line-height: 30px;}
    .service_sec .service_box .service_title{ font-size: 16px; margin: -45px 10px 15px 0;}
    .service_sec .service_box p{ line-height: 25px;}
    .geography_sec .geography_dtl{ max-width: 728px;}
    .geography_sec .geography_cap{ top: 92px; max-width: 595px; grid-column-gap: 20px;}
    .geography_sec .geography_cap .cap_dtl{ font-size: 14px; gap: 10px; margin-bottom: 16px;}
    .geography_sec{ padding-bottom: 50px;}
    .client_sec .client_block .detail{ margin-bottom: 20px;}
    .client_sec{ padding-bottom: 50px;}
    .client_sec .client_block p{ line-height: 25px;}   

    .technology-partner ul{
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .achieve_box h3 {
        font-size: 14px;
    }
    .achieve_box p {
        font-size: 12px;
    }
    .section{
        padding: 0 !important;
    }
    .approach_sec .heading-area .heading,
    .achieve_sec .heading-area .heading
    {
        padding-bottom: 00px;
        margin: 0;
    }
    .approach_block .approach_item {
        padding-bottom: 100px;
    }
    .approach_block {
        padding: 110px 0 0;
    }
    .approach_block::before {
        width: 35px;
        height: 100px;
    }
    #ratings .heading-area .heading {
        font-size: 30px;
    }
    .approach_block .approach_item img{
        width: 60px;
        height: 60px;
    }
}
@media (max-width: 821px){
    .achieve_sec .bottom_part .achieve_box:first-child {
        margin-top: 70px;
    }
    .achieve_sec .top_part .achieve_box:last-child {
        margin-bottom: 37px;
    }
}
@media (max-width: 768px){
    .achieve_sec .top_part .achieve_box:last-child {
        margin-bottom: 40px;
    }
}
@media (max-width: 767px){
    .section{padding: 0 !important;}
    .inner_banner h1 {font-size: 26px;font-weight: 600}
    .inner_banner .info {margin: 0 0 20px 0;font-size: 16px;}
    
    .inner_banner h4{font-size: 20px;}
    .inner_banner .course_box i img {
        width: 25px;
    }
    .inner_banner .course_box h3 {
        font-size: 12px;
        padding: 10px;
    }
    .inner_banner .course_box i {
        height: 40px;
        min-width: 40px;
        width: 40px;
        padding: 7px;
    }
    .approach_block {
        padding: 170px 0 0;
    }
    .inner_banner .course_box {
        width: 65%;
    }
    .story_sec .story_inn{ display: block;}
    .story_sec .left_part{ width: 100%;}
    .story_sec .right_part{ width: 100%;}
    .leadership_box figure{ height: 290px;}
    .achieve_sec i{ display: none;}
    .main_archive_boxs {
        display: block !important;
    }
    .achieve_sec .top_part .achieve_box:last-child{ margin-bottom: 0;}
    .achieve_box{ max-width: 100% !important; }
    .approach_sec h2{
        margin-bottom: 20;
    }
    .achieve_box::before{ display: none;}
    .approach_sec {
        padding-bottom: 00px;
    }
    .approach_sec h4{font-size: 24px;}
    .achieve_sec .bottom_part .achieve_box:first-child{ margin-top: 0;}
    .achieve_sec .top_part{ display: none;}
    .main_part ul li{display: block !important}
    .achieve_sec .bottom_part{ display: none;}
    .achieve_box{ width: 100%;}
    .service_sec .service_box{ padding: 0 20px 20px;}
    .geography_sec .geography_dtl{ max-width: 575px;}
    .geography_sec .geography_cap{ top: 60px; max-width: 500px; grid-column-gap: 20px; grid-template-columns: auto auto auto auto;}
    .geography_sec .geography_cap .cap_dtl{ margin-bottom: 10px;}
    .achieve_sec .archive_mobile_img {
        display: none;
        width: fit-content;
        top: 170px;
        margin: auto;
    }
    .achieve_sec .archive_mobile_img img{
        width: fit-content;
    }
    .achieve_box {
        border: unset;
    }
    .main_part li{
        position: sticky;
        border: unset;
        background-color: #fff;
        border: 1.5px solid #F43336;
        border-radius: 20px;
    }
    .achieve_box p{
        font-size: 14px;
    }
    #page {
        overflow: visible !important; 
    }
    .achieve_sec .heading-area {
        padding-bottom: 30px;
    }
    .approach_block .approach_item::before {
        bottom: 10px;
        width: 30px;
        height: 30px;
        background-size: contain;
    }
    .approach_block .approach_item::after{
        bottom: 30px;
    }
    
    .main_archive_boxs {
        width: fit-content;
    }
    .main_part {
        gap: 20px;
        display: flex;
        flex-direction: column;
    }
    
    .approach_block figure{
        font-size: 60px;
    }
     .inner_banner .course_box {
        width: 70%;
    }    
}
@media (max-width: 575px){
    
    .hero_section h1 {
        font-size: 26px;
        text-align: center;
    }
    .vision_sec .dflex{ display: block;}
    .main_archive_boxs{display: block !important;}
    .vision_sec .nav-tabs{ width: 100%;}
    .vision_sec .tab-content{ width: 100%;}
    .leadership_box figure{ height: auto;}
    .experience_sec figure{ padding: 10px;}
    .approach_block .approach_item{ display: block;}
    .approach_block figure{ margin: 0 auto; width: 60px;height: 60px; display:flex;}
    .approach_block .title{ text-align: center;}
    .approach_block p{ text-align: center;padding-top: 10px;}
    .approach_block .approach_item{ padding-bottom: 100px;}
    .approach_block .approach_item::after{ height: 50px;bottom: 40px;}
    .approach_block{ padding: 90px 0 0;}
    .approach_block::before {
        height: 80px;
        background-position: center bottom;
        background-size: cover;
        width: 30px;
    }
    .geography_sec .geography_cap{ top: 10px; grid-template-columns: auto auto auto;}
    .approach_sec h4 {
        font-size: 22px;
    }
}   
@media (max-width: 400px){
    .main_part ul li:nth-child(1) {top: 200px !important;}  
    .main_part ul li:nth-child(2) {top: 215px !important;}
    .main_part ul li:nth-child(3) {top: 230px !important;}
    .main_part ul li:nth-child(4) {top: 245px !important;}
}