@import url('StyleSheet.css');
.img-job{
    padding-left:30px;
}
.img-job1 {
    padding-left: 30px;
}
h4 {
    font-size: 22px;
    line-height: 25px;
}
.box-text2 {
    font-size: 15px;
    color: #676767;
    margin-bottom: 10px;
}
.mobile-center-btn {
    display: flex;
    justify-content: center;
    align-items: center; /* Vertical center */
    min-height: 100px;
}
.border-bottom7 {
    border-right: 1px solid #ffc2d9 !important;
}
.border-end5 {
    border-right: 1px solid #ffc2d9 !important;
}
.heading-margin {
    margin-top: 20px !important;
}
.color-pink {
    color: #F92275 !important
}
.head-black2 {
    padding: 220px 00px 0px 00px;
    color: black;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
}
.para-box {
    position: relative;
    left: 60px;
    top: 10px;
    font-weight: 700;
}
.text-no-bold {
    font-weight: 500;
}
.text-start {
    text-align: left !important;
    font-size: 20px;
    line-height: 1.5;
    color: #382e2e;
}
.head-black-box3 {
    padding: 0% !important;
    font-size: 30px;
    color: #050516;
    
    font-weight: 600;
    text-align: center;
    margin-top: -40px !important;
    margin-bottom: 40px;
}
.head-black-box2 {
    padding: 0% !important;
    font-size: 30px !important;
    color: #050516;
    font-size: 250%;
    font-weight: 600;
    text-align: center;
    margin-top: -0px !important;
}
/* Accordion Item Card Styling */
.accordion-item {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    margin-bottom: 15px;
    overflow: hidden;
    border-left: 5px solid #DBDBDB !important;
    transition: transform 0.2s, box-shadow 0.2s;
    padding-left: 10px; /* left margin inside the card for alignment */
}
.long{
    width:450px;
}
.texts-black3 {
    padding: 0px 0px 0px 0px;
    color:#676767;
    font-weight: 450;
    text-align: center;
    line-height: 1.6;
    padding-inline: 10%;
}
.para-text-box {
    font-size: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: 600;
    margin-bottom: 0px;
    color: #0D351F;
}
.timeline {
    position: relative;
    max-width: 1000px;
    margin: 40px auto;
    padding-left: 60px;
}

    /* Grey vertical line */
    .timeline::before {
        content: '';
        position: absolute;
        top: 40px;
        left: 90px;
        width: 2px;
        height: 85%;
        background: #ddd;
        z-index: 9999;
    }

.timeline-box {
    position: relative;
    background: transparent; /* transparent rakha taki line upar aaye */
    margin-bottom: 30px;
}

    .timeline-box p {
        background: #fff;
        padding: 25px 20px;
        border-radius: 8px;
        left: -0px;
        padding-left: 50px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 1;
    }
    .timeline-box img {
        width: 24px;
        height: 24px;
        position: absolute;
        left: 19px;
        top: 35px;
        background: #fff;
        border-radius: 50%;
        padding: 2px;
        z-index: 10000;
    }

.accordion-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
    border-left: 5px solid #ff0360 !important;
}
.btn-request {
    color: #ffffff !important;
    background-color: #F92275 !important;
    padding: 10px 25px !important;
    border-radius: 05px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 30px 0px !important;
    width: 195px !important;
}
.accordion-button {
    background-color: #fff;
    padding: 15px 20px;
    font-weight: 600;
    border: none;
    font-size: 20px !important;
    box-shadow: none;
}
    .accordion-button::after {
        flex-shrink: 0;
        width: var(--bs-accordion-btn-icon-width);
        height: 25px !important;
        margin-left: auto;
        content: "";
        background-image: url('../images/new-greencall/Component 1.png') !important;
        
        background-repeat: no-repeat;
        background-size: var(--bs-accordion-btn-icon-width);
        transition: var(--bs-accordion-btn-icon-transition);
    }
   
    /* Image when accordion is open */
    .accordion-button:not(.collapsed)::after {
        background-image: url('../images/new-greencall/Component 1 (1).png') !important;
       
    }

    .accordion-button::after {
        flex-shrink: 0;
        width: var(--bs-accordion-btn-icon-width);
        height: var(--bs-accordion-btn-icon-width);
        margin-left: auto;
        content: "";
        background-image: var(--bs-accordion-btn-icon);
        background-repeat: no-repeat;
        background-size: var(--bs-accordion-btn-icon-width);
        transition: var(--bs-accordion-btn-icon-transition);
    }
    .accordion-button:not(.collapsed) {
        color: #fff;
        background-color: #ff007a; /* your brand pink for active state */
    }

    .accordion-button:focus {
        box-shadow: none;
    }
