.section-title{
  color: black !important;
  padding-top: 2% !important;
  padding-inline: 8% !important;
  font-size: 1.8em !important;
}

.img-container{
  width: 100% !important;
  height: 100% !important;
  justify-content: center !important;
  order: 1;
}

.img-container > img{
  height: 600px;
  object-fit: cover;
  width: 100%;
  object-position: 50% 20%;
  scale: 75%;
}

#about{
  background: #f7fdf9 !important;

}

.about-card {
    border-radius: 40px !important;
    /* border: 2px solid #EEEEEE; */
    margin-top: 4em;
    margin-bottom: 4em !important;
    background: white;
    box-shadow: 0 0 12px #c6c6c6;
}

.img-side>h1{
color: #212529 !important;
}

.img-side>h3{

    border-bottom: 1px solid #25935F;
    color: #212529 !important;
    padding-bottom: 3em;
    font-weight: 400;
    font-size: 30px;
}

.img-side>h2{
    color: #115439;
    font-size: 35px;
}

.card-body {
  /* border: 1px solid #ddd; */
  padding: 4rem !important;
  /* border-radius: 8px; */
  text-align: center;
  transition: transform 0.3s;
  /* border: 1px solid #dfdfdf; */
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  /* color: gray !important; */
  text-align: start !important;
  text-align-last: center !important;
  line-height: 1.8rem;
  
}

#about-title{
background: #CEEDDE !important;
padding-bottom: 1em !important;
}

#about-page-container {
    padding: 0em 8% !important;
    flex-direction: row !important;
    display: grid;
    grid-template-columns: 33% 1fr;
    background: #f8f8f8;
    margin: 0;
}

.profile{
/* background: gray; */
color: #fff;
/* border-radius: 50% !important; */
/* -webkit-border-radius: 50% !important; */
/* padding: 4em !important; */
text-align: center;
z-index: 11;/*900;*/
}

.bg-decoration{
z-index: 1;
/* display: flex
; */
position: relative !important;  
padding-inline: 8% !important;


}
/* 
.bg-decoration-bottom{
background: url("../assets/svgs/Artboard\ –\ 3\ 1.svg");
background-repeat:no-repeat  ;
rotate: 180deg;
z-index: 1; */
/* display: flex
; */
/* position: absolute !important;  
padding-inline: 8% !important;
min-height: calc(600px) !important;
align-content: flex-end;
right: 80px;  
} */

.bg-decoration-bottom>svg{
rotate: 180deg;
}

.bg-decoration img,.bg-decoration svg{
position: absolute !important;
z-index: 1;
left: 120px;
}

html:dir(ltr)  .bg-decoration svg{
position: absolute !important;
z-index: 1;
right: 38px;
left: 120px;
}

.img-side>*{
/* border-bottom: 1px solid #dfdfdf; */
font-size: x-large;
/* color: #25935F; */
padding: 0.5em 0 ;
}

.img-side {
    background: unset;
    color: #fff;
    /* gap: 2em !important; */
    display: flex
;
    flex-direction: column;
    text-align: center;
    margin-top: 8em;
    padding-inline-end: 2em;

}

.profile img{
    max-width: 300px !important;
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    border: 8px solid #115439 !important;
    object-fit: cover;
    /* width: 200px; */
    height: 300px;
    object-position: top;
    display: flex
;
    flex-direction: row;
    justify-self: center;
}

.card-title{
  font-family: 'IBMPlexSans-bold' !important; 
  color: black !important;
  text-align: center !important;
  text-align-last: center !important;
  padding-bottom: 1em !important;
    margin: 0;
  font-size: max(1.2vw, 22px);
}

.card-subtitle{
  color: gray !important;
  text-align: center !important;
  text-align-last: center !important;
  font-family: "IBMPlexSans-bold" !important;
  align-self: center;
}

.about-card{
  order: 2 !important;
}

.section-subtitle{
  font-size: 1.4rem !important;
  color: #25935F !important;
  padding-inline: 8% !important;
  padding-top: 0.5em !important;
  justify-content: start !important;
  display: flex;
}

#about-prev-container {
    display: grid;
    /* grid-template-columns: 1fr 1fr; */
    /* padding-inline: 8% !important; */
    gap: 40px;
    padding-bottom: 4% !important;
    padding-top: 4%;
    /* place-items: self-end; */
    place-items: center;

  /* adjusted */
}

