.main_body{
    --alt_bg_color: #f4f5fa;
    --alt_bg_color_2: #edf0f4;
    --main_red: #FF0033;
    height: 70vh;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-top: 11rem;
}

.main_body .first_half{
    height: 25vh;
    background-color: #ffff;
}

.main_body .second_half{
    height: 45vh;
    background-color: var(--alt_bg_color);
}

.main_body .floating_div{
    position: absolute;
    width: 53vw;
    height: 65vh;
    top: 2vh;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 20;
    border-radius: .2ch;
}

.main_body .floating_div .top{
  height: 30vh;
  background-color: var(--alt_bg_color_2);
  display: flex;
  border: 1px solid var(--alt_bg_color_2);
}

.main_body .floating_div .bottom{
    height: 32vh;
    background-color: white;
    padding: 1.25rem;
    margin-top: 1rem;
    border-radius: 1rem;
  }

.main_body .floating_div .top .picture_side{
    height: 100%;
    width: max-content;
    height: 19.5ch;
}

.main_body .floating_div .top .picture_side img{
   object-fit: cover;
   max-width: 100%;
}

.main_body .floating_div .top .text_side{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex:1 1 0%;
}

.main_body .floating_div .top .text_side h4{
    font-family: 'Campton Medium';
    font-weight: bold;
    color: #003366;
    font-size: 3ch;
    width: 80%;

}

.main_body .floating_div .top .text_side p{
    font-family: 'Campton Light';
    font-size: 1.25ch;
    width: 80%;
}


.main_body .floating_div .bottom .top_bar{
    display: flex;
    gap: 1rem;
}

.main_body .floating_div .bottom .top_bar > .bars {
    display: flex;
    align-items: center;
}

.main_body .floating_div .bottom .top_bar > .bars span:first-child{
    width: 5ch;
    height: .35ch;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    background-color: var(--main_red);
}
.main_body .floating_div .bottom .top_bar .bars > span:last-child{
    width: 12ch;
    height: .35ch;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    background-color: #003366;
}

.main_body .floating_div .bottom .top_bar p{
    color: var(--main_red);

}

.main_body .floating_div .bottom  ul{
    list-style: none;
    padding: 0px;
    
}

.main_body .floating_div .bottom ul li{
    display: flex;
    gap: 1.5rem;   
    font-family: 'Campton Book', sans-serif;
    font-size: 1.25ch;
    padding-block: .7rem;
}

@media only screen and (max-width: 768px){
    .main_body{
        margin-top: 6.5rem;
        display: block;
        height: 100dvh;
    }
    .main_body .floating_div{
       width: 100dvw;
       height: 98dvh;
       padding: 1rem;
       z-index: 10;
    }

    .main_body .floating_div .top .picture_side{
        display: none;
    }

    .main_body .floating_div .top .text_side{
        align-items: start;
        padding: .5rem;
        
    }

    .main_body .floating_div .top .text_side h4{
        width: auto;
    }

    .main_body .floating_div .top .text_side p{
        width: 95%;
    }


    .main_body .floating_div .bottom{
        height: 60.5dvh;
        border: 1px solid var(--alt_bg_color_2);
    }

    .main_body .floating_div .bottom .top_bar{
        display: flex;
        flex-direction: column;
        gap: .25rem;
    }

    .main_body .floating_div .bottom .top_bar p{
        font-size: .85rem;
    }

    .main_body .floating_div .bottom ul li{
    display: flex;
    gap: .5rem;
    font-family: 'Campton Book', sans-serif;
    font-size: 1.2ch;
    padding-block: .25rem;
    }
}