body {
    font-family: 'Montserrat', sans-serif;
    font-size: 10pt;
    line-height: 1.2;
    display:flex;
    color:#24315E;
}



.selectoptions{
    display:none;
    height:2%;
    width:100%;
    justify-content: center; /* Center horizontally */
    background-color:#ffffff;
    z-index:1;
    color:white;
    cursor: pointer;
    transition: background-color 0.3s; /* Add transition for smooth effect */
    gap:2px;
}

.overview,.details {
    display: flex;
    background-color: #24315E;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 49.8%;
    border-radius: 1px; 
}




.sideContainer{
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
    position:absolute;
    width: 30%;
    height:100%;
    background-color: #06d8a7;
}

.cover{
    display:flex;
    position:relative;
    flex-wrap: wrap;
    width:750px;
    height:970px;
    background-color: rgb(232, 232, 238);
    border: 2px solid #24315E;
    border-radius: 3px;
    left:50%;
    transform: translate(-50%,0%);
    

}



.basicinfo{
    
    display:flex;
    position:relative;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width:100%;
    height:8%;
}

.basicinfo h3 {
    position: absolute;
    top:10%;
    margin:0px;
}
.basicbox {
    top:20%;
    display:flex;
    justify-content: center; /* Center horizontally */
    flex-direction: column;
    align-items: left;
    position: relative;
    border: 2px solid #24315E;; /* Combined border properties */
    border-radius: 10px; /* Increased border-radius for better visibility */
    width: 70%;
    height: 60%;
    background-color: transparent;
}
.basicbox > div{
    position:relative;
    font-size: 8pt;
    padding-left:5px;
    left:50%;
    width:85px;
    transform: translate(-50%,0%);
}

a{
    text-decoration: none;
    color:rgb(60, 60, 73);
    
}




.mainContainer{
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
    position:absolute;
    right : 0%;
    width: 70%;
    height:100%;
    background-color: white;
}

.mainContainer > div > div >p {
    font-size: 9pt;
    margin-top:3px;
    margin-bottom:5px;
    

}
.mainContainer > div{
    padding-left:10px;
    padding-right:10px;
    margin-bottom: 5px;
}

.summary > p{
    margin-top:3px;
    margin-bottom:7px;
    font-size: 9pt;
}


.mainContainer > div > div {
    font-size: small;
}



.insidecontainer {
    position:relative;
}

.insidecontainer > div:nth-child(1) {
    font-weight: 700;
}

.insidecontainer > div:nth-child(2) {
    font-weight: 600;
    font-style: italic;
    font-size: 8pt;
}





.maincontainer > div > header{
    font-size: medium;
}

header{
    font-weight: 700;
}


.summary{
    margin-top:10px;
}

.dateplace{
    font-style: italic;
    font-weight: 600;
    font-size: 7pt;
    position:absolute;
    right:0%;
    top:0px;
}


img{
    width:15px;
    height:15px;
}

.social-sites{
    display: flex;
    align-items: center; /* Center vertically */
    height:20px;
    font-size: 8pt;
    gap:5px;
}

.educontent{
    font-weight: 600;
    font-style: italic;
    font-size: 7pt;
    padding-bottom:3px;
    padding-left:5px;

}


.sideContainer > div{
    padding-left:5px;
}

.topic{
    padding-top:5px;
    font-size: 8pt;

}


.careerdetails > div{
    padding-top:10px;
}

ul{
    margin: 6px 0 2px 0;
    padding-left:20px;

}

li{
    font-size: 8.1pt;
    margin:1px;
}






@media (max-width: 700px){

    .dateplace{
        font-size:7pt;

    }

    .selectoptions{
        display:flex;

    }

    .cover{
        height:1050px;
    }

    .sidecontainer{
        background-color:#abdacf;
        width:70%;
        z-index:2;
        top:2%;
        height:98%;
        padding-left:10%;
        padding-right:20%;
    }

    .details {
        background-color:#ffffff;
        color: #24315E;
      }

    .mainContainer{
        background-color:#abdacf;
        width:100%;
        z-index:3;
        top:2%;
        height:98%;
        text-align: center;
    }
    hr {
        border: none; /* Remove the default border */
        height: 2px; /* Set the desired height */
        background-color: #24315E; /* Set the desired background color */
        margin:2px 5px 2px 5px;
        border-radius:2px;

    }

}


@media (max-width: 500px){
    .dateplace{
        font-size:6pt;

    }
    .cover{
        height:1100px;
    }
}


@media (max-width: 400px){
    .cover{
        height:1200px;
    }
}