.btn-color{
    color:black;
    background-color:white;
    border-left:4px solid grey;
}
.accordion-button:not(.collapsed) {
    color: #000000 !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
}
.accordion-flush .accordion-item {
    border-top: 0;
    border-left: 5px solid #ff0081;
}
.timeline::after {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -2px;
    border-right: 0px dashed #288ced !important;
    height: 100%;
    display: block;
}
.accordion-body {
    padding: 5px 20px;
    color: #676767;
    background-color: white; /* light background for inner body */
    font-size: 0.95rem;
    line-height: 1.6;
}
.accordion-item {
    border-left: 5px solid #ff007a; /* brand pink */
}
.accordion-flush .accordion-item {
    border-right: 0;
    border-left: 0;
    
    border-radius: 0;
}
head-blacked{

}
/* Responsive adjustments */
@media (min-width: 768px) and (max-width: 991px) {
    .accordion-item {
        padding-left: 0;
    }

    .box-text2 {
        font-size: 12px;
        color: #676767;
        margin-bottom: 10px;
    }

    .timeline-box p {
        background: #fff;
        padding: 15px 30px;
    }

    .timeline-box img {
        width: 20px;
        height: 20px;
        position: absolute;
        left: 8px;
        top: 25px;
        background: #fff;
        border-radius: 50%;
        padding: 2px;
        z-index: 10000;
    }

    .long {
        width: 230px;
    }

    .black-color {
        color: black !important;
    }

    .head-black2 {
        padding: 190px 00px 0px 00px;
        color: #F92275;
        font-size: 22px;
        font-weight: 700;
        text-align: center;
    }

    .btn-request {
        color: #ffffff !important;
        background-color: #F92275 !important;
        padding: 10px 10px !important;
        border-radius: 05px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        margin: 30px 0px !important;
        width: 130px !important;
    }

    .timeline::before {
        content: '';
        position: absolute;
        top: 60px !important;
        left: 37px !important;
        width: 2px;
        height: 65% !important;
        background: #ddd;
        z-index: 3;
    }

    .head-black-box3 {
        padding: 0% !important;
        font-size: 22px !important;
        color: #050516;
        font-weight: 600;
        text-align: center;
        margin-top: -30px !important;
        margin-bottom: 40px;
    }

    .text-start {
        text-align: left !important;
        font-size: 18px;
        line-height: 1.5;
        color: #382e2e;
    }

    .heading-skilling2 {
        font-size: 18px;
        text-align: start;
    }

    .img-job {
        padding-left: 0px;
        padding-top: 0px;
        width: 50%;
        display: block;
        margin: 0px 0%;
    }

    .img-job1 {
        padding-left: 0px;
        padding-top: 0px;
        width: 50%;
        display: block;
        margin: 0px 0%;
    }

    .head-black-box2 {
        padding: 0%;
        color: #050516;
        font-size: 22px !important;
        font-weight: 600 !important;
        text-align: center;
    }

    .texts-black2 {
        padding: 0px 0px 10px 0px;
        color: #000000;
        font-size: 14px !important;
        font-weight: 450;
        text-align: center;
        line-height: 1.6;
        padding-inline: 10%;
    }

    .tech-img {
        max-height: 60px !important;
        object-fit: contain;
    }
}
@media (max-width: 600px) {
    .img-job {
        padding-left: 0px;
        padding-top: 0px;
        width: 60%;
        position: relative;
        left: 80px;
    }
    .box-text2 {
        font-size: 12px;
        color: #676767;
        margin-bottom: 10px;
    }
    .lg-br {
        display: none;
    }
    .img-job1 {
        padding-left: 0px;
        padding-top: 0px;
        width: 60%;
        position: relative;
        
    }
    .font-button {
        font-size: 14px !important;
    }
    .para-text-box {
        font-size: 12px;
    }
    .texts-black3 {
        padding: 0px 0px 0px 0px;
        color: #676767;
        font-size: 12px;
    }
    .accordion-body {
        padding: 5px 20px;
        color: #676767;
        background-color: white;
        font-size: 12px;
        line-height: 1.6;
    }
        .border-end5 {
        border-right: 1px solid #ffff0000 !important;
        border-bottom: 1px solid #ffc2d9 !important;
    }
    .border-bottom9 {
       
    }
    .head-black2 {
        padding: 160px 00px 0px 00px;
        color: #F92275;
        font-size: 20px;
        font-weight: 600;
        text-align: center;
    }
    .para-box {
        position: relative;
        left: 10px;
        top: 10px;
        font-size: 13px;
    }
    .timeline::before {
        content: '';
        position: absolute;
        top: 60px;
        left: 36px;
        width: 2px;
        height: 70% !important;
        background: #ddd;
        z-index: 3;
    }
    .card-heading {
        font-size: 16px !important;
    }
    .head-black-box2 {
        padding: 0% !important;
        font-size: 20px !important;
        color: #050516;
        font-size: 250%;
        font-weight: 600;
        text-align: center;
        margin-top: -20px !important;
    }
    .timeline-box img {
        width: 20px;
        height: 20px;
        position: absolute;
        left: 8px;
        top: 35px;
        background: #fff;
        border-radius: 50%;
        padding: 2px;
        z-index: 4;
    }
    .head-black-box3 {
        padding: 0% !important;
        font-size: 20px !important;
        color: #050516;
        font-weight: 600;
        text-align: center;
        margin-top: -30px !important;
        margin-bottom: 40px;
    }
    .heading-skilling2 {
        font-size: 18px;
        text-align: center;
    }
    .long {
        width: auto !important;
    }
    .accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
        border-radius: 0;
        font-size: 12px !important;
    }
    .head-black {
        padding: 180px 00px 0px 00px !important;
        color: #F92275;
        font-size: 20px;
        font-weight: 600;
        text-align: center;
    }
    .btn-request {
        color: #ffffff;
        background-color: #F92275;
        padding: 10px 0px;
        width: 180px;
        border-radius: 05px;
        font-size: 16px;
        margin-left: 0px !important;
        margin-top: 20px;
    }
}