.ambas-card:nth-child(even) {
    grid-gap: 15px;
    grid-template-rows: none;
    height: 329px;
    width: auto;
    /* border-radius: 30px !important; */
    background: var(--white);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
    align-items: center;
    place-content: end;
    padding-inline: 2em !important;
    padding-bottom: 2em !important;
    gap: 1rem;
}

.ambas-card:nth-child(odd) {
    /* grid-gap: 15px; */
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    height: 329px;
    width: auto;
    /* border-radius: 30px !important; */
    background: var(--white);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
    align-items: center;
    place-content: start;
    padding-inline: 2em !important;
    padding-bottom: 2em !important;
    gap: 1rem;
}



.card-image-container{
  justify-content: end;
  height: 100%;
  width: fit-content;
  order: 1;
}

.before{
    height: calc(310px);
    /* top: -19px; */
    display: flex !important;
    position: relative;
    color: whitesmoke !important;
    transform: scaleX(-1);
    bottom: -9px;
}

[dir=rtl] .before{
    transform: unset;
}

[dir=ltr] .before{
    transform: scaleX(-1);
}

.after{
    height: calc(310px);
    /* top: -19px; */
    display: flex !important;
    position: relative;
    color: whitesmoke !important;
    order: 3;
    transform: unset;
    bottom: -9px;
}

[dir=rtl] .after{
    transform: scaleX(-1);
}

[dir=ltr] .after{
    transform: unset;
}

.mirror-image{
  order: 2 !important;
}

.mirror-context{
  order: 1 !important;
}

.card-image-container> img{
    height: 277.38px;
    width: 228.34px;
    border-radius: 0px !important;
    object-fit: cover !important;
    border: 4px solid gray;
}

.card-context{
  order: 2;
  display: flex !important;
  flex-direction: column;
  padding-top: 1em !important;
  padding-bottom: 1em !important;
  padding-inline: 0.5em !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 15px;
}

.card-context>h6{
  font-family: IBMPlexSans-bold !important;
  font-size: 23px !important;
}
.card-context > p{
  border-top: 2px solid #25935F;
  width: fit-content;
  font-size: small;
  padding-top: 0.8em !important;
}

.card-context > button{
  width: fit-content;
  padding: 0.2rem 1.4rem !important;
  background: gray;
  border-radius: 5px;
  border: unset;
  align-self: center !important;
  color: whitesmoke;
}

.card-context > button:hover{
  width: fit-content;
  background: #25935F;
  border-radius: 5px;
}
.card-context > button:hover > a{
  color: whitesmoke !important;  
}

.card-context > button>a{
    text-decoration: none !important;
    color: whitesmoke !important;
    background: unset !important;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.card:nth-child(3n){ grid-column: 1 / 3; }

.content-space{
  display: flex;
  justify-content: center !important;
}

.card-text{
  text-align: start !important;
  text-align-last: start !important;
}

.design-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: unset;
  min-height: 100vh;
  padding: 100px 0;
  font-family: Jost;
}

.design {
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline {
  /*max-width: 900px;*/
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.timeline-content {
  padding: 20px;
  background: unset;
  -webkit-box-shadow: 5px 5px 10px lightgray, -5px -5px 10px lightgray;
          box-shadow: 5px 5px 10px lightgray, -5px -5px 10px lightgray;
  border-radius: 5px;
  color: black;
  padding: 1.75rem;
  transition: 0.4s ease;
  overflow-wrap: break-word !important;
  margin: 1rem;
  margin-bottom: 20px;
  border-radius: 6px;
}

.timeline-component {
  margin: 0px 20px 20px 20px;
}


.timeline-empty{
  display: flex !important;
  justify-content: end !important;
  align-items: center;
  padding-inline: 2em !important;
  padding-bottom: 1em !important;
}

.mirror-timeline{
  justify-content: start !important;
}

.timeline-empty>p{
    font-size: 30px !important;
    font-family: 'IBMPlexSans-bold' !important;
    /*top: 36px;*/
    /* display: flex; */
    position: relative;
    margin: 0;
    direction: ltr !important;
}

.about-prev-mobile-view{
  display: none;
}

.flag-centered{
  align-self: center !important;
}

.svg-object path{
  color: green !important;
  fill: greenyellow !important;
}

  .card-image-container-mobile{
    justify-content: end;
    height: 100%;
    width: auto;
    order: 1;
  }


  .card-image-container-mobile> img{
    height: 203px;
    width: auto;
    border-radius: 30px !important;
    object-fit: cover !important;
    border: 4px solid gray;
  }

#s4-titlerow{
	height:auto !important;
}

.dialog-img{
	justify-content: center;
}

.dialog-img>img{
	border-radius: 14px;
	height: 200px;
	WIDTH: AUTO;
}

.dialog-title{
    text-align: center;
    justify-content: center;
}

.dialog-title>h6{
	justify-content: center;
	text-align: center;
	font-size: 20px;
	padding: 0.5em;
}

.dialog-duration{
    justify-content: center;
    border-bottom: 1px solid green;
    margin-inline: 1em !important;
	padding-bottom: 0.5em;
    direction: ltr !important;
}

.dialog-bio{
	justify-content: center;
}

.dialog-bio > p{
    padding-inline: 1.5em;
    text-align: center;
    text-align-last: center;
	padding-top: 1em;
}

.modal-body{
	gap:0.2em;
}

.modal-title{
	margin-inline: 1em !important;
	color:black;
}

.close {
    text-align: start;
    text-align-last: start;
}

#contentBox{
	margin: 0;
}

