.timeline {
 //position: relative;
 //width: 100%;
 //max-width: 1140px;
 //margin: 0 auto;
 //padding: 15px 0;
 //margin-top: 100px;
}
@media(min-width:991.98px){
div.contact-breadcrumb-location{
margin-top:0px !important;
}
}
.timeline::after {
 content: "";
 position: absolute;
 width: 2px;
 background: #29588c;
// top: 4%;
 bottom: 0;
 left: 50%;
 margin-left: -1px;
 z-index: 0;
} 

.container-t {
 padding: 15px 10px;
 position: relative;
 background: inherit;
 width: 50%;
 margin: 10px 0 32px;
 min-height: 275px;
}
.container-t.left {
 left: 0%;
}

.container-t.right {
 left: 50%;
}

.container-t::after,.alstimeline::after {
 content: "";
 position: absolute;
 width: 16px;
 height: 16px;
 top: calc(50% - 0%);
 left: 49.25%;
 background: #29588c;
 border: 2px solid #29588c;
 border-radius: 16px;
 z-index: 999;
}

.container-t.right::after{
 left: 412px;
}

.container-t::before,.alstimeline::before {
 content: "";
 position: absolute;
 width: 30px;
 height: 2px;
 top: calc(50% - -7px);
 left:  49.25%;
 background: #29588c;
 z-index: 1;
}

/*.container-t.left::before {
  content: "";
  position: absolute;
  width: 17px;
  height: 37px;
  top: calc(50% - 18px);
  right: 0px;
  background: #fff;
  z-index: 1;
  border: 3px solid #29588c;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  border-right: 0;
  z-index: 99;
}

.container-t.right::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 37px;
  top: calc(50% - 18px);
  right: 0px;
  background: #fff;
  z-index: 1;
  border: 3px solid #29588c;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  border-left: 0;
}*/

.container-t.right::before,.alstimeline.left::before {
 left: 50.5%;
}
.container-t.right::before,.alstimeline.right::before {
 left: 46.3%;
}

.container-t .date {
 position: absolute;
 display: inline-block;
 /*top: 50%;*/
 text-align: center;
 font-size: 14px;
 font-weight: bold;
 color: #29588c;
 text-transform: uppercase;
 letter-spacing: 1px;
 z-index: 1;
 /*margin-top: -50%;*/
}

.container-t.left .date {
 right: -88%;
}

.container-t.right .date {
 left: -88%;
}

.container-t .icon {
 position: absolute;
 display: inline-block;
 width: 21px;
 height: 21px;
 padding: 9px 0;
 top: calc(50% - 10px);
 background: #29588c;
 border: 2px solid #29588c;
 border-radius: 40px;
 text-align: center;
 font-size: 18px;
 color: #29588c;
 z-index: 1;
}

.container-t.left .icon {
 right: 56px;
}

.container-t.right .icon {
 left: 56px;
}
.alstimeline 
{
	margin:30px 0;
padding: 10px;
}
.container-t .content, .alstimeline .timecontent {
 padding: 30px;
 background: #ffffff;
 position: relative;
 border-radius: 0px 0px 50px 0px;
 box-shadow: 0px 16px 27px rgb(0 11 30 / 10%);
}
.alstimeline.left .timecontent{
	right:-3.5%;
	height:100%;
	    margin: auto;
}
.alstimeline.right .timecontent {
	    margin: auto;
	right:3.8%;
	height:100%;
}

.alstimeline.left .timeimg{
	    margin: auto;
	right:3%;
}
.alstimeline.right .timeimg {
	    margin: auto;
	left:3%;
}
.container-t.left .content {
 left: -5%;
}
.container-t.right .content {
 border-radius: 0px 0px 50px 0px;
 box-shadow: 0px 16px 27px rgb(0 11 30 / 10%);
 right: -5%;
}

.container-t .content h2,.alstimeline .timecontent h2  {
 margin: 0 0 10px 0;
 font-size: 22px;
 font-weight: normal;
 color: #29588c;
 
}

.container-t .content li ,.alstimeline .timecontent li {
 margin: 0;
 font-size: 16px;
 line-height: 22px;
padding: 5px 0 5px 0;
}
/*New timeline tab design Css*/
/*Timeline*/
#timeline .timeline {
 position: relative;
 max-width: 100%;
 margin: 20px auto;
 padding: 0px;
}
#timeline .start {
 top: 0px;
 left: 49.3%;
}

#timeline .timeline::after {
 top: 0px;
 margin-left: 0px;
}

#timeline .container-t .date {
 top: 5%;
}

#timeline .container-t.right .date {
 left: -70%;
 top: 5%;
}

#timeline .container-t.left .date {
 right: -70%;
 top: 5%;
}

#timeline .container-t::before {
 z-index: 1;
 width: 34px;
}

