.process{
    padding-bottom: 80px;
}
.process h1{
    padding: 50px 0 20px 0;
    -webkit-font-smoothing: antialiased;
    font-weight: 300;
    font-size: var(--font_40);
}
.process_content{
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
}
.process_content_2{
    /* margin-top: 55px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0, .35);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0, .35);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0, .35);
    padding: 20px 25px; */
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 1, 1, .6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 6;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content_2_container{
    height: 800px;
    background: var(--cream_color);
    border-radius: 15px;
    width: 1200px;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0, .35);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0, .35);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0, .35);
}
.content_2_control{
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0, .35);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0, .35);
    box-shadow: 0px 0px 30px 0px rgba(0,0,0, .35);
}
.content_2_control button{
    border: none;
    outline: none;
    font-size: var(--font_28);
    background: none;
}
.content_2_control button:hover{
    cursor: pointer;
    color: var(--primary_color);
}
.content_2_content {
    padding: 0 75px 25px 75px;
    height: 710px;
    overflow-y: scroll;
}
.content_2_content_head{
    padding: 25px 0 5px 0;
}
.content_2_content_head span{
    color: var(--primary_color);
    display: block;
    -webkit-font-smoothing: antialiased;
    font-weight: bold;
}
.content_2_content_head h1{
    margin: 0;
    padding: 0;
    padding-left: 27px;
}
.content_2_content_2 {
    padding: 0 110px 25px 110px;
    height: 710px;
    overflow-y: scroll;
}
.step_div{
    
}
.step_div span{
    display: block;
}
.middle_line{
    content: "";
    height: 1px;
    width: 100%;
    background: var(--primary_color);
}


.numbering_info{
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: 6px 1fr;
    grid-template-columns: 6px 1fr;
    align-self: start;
    padding: 10px 0;
}
.numbering_info span{
    margin-top: -5px;
    font-size: var(--font_20);
    -webkit-font-smoothing: antialiased;
    font-weight: bold;
}
.numbering_info label{
    margin-left: 25px;
    padding-left: 10px;
    border-left: 2px solid var(--primary_color);
    display: block;
}
.card_select_line_top_left{
    opacity: 0;
    position: absolute;
    top: -25px;
    left: -50px;
    content: "";
    background: var(--primary_color);
    height: 3px;
    width: 200px;
}
.process_card:hover .card_select_line_top_left{
    opacity: 1;
}
.card_select_line_left_top{
    opacity: 0;
    position: absolute;
    top: -50px;
    left: -25px;
    content: "";
    background: var(--primary_color);
    height: 200px;
    width: 3px;
}
.process_card:hover .card_select_line_left_top{
    opacity: 1;
}
.card_select_line_bottom_right{
    opacity: 0;
    position: absolute;
    bottom: -25px;
    right: -50px;
    content: "";
    background: var(--primary_color);
    height: 3px;
    width: 200px;
}
.process_card:hover .card_select_line_bottom_right{
    opacity: 1;
}
.card_select_line_right_bottom{
    opacity: 0;
    position: absolute;
    bottom: -50px;
    right: -25px;
    content: "";
    background: var(--primary_color);
    height: 200px;
    width: 3px;
}
.process_card:hover .card_select_line_right_bottom{
    opacity: 1;
}