#s4-titlerow{
	padding:0;
	margin:0;
	height:auto;
}


.img-side>h1{
	margin:0;
    color: #25935f !important;
    font-size: 32px;
    font-weight: 500;
}

.img-side>h2{
	margin: 0;
}

.img-side>h3{
	margin: 0;
}

.page-content{
	padding:0;
}

.internal-article{
	padding:0;
}

.ms-rtestate-field{
    text-align: start !important;
    text-align-last: start !important;
}

.ms-rtestate-field > img{
    width:100%;
}

.modal-dialog{
    max-width: 60%;
}

html[dir=ltr] .modal-header {
    direction: rtl;
}

html[dir=rtl] .modal-header {
    direction: ltr;
}

.modal-header{
    justify-content: space-between;

}

@media screen and (min-width: 768px) {
  .timeline {
    display: grid;
    grid-template-columns: 1fr 3px 1fr;
    z-index: 200;
    position: relative;
  }

  .timeline::before {
    
        position: absolute;
        /* top: -551px; */
        left: auto;
        right: 18px;
        bottom: 0;
        /* z-index: 5; */
        background: url("/_catalogs/masterpage/MOFAMissions/Assets/Main/assets/svgs/GreenBalm.svg") 33%;
        background-repeat: no-repeat;
        background-position: center;
        /* z-index: 0; */
        background-size: 140%;
        background-position: center;
        opacity: 0.07;
        z-index: -1;
        content: "";
        transform: translateX(-18px);
        height: 100%;
        width: 100%;
  }
  .timeline-middle {
        position: relative;
        background-image: linear-gradient(lightslategray 33%, rgba(255, 255, 255, 0) 0%);
        background-position: right;
        background-size: 1px 15px;
        background-repeat: repeat-y;
        transform: translateY(133px);
  }

  /* .timeline-circle:hover{
    border: #25935F 5px solid !important;

  } */
  

  .timeline-middle-end {
        position: relative;
        background-image: linear-gradient(lightslategray 33%, rgba(255, 255, 255, 0) 0%);
        background-position: right;
        background-size: 1px 20px;
        background-repeat: repeat-y;
        transform: translateY(88px);
        height: 0;
        bottom: -46px;
  }
  .main-middle {
    opacity: 0;
  }
  .timeline-circle {
        position: absolute;
        top: 0;
        left: 51%;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 5px solid lightslategray;
        /* background-image: linear-gradient(45deg, lightgreen, green, darkgreen); */
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        box-shadow: inset 0 0 2px #000;
        background-color: #fff;
  }

}

.user-heading.round {
    background-position: top center;
    z-index: 10;/*10000000000;*/
    background-repeat: no-repeat;
    background-size: 200px;
    /* position: absolute !important; */
    /* top: 0; */
    /* left: 0; */
    background-image: url(/_catalogs/masterpage/MOFAMissions/Assets/Main/assets/svgs/u.svg);
    /* place-content: end !important; */
    display: flex !important;
    flex-direction: column;
    justify-content: end !important;
    padding-inline-start: 2rem;
}


.bottom-decoration img {
    width: 200px;
    height: auto;
}

.bottom-decoration {
    /* align-self: center !important; */
    width: 100%;
    /* place-content: center !important; */
    display: flex
;
    justify-content: center;
    padding-inline-end: 2rem;
}

html[dir="ltr"] .world-img {
	position: absolute !important;
    top: 0;
    left: auto !important;
    transform: scaleX(-1);
    right: 0;
}