.box-card {
    display: flex;
    align-content: center;
    justify-content: center;
}
.section-title {
    font-weight: 700;
    margin-bottom: 10px;
}

.tech-card {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 90%;
}

    .tech-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

.tech-img {
    max-height: 100px;
    object-fit: contain;
}
.grey {
    background-color: #F7F7F7;
}
.head-black-box2 {
    padding: 0%;
    font-size:30px;
    color: #050516;
   
    font-weight: 700;
    text-align: center;
}
.texts-black2 {
    padding: 20px 0px 60px 0px;
    color: #676767;
    font-size:16px;
    font-weight: 450;
    text-align: center;
    line-height: 1.6;
    padding-inline: 10%;
}
.accordion-button {
    font-size: 14px !important;
}
.feature-box {
    border: 1px solid #e0e0e0;
    font-size: 14px;
    font-weight: 500;
    background: #f9f9f9;
    transition: 0.3s;
}

    .feature-box:hover {
        background: #fff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }



.col-md-5 .position-relative {
    position: relative;
    z-index: 1; 
}
.feature-box-large {
    
    display: flex;
    align-items: center;
    position: relative;
    
    z-index: 2; 
    background: #fff; 
}

@media (max-width: 1200px) {
    .para-text-box {
        font-size: 14px;
        padding-top: 5px;
        padding-bottom: 5px;
        font-weight: 600;
        margin-bottom: 0px;
        color: #0D351F;
    }
    .long {
        width: 380px;
    }
}
@media (max-width: 1024px) {
    .para-text-box {
        font-size: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        font-weight: 600;
        margin-bottom: 0px;
        color: #0D351F;
    }
    .timeline::before {
        content: '';
        position: absolute;
        top: 40px;
        left: 50px;
        width: 2px;
        height: 80%;
        background: #ddd;
        z-index: 3;
    }
    .head-black-box3 {
        padding: 0% !important;
        font-size: 26px ;
        color: #050516;
       
        font-weight: 600;
        text-align: center;
        margin-top: -30px !important;
        margin-bottom: 40px;
    }
    .timeline {
        position: relative;
        max-width: 1000px;
        margin: 0px auto;
        padding-left: 20px;
    }
    .long {
        width: 300px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .desktop-only {
        display: none;
    }
}

@media (max-width: 600px) {
    .desktop-only {
        display: none;
    }
}
@media only screen and (max-width: 600px) {

    .mobile-center-btn {
        display: flex;
        justify-content: center;
        align-items: center; /* Vertical center */
        min-height: 60px !important;
    }

    .btn-views-new {
        margin-top: 20px;
    }
}


/* Mobile (max-width 768px) – center in flex */
@media (min-width: 768px) and (max-width: 991px) {
    .mobile-center-btn {
        display: flex;
        justify-content: center;
        align-items: center; /* Vertical center */
    }
}