:root {
  --body-color: #505050;
  --text-color: #002878;
}

body {
  margin: 0;
  padding: 0;
  background-color: rgb(0, 0, 0);
}

/*  main container  */

.main-container {
  height: 100vw;
  width: 100%;
}

.image {
  background: url(../images/backgound.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 80vw;
  width: 60%;
  margin: 7px 20%;
  padding: 40px 0px 40px 40px;
}

.header-para h2 {
  margin-bottom: 0px;
  font-family: 'Roboto', sans-serif;
  color: var(--text-color);
  font-size: 30px;
  font-weight: 100;
}

.details {
  display: flex;
  list-style: none;
  margin-top: 5px;
  padding: 0;
}

i {
  color: var(--body-color);
  font-size: 12px;
}

li {
  color: var(--body-color);
  padding-left: 7px;
  padding-right: 15px;
  font-size: 11px;
  font-family: 'Roboto', sans-serif;
}

/* Sub Container */

.sub-container {
  display: flex;
}

/* Left Container Design*/

.left-container {
  height: 80vw;
  width: 450px;
  /* background-color: rgb(155, 157, 157); */
}

.para h3 {
  margin-top: 30px;
  font-size: 10px;
  color: var(--body-color);
  font-family: 'Roboto', sans-serif;
}

.senior-txt h2 {
  font-family: 'Roboto', sans-serif;
  color: var(--text-color);
  font-size: 19px;
  font-weight: 100;
  margin: 0px 40px 4px 0px;
}

.ser-para {
  font-size: 12px;
  color: rgb(244, 146, 0);
  padding: 0px 14px 0px 0px;
}

.senior-sub-para {
  display: flex;
  list-style: none;
  padding: 0;
  margin-top: 5px;
}

.para-1 {
  font-size: 11px;
  color: var(--body-color);
  font-family: 'Roboto', sans-serif;
}

.senior-ul {
  /* padding-left: 7px; */
  color: var(--body-color);
  padding-left: 14px;
  padding-right: 20px;
  font-size: 11px;
  font-family: 'Roboto', sans-serif;
  line-height: 1.5;
}

.ser-para-1 {
  font-size: 12px;
  color: orange;
  list-style: none;
  padding: 0;
}

.para-year h3 {
  color: var(--body-color);
  font-size: 10px;
  font-family: 'Roboto', sans-serif;

}


/* Right Container Design*/

.right-container {
  height: 80vh;
  width: 270px;
  margin-left: 38px;
  /* background-color: rgb(255, 255, 0); */
}

.award {
  display: flex;
}

.award-txt h2 {
  /* margin-top: 30px; */
  font-size: 10px;
  color: var(--body-color);
  font-family: 'Roboto', sans-serif;
}

.winner-txt h2 {
  font-size: 14px;
  margin: 0px 10px;
  font-family: 'Roboto', sans-serif;
  color: var(--text-color);
}

.win-para {
  color: var(--body-color);
  font-size: 11px;
  font-family: 'Roboto', sans-serif;
  margin-bottom: 15px;
}

button {
  height: 25px;
  border: 1px solid var(--body-color);
  margin-right: 8px;
  margin-top: 10px;
}


.front-head {
  color: var(--text-color);
  font-family: 'Roboto', sans-serif;
  font-size: 19px;
  font-weight: 100;
  margin: 30px 40px 4px 0px;
}


.travel {
  display: flex;
  color: var(--text-color);
}

.travel-txt h2 {
  font-size: 14px;
  /* margin: 0px 10px; */
  font-family: 'Roboto', sans-serif;
  margin: 0px 20px 15px 20px;
}

.senior-txt h5 {
  color: var(--text-color);
}

.projects {
  margin: 30px 0px;
}

.projectsHeading h1 {
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  color: var(--text-color);
}

.projects-para {
  margin-right: 5px;
}

.other-exp-text h5 {
  margin-bottom: 0;
}

.senior-txt h2 {
  margin-top: 25px;
}

.personal ul li {
  list-style: none;
}

.personal ul li {
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  color: var(--text-color);
  font-weight: 600;
}
.personal ul {
  padding: 0;
  line-height: 2;
}
.personal-text {
  font-size: 11px;
  color: var(--body-color);
  font-family: 'Roboto', sans-serif;
  margin-left: 30px;
}
.gender-text {
  margin-left: 48px;
}
.dobText {
  margin-left: 20px;
}
.travel-icon {
  margin-right: 3px;
}