.alstimeline::before {
 z-index: 1;
 width: 34px;
}
/*
#timeline .container-t:last-child{
  margin-bottom:40px;
}*/
#timeline .container-t h2,
#timeline .container-t h3,#timeline .alstimeline h2,
#timeline .alstimeline h3 {
 border-bottom: 0px;
 padding-bottom: 0px;
 display: block;
 margin-bottom: 0px;
 margin-top: 8px;
 padding-left:20px;
}
.arbic-lang .alstimeline .timecontent h2,
.arbic-lang .alstimeline .timecontent h3 {
 border-bottom: 0px;
 padding-bottom: 0px;
 display: block;
 margin-bottom: 0px;
 margin-top: 8px;
 padding-right:16px;
}
#timeline .container-t::after {
 right: -9px;
}
#timeline .content .content-scrollbar, #timeline .alstimeline .content-scrollbar{ 
	/*max-height:190px;*/
	overflow-y:auto;
    margin-left: 20px;
    margin-right: 15px;
margin-top:5px;
    padding-bottom: 5px;
}
/* width */
#timeline .content .content-scrollbar::-webkit-scrollbar, #timeline .alstimeline .content-scrollbar::-webkit-scrollbar {
  width: 3px;
}

/* Track */
#timeline .content .content-scrollbar::-webkit-scrollbar-track,#timeline .alstimeline .content-scrollbar::-webkit-scrollbar-track {
 
  border-radius: 5px;
}
 
/* Handle */
#timeline .content .content-scrollbar::-webkit-scrollbar-thumb ,#timeline .alstimeline .content-scrollbar::-webkit-scrollbar-thumb {
  background:#29588c; 

}

/* Handle on hover */
.about-us #leadership .our-team .img-wrapper .carousel-caption::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}
/*timeline arabic*/

.arbic-lang #timeline .left.container-t::before {
 right: 0px;
 left: auto;
}
.arbic-lang #timeline .left.container-t::after {
 right: -8px;
 left: auto;
}
.arbic-lang #timeline .container-t.right::before {
 right: auto;
}
.arbic-lang #timeline .container-t.right::after {
 right: auto;
}
.arbic-lang #timeline .container-t.left {
 left: -50%;
}
.arbic-lang #timeline .container-t.right {
 left: 0px;
}
.arbic-lang .alstimeline.left .timecontent
{
	right:3.7%;
    height: 100%;
    margin: auto;
border-radius: 0px 0px 0px 50px;
}
.arbic-lang .alstimeline.left .timeimg {
    margin: auto;
    right: -2.6%;

}
.arbic-lang .alstimeline.right .timecontent
{
	margin: auto;
    right: -3.7%;
    height: 100%;
border-radius: 0px 0px 0px 50px;

}
.arbic-lang .alstimeline.right .timeimg {
    margin: auto;
    right: 4%;
}
.arbic-lang  .container-t.left::before, .arbic-lang  .alstimeline.left::before {
    left: 46.3%;
}
.arbic-lang  .container-t.right::before, .arbic-lang  .alstimeline.right::before {
    left: 50.6%;
}
/*Media for new timeline tab design*/
@media (min-width: 993px) and (max-width: 1200px) {
 #timeline .container-t.left .date {
  right: -354px;
 }
.alstimeline::before{width:28px;}
 #timeline .container-t.right .date {
  left: -354px;
 }
 #timeline .container-t:last-child .date {
  top: 80%;
 }
}
@media (min-width: 992px) {
 #timeline .container-t .content img {
  display: none !important;
 }
}
@media (max-width: 991.98px) {
.main-banner{
 padding-top:25px !important;
}
.mobiletab{width:76%;}
 #timeline .container-t .date,
 #timeline .container-t:not(:last-child)::after,
 #timeline .container-t::before,
 .arbic-lang #timeline .container-t:not(:last-child)::after {
  display: none !important;
 }
#timeline .timeline::after {
 top: -20px;
 margin-left: 0px;
}
#timeline .start {
 top: -20px;
 
}
 #timeline .timeline::after {
  z-index: -1;
 }
.container-t .content h2 {
text-align:center;
}
 #timeline .container-t {
  width: 100%;
  margin: 40px 0px;
  padding: 0px;
  min-height: auto;
  top: 30px;
 }
#timeline .container-t h2,
#timeline .container-t h3 {
 
 background: #29588c;
    padding: 10px 0;
    line-height: 45px;
    color: #fff;
    height: 50px;
}
 #timeline .container-t .content h2 + div {
  margin-top: 0px;
  margin-bottom: 15px;
  display: block !important;
 }
 #timeline .container-t .content img {
  width: 100%;
padding-bottom:10px;
 }
 #timeline .container-t .date img {
  display: none !important;
 }
 #timeline .container-t.left .content,
 #timeline .container-t.left,
 .arbic-lang #timeline .container-t.left {
  left: 0px;
  right: auto;


 }
 #timeline .container-t.right,
 #timeline .container-t.right .content {
  left: auto;
  right: 0px;
 }