.process_card{
    position: relative;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0, .35);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0, .35);
    box-shadow: 0px 0px 30px 0px rgba(0,0,0, .35);
    padding: 20px 15px;
}
.process_card img{
    width: 100%;
    object-fit: cover;
    height: 200px;
    position: relative;
}
.process_card_info{
    height: 265px;
    width: 100%;
    padding: 25px 15px 50px 15px;
    position: relative;
}
.process_card_info button{
    position: absolute;
    width: calc(100% - 30px);
    bottom: 20px;
    right: 0;
    left: 0;
    margin: auto;

    border: none;
    background: var(--primary_color);
    padding: 10px 25px;
    color: white;
}
.process_card_info button:hover{
    background: var(--primary_hover_color);
}
.process_card_info label{
    font-size: var(--font_20);
    padding: 0 0 15px 0;
}
.process_card_icon_div{
    height: 150px;
    width: 100%;
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: 1fr;
    grid-template-columns: 1fr;
    place-items: center;
}
.process_card_icon_div i{
    /* font-size: var(--font_special_80); */
}
.process_card_2{
    position: relative;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0, .35);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0, .35);
    box-shadow: 0px 0px 30px 0px rgba(0,0,0, .35);
    /* padding: 20px 15px; */
}
.process_card_img_div{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 220px;
    width: 373px;
    object-fit: cover;
}
.process_card_img_div img{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 220px;
    width: 373px;
    object-fit: cover;
}
.process_card_info_2{
    height: 265px;
    width: 100%;
    padding: 25px 25px 40px 25px;
    position: relative;
}
.process_card_info_2 button{
    position: absolute;
    width: calc(100% - 40px);
    bottom: 20px;
    right: 0;
    left: 0;
    margin: auto;
    font-size: var(--font_14);
    border: none;
    background: var(--primary_color);
    padding: 10px 25px;
    color: white;
}
.process_card_info_2 button:hover{
    background: var(--primary_hover_color);
}
.process_card_info_2 label{
    font-size: var(--font_24);
    padding: 0 0 15px 0;
}
.process_card_info_2 p{
    font-size: var(--font_16);
}

.process_card_2:hover .card_select_line_top_left{
    opacity: 1;
}
.process_card_2:hover .card_select_line_left_top{
    opacity: 1;
}
.process_card_2:hover .card_select_line_bottom_right{
    opacity: 1;
}
.process_card_2:hover .card_select_line_right_bottom{
    opacity: 1;
}

@media only screen and (max-width: 1500px) and (min-width: 1400px){
    
}

/* @media only screen and (max-width: 1400px) and (min-width: 1300px){
    .process{
        max-width: 1100px;
        width: auto;
    }
} */

@media only screen and (max-width: 1400px) and (min-width: 1200px){
    /* .process{
        margin: auto;
        width: auto;
    } */
    .process_card_2{
        border-radius: 10px;
        -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0, .35);
        -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0, .35);
        box-shadow: 0px 0px 30px 0px rgba(0,0,0, .35);
        max-width: 300px;
        width: 100%;
        margin: auto;
    }
    .process_card_img_div{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        height: 190px;
        width: 100%;
        object-fit: cover;
    }
    .process_card_img_div img{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        height: 190px;
        width: 100%;
        object-fit: cover;
    }
}

@media only screen and (max-width: 1200px) and (min-width: 1100px){
    /* .process{
        max-width: 1100px;
        width: auto;
    } */
    .process_card_2{
        border-radius: 10px;
        -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0, .35);
        -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0, .35);
        box-shadow: 0px 0px 30px 0px rgba(0,0,0, .35);
        max-width: 300px;
        width: 100%;
        margin: auto;
    }
    .process_card_img_div{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        height: 190px;
        width: 100%;
        object-fit: cover;
    }
    .process_card_img_div img{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        height: 190px;
        width: 100%;
        object-fit: cover;
    }
}

