*{
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    scroll-behavior: smooth;
}

@font-face {
    font-family: AvenirBlack;
    src: url(Fonts/AvenirLTStd-Black.ttf);
}
@font-face {
    font-family: AvenirBook;
    src: url(Fonts/AvenirLTStd-Book.ttf);
}
@font-face {
    font-family: AvenirRoman;
    src: url(Fonts/AvenirLTStd-Roman.ttf);
}

body{
    background-color:#06264f;
}
#main_page{
    height: 100svh;
    
}
/*Jinarc logo*/
.jinarc_logo{
    height: 8rem;
    width: 25rem;
    position: absolute;
    top: 2%;
    left: 3%;
}
.jinarc_logo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/*list*/
.fpage_list ul{
    position: absolute;
    display: flex;
    left: 55%;
    top: 8%;
}
.fpage_list ul li {
    list-style: none;
    padding: 1% 3%;
    text-transform: uppercase;
    font-family: AvenirRoman;
    font-size: 1.3rem;
    background: rgb(230, 160, 50);
    margin: 0 20px 0 20px;
    border-radius: 6px;
}
.fpage_list ul li a{
    padding: 0 2px;
    text-decoration: none;
    color: black;
}
.fpage_list ul li.active{
    background: white;
}
.fpage_list ul li:hover{
    transition: 0.5s;
    cursor: pointer;
    color: black;
    background: white;
}

/* balls here */

/*waves*/

.waves_container{
    width: 100%;
    height: -webkit-fill-available;
    display: flex;
    align-items: end;
}

.first_wave{
    height: 10rem;
    width: 100%;
}
.first_wave img{
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.second_wave{
    height: 10rem;
    width: 100%;
    position: absolute;
    /* top: 0; */
}
.second_wave img{
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.third_wave{
    height: 10rem;
    width: 100%;    
    position: absolute;
    /* top: 0; */
}
.third_wave img{
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.waves_container .left_txt{
    font-size: 9.5px;
    font-family: AvenirRoman;
    color: white;
    position: absolute;
    top: 85%;
    left: 1%;
}
.waves_container .right_txt{
    font-size: 9.5px;
    font-family: AvenirRoman;
    color: white;
    position: absolute;
    top: 85%;
    left: 78%;
}

/*Second Page*/
#second_page, #third_page, #fourth_page, #fifth_page{
    background-color: #06264f;
    height: -webkit-fill-available;
    min-height: 770px;
    /* max-width: 100%; */
}
.container_spage{
    height: 40rem;
    width: 98.8rem;
    height: 100%;
    position: relative;
}
.human_kidney{
    bottom: 0;
    position: absolute;
    height: 23rem;
    width: 37rem;
    top: 35%;
    left: 5%;
}
.human_kidney img{
    width: 100%;
    height: 100%;
}
.kidney_text{
    position: absolute;
    width: 50rem;
    top: 37%;
    left: 47%;
    width: 42.4rem;
    height: 20rem;
}
.kidney_text h1{
    color: rgb(230, 160, 50);
    font-family: AvenirBlack;
    font-size: 2.9rem;
    margin-bottom: 1.1%;
}
.kidney_text p{
    color: white;
    font-family: AvenirBook;
    font-size: 2rem;
}


/*third_page*/
/* #third_page{
    background-color: #06264f;
    height: -webkit-fill-available;
    min-height: 770px;
    max-width: 100%;
} */
.rmp{
    position: absolute;
    margin: auto;
    width: 80rem;
    height: 30rem;
    top: 25%;
    left: 8%;
}
.rmp h1{
    list-style-type: style;;
    color: rgb(230, 160, 50);
    font-family: AvenirBlack;
    font-size: 3rem;
}
.jinarc_list ul li{
    margin-top: 1.3%;
    margin-left: 3%;
    padding-left: 5px;
    color: white;
    font-family: AvenirBook;
    margin-bottom: 2%;
    font-size: 2.1rem;
}
.jinarc_list p{
    font-family: AvenirRoman;
    font-style: italic;
    color: white;
    position: absolute;
    left: 3%;
    font-size: 1rem;
}
/*end of third page*/

/*fourth page*/
/* #fourth_page{
    background-color: #06264f;
    height: -webkit-fill-available;
    min-height: 770px;
    max-width: 100%;
} */
.container_fpage{
    position: absolute;
    top: 20%;
    left: 11%;
    width: 80rem;
}
.presc{
    font-family: AvenirBook;
}
.presc h1{
    color: rgb(230, 160, 50);
    font-size: 3rem;
}
.presc p{
    color: white;
    
    margin-top: 1.5%;
}
.presc ol{
    margin-left: 5%;
    color: white;
    font-size: 1.8rem;
}
.presc ol li{
    margin-top: 1%;
}
.presc ol li .presc_assess{
    color: black;
    background: rgb(230, 160, 50);
    padding: 5px 10px;
    border-radius: 7px;
    width: 28rem;
    font-family: AvenirRoman;
    margin-bottom: 2%;
    text-align: center;
    cursor: pointer;
}
.presc_assess::before{
    content: "▶";
    color: rgb(230, 160, 50);
    display: block;
    height: 0;
    font-size: 1.9rem;
    width: 0.5px;
    left: -1.2em;
    position: relative;
}
.presc_assess::after{
    content: "◀";
    color: rgb(230, 160, 50);
    display: block;
    height: 0;
    font-size: 1.9rem;
    width: 0.5px;
    left: 15.1em;
    bottom: 2rem;
    position: relative;
}

.presc_assess a{
    text-decoration: none;
    color: black;
}
.presc_assess a:hover{
    color: white;
}
.yellow-txt{
    color: rgb(230, 160, 50);
}
.italic-presc{
    font-style: italic;
    font-size: 1rem;
}
.to-presc{
    font-size: 1.8rem;  
}
/*fifth page*/
/* #fifth_page{
    background-color: #06264f;
    height: -webkit-fill-available;
    min-height: 770px;
    max-width: 100%;
} */
.container_ftpage{
    position: absolute;
    top: 30%;
    left: 11%;
    width: 80rem;
}
.patients{
    font-family: AvenirBook;
}
.patients h1{
    color: rgb(230, 160, 50);
    font-size: 3rem;
}
.patients p{
    color: white;
    font-size: 1.8rem;  
    margin-top: 1%;
}
.patients ol{
    margin-top: 2%;
    margin-left: 5%;
    color: white;
    font-size: 1.8rem;
}
.patients ol li{
    margin-top: 2%;
}
.patients_list p{
    font-size: 1rem;
    margin-left: 5%;
    font-style: italic;
}
.patients_list  b{
    color: rgb(230, 160, 50);
}