.arbic-lang #timeline .container-t.right .content {
border-radius: 0px 0px 0px 20px !important;
}
.arbic-lang #timeline .container-t.left .content {
border-radius: 0px 0px 0px 20px !important;
}

 #timeline .container-t.left .content,
 #timeline .container-t.right .content {
  margin-top: 20px;
  border-radius: 0px 0px 20px 0px !important;
  padding: 0px 0px;
 }
 #timeline .container-t ul {
  margin-bottom: 0px;
 /* margin-left: 15px;*/
  margin-right: 15px;
 }
 #timeline .start {
  left: 49%;
 }
#timeline .end{
  left: 49%;
  top:100.5%
 }
 #timeline .timeline::after {
  left: 50%;
  bottom: -60px;
 }
 #timeline .timeline {
  margin-bottom: 80px;
 }
 #timeline .container-t:last-child:after,
 .arbic-lang #timeline .left.container-t::after {
  left: 304px;
  bottom: -32px;
  top: initial;
  display: block;
  opacity: 1;
  right: auto;
 }
}
@media (max-width: 768px) {
#timeline .container-t h2,
#timeline .container-t h3 {
 
 padding-left:0px;
}
.container-t .content h2 {
text-align:center;
font-size:30px;
}
}
@media (max-width: 767.98px) {
 .timeline::after {
  left: 90px;
 }
.mobiletab{width:90%;}
 .container-t {
  width: 100%;
  padding-left: 120px;
  padding-right: 30px;
 }
#timeline .container-t h2,
#timeline .container-t h3 {
 
 background: #29588c;
    padding: 10px 0;
    line-height: 50px;
    color: #fff;
    height: 50px;
}

 .container-t.right {
  left: 0%;
 }

 .container-t.left::after,
 .container-t.right::after {
  left: 82px;
 }

 .container-t.left::before,
 .container-t.right::before {
  left: 100px;
  //border-color: transparent #29588c transparent transparent;
 }

 .container-t.left .date,
 .container-t.right .date {
  right: auto;
  left: 15px;
 }

 .container-t.left .icon,
 .container-t.right .icon {
  right: auto;
  left: 146px;
 }

 .container-t.left .content,
 .container-t.right .content {
  padding: 30px 30px 30px 90px;
  border-radius: 500px 0 0 500px;
 }
 #timeline .container-t:last-child:after,
 .arbic-lang #timeline .left.container-t::after {
  left: 47.6%;
  right: auto;
 }
 #timeline .start {
  left: 48.7%;
 }
 #timeline .end{
      left: 48.6%;    
    top: 100.6%;
 }
}
.rounded-img {
 border-radius: 0px 0px 50px 0px;
}
.arbic-lang .rounded-img {
 border-radius: 0px 0px 0px 50px;
}
.start {
 position: absolute;
 left: 49%;
 border: 2px solid #29588c;
 top: 4%;
 /* padding: 10px; */
 background: #29588c;
 color: #fff;
 /* font-weight: bold; */
 /* font-size: 16px; */
 border-radius: 10px;
 width: 16px;
 height: 16px;
}
.end {
 position: absolute;
 left: 49.3%;
 border: 2px solid #29588c;
 top: 100%;
 /* padding: 10px; */
 background: #29588c;
 color: #fff;
 /* font-weight: bold; */
 /* font-size: 16px; */
 border-radius: 10px;
 width: 16px;
 height: 16px;
}
@media (max-width: 600px) {
.end {
 position: absolute;
 left: 47.7%;
 border: 2px solid #29588c;
 top: 100.7%;
 /* padding: 10px; */
 background: #29588c;
 color: #fff;
 /* font-weight: bold; */
 /* font-size: 16px; */
 border-radius: 10px;
 width: 16px;
 height: 16px;
}
 .container-t.left .date {
  right: -25%;
 }
 .container-t.right .date {
  right: -10%;
  left: -10%;
 }
 .container-t.left .content {
  right: -55%;
  left: 15%;
 }
 .container-t.left {
  left: -15%;
 }
 .container-t.left .content,
 .container-t.right .content {
  padding: 5px 2px;
  z-index: 99;
  border-radius: 0px 0px 50px 0px !important;
  margin-top: 200px;
  right: 0%;
 }
 .container-t {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
 }
 .timeline::after {
  left: 50%;
  z-index: -1;
  // top: 6%;
 }
 .timeline::before {
  left: 50%;
 }
 .container-t::before {
  display: none;
 }
 .container-t::after {
  display: none;
 }
 .start {
  left: 48%;
  top: 6%;
 }
}
@media (max-width: 448px) {
 #timeline .start {
  left: 48.1%;
 }
 #timeline .end{
      left: 48.1%;    
    top: 100.6%;
 }
}
@media (max-width: 340px) {
 #timeline .start {
  left: 47.8%;
 }
 #timeline .end{
      left: 47.8%;    
    top: 100.6%;
 }
}