@media only screen and (max-width: 1100px) and (min-width: 801px){
    .process{
        padding: 30pt 0 40pt 0;
        /* max-width: 1100px;
        width: auto; */
    }
    .process h1{
        padding: 35px 0 0 0;
    }
    .process_content{
        display: flex;
        flex-wrap: wrap;
        /* flex-direction: column; */
        gap: 25pt;
        justify-content: center;
        padding: 0;
        margin: 0;
    }
    .content_2_container{
        height: 100%;
        border-radius: 15pt;
        width: 100%;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .process_card_2{
        border-radius: 10pt;
        -webkit-box-shadow: 0pt 0pt 30pt 0pt rgba(0,0,0, .35);
        -moz-box-shadow: 0pt 0pt 30pt 0pt rgba(0,0,0, .35);
        box-shadow: 0pt 0pt 30pt 0pt rgba(0,0,0, .35);
        max-width: 350px;
        width: 100%;
        margin: auto;
        height: 500px;
    }
    .process_card_img_div{
        border-top-left-radius: 10pt;
        border-top-right-radius: 10pt;
        height: 220px;
        width: 350px;
        object-fit: cover;
    }
    .process_card_img_div img{
        border-top-left-radius: 10pt;
        border-top-right-radius: 10pt;
        /* height: auto;
        width: 373pt; */
        height: 220px;
        width: 350px;
        width: 100%;
        object-fit: cover;
    }
    .process_card_info_2{
        height: 250px;
        padding: 25pt 25pt 40pt 25pt;
    }
    .process_card_info_2 button{
        width: calc(100% - 40pt);
        bottom: 0;
        padding: 10pt 25pt;
    }
    .process_card_info_2 label{
        padding: 0 0 15pt 0;
    }
    .process_card_info_2 p{
        /* font-size: 20pt; */
    }
    
    .card_select_line_top_left{
        display: none;
    }
    .card_select_line_left_top{
        display: none;
    }
    .card_select_line_bottom_right{
        display: none;
    }
    .card_select_line_right_bottom{
        display: none;
    }

    .content_2_control{
        padding: 20pt 25pt;
        -webkit-box-shadow: 0pt 0pt 30pt 0pt rgba(0,0,0, .35);
        -moz-box-shadow: 0pt 0pt 30pt 0pt rgba(0,0,0, .35);
        box-shadow: 0pt 0pt 30pt 0pt rgba(0,0,0, .35);
    }
    .content_2_content {
        padding: 0 50pt 55pt 50pt;
        height: 100%;
        max-height: calc(100% - 40pt);
    }
    .content_2_content_head{
        padding: 25pt 0 5pt 0;
    }
    .content_2_content_head span{
        color: var(--primary_color);
        display: block;
        -webkit-font-smoothing: antialiased;
        font-weight: bold;
        /* font-size: 30pt; */
    }
    .content_2_content_head h1{
        margin: 0;
        padding: 0;
        padding-left: 27px;
    }
}

@media only screen and (max-width: 800px) and (min-width: 480px){
    .process{
        padding: 30pt 0 40pt 0;
        /* max-width: 800px;
        width: auto; */
    }
    .process h1{
        padding: 35px 0 0 0;
    }
    .process_content{
        display: flex;
        /* flex-direction: column; */
        flex-wrap: wrap;
        gap: 25pt;
        justify-content: center;
        padding: 0;
        margin: 0;
    }
    .content_2_container{
        height: 100%;
        border-radius: 15pt;
        width: 100%;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .process_card_2{
        border-radius: 10pt;
        -webkit-box-shadow: 0pt 0pt 30pt 0pt rgba(0,0,0, .35);
        -moz-box-shadow: 0pt 0pt 30pt 0pt rgba(0,0,0, .35);
        box-shadow: 0pt 0pt 30pt 0pt rgba(0,0,0, .35);
        max-width: 330px;
        margin: auto;
    }
    .process_card_img_div{
        border-top-left-radius: 10pt;
        border-top-right-radius: 10pt;
        /* height: auto;
        width: 373pt; */
        height: 130pt;
        max-width: 330px;
        /* width: 50%; */
        object-fit: cover;
    }
    .process_card_img_div img{
        border-top-left-radius: 10pt;
        border-top-right-radius: 10pt;
        max-width: 330px;
        height: 140pt;
        width: 100%;
        object-fit: cover;
    }
    .process_card_info_2{
        height: 200pt;
        padding: 25pt 25pt 40pt 25pt;
    }
    .process_card_info_2 button{
        width: calc(100% - 40pt);
        bottom: 20pt;
        padding: 10pt 25pt;
    }
    .process_card_info_2 label{
        padding: 0 0 15pt 0;
    }
    
    .card_select_line_top_left{
        display: none;
    }
    .card_select_line_left_top{
        display: none;
    }
    .card_select_line_bottom_right{
        display: none;
    }
    .card_select_line_right_bottom{
        display: none;
    }

    .content_2_control{
        padding: 20pt 25pt;
        -webkit-box-shadow: 0pt 0pt 30pt 0pt rgba(0,0,0, .35);
        -moz-box-shadow: 0pt 0pt 30pt 0pt rgba(0,0,0, .35);
        box-shadow: 0pt 0pt 30pt 0pt rgba(0,0,0, .35);
    }
    .content_2_content {
        padding: 0 30pt 55pt 30pt;
        height: 100%;
        max-height: calc(100% - 40pt);
    }
    .content_2_content_head{
        padding: 25pt 0 5pt 0;
    }
    .content_2_content_head span{
        color: var(--primary_color);
        display: block;
        -webkit-font-smoothing: antialiased;
        font-weight: bold;
    }
    .content_2_content_head h1{
        margin: 0;
        padding: 0;
        padding-left: 27px;
    }
}

@media only screen and (max-width: 480px){
    .process{
        padding: 20pt 0 40pt 0;
        /* max-width: 480px;
        width: auto; */
    }
    .process h1{
        padding: 35px 0 0 0;
    }
    .process_content{
        display: flex;
        flex-direction: column;
        gap: 25pt;
        justify-content: center;
        padding: 0;
        margin: 0;
    }
    .content_2_container{
        height: 100%;
        border-radius: 15pt;
        width: 100%;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .process_card_2{
        border-radius: 10pt;
        -webkit-box-shadow: 0pt 0pt 30pt 0pt rgba(0,0,0, .35);
        -moz-box-shadow: 0pt 0pt 30pt 0pt rgba(0,0,0, .35);
        box-shadow: 0pt 0pt 30pt 0pt rgba(0,0,0, .35);
        max-width: 330px;
        width: 100%;
        margin: auto;
    }
    .process_card_img_div{
        border-top-left-radius: 10pt;
        border-top-right-radius: 10pt;
        max-height: 130pt;
        max-width: 330px;
        width: 100%;
        object-fit: cover;
        display: block;
    }
    .process_card_img_div img{
        border-top-left-radius: 10pt;
        border-top-right-radius: 10pt;
        max-width: 330px;
        width: 100%;
        max-height: 140pt;
        object-fit: cover;
    }
    .process_card_info_2{
        height: 200pt;
        padding: 25pt 25pt 40pt 25pt;
    }
    .process_card_info_2 button{
        width: calc(100% - 40pt);
        bottom: 20pt;
        padding: 10pt 25pt;
    }
    .process_card_info_2 label{
        padding: 0 0 15pt 0;
    }
    .process_card_info_2 p{
    }
    
    .card_select_line_top_left{
        display: none;
    }
    .card_select_line_left_top{
        display: none;
    }
    .card_select_line_bottom_right{
        display: none;
    }
    .card_select_line_right_bottom{
        display: none;
    }

    .content_2_control{
        padding: 20pt 25pt;
        -webkit-box-shadow: 0pt 0pt 30pt 0pt rgba(0,0,0, .35);
        -moz-box-shadow: 0pt 0pt 30pt 0pt rgba(0,0,0, .35);
        box-shadow: 0pt 0pt 30pt 0pt rgba(0,0,0, .35);
    }
    .content_2_control span{
    }
    .content_2_content {
        padding: 0 20pt 95pt 20pt;
        height: 100%;
        /* max-height: calc(100% - 40pt); */
    }
    .content_2_content_head{
        padding: 25pt 0 5pt 0;
    }
    .content_2_content_head span{
        color: var(--primary_color);
        display: block;
        -webkit-font-smoothing: antialiased;
        font-weight: bold;
    }
    .content_2_content_head h1{
        margin: 0;
        padding: 0;
        padding-left: 0pt;
    }

    .numbering_info span{
    }
    .numbering_info label{
    }
    .step_div span{
    }
}