* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
}


/*itms styling starts here*/
/* Add this to your style.css file */
/* Additional recommended styles to ensure proper sizing */
/* Reset default margin/padding and set full height for HTML & body */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

/* Ensure section takes full height */
.pachment_sec {
    width: 100%;
    height: 100%;
}

/* Container should also take full height */
.pachment_sec .pachment_cont {
    width: 100%;
    height: 100%;
}

/* Flex container must stretch to full height */
.pachment_sec .pachment_cont .pachment_flex {
    display: flex;
    justify-content: flex-start;
    height: 100%;
}

/* Final red section - now covers 65% width & 100% height */
.pachment_sec .pachment_cont .pachment_flex .pachment_fir_flex {
    width: 65%;
    height: 100%;
    position: relative;
    /* Needed for fixed children positioning */
}

.patc_fir_fle_head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(51, 51, 51);
    height: 10%;
    padding: 15px;
    color: #Fff;
    position: fixed;
    width: 65%;
    z-index: 10;
    /* Ensure header stays on top */
}

.patc_fir_fle_head_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.patc_fir_fle_head .patc_fir_fle_head_flex_one {
    display: flex;
    align-items: center;
}

.patc_fir_fle_head .patc_fir_fle_head_flex_one .butt {
    width: auto;
    border-radius: 5px;
    padding: 15px 20px;
    font-size: 16px;
    background-color: rgb(85, 85, 85);
    border: 1px solid rgb(85, 85, 85);
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0 2px;
    cursor: pointer;
}

.patc_fir_fle_head_flex_two .ttxt {
    font-size: 18px;
    font-weight: 600;
}

.patc_fir_fle_head_flex_three .butt_dld {
    padding: 15px 20px;
    border-radius: 5px;
    background-color: rgb(109, 190, 69);
    border: 1px solid rgb(109, 190, 69);
    font-weight: 600;
    font-size: 15px;
}

.patc_fir_fle_body {
    background: rgb(85, 81, 81);
    max-height: 900%;
    width: 100%;
    padding-top: 10%;
    padding-bottom: 10%;
    overflow-y: auto;
}

/* Centered image container */
.patc_fir_fle_body .img {
    width: 100%;
    height: 80vh;
    /* Make it at least viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Centered image with proper aspect ratio */
.patc_fir_fle_body .img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Changed from cover to contain to see full image */
}

.patc_fir_fle_footer {
    width: 65%;
    height: 5%;
    bottom: 0;
    padding: 10px 0;
    text-align: center;
    background-color: rgb(51, 51, 51);
    color: #Fff;
    position: fixed;
    z-index: 10;
    /* Ensure footer stays on top */
}

.index_second_flex {
    width: 35%;
    position: fixed;
    padding: 30px 30px;
    right: 0;

}

.index_second_flex .sec_flex_end {
    display: flex;
    justify-content: flex-end;
    font-size: 10px;
    color: rgb(29, 175, 204);
}

.index_second_flex .flex_time {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 40px 0;
    border-bottom: 1px solid #e0e0e0;
}

.index_second_flex .flex_time .fa-clock {
    font-size: 35px;
    color: #e0e0e0;
    margin: 0 5px 0 0;
}

.index_second_flex .flex_time .text_flex {
    font-size: 13.5px;
}

.index_second_flex .head_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.index_second_flex .head_flex .first_head_flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 0;
}

.index_second_flex .head_flex .first_head_flex img {
    width: 25px;
    height: 20px;
    margin: 0 5px 0 0;
}

.index_second_flex .head_flex .first_head_flex h4 {
    font-size: 18px;
    font-weight: 550;
    color: #463c3c;
}

.index_second_flex .head_flex .last_head_flex {
    color: rgb(29, 175, 204);
    font-size: 10px;
}

.sec_flex_bdy_one {
    border-bottom: 1px solid #e0e0e0;
    padding: 0 0 25px 0;
}

.index_second_flex .order_det h3 {
    font-size: 14px;
    font-weight: 550;
    padding: 10px 0;
}

.index_second_flex .order_det p {
    font-size: 13px;
}

.index_second_flex .from_det h3 {
    font-size: 14px;
    font-weight: 550;
    padding: 10px 0;
}

.index_second_flex .from_det p {
    font-size: 13px;

}

.index_second_flex .to_det h3 {
    font-size: 14px;
    font-weight: 550;
    padding: 10px 0;
}

.index_second_flex .to_det p {
    font-size: 13px;

}

.index_second_flex .sec_flex_bdy_two h3 {
    font-size: 17px;
    font-weight: 550;
    padding: 15px 0;
}

.index_second_flex .sec_flex_bdy_two .flex_sec_flex_bdy_two {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.index_second_flex .sec_flex_bdy_two .flex_sec_flex_bdy_two .cir_prog {
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
}

.index_second_flex .sec_flex_bdy_two .flex_sec_flex_bdy_two .border {
    border-right: 5px solid rgb(109, 190, 69);
    height: 100px;
    margin: 0 10px;

}

.index_second_flex .sec_flex_bdy_two .flex_sec_flex_bdy_two .cir_prog .e0e0 {
    background: #e0e0e0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    padding: -5px;
}

.index_second_flex .sec_flex_bdy_two .flex_sec_flex_bdy_two .doc_desc {
    font-size: 14px;
    font-weight: 500;
}

.index_second_flex .sec_flex_bdy_two .flex_sec_flex_bdy_two .doc_desc button {
    margin: 10px 0;
    padding: 10px 30px;
    border-radius: 5px;
    background-color: rgb(109, 190, 69);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}






/*ends here*/
@media (max-width: 767px) {

    /* Main container adjustments */
    .pachment_sec .pachment_cont .pachment_flex {
        position: relative;
        height: 100vh;
    }

    /* Left content section */
    .pachment_fir_flex {
        width: 100%;
        height: 100%;
        position: relative;
    }

    /* Header - positioned behind sidebar */
    .patc_fir_fle_head {
        position: fixed;
        /* Changed from absolute to fixed */
        width: 100%;
        z-index: 5;
        /* Lower than sidebar */
        top: 0;
        left: 0;
    }

    /* Sidebar - overlaps header */
    .index_second_flex {
        width: 80%;
        position: fixed;
        right: 0;
        top: 0;
        height: 100%;
        z-index: 10;
        /* Higher than header */
        background: #fff;
        padding: 30px;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    }

    /* Adjust body content positioning */
    .patc_fir_fle_body {
        padding-top: 60px;
        /* Give space for fixed header */
    }

    /* Centered image container */
    .patc_fir_fle_body .img {
        width: 100%;
        height: 50vh;
        /* Make it at least viewport height */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 20px ;
        box-sizing: border-box;
    }

    /* Centered image with proper aspect ratio */
    .patc_fir_fle_body .img img {
        
        width: 100%;
        height: 100%;
        object-fit: contain;
        /* Changed from cover to contain to see full image */
    }

    /* Footer positioning */
    .patc_fir_fle_footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 5;
        /* Same as header */
    }
}