@font-face {
    font-family: 'Matthew';
    src: url('../fonts/FSMatthew-Regular.otf') format('truetype');      
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Matthew-Medium';
    src: url('../fonts/FSMatthew-Medium.otf') format('truetype');      
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Matthew-Light';
    src: url('../fonts/FSMatthew-Light.otf') format('truetype');      
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Joey-Bold';
    src: url('../fonts/FSJoey-Bold.otf') format('truetype');      
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
827
@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-It.woff2') format('woff2'),
        url('../fonts/MyriadPro-It.woff') format('woff'),
        url('../fonts/MyriadPro-It.ttf') format('truetype'),
        url('../fonts/MyriadPro-It.svg#MyriadPro-It') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-Light.woff2') format('woff2'),
        url('../fonts/MyriadPro-Light.woff') format('woff'),
        url('../fonts/MyriadPro-Light.ttf') format('truetype'),
        url('../fonts/MyriadPro-Light.svg#MyriadPro-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-Bold.woff2') format('woff2'),
        url('../fonts/MyriadPro-Bold.woff') format('woff'),
        url('../fonts/MyriadPro-Bold.ttf') format('truetype'),
        url('../fonts/MyriadPro-Bold.svg#MyriadPro-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-Regular.woff2') format('woff2'),
        url('../fonts/MyriadPro-Regular.woff') format('woff'),
        url('../fonts/MyriadPro-Regular.ttf') format('truetype'),
        url('../fonts/MyriadPro-Regular.svg#MyriadPro-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-Semibold.woff2') format('woff2'),
        url('../fonts/MyriadPro-Semibold.woff') format('woff'),
        url('../fonts/MyriadPro-Semibold.ttf') format('truetype'),
        url('../fonts/MyriadPro-Semibold.svg#MyriadPro-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/*=============================================
=            Common Css            =
=============================================*/

:root {
    --blue: #706964;
    --blue-dark: #152c53;
    --blue-light: #6d78a7;
    --white: #ffffff; 
    --black:#000;
    --light-brown: #e2dfda;
    --coffee: #a4988e;
    --coffee-light: #f1ebde;
    --bg-cream: #f4f4ef;
    --bg-grey: #e5e5e5;
    --bg-cream-dark: #ece7e1;
}
body {
    font-family: 'Matthew' !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5 {
    font-weight: 600;
	font-family: 'Joey-Bold' !important;
}
h1,h2 {
    font-size: 5vw;
    line-height: .97;
    color: #706964;
	text-transform:uppercase;
	font-weight:600 !important;
}
.mt-200 {
	margin-top:200px;
}
address {
	margin-top: 1.5rem;
}

#carouselExampleIndicators2 .cleft {
    left: -125px;
    padding-left: 5%;
}
#carouselExampleIndicators2 .cright {
right: -115px;}
#carouselExampleIndicators2 .carousel-inner {
    position: relative;
    width: 100%;
    /*overflow-x: visible;*/
	overflow-x: hidden;
}
.btn-primary {
	background:#f1ebde !important;
	color:#a4988e !important;
	--bs-btn-border-color: #f1ebde !important;
	--bs-btn-hover-border-color: #f1ebde !important;
}

.section {
    padding-top: 8.25vw;
    padding-bottom: 8.25vw;
}
.bg-cream {
    background-color: var(--bg-cream);
}
.bg-grey {
    background-color: var(--bg-grey);
}
.bg-cream-dark {
    background-color: var(--bg-cream-dark);
}
.accordion-item .accordion-button {
    position: relative;
    border-radius: 0;
    box-shadow: none;
}

.accordion-item:not(:first-of-type) {
    border-top: 0;
    margin: 10px 0px;
}
.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 10px 10px 25px;
    font-size: 1rem;
    color: #FFF ! important;
    text-align: left;
    background-color: #796f66 ! important;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}
.gaps{
	gap: 20px;
}
.accordion-button:not(.collapsed)::after {
    transform: translateY(-50%);
	background: none;
    background-size: 0;
}
.accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: 0 ! important;
    border-bottom-left-radius: 0 ! important;
}

#clientele-heading{ justify-content: center !important;}
/*=====  End of Common Css  ======*/
.five-decades {
		font-size: 90px;
		line-height: 96px;
		right: 0;
		text-transform: uppercase;
		text-align: right;
		font-weight: 600;
		top: 150px;
		left: calc(100% - 475px);
		font-family: 'Joey-Bold';
		position: absolute;
    color: #FFF;
	}
	.annual-reports {
		right: 0;
		top: 450px;
		left: calc(100% - 300px);
		font-size: 20px;
		text-align: right;
		text-transform: uppercase;
		position: absolute;
		color: #FFF;
		font-weight: 600;
	}

/*=============================================
=            Board of Directors            =
=============================================*/
h2.banner-title {
    position: absolute;
    margin-top: 50vh;
    font-size: 44px;
    text-align: left;
    color: #FFF;
    font-weight: 500 ! important;
	font-family: 'Joey-Bold' !important;
}
.board-of-director {
    margin-bottom: 2.66vw;
    padding-left: 4.5vw;
    padding-right: 4.5vw;
}
.board-of-director h2 {
    margin-bottom: 3.3vw;
    letter-spacing: -.1vw;
}
.board-of-director .owl-carousel,
.board-of-director .carousel {
    padding: 0 2.5vw;
}
.board-member-image {
    width: 52.5vw;
}
.board-member-name {
    width: calc(100% - 46.5vw);
    margin-left: -6vw;
    padding-top: 10vw;
    padding-right: 1vw;
}
.board-member-name h3 {
    margin-bottom: 0;
    font-size: 3.3vw;
    font-weight: 600;
    color: var(--coffee);
    letter-spacing: -.1vw;
}
.board-member-name h4 {
    margin-bottom: 0;
    font-size: 3vw;
    color: var(--blue);
}
.board-of-director .carousel-indicators {
    position: relative;
    position: relative;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    margin: 0;
}
.board-of-director .carousel-indicators::before {
    position: relative;
    content: "";
    display: block;
    width: 100%;
    border-top: 1.335vw solid var(--coffee-light);
    margin-bottom: 52px;
}
.board-of-director .carousel-indicators > button,
.board-of-director .owl-theme .owl-dots .owl-dot {
    width: 100%;
    height: auto;
    border: 6px solid #f3f0ed;
    border-radius: 30px;
    margin:0 0 5vw;
    padding: 12px 10px 6px;
    font-size: 16px;
    text-transform: uppercase;
    text-indent: 0;
    font-weight: 600;
    background-color: #f3f0ed;
    color: var(--blue);
    letter-spacing: .55px;
    opacity: 1;
    -webkit-box-shadow: 5px 5px 5px 0px #ddd3c5, inset 4px 4px 10px 0px #ddd3c5, 5px 5px 10px 0px rgba(222,214,202,0),-5px -5px 10px 0px rgba(254,254,254,1), inset -5px -5px 10px 0px rgba(240,240,240,1);
    box-shadow:  5px 5px 5px 0px #ddd3c5, inset 4px 4px 10px 0px #ddd3c5, 5px 5px 10px 0px rgba(222,214,202,0),-5px -5px 10px 0px rgba(254,254,254,1), inset -5px -5px 10px 0px rgba(240,240,240,1);
    box-sizing: border-box;
    transition: box-shadow 350ms ease;
}
.board-of-director .carousel-indicators > button.active {
    border-color: transparent;
    background-color: #ddd3c5;
    box-shadow: 5px 5px 5px 0px rgba(240,237,232,1),inset 0px 0px 5px 0px rgba(216,206,191,1);
}
.board-of-director .owl-theme .owl-dots .owl-dot span {
    width: 100%;
    height: auto;
    margin: 0;
    background: transparent;
}
.board-of-director .owl-theme .owl-nav [class*=owl-] {
    width: 2.75vw;
    height: 5.5vw;
    padding: 0;
    background-color: transparent;
}
.board-of-director .carousel-control-next, 
.board-of-director .carousel-control-prev {
    width: 3.25vw;
    height: 5vw;
    top: inherit;
    bottom: 6.25vw;
    padding: 0;
}
.board-of-director .carousel-control-next {
    right: -4.5vw;
}
.board-of-director .carousel-control-prev {
    left: -2.05vw;
}
.board-of-director .carousel-control-prev-icon,
.board-of-director .carousel-control-next-icon {
    width: 100%;
    background-size: 2.66vw;
}
.board-of-director .carousel-control-prev-icon {
    background: url('../images/icon-previous.svg') no-repeat left top; 
}
.board-of-director .carousel-control-next-icon {
    background: url('../images/icon-next.svg') no-repeat left top; 
}
/*=====  End of Board of Directors  ======*/

/*=============================================
=            Executive Management            =
=============================================*/

.executive-management .carousel-indicators::before {
    border-color: var(--blue-dark);
}
.executive-management .carousel-indicators > button.active,
.executive-management.board-of-director .carousel-indicators > button.active {
    background-color: #cacaca;
}
.executive-management .carousel-indicators > button span,
.executive-management.board-of-director .carousel-indicators > button span {
    box-shadow: .16vw .16vw .5vw .16vw #949494;
}
.board-of-director .carousel-indicators > button::before,
.executive-management.board-of-director .carousel-indicators > button::before {
    box-shadow: inset 0.5vw 0.5vw .75vw 0px #c5c5c5;
}
/*=====  End of Executive Management  ======*/zz


/*=============================================
=            Logo            =
=============================================*/

.navbar,
.alba-navbar {
    padding: 5.25vw 5vw 0 8.5vw;
    z-index: 2;
}
.alba-navbar > .container {
    padding: 0;
    align-items: flex-start;
}
.alba-navbar {
    background-color: transparent;
}
.logo img,
.alba-navbar .navbar-brand img {
    width: 100%;
    max-width: 27.66vw;
}
.alba-navbar .navbar-brand {
    margin: 0;
    padding: 0;
}
.alba-navbar .navbar-toggler {
    border: none;
    margin-top: 1.66vw;
    padding: 0;
}
.alba-navbar .navbar-toggler-icon {
    width: 40px;
    height: 28px;
    /*background: url("../images/menu-icon.png") center no-repeat;*/
	background: url("../images/grey-menu.png") center no-repeat;

}
.alba-navbar button:focus:not(:focus-visible) {
    box-shadow: none;
}
.alba-navbar .navbar-collapse {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    padding: 7.66vw 7vw;
    text-align: center;
    background-color: #b7b0a2;
    transform: translateX(100%);
    transition: all 350ms ease;
    z-index: 5;
}
.alba-navbar .navbar-collapse.active {
    transform: translateX(0);
}
.alba-navbar .close-navbar {
    float: right;
    width: 7vw;
    height: 7vw;
    margin-bottom: 10vw;
}
.alba-navbar h2 {
    clear: both;
    margin-bottom: 9.5vw;
    font-size: 5.75vw;
    font-weight: 300;
    color: var(--white);
}

.alba-navbar .navbar-nav .nav-link.active, 
.alba-navbar .navbar-nav .show>.nav-link,
.alba-navbar .navbar-nav .nav-link {
    padding: 0;
    font-size: 4.33vw;
    color: var(--white);
}
.alba-navbar .navbar-nav .nav-item {
    margin-bottom: .5vw;
}
.alba-navbar .navbar-nav .nav-link:focus, 
.alba-navbar .navbar-nav .nav-link:hover {
    color: var(--blue)
}
body {
    transition: all 350ms ease;
}
body.active {
    overflow: hidden;
    width: calc(100% - 15px);
}
/*=====  End of Logo  ======*/


/*=============================================
=            Hero            =
=============================================*/
.hero {
  position: relative;
}

.go-down {
  position: absolute;
  bottom: 11vw;
  left: 50%;
  transform: translateX(-50%);
}
.go-down img {
  width: 5vw;
}
/*=====  End of Hero  ======*/


/*=============================================
=            Message Box            =
=============================================*/
.message h2 {
    margin-bottom: 5.5vw;
}
.message h3,
.message h4, 
.message h5, 
.message p {
    font-size: 4vw;
    font-weight: 600;
   
}
.message h3 {
    margin-bottom: 7vw;
    color: var(--blue);
}
.message h3 em {
    display: block;
    font-weight: 300;
    color: var(--light-black);
}
.message h4 {
    margin-bottom: 6vw;
}
.message h4, 
.message h5 {
    color: var(--coffee);
    letter-spacing: -.12vw;
}
.message .content h4 {
	color:#e40421;
}
.message h5 {
    margin-bottom: 0;
    letter-spacing: -.1vw;
}
.message p  {
    margin-bottom: 4vw;
    font-weight: 500;
    line-height: 1.25;
}
.message .read-more {
    display: inline-flex;
    align-items: center;
    font-size: 3.75vw;
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    color: #796f67 ! important;
    transition: all 350ms ease;
}
.message .read-more:hover,
.message .read-more:focus {
    color: #a4988e;
}
.message .read-more span {
    display: inline-flex;
    width: 2vw;
    margin-left: 1.5vw;
    transition: all 350ms ease;
}
.message .read-more svg {
    max-width: 100%;
    fill: #a4988e;
    transition: all 350ms ease;
}

.message .read-more:hover svg,
.message .read-more:focus svg {
    fill: var(--coffee);
}
.message .hod-image {
    padding: 8.5vw 8vw 0;
}
.message .hod-image > img {
    padding: 0;
}

.message .ceo-message .hod-image {
    padding-top: 9vw;
}

/*=====  End of Message Box  ======*/


/*=============================================
=            Operational Highlights            =
=============================================*/
.operation-highlights {
    padding: 8vw 3vw 8vw 5.33vw;
    background-color: #efece7;
}
.operation-highlights h2 {
    margin-bottom: 8vw;
    letter-spacing: -.125vw;
}
.operation-highlights .nav-pills .nav-item {
    width: calc(50% - 1vw);
}
.operation-highlights .nav-pills .nav-item:not(:nth-child(2n)) {
    margin-right: 2vw;
}
.operation-highlights .nav-pills .nav-link {
    width: 100%;
    border-radius: 0;
    padding: 8.5vw 2vw 8.25vw;
    text-transform: uppercase;
    font-size: 5vw;
    font-weight: 600;
    letter-spacing: .66vw;
    background-color: var(--white);
    color: var(--coffee);
}
.operation-highlights .nav-pills .nav-link.active {
    background-color: var(--blue);
    color: var(--white);
}
.operational-image {
    margin-bottom: 2.33vw;
}
.operational-data {
    padding: 0 6vw 6vw 5.33vw;
}

.operational-data .list-item {
    padding-top: 1.33vw;
    padding-bottom: 1.66vw;
    font-size: 4.66vw;
    line-height: 1.15;
    letter-spacing: -.11vw;
}
.operational-data .list-item:not(:last-child) {
    border-bottom: 1px solid #c5c0b1;
}
.operational-data .list-item strong {
    font-size: 5vw;
    font-weight: 600;
    color: var(--coffee);
}
.operational-highlights-tab {
    position: relative;
}

.operational-highlights-tab .tab-pane {
    width: 100%;
}
/*=====  End of Operational Highlights  ======*/





/*=============================================
=            Alba Work List            =
=============================================*/
#highlights {
	background:url("../images/highlights-bg.jpg");
	padding-bottom:190px;
}
#highlights h2 {
	padding-top:100px;
	margin-left: calc((100% - 468px) / 2 + 11px);
}

#highlights-title {
	background: var(--light-brown);
	height:230px;
}
#highlights .stats {
	margin-top:-50px;
}
#highlights .carrow img {
    width: 40px;
    height: 40px;
}
#highlights .alba-work-card .card-img-top {
max-width: 120px;
text-align: center !important;
margin-top: -20px;
}
#highlights .alba-work-card p {
    padding: 0 20px;
}
#highlights .alba-work-card .box:before{display:none;}
#highlights .alba-work-card {
	text-align: center !important;
	opacity: 0.95;
	min-height:360px;
	margin-top: 20px;
}
#highlights .alba-work-card h3 {
	    font-size: 60px;
		color: #796f67;
		font-weight:700;
}
#highlights .alba-work-card h6 {
	color: var(--blue);
	font-weight:600;
	font-size:22px;
}
.carrow {
    position: absolute;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    margin-top: 130px;
}
#naseer-msg .hod-message .quote {
    margin: 15%;
}
.cleft {
    left: -105px;
    padding-left: 5%;
}
.cright {
    right: -70px;
    padding-right: 5%;
}

.alba-worklist {
    padding: 11.1vw 7vw 12vw;
}
.worklist-card {
    margin-bottom: 4vw;
}
.alba-navbar .navbar-collapse.active {
        left: 0;
        transform: none;
		display:block;
    }
.alba-work-card,
.alba-work-card .card-img, 
.alba-work-card .card-img-top {
    border-radius: 0;
    transition: all 350ms ease;
}
.alba-work-card:hover,
.alba-work-card:focus {
    -webkit-box-shadow: 8px 8px 10px 0px rgba(221,213,200,1);
    -moz-box-shadow: 8px 8px 10px 0px rgba(221,213,200,1);
    box-shadow: 8px 8px 10px 0px rgba(221,213,200,1);
}
.alba-work-card h2 {
    margin-bottom: 7vw;
    font-size: 6vw;
    letter-spacing: -.1vw;
    text-transform: uppercase;
    font-weight: 600;
}
.alba-work-card h3 {
    margin-bottom: 0;
    font-size: 4vw;
    font-weight: 600;
    color: var(--coffee);
    letter-spacing: -.1vw;
}
.alba-work-card p {
    margin-bottom: 3vw;
    font-size: 4vw;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.1vw;
}
.alba-work-card .card-link {
    font-size: 4vw;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--blue);
    letter-spacing: .1vw;
    transition: all 350ms ease;
	background: var(--white) !important;
}
.alba-work-card .card-link span {
    display: inline-flex;
    width: 2vw;
    margin-left: 2.75vw;
    transition: all 350ms ease;
}
.alba-work-card .card-link svg {
    width: 2vw;
    fill: var(--blue);
    transition: all 350ms ease;
}
.alba-work-card .card-link:hover,
.alba-work-card .card-link:focus {
    color: var(--coffee);
}
.alba-work-card .card-link:hover span,
.alba-work-card .card-link:focus span {
    margin-left: 3.5vw;
} 
.alba-work-card .card-link:hover svg,
.alba-work-card .card-link:focus svg {
    fill: var(--coffee);
}
.alba-work-card .card-body {
    padding: 8.5vw 7vw 9.25vw;
}

/*=====  End of Alba Work List  ======*/

/* ==== Strategic review ====== */
   
   ul#strategic {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding-top: 50px;
    padding-right: 50px;
	border: 0px;
}
ul#strategic li {
    width: 100%;
}

   ul#strategic.nav-tabs .nav-link {
    color: #706964;
    background: #fff;
    width: 100%;
    height: 41px;
    text-align: center;
    font-weight: 400;
    border-radius: 10px;
    padding: 5px 60px ! important;
    border: 1px solid var(--coffee);
    margin-bottom: 0px ! important;
}

#strategic-review button.active {
    color: #FFF ! important;
    background: var(--blue) !important;
}
    #strategic-review button span.name-p {
    font-weight: 400 ! important;
    font-size: 17px;
    line-height: 18px;
    color: var(--brown);
    text-transform: uppercase;
}
 #strategic-review .alba-work-card{
	 background: #dbd7d0 !important;
	  text-align: center;
	  min-height: 375px;
    margin-bottom: 30px;
	margin-top: -50px;
 }

 #strategic-review .alba-work-card .card-body {
	 padding: 5px 5px 16px 5px;
    color: #000000;
 }
 
 #strategic-review .card {
	 border:none;
 }
 .box:after{
	 content: '';
	 display: block;
	 width: 0px;
    height: 0px;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 10px solid #fbfbfa;
    margin-left: 85px;
    margin-bottom: -9px;
 }
/* .box:before{
	 content: '';
	 display: block;
	 margin-left: 0px;
    margin-top: -15px;
    width: 0;
    height: 0;
    border-left: 149px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 16px solid #fbfbfa;
    border-radius: 20px 20px 0px 20px
 }*/
 #operations.csr .alba-work-card {
    width: 201px;}
 #operations.csr .card .box:before {
 border-left: 161px solid transparent;}
#operations.csr .card .box {
 margin: -15px 20px 20px;}
 #strategic-review .card .box{
	 background: #fbfbfa;
    margin: 40px;
    border-radius: 10px 10px 10px 10px;
    margin-top: -39px;
    box-shadow: 1px 1px 6px 2px rgb(151 144 134);
 }
 #strategic-review .certifications .card .box {
	 margin: -39px 20px 20px;
 }
 #strategic-review .certifications .card h3 {
    color: #e40421;
    font-size: 24px;
    text-align: center;
    margin-top: 20px;
}
 #strategic-review .certifications .card .box:before {
    content: '';
    display: none;
    margin-left: 0px;
    margin-top: -15px;
    width: 0;
    height: 0;
    border-left: 126px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 16px solid #fbfbfa;
    border-radius: 20px 20px 0px 20px;
}
 .hse-bg2 .hse-box{height: 190px;}
 .hse-bg2 .hse-box.hse1 {
    padding: 45px 20px;
}
 #strategic-review .card h3 {
	color: #e40421;
	font-size: 24px;
    text-align: center;
 }
 #strategic-review .card p {
	 color: #000;
    padding: 20px;
	 font-weight:400;
    text-align: center;
 }
 #strategic-review .card-img-top {
	width:41%;
	margin: 20px 10px 10px;
 }
    /* ============== strategic review section end ================ */
	
	/*** awards section **/
	#awards {padding-top:0px;}
	.awards .card{border:none;}
	.awards img{max-width:730px;}
	
	ul#awards_tab {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding-top: 50px;
    padding-right: 50px;
	border: 0px;
	padding-bottom:35px;
}
ul#awards_tab li {
    width: 100%;
}

   ul#awards_tab.nav-tabs .nav-link {
    color: #706964;
    background: var(--coffee-light);
    width: 100%;
    height: 41px;
    text-align: center;
    font-weight: 400;
    border-radius: 10px;
    padding: 5px 0px ! important;
    border: 1px solid var(--coffee-light);
    margin-bottom: 0px ! important;
}
#awards button.active {
    color: #FFF ! important;
    background: var(--blue) !important;
}
 #awards_tab button span.name-p {
    font-weight: 600 ! important;
    font-size: 13px;
    
 }

/* ======== timeline ========= */
p.h--timeline-event-description,.h--timeline-dates {
	font-family: 'Matthew';
	margin-bottom: 0px;
}
.line_box {
     display: flex;
	 margin-bottom: 150px ! important;
}
 .text_circle {
     flex: 1;
     text-align: center;
     position: relative;
}


 .text_circle:after {
     background-color: grey;
     bottom: 1.25em;
     content: "";
     display: block;
     height: 3px;
     position: absolute;
     right: 0;
     width: 50%;
     z-index: 0;
}
 .stav_projektu .text_circle:after,.stav_projektu .text_circle:before {background-color: #FFF;}
 .line_box h4 {
     color: #1283c6 ! important;margin-bottom: 10px ! important;
}
 .line_box h4,.line_box p {
     font-size: 12px;
     margin-bottom: 0;
     padding: 0 5px;
}
 .subline {
     position: absolute;
    right: -25px;
    bottom: -43%;
    width: 120px;
    height: 80px;
}
 .subline:before {
     content: "";
    position: absolute;
    height: 15px;
    width: 15px;
    bottom: 14px;
    right: 20px;
    background-color: #189599;
    border-radius: 50%;
    top: -35px;
    z-index: 1;
}
 .subline h6 {margin-bottom: 0;}
 .timeline {margin: 40px 0;}
 .text_circle.done:after,.text_circle.done + .text_circle:before,.stav_projektu .text_circle.done:after,.stav_projektu .text_circle.done + .text_circle:before {background-color: #189599;}
 .text_circle.sub:after {background-color: #FFF;}
 .text_circle:before {
     bottom: 1.25em;
     content: "";
     display: block;
     height: 3px;
     position: absolute;
     left: 0;
     width: 50%;
     z-index: 0;
     background-color: #FFF;
}
 .stav_projektu .text_circle:not(:first-child):before {background-color: #FFF;}
 .text_circle:last-child:after {}
 .circle {height: 100%;max-width: 130px;margin: 0px auto;}
 .tvar {
     height: 40px;
     width: 40px;
     border: 2px solid #189599;
     display: flex;
     position: relative;
     border-radius: 100%;
     top: -43px;
     margin: 3px auto;
     background-color: transparent;
}
 .tvar span {
     margin: 25% auto;
     height: 20px;
     width: 20px;
     background-color: #189599;
     border-radius: 100%;
     color: #fff;
}
 .stav_projektu .tvar {border: 2px solid #FFF;}
 .stav_projektu .done .tvar,.stav_projektu .sub .tvar {border: 2px solid #FFF;}
 .subline h6 {color: #189599;}
 .timeline .card-header:hover {
     background-color: #ececec;
     cursor: pointer;
}

/*=============================================
=            Owl Carousel            =
=============================================*/
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
    width: 3.75vw;
    height: 6.56vw;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-next:hover,
.owl-carousel .owl-nav button.owl-next:focus {
    background: transparent url('../images/icon-arrow-right.svg') no-repeat center center;
}

.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-prev:focus {
    background: transparent url('../images/icon-arrow-left.svg') no-repeat center center;
}

.owl-theme .owl-nav [class*=owl-] span {
    display: block;
    text-indent: -999999px;
}

.owl-theme .owl-dots .owl-dot span {
    width: 1.875vw;
    height: 1.85vw;
    border: .3125vw solid var(--white);
    margin: 0 1vw;
    background-color: var(--white);
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background-color: var(--blue);
}

/*=====  End of Owl Carousel  ======*/

/*=============================================
=            Footer-top            =
=============================================*/
.footer-top {
    padding: 6.66vw 7.5vw 8.5vw;
    background-color: var(--coffee);
    color: var(--white);
}

.footer-top h2,
.footer-top h2 strong,
.footer-top h3 {
    color: var(--white);
} 
.footer-top h2 {
    margin-bottom: 7.5vw;
    font-weight: 300;
}
.footer-top h3 {
    margin-bottom: 0;
    font-size: 3.75vw;
    letter-spacing: -.051vw;
}
.footer-top h3 span {
    font-weight: 300;
}
.footer-download-statement {
    position: relative;
    padding-right: 0;
}
.footer-download-statement::after {
    position: absolute;
    display: block;
    content: '';
    bottom: -1.5vw;
    left: 12px;
    width: calc(100% - 12px);
    height: 1px;
    background-color: var(--white);
}
.footer-top .download-icon {
    width: 6vw;
    height: 6vw;
}
/*=====  End of Footer-top  ======*/


/*=============================================
=            Bapco Footer            =
=============================================*/
.alba-footer {
    padding: 5vw 5.5vw 5vw 7.5vw;
    background-color: #706964;
    color: var(--white);
}

.back-to-top {
    /*width: 85px;*/
	float:right;
}
.alba-footer .back-to-top p {
    margin-bottom: 8px;
    font-size: 13px;
}
.back-to-top-icon svg {
    width: 42px;
}
.back-to-top-border {
    fill: none;
    stroke: var(--white);
    stroke-width: 1;
}
.back-to-top-icon {
    fill: var(--white);
}
.footer-address {
    position: relative;
    padding-right: 0;
    padding-left: 8.33vw;
}

.footer-address p,
.footer-address address {
    margin-bottom: 4px;
    letter-spacing: -.85px;
    line-height: 1.25;
}
.footer-address address {
    margin-bottom: 0;
}
.footer-address .list-unstyled {
    margin-bottom: 1px;
}
.footer-address .link-website a {
    text-decoration: none;
    font-weight: 600;
    color: var(--white);
}
.footer-address .list-item {
    letter-spacing: -.4px;
    line-height: 1.25;
}
.footer-address .list-item a {
    color: var(--white);
    text-decoration: none;
}
.footer-copyright {
    margin-top: 27px;
    padding: 15px 7px;
	 background:#b6ada5;
}
.footer-copyright p {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -.25px;
}
.footer-copyright .list-social-media {
    margin-bottom: 31px;
}
.footer-copyright .list-social-media a > img{
    width: 40px;
}
.list-social-media > li:not(:last-child) {
}
.footer-copyright .copyright p {
    font-size: 15px;
    font-weight: 400;
}
/*=====  End of Alba Footer  ======*/


/*=============================================
=            Footer Links            =
=============================================*/
.footer-links li a {
    font-size: 18px;
    text-decoration: none;
    color: #ffffff;
    transition: all 350ms ease;
	font-weight:500;
}
.footer-links li a:hover,
.footer-links li a:focus {
    color: var(--white);
}
/*=====  End of Footer Links  ======*/



/*-----------------------------------------------------  Inner Page Css Start ---------------------------------------*/


/*=============================================
=            Hero Inner            =
=============================================*/
.hero-inner {
    position: relative;
    padding-bottom: 17.33vw;
	background-color: #ede8e1;
}
.hero-inner .container-fluid {
    padding: 0;
}

.hero-inner .heading {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 17.33vw;
    padding: 7.5vw 2vw 3vw;
    z-index: 1;
    text-align: center;
    background-color: rgba(3,43,107, 0.8);
}
.hero-inner h1 {
    margin-bottom: 5.66vw;
    font-size: 7.5vw;
    font-weight: 300;
    color: var(--white);
}
/*=====  End of Hero Inner  ======*/


/*=============================================
=            Alba InnerContent            =
=============================================*/
.alba-innercontent {
    padding: 10vw 5vw 10vw 8.33vw;
}
.alba-innercontent_tagline {
    margin-bottom: 12.66vw;
}
.alba-innercontent_full {
    margin-bottom: 2.66vw;
}
.quote h4 {
    position: relative;
    margin-bottom: 0;
    font-size: 7vw;
    font-weight: 300;
    color: var(--coffee);
    line-height: 1.2;
    letter-spacing: -.16vw;
}
.quote h4::before,
.quote h4::after {
    position: relative;
    display: block;
    content: '';
    width: 34px;
    height: 28px;
    background: url('../images/open-quote.png') no-repeat;
    background-size: 100%;
}
.quote h4::before {
    margin-bottom: 3vw;
}
.quote h4::after {
    display: inline-block;
    vertical-align: top;
    top: 1.5vw;
    margin-left: 4.5vw;
    background: url('../images/close-quote.png') no-repeat;
    background-size: 100%;
}
.alba-innercontent_para {
    margin-bottom: 4.66vw;
}
.alba-innercontent_para h3 {
    margin-bottom: .5vw;
    font-size: 3.83vw;
    font-weight: 600;
    color: var(--blue-dark);
}
.alba-innercontent_para p {
    margin-bottom: 5vw;
    font-size: 3.83vw;
    line-height: 1.1575;
    letter-spacing: -.0416vw;
}
/*=====  End of Alba InnerContent  ======*/

/*=============================================
=            Alba Training            =
=============================================*/
.alba-training_row {
    margin-bottom: 2.5vw;
}
.alba-training {
    margin-bottom: 8vw;
    padding-right: 3.16vw;
}
.alba-training__heading {
    margin-bottom: 2vw;
    padding: 2vw 1.5vw 1.33vw 1.5vw;
    background-color: var(--coffee);
}
.alba-training__heading h4 {
    margin-bottom: 0;
    font-size: 3.33vw;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1;
    color: var(--white);
}
.alba-training__data {
    border-top: 1.33vw solid #C1B7A2;
    border-bottom: 1.33vw solid #C1B7A2;
}
.alba-training_icon {
    width: 35.5vw;
}
.alba-training_icon img {
    max-width: 26.66vw;
}
.alba-training__data_list {
    width: calc(100% - 35.5vw);
    padding-top: 3.5vw;
}
.alba-training__data_list li {
    position: relative;
    padding-bottom: .5vw;
    font-size: 3.66vw;
    line-height: 1;
}
.alba-training__data_list li:not(:first-child) {
    padding-top: 2.5vw;
}
.alba-training__data_list li:not(:last-child)::after {
    position: relative;
    content: '';
    display: block;
    width: 90%;
    border-bottom: 2px solid #C1B7A2;
    margin-top: .33vw;
}
.alba-training__data_list li strong {
    display: block;
    margin-top: 2.16vw;
    font-size: 8.4vw;
    color: var(--coffee);
    line-height: .9;
}
/*=====  End of Alba Training  ======*/


.footer-copyright .list-social-media {
    margin-bottom: 0;
    margin: 0px auto;
    text-align: center;
}
.transformational .card h3 {
	font-size:45px !important;
}
.transformational .card.card-box {
		    min-height: 317px !important;
}
.corporate_governance_btn a {
    text-decoration: none;
}
.corporate_governance_btn h4 { 
	padding: 18px;
    max-width: 210px;
    font-size: 18px;
    color: #082a5e;
	 text-decoration: none;
    font-weight: bold;
	background-image:url("../images/Management-button.png");
	background-repeat: no-repeat;
}
.alba-training_icon img {
    max-width: 90px;
    margin: 15px 0px 15px 0px;
}
.alba-training_icon_hyundai img {
    max-width: 190px;
    margin: 15px 0px 15px 0px;
}
.collapsible, .download_btn {
  background-color: #af9a7c;
  color: white;
  cursor: pointer;
  padding: 10px 10px 10px 25px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  margin-bottom:10px;
  font-weight:bold;
}
button.collapsible:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}
button.collapsible.active:after {
    content: "\2212";
}
.collapsible.active, .collapsible:hover {
  background-color: #af9a7c;;
}

.content_toggle {
  padding: 0 18px;
  display: none;
  overflow: hidden;
} 
.clientele_profile .alba-training__data_list li:not(:last-child)::after{
	width:100%;
}
div#navbarSupportedContent {
    overflow-y: scroll;
}
/* Slideshow container */
.slideshow-container {
  position: relative;
  background: #e8e5dd;
  
}

/* Slides */
.mySlides {
  display: none;
  padding: 30px 30px 30px 30px;
  text-align: left;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: 100;
  font-size: 90px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  text-decoration: none;
}

/* Position the "next button" to the right */
.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: none;
  color: #888;
}

/* The dot/bullet/indicator container */
.dot-container {
    padding: 20px;
    background: #dbd6ca;
	text-align: center;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.active, .dot:hover {
  /*background-color: #717171;*/
}

/* Add an italic font style to all quotes */
q {font-style: italic;}

/* Add a blue color to the author */
.author {color: cornflowerblue;}
.col-lg-4 {
    float: left;
}
.slide_icon img{
	width: 30px !important;
    position: relative;
    margin-right: 20px;
    bottom: 5px;
}
.slide_icon {
    color: #86754e;
    font-weight: 600;
	padding-bottom: 10px;
} 
.board_member{
	color: #86754e;
    font-weight: 600;
} 
.boardmember_designation{
	color:#0548a6;
	 
}
.mySlides p, .mySlides li {
    font-size: 15px;
}
span.dot.active {
    color: #7c633e;
    background-color: #7c633e;
}
span.dot {
    color: #baad98;
    background-color: #baad98;
}
.slideshow-container a.prev {
    left: 0;
}
.slideshow-container a.next {
    right: 0;
}
.board_of_director .col-lg-6 {
    float: left;
}
.qualification{padding-top:20px;}
.past_experience{padding-top:20px;}
.intro_description{padding-top:30px;}
a.prev img {
    display: block;
    position: absolute;
	left:0;
}
a.next img { 
    display: block;
    position: absolute;
	right:0;
}
.five_decades h1{
	font-weight: bold;
}
.five_decades h3{
	font-size: 25px;
    font-weight: bold;
}
.five_decades p{
	color:#0548a6;
}
/*
.right_content {
    padding-bottom: 30px;
} */
.time_decade{
	font-size: 100px;
    color: #0548a6;
}
/* Timeline Container */
.timeline {
  background: var(--primary-color);
  margin: 20px auto;
  padding: 20px;
}

/* Outer Layer with the timeline border */
.outer {
  border-left: 10px solid #af9a7c;
  margin-left: 15%;
}

/* Card container */
.card_five {
  position: relative;
  margin: 0 0 20px 20px;
  padding: 10px;
  max-width: 800px;
  margin-left: 35%;
  color: gray;
  border-radius: 8px;
 
}
#history {
    padding: 80px 0px;
    background:url("../images/history-bg.jpg");
	background-position: bottom right;
    background-repeat: no-repeat;
}
/* Information about the timeline */
.info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 600px;
}

/* Title of the card */
.title {
  position: relative;
}

/* Timeline dot  */
.title::before {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	background: white;
	border-radius: 999px;
	left: -345px;
	border: 3px solid #84754d;
}

.img-fluid {
    /*width: 100%;*/
    height: auto;
    background-size: cover;
} 
div#executive-managemnet{
	z-index: 1;
}
div#board-of-director {
    z-index: 1;
}
div#navbarSupportedContent {
    overflow-y: scroll;
    z-index: 999999;
}
.em_slider {
    margin-bottom: 15px;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.fadeInUp {
	animation-duration: 2s;
    animation-fill-mode: both;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
.fw300{font-weight:300 ! important;}
.accordion-button:not(.collapsed)::after {
    position: absolute;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    background: url("../images/icon-minus.svg") no-repeat center ! important;
    background-size: 4vw;
	transform: translateY(-50%) ! important;
}
.accordion-button.collapsed::after {
    position: absolute;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    background: url("../images/icon-plus.svg") no-repeat center ! important;
    background-size: 4vw;
	transform: translateY(-50%) ! important;
}

.accordion-button{
	font-size: 20px ! important;
}
.carousel-item-prev:not(.carousel-item-end),

.accordion-button:not(.collapsed){
		background-color: #af9a7c ! important;
    color: white;
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: bold;
	}
.accordion-button:not(.collapsed) {
    color: #fff ! important;
    background-color: #796f66 ! important;
    box-shadow: inset 0 calc(var(--bs-accordion-border-width) * -1) 0 var(--bs-accordion-border-color);
}
.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0 ! important;
    border-top-right-radius: 0 ! important;
}
.quoteceo h3.quotesmsgs {
    color: #e40421 !important;
    font-size: 25px;
    font-family: 'Matthew-Light' ! important;
}
h4.quotesmsgs {
    color: #e40421 !important;
    font-size: 20px;
    line-height: 28px;
    font-family: 'Matthew-Light' ! important;
    max-width: 80%;
}
h4.quotesmsgs .ceo {max-width: 100% !important;}

h4.quotesmsgs::before {
    position: relative;
    display: block;
    content: '';
    width: 34px;
    height: 28px;
	margin-left: 40%;
	margin-bottom: 10px;
    background: url(../images/open-quote.png) no-repeat;
    background-size: 100%;
} h4.quotesmsgs::after {
    position: relative;
    display: block;
    content: '';
    width: 34px;
    height: 28px;
	margin-left: 40%;
	margin-top: 10px;
    background: url(../images/close-quote.png) no-repeat;
    background-size: 100%;
}
span.cred {
	color: #e40421 !important;
	font-weight:700;
}
.hse-box {
    background: #FFF;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 10px;
}
.mt100{
	margin-top: 100px;
    display: block;
}
.hse-bg2 .container {
    background-color: #f0efec;
    padding: 30px 30px;
}
.card.card-box {
    background: #f2ece0;
    border: 0px;
    border-radius: 0px;
	min-height: 280px;
}
.cotj .card.card-box{
	margin-top: 20px;
}
.cotj #carouselExampleIndicators2 .cright {
    right: -65px;
}
.cotj .card.card-box img{
	margin-top: -30px ! important;
}
.cotj .carrow img {
    width: 40px;
    height: 40px;
}
.cotj .cleft {
    left: -60px;
    padding-left: 0;
}
.iconbox {
    background: #FFF;
    padding: 20px;
    text-align: center;
    border-radius: 20px;
	margin-bottom:20px;
}
.bmp .iconbox {
    min-height: 250px;
}
.awali .iconbox {
    min-height: 250px;
}
.d-flex .iconbox {
	max-width: 20%;
    min-width: calc(20% - 20px);
}
.iconbox p {
    font-size: 15px;
    line-height: 18px;
}
.iconbox img {
    max-width: 80px;
    text-align: center;
    margin-bottom: 10px;
}
.accordion-item {
    border: 0 ! important;
}
.accordion-body {
    background: #f0efeb;
}
nav.position-fixed.fixed img,nav.position-fixed.fixed button {
    display: none ! important;
}
.emp-pro {
    font-size: 32px ! important;
    padding-top: 160px ! important;
}
.cotj .cright {
    right: -60px;
    padding: 0;
}
.card.card-box h3 {
    color: #796f67;
    font-size: 24px;
    text-align: center;
    line-height: 50px;
    letter-spacing: 0;
    font-size: 50px;
}
.card.card-box p {
    color: #707173;
    padding: 0;
    font-weight: 400;
    text-align: center;
    font-size: 15px;
    line-height: 20px;
}
.card.card-box img {
    margin: -15px auto 30px;
    display: block;
    width: 120px;
}
.card.gray-card{
	background: #f0efec;
    border: 0;
    border-radius: 0;
	padding: 20px;
	display: block;
	min-height:165px;
	
}
.card.gray-card picture img.card-img-top {
    width: 80px;
}
.card.gray-card picture {
    width: 180px;
    text-align: center;
    border: 0;
    border-radius: 0;
    padding: 0;
    display: inline-block;
    margin: 30px auto;
	vertical-align: middle;
}
.card.gray-card .card-body{
	background: #f0efec;
    border: 0;
    border-radius: 0;
    padding: 0px;
	vertical-align: middle;
    width: calc(100% - 190px);
    display: inline-block;
	vertical-align: middle;
}
.iconc .carrow {
    margin-top: 65px;
}
.iconc #carouselExampleIndicators2 .cright {
    right: -50px;
    padding: 0px;
}
.iconc #carouselExampleIndicators2 .cleft {
    left: -50px;
padding-left: 0%;}
.iconc .carrow img{
	width: 40px;
    height: 40px;
}
.carousel-item {
	gap:15px;
}
#carouselExampleIndicators3 .carousel-item{
	gap:0;
}
#carouselExampleIndicators3 .carousel-item .card {
	
	margin:0px 5px ! important;
}

#carouselExampleIndicators4 .carousel-item{
	gap:0;
}
#carouselExampleIndicators4 .carousel-item .card {
	
	margin:0px 5px ! important;
}

#carouselExampleIndicators5 .carousel-item{
	gap:0;
}
#carouselExampleIndicators5 .carousel-item .card {
	
	margin:0px 5px ! important;
}
.financial-highlights .card-body h2 {
	  margin-bottom: 10px;
	color: #706964 !important;
    font-weight: 600 !important;
    font-size: 18px;
    padding-left: 0px;
}
.financial-highlights .card-body {
	background:var(--coffee-light);
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
	
}
.financial-highlights .alba-work-card .card-body {
    padding: 20px 15px 20px 15px;
    }
	.financial-highlights .alba-work-card {
	webkit-box-shadow: 1px 1px 5px 0px rgba(221,213,200,1);
    -moz-box-shadow: 1px 1px 5px 0px rgba(221,213,200,1);
    box-shadow: 1px 1px 5px 0px rgb(135 134 134);
    }
	.financial-highlights .alba-work-card  p{ min-height: 175px;}
/* medium and up screens */
@media (min-width: 768px) {
    .ci4 .carousel-inner .carousel-item-end.active,
    .ci4 .carousel-inner .carousel-item-next {
      transform: translateX(25%);
    }
    .ci4 .carousel-inner .carousel-item-start.active, 
    .ci4 .carousel-inner .carousel-item-prev {
      transform: translateX(-25%);
    }
	.ci3 .carousel-inner .carousel-item-end.active,
    .ci3 .carousel-inner .carousel-item-next {
      transform: translateX(33.33%);
    }
    .ci3 .carousel-inner.ci3 .carousel-item-start.active, 
    .ci3 .carousel-inner .carousel-item-prev {
      transform: translateX(-33.33%);
    }
	
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { 
  transform: translateX(0);
}


@media screen and (max-width: 991px) {
    .hidden-sm {
        display: none;
    }
    /*=============================================
    =            Board of Director            =
    =============================================*/
    .board-of-director .carousel-indicators::before {
        margin-bottom: 8.33vw;
    }
    .board-of-director .carousel-indicators > button {
        position: relative;
        display: none;
        width: calc(100% - 2.88vw);
        border-width: 1.5vw;
        border-radius: 10vw;
        margin-left: 2.5vw;
        padding: 0;
        font-size: 3.6vw;
        font-weight: bold;
        /* box-shadow: inset 1.5vw 1.5vw 1.5vw 0px rgba(208,196,180,1); */
        box-shadow: none;
    }

    .board-of-director .carousel-indicators > button.active {
        display: block;
        border: none;
        width: calc(100% - 2.88vw);
        margin-left: 2.5vw;
        background-color: #ddd8cb;
    }
    .board-of-director .carousel-indicators > button span {
        display: block;
        padding: 2vw 1vw 1vw;
        border-radius: 10vw;
        box-shadow: 1px 1px 2px 1px #c4b6a4;
    }
    .board-of-director .carousel-indicators > button::before {
        position: absolute;
        content: "";
        display: block;
        top: -1.5vw;
        left: -1.5vw;
        width: calc(100% + 3vw);
        height: calc(100% + 3vw);
        background-color: var(--white);
        border-radius: 10vw;
        box-shadow: inset .85vw .85vw 1vw 0px #e4ddd3, .5vw .5vw .5vw 1px #f0ede8;
        z-index: -1;
    }
    
    
    /*=====  End of Board of Director  ======*/
}

@media screen and (min-width: 768px) {
    /*=============================================
    =            Common Css            =
    =============================================*/
    h1,h2 {
        font-size: 30px;
    }
    .section {
        padding-top: 65px;
        padding-bottom: 65px;
    }
    .accordion-button::after {
        width: 20px;
        height: 20px;
    }
    /*=====  End of Common Css  ======*/
    
    /*=============================================
    =            Navbar            =
    =============================================*/
    
    .alba-navbar {
        padding: 40px 0 0;
    }
    .logo img, .alba-navbar .navbar-brand img {
        max-width: 127px;
    }
    .alba-navbar .navbar-toggler {
        margin-top: 0;
    }
    .alba-navbar .navbar-toggler-icon {
        width: 32px;
        height: 22px;
        background-size: 100%;
    }
    .alba-navbar .navbar-collapse {
        width: 505px;
        left: inherit;
        right: -520px;
        padding: 40px 40px 40px 133px;
        text-align: left;
        transform: none;
    }
    
    .alba-navbar .close-navbar {
        width: 24px;
        height: 24px;
        margin-bottom: 108px;
    }
    .alba-navbar h2 {
        margin-bottom: 50px;
        font-size: 26px;
        letter-spacing: -.15px;
    }
    .alba-navbar .navbar-nav .nav-link.active, .alba-navbar .navbar-nav .show>.nav-link, .alba-navbar .navbar-nav .nav-link {
        font-size: 19px;
        letter-spacing: -.1px;
    }
    /*=====  End of Navbar  ======*/
    
    
    /*=============================================
    =            Hero            =
    =============================================*/
    .hero {
    position: relative;
    margin-top: -20px;
    padding-top: 0;
    padding-bottom: 0px;
  }
  
  .hero-container {
    position: relative;
  }
  .hero .container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  
  
  .go-down {
    bottom: 25px;
  }
  .go-down img {
    width: 22px;
  }
    /*=====  End of Hero  ======*/
    
    /*=============================================
    =            Board of Diectors            =
    =============================================*/
    .board-of-director {
        margin-bottom: 0px;
    }
   .board-of-director .carousel {
       padding: 0;
   }
    
   .board-of-director h2 {
       margin-bottom: 40px;
   }
   .board-member-name {
        width: 35%;
       margin-left: -40px;
    }
    .board-member-name h3 {
        font-size: 24px;
        font-weight: 400;
        letter-spacing: -.25px;
    }
    .board-member-name h4 {
        font-size: 22px;
    }
    /*=====  End of Board of Directors  ======*/
    
    /*=============================================
    =            Message             =
    =============================================*/
   
	
	#ceo-chairman-msg .content h4 {
	color:#706964;
	}
    .message h3,
    .message h4, 
    .message h5
    {
        font-size: 22px;
        letter-spacing: 0;
    }
	 .message .read-more {
		 font-size: 15px;letter-spacing: 1px;
	 }
    .message .read-more span {
        width: 11px;
        margin-left: 15px;
        margin-bottom: 3px;
    }
    .message h2 {
        margin-bottom: 25px;
    }
    .message h3 {
        margin-bottom: 20px;
    }
    .message h4 {
        margin-bottom: 3px;
        line-height: 1.3;
    }
    .message p {
		font-size: 18px;
        margin-bottom: 26px;
		color:#796f67;
    }
    .message .hod-image,
    .message .ceo-message .hod-image {
        padding: 18px 0 0;
    }

    .message .hod-message .content,
    .message .hod-image {
        margin: 0 auto;
    }
    /*=====  End of Message   ======*/
    
   
    
    /*=============================================
    =            Financial Highlights            =
    =============================================*/
  .financial-highlights {
    padding: 45px 0;
  }
  
  .financial-highlights .container-fluid {
    max-width: 720px;
  } 
  .financial-highlights #carouselExampleIndicators5 .cright{
	  left: calc(-30% - 45px);
    top: 65px;
  }
  .financial-highlights #carouselExampleIndicators5 .cleft{
	  left: calc(-30% - 45px);
    top: 0px;
	padding-left: 0 ! important;
  }
  .financial-highlights .accordion-button {
    padding: 17px 25px 12px;
    font-size: 22px;
  }
  .financial-highlights .accordion-body {
    padding: 45px 15px 20px 0;
  }
  .financial-numbers {
    padding-bottom: 15px;
  }
  .financial-icon img {
    max-width: 155px;
    margin: 0 0 0 20px;
  }
  .financial-numbers h4 {
    font-size: 70px;
    letter-spacing: -4px;
  }
  .financial-details h5 {
    margin-bottom: 25px;
    font-size: 30px;
  }
  .financial-details h5 em {
    font-size: 24px;
  }
  .financial-details p {
    font-size: 20px;
  }
    /*=====  End of Financial Highlights  ======*/
    
    

    
    /*=============================================
    =            Alba Worklist            =
    =============================================*/
    .alba-worklist {
        padding-left: 0;
        padding-right: 0;
    }
    .worklist-card {
        margin-bottom: 30px;
    }
    .alba-work-card {
        height: 100%;
    }
    .alba-work-card .card-body {
       /* padding: 33px 25px 37px 28px;*/
	   padding:16px;
	   min-height: 110px; 
	   
	    
    }
    .alba-work-card h2 {
        margin-bottom: 30px;
        font-size: 25px;
        letter-spacing: -.5px;
    }
    .alba-work-card h3{
        font-size: 17px;
        letter-spacing: -.5px;
    }
    .alba-work-card p {
        font-size: 14px;
    margin-bottom: 0px;
    letter-spacing: normal;
   
    }
    .alba-work-card .card-link {
        font-size: 14px;
    letter-spacing: normal;
    font-weight: 400;line-height: 14px;
    }
    .alba-work-card .card-link span {
        position: relative;
        top: 0;
        width: 10px;
        margin-left: 15px;
    }
    .alba-work-card .card-link span svg {
        width: 10px;
    }
    .alba-work-card .card-link:hover span, .alba-work-card .card-link:focus span {
        margin-left: 20px;
    }
   
    /*=====  End of Alba Worklist  ======*/
    
   
    
    /*=============================================
    =            Alba Footer            =
    =============================================*/
    .alba-footer {
        padding: 50px 0;
    }
    
    
    /*=====  End of Alba Footer  ======*/
    
    /*------------------------------------------  Innerpage Css  ---------------------------------*/
    
    
    /*=============================================
    =            Hero Inner            =
    =============================================*/
    .hero-inner {
        padding-bottom: 90px;
    }
    .hero-inner .heading {
        bottom: 90px;
        padding: 50px 45px 30px;

    }
    
    .hero-inner .heading h1 {
        margin-bottom: 30px;
        font-size: 36px;
    }

    /*=====  End of Hero Inner  ======*/
    
    /*=============================================
    =            Alba InnerContent            =
    =============================================*/
    
    .alba-innercontent {
        padding: 50px 0;
    }
    .quote {
        margin-bottom: 30px;
    }
    .quote h4 {
        
        font-weight:600;
    }
    .quote h4::before, 
    .quote h4::after {
        width: 30px;
        height: 25px;
        background-size: 29px;
    }
    .quote h4::before {
        margin-bottom: 10px;
    }
    .quote h4::after {
        top: 16px;
        margin-left: 0px;
		margin-bottom:20px;
    }
    .alba-innercontent_para {
        margin-bottom: 30px;
    }
    .alba-innercontent_para p,
    .alba-innercontent_para h3 {
        font-size: 18px;
    }
    .alba-innercontent_para p {
        margin-bottom: 20px;
    }
    /*=====  End of Alba InnerContent  ======*/
    
    
    
    /*=============================================
    =            Alba Training            =
    =============================================*/
    .alba-training_row {
        margin-bottom: 10px;
    }
    .alba-training {
        margin-bottom: 40px;
    }
    .alba-training__heading {
        margin-bottom: 12px;
        padding: 12px 12px 10px;
    }
    .alba-training__heading h4 {
        font-size: 20px;
    }
    .alba-training__data {
        border-top-width: 6px;
        border-bottom-width: 6px;
    }
    .alba-training_icon img {
        max-width: 160px;
    }
    .alba-training__data_list li {
        padding-bottom: 5px;
        font-size: 22px;
    }
    .alba-training__data_list li:not(:first-child) {
        padding-top: 12px;
    }
    .alba-training__data_list li:not(:last-child)::after {
        margin-top: 5px;
    }
    .alba-training__data_list li strong {
        margin-top: 12px;
        font-size: 50px;
    }
    /*=====  End of Alba Training  ======*/
    
    
    
    
    
}
@media screen and (min-width: 992px) {
    
    /*=============================================
    =            Common Css            =
    =============================================*/
    h1,h2 {
        font-weight: 300;
        letter-spacing: -.95px;
        line-height: 1;
    }
    h1 strong, h2 strong {
        letter-spacing: -.5px;
    }
    .container {
        max-width: 844px;
    }
    .visible-sm {
        display: none;
    }
    /*=====  End of Common Css  ======*/

    
    /*=============================================
    =            Hero            =
    =============================================*/
   
  .go-down {
    bottom: 52px;
  }
    /*=====  End of Hero  ======*/

    /*=============================================
    =            Board of Diectors            =
    =============================================*/
    .board-of-director h2 {
        margin-bottom: 0;
        letter-spacing: -.95px;
    }
   .board-of-director .carousel {
      
   }
   .board-of-director .carousel-inner {
    width: 100%;
       margin-left: 0px;
   }
   .board-member-image {
       width: 280px;
   }
   .board-member-name {
       width: calc(100% - 280px);
       margin-left: -20px;
       padding-top: 57px;
   }
   .board-member-name h3 {
       font-size: 16px;
       font-weight: 600;
       letter-spacing: 0;
   }
   .board-member-name h4 {
       font-size: 15px;
   }
   .board-of-director .carousel-indicators::before {
       width: calc(100% - 130px);
       margin-left: 214px;
       margin-bottom: 34px;
       border-width: 6px;
   }
   .board-of-director .carousel-indicators > button {
       position: relative;
       width:195px;
       border-width: 0;
       margin: 0 13px 12px 0;
       padding: 0;
       font-size: 10px;
       font-weight: 600;
       letter-spacing: 0;
       box-shadow: none;
   }
   .board-of-director .carousel-indicators > button.active {
        box-shadow: none;
   }
   .board-of-director .carousel-indicators > button:nth-child(3n+2):not(:nth-child(2)) {
       margin-left: 208px;
   }
   
   .board-of-director .carousel-indicators > button.active span{ border: 4px solid #f3f0ed !important;}
   .board-of-director .carousel-indicators > button span {
        position: relative;
        display: block;
        /*border: 4px solid #f3f0ed;*/
        border-radius: 25px;
        padding: 8px 0px 4px;
        -webkit-box-shadow: 3px 4px 5px 0px #ddd3c5, inset 4px 4px 10px 0px #ddd3c5, 5px 5px 10px 0px rgb(222 214 202 / 0%), -3px -3px 5px 0px rgba(255,255,255,.6), inset -5px -5px 10px 0px rgb(240 240 240);
        box-shadow: 3px 4px 5px 0px #ddd3c5, inset 4px 4px 10px 0px #ddd3c5, 5px 5px 10px 0px rgb(222 214 202 / 0%), -3px -3px 5px 0px rgba(255,255,255,.6), inset -5px -5px 10px 0px rgb(240 240 240);
   }
   .board-of-director .carousel-indicators > button.active span {
        border-color: #f1eeea;
        box-shadow: 3px 4px 5px 0px #ddd3c5, -3px -3px 5px 0px rgba(255,255,255,.6);
    }
    .board-of-director .carousel-indicators > button.active span::before {
        position: absolute;
        content: '';
        display: block;
        top: -4px;
        left: -4px;
        width: calc(100% + 8px);
        height: calc(100% + 8px);
        border-radius: 25px;
        box-shadow: inset 0px 1px 5px 0px #e2d9cd;
    }
    /*=====  End of Board of Diectors  ======*/

    
    /*=============================================
    =            Executive Management            =
    =============================================*/
    
    .executive-management .carousel-indicators > button span, 
    .executive-management.board-of-director .carousel-indicators > button span {
        background-color: #e6e6e7;
    }
    .executive-management .carousel-indicators > button span, 
    .executive-management.board-of-director .carousel-indicators > button span {
        border-color: #e6e6e7;
        box-shadow: 2px 2px 4px 0px #babcbe, inset 2px 2px 6px 0px rgba(212,213,214,0.55), -3px -3px 5px 0px rgba(255,255,255,0.8);;
        background-color: #edeeee;
    }
    .executive-management .carousel-indicators > button span::before, 
    .executive-management.board-of-director .carousel-indicators > button span::before {
        position: absolute;
        content: '';
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 25px;
        box-shadow: inset 1px 1px 2px 0px #babcbe;
    }
    .executive-management.board-of-director .carousel-indicators > button.active span {
        border-color: #efeded;
        background-color: #d0d0d0;
        box-shadow: 1px 1px 2px 0px #dadada;
    }
    .executive-management.board-of-director .carousel-indicators > button.active span::before {
        top: -5px;
        left: -5px;
        width: calc(100% + 8px);
        height: calc(100% + 8px);
        box-shadow: inset 1px 1px 2px 0px #babcbe;
    }
    /*=====  End of Executive Management  ======*/
    
    
    
    /*=============================================
    =            Message            =
    =============================================*/

    .message .hod-message .content, 
    .message .hod-image {
        width: 68%;
    }
	
	.message h3, .message h4, .message h5{
	    font-size: 22px;
    letter-spacing: 0;
	}
    
    /*=====  End of Message  ======*/
	
	#naseer-msg {
		background: url(../images/naseer-bg.jpg);
		margin-top: -119px;
		padding-top: 150px;
	}
	#naseer-msg h6 {
		font-weight:600;
		margin-top: 40px;
	}
	#naseer-msg p {
		font-size: 16px;
		font-weight: 600;
	}

    
    /*=============================================
    =            Operational Highlights            =
    =============================================*/
    .operation-highlights .nav-pills .nav-link {
        padding: 25px 5px 30px;
    }
    .operation-highlights .nav-pills .nav-item {
        width: calc(16.75% - 5px);
    }
    .operational-image {
        margin-bottom: 0;
        padding-left: 12px;
    }
    .operational-image img {
        max-width: 88%;
    }
    .operational-data {
        padding: 0 15px 0 5px;
    }
    .operational-data .list-item, 
    .operational-data .list-item strong {
        font-size: 16px;
    }
    .operational-data .list-item {
        padding-top: 14px;
        padding-bottom: 0;
    }
    .operational-data .list-item:first-child {
        padding-top: 0;
    }
    .operational-highlights-tab .tab-pane {
        padding: 35px 0;
    }
    .operational-data .list-item, 
    .operational-data .list-item strong {
        font-size: 21px;
    }
    .operational-data .list-item {
        padding-bottom: 5px;
    }
    /*=====  End of Operational Highlights  ======*/
    
    
    
    /*=============================================
    =            Financial Highlights            =
    =============================================*/
   .financial-highlights {
    padding: 0 0 50px 0;
  }
  .financial-highlights .container-fluid {
    max-width: none;
    padding: 0;
  }
  .financial-highlights .alba-tabbing {
    position: relative;
    padding-top: 45px;
  }
  .financial-highlights .alba-tabbing::before {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 40%;
    height: 244px;
    background-color: var(--blue);
  }
  /*.financial-highlights .alba-tabbing::after {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    right: 0;
    width: 50%;
    height: 102px;
    background-color: #efece7;
  }*/
  .financial-highlights div#carouselExampleIndicators2 {
    margin-top: 40px;
}
.financial-highlights .card.alba-work-card {
    border: 0px;
	min-height: 450px;
}
  .financial-highlights h2 {
    margin-bottom: 34px;
    color: var(--white);
  }
  
   
  .financial-highlights .nav-tabs {
    display: grid;
    grid-template-columns: repeat(2, 53%);
    grid-template-rows: auto auto auto auto auto;
    grid-auto-flow: column;
    grid-gap: 1px;
    border: none;
    margin-bottom: 100px;
  }
  .financial-highlights .nav-tabs li {
    font-size: 13px;
  }
  .financial-highlights .nav-tabs li a {
    border: none;
    border-radius: 0;
    padding: 0;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--blue-light);
    letter-spacing: -0.5px;
    transition: all 350ms ease;
  }
  .financial-highlights .nav-tabs li:hover a,
  .financial-highlights .nav-tabs li:focus a {
    background-color: transparent;
    color: var(--white);
  }
  .financial-highlights .nav-tabs .active {
    background-color: transparent;
    color: var(--white);
  }

  .financial-highlights .tab-content {
    max-width: 816px;
    margin: 0 auto;
  }
  .fh-content {
    flex-flow: wrap;
    padding-left: 0;
  }
  .financial-icon {
    position: relative;
    top: 25px;
    width: 128px;
  }
  .financial-icon img {
    max-width: 117px;
    margin: 0;
  }
  .financial-numbers {
    position: relative;
    width: 240px;
    border: none;
    padding-top: 5px;
  }
  .financial-numbers::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 2px;
    height: 120px;
    background-color: var(--coffee);
  }
  .financial-numbers h3 {
    display: block !important;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--blue);
  }
  .financial-numbers h4 {
    font-size: 89px;
    letter-spacing: -8px;
  }
  .financial-details {
    width: calc(100% - 368px);
    padding-top: 0;
    padding-left: 30px;
  }
  .financial-details h5 {
    margin-bottom: 18px;
  }
  .financial-details h5,
  .financial-details h5 em {
    font-size: 18px;
  }
  .financial-details h5 span {
    position: relative;
    display: inline-flex;
    padding-left: 12px;
    font-size: 18px;
  }
  .financial-details h5 span::before {
    position: absolute;
    content: "|";
    top: 0;
    left: 4px;
  }
  .financial-details p {
    margin-bottom: 0;
    letter-spacing: -0.75px;
    line-height: 1.15;
  }
  .financial-highlights .tab-buttons {
    position: absolute;
    top: calc(50% + 150px);
    left: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 calc((100% - 844px)/2 - 50px);
    transform: translateY(-50%);
  }
  .financial-highlights .tab-buttons .tab-buttons-icon {
    display: inline-flex;
    width: 30px;
  }
    
    /*=====  End of Financial Highlights  ======*/
    
    
        
    /*=============================================
    =            Alba Worklist            =
    =============================================*/
    .alba-worklist {
        padding-top: 116px;
    }
    .alba-work-card {
      /*  max-width: 331px;*/
    }
 
   
    /*=====  End of Alba Worklist  ======*/
    
    
    /*=============================================
    =            Footer top            =
    =============================================*/
    .footer-top {
        padding: 48px 0 73px;
		background:-var(--coffee);
    }
     
    /*=====  End of Footer top  ======*/
    /*=============================================
    =            Alba Footer            =
    =============================================*/
    .alba-footer {
        padding: 55px 0;
    }
    .footer-navigation {
        padding-bottom: 22px;
    }
    .alba-footer .footer-links:first-child {
        padding-left: 9px;
    }
    .alba-footer .footer-links:nth-child(2) {
        padding-left: 30px;
    }
    .alba-footer .footer-links li {
        margin-bottom: -1px;
        letter-spacing: -.5px;
    }
    .alba-footer .footer-detail {
        padding-top: 35px;
		
    }
    .footer-address {
        padding-left: 6px;
    }
    .back-to-top  {
        padding-bottom: 18px;
    }
    .alba-footer .back-to-top p {
        margin-bottom: 5px;
        font-size: 10px;
    }
    .back-to-top-icon svg {
        width: 30px;
    }

    .footer-address p, 
    .footer-address address, 
    .footer-address .list-item {
        font-size: 11px;
        letter-spacing: 0;
    }
    .footer-address p, 
    .footer-address address,
    .footer-address .list-unstyled {
        margin-bottom: 10px;
    }
    .footer-copyright {
        margin-top: -67px;
		
    }
    .footer-copyright .join-the-conversation {
        padding-left: 29px;
    }
    .footer-copyright .list-social-media {
        margin-bottom: 0;
    }
    .list-social-media > li:not(:last-child) {
    }
    .footer-copyright .list-social-media a > img {
        width: 32px;
    }
    .footer-copyright .copyright {
        padding-left: 8px;
    }
    .footer-copyright .copyright p {
        margin-bottom: 0;
        font-size: 11px;
    }
    /*=====  End of Alba Footer  ======*/
       /*------------------------------------------  Innerpage Css  ---------------------------------*/
    
    
    /*=============================================
    =            Hero Inner            =
    =============================================*/
    .hero-inner {
        margin-bottom: 90px;
        padding-bottom: 0;
    }
    .hero-inner::after {
        position: absolute;
        content: '';
        display: block;
        left: 0;
        bottom: -90px;
        width: 366px;
        height: 90px;
        background-color: rgba(3,43,107, 0.6);
    }
    .hero-inner .heading {
        max-width: 366px;
        bottom: 0;
        padding: 44px 45px 78px 100px;
        text-align: left;
    }
    
    .hero-inner .heading h1 {
        margin-bottom: 0;
        font-size: 40px;
    }
    .hero-inner .icon-down {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 35px;
    }
    /*=====  End of Hero Inner  ======*/
    
    /*=============================================
    =            Bapco InnerContent            =
    =============================================*/
	
	/*** CEO Page**/
	
	#ceo-chairman-msg {
    padding-top: 80px;
    padding-bottom: 80px;
}

.pb150{padding-bottom:150px;}
.bg-gray {
    background: #f0efec;
}
#strategic-review .card {
    background: transparent;
}
#naseer-msg:before {
    content: '';
    background: url('../images/top-qoute.png');
    margin-top: -32px;
    left: 20%;
    background-size: cover;
    width: 68px;
    display: block;
    height: 70px;
    position: absolute;
}
#naseer-msg:after {
    content: '';
    background: url('../images/bottom-qoute.png');
    margin-top: -175px;
    left: 20%;
    background-size: cover;
    width: 68px;
    display: block;
    height: 175px;
    position: absolute;
}
 .csr .alba-work-card{
	 background: #dbd7d0 !important;
	  text-align: center;
	margin-bottom: 30px;
	margin-top: -50px;
	max-width: 250px;
    margin: 0px auto;
	border: 0px;
    border-radius: 10px;

 }
 .csr .alba-work-card .card-body {
    padding: 0px 15px 15px;
}
 .csr .card .box{
	 background: #fbfbfa;
    margin: 40px;
    border-radius: 10px 10px 10px 10px;
	margin-top:-39px;
	box-shadow: 1px 1px 9px 5px rgb(151 144 134);
 }
 .csr .card .box:after{
	 content: '';
	 display: block;
	 width: 0px;
    height: 0px;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 10px solid #fbfbfa;
    margin-left: 90px;
    margin-bottom: -10px;
 }
 .csr .card .box:before{
	 content: '';
	 display: none;
	 margin-left: 0px;
    margin-top: -15px;
    width: 0;
    height: 0;
    border-left: 170px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 16px solid #fbfbfa;
    border-radius: 20px 20px 0px 20px
 }
 .csr-content p {
    color: #333333;
}
 .csr-content {
    border-left: 1px solid #b5aca5;
    padding-left: 20px;
}
 .csr .alba-work-card h2 {
    margin-bottom: 0px;
    font-size: 45px;
	color: #e40421;
}

h2.dark{
	color:#333333 !important;
}
 .csr .card h3 {
	color: #e40421;
	font-size: 23px;
    text-align: center;
	line-height: 24px;
	letter-spacing: 0;
 }
 .csr  .card-img-top {
	width:41%;
	margin: 20px 10px 10px;
 }
 .csr .card p {
    color: #707173;
    padding: 20px;
    font-weight: 400;
    text-align: left;
    font-size: 15px;
    line-height: 20px;
}
/*****************************/
.ceo .hero .container-fluid {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.ceo h2.banner-title {
    position: absolute;
    margin-top: 50vh;
    font-size: 44px;
    text-align: left;
    color: #707173;
	}
	body.ceo .hero {
		max-height: 862px;
	}
	body.ceo .csr-content h3 {
		font-size: 32px;
		color: #a4988e;
	}
	.quotemsg h4 {
		color: #e40421 !important;
		font-size: 21px;
	}
	.quotemsg h4::before{
		width: 38px;
		height: 50px;
		background-size: 29px;
		position: relative;
		display: block;
		content: '';
		background: url(../images/quote-grey.png) no-repeat;
		background-size: contain;
	}
	.ourop .quotemsg h4::before{
		width: 38px;
		height: 50px;
		background-size: 29px;
		position: relative;
		display: block;
		content: '';
		background: url(../images/open-quote-white.png) no-repeat;
		background-size: contain;
	}
	.mt-vh {
		margin-top: 70vh ! important;
		margin-bottom: 70vh ! important;
	}
	.mt-top {
		margin-top: 20vh;
	}
	.mt-top1 {
		margin-top: 70vh;
	}
	.mt-top2 {
		margin-top: 70vh;
	}
	.quoteceo h3 {
		color: #e40421 !important;
		font-size: 25px;
		font-family:'Matthew-Light';
	}
    .alba-innercontent_tagline {
        padding-left: 17px;
    }
    .alba-innercontent_tagline h2 {
        max-width: none;
        font-size: 21px;
        letter-spacing: -.25px;
    }
    .alba-innercontent_para {
        margin-bottom: 11px;
        padding-left: 15px;
        padding-right: 0;
    }
    .alba-innercontent_para p, 
    .alba-innercontent_para h3 {
        font-size: 16px;
        letter-spacing: -.25px;
        line-height: 1.25;
    }
    .alba-innercontent_para h3 {
        margin-bottom: 0;
    }
    .alba-training {
        margin-bottom: 22px;
        padding-right: 0;
    }
    .alba-training__heading {
        margin-bottom: 5px;
        padding: 7px 12px 4px;
    }
    .alba-training__heading h4 {
        font-size: 12px;
    }
    .alba-training__data {
        border-top-width: 4px;
        border-bottom-width: 4px;
    }
    .alba-training_icon {
        width: 124px;
    }
    .alba-training_icon img {
        max-width: 90px;
    }
    .alba-training__data_list {
        width: calc(100% - 124px);
        margin-bottom: 9px;
        padding-top: 12px;
    }
    .alba-training__data_list li {
        font-size: 12px;
    }
    .alba-training__data_list li strong {
        margin-top: 9px;
        font-size: 28px;
    }
    .alba-training__data_list li:not(:first-child) {
        padding-top: 4px;
    }
    .alba-training__data_list li:not(:last-child)::after {
        border-bottom-width: 1px;
        margin-top: 1px;
    }
    .alba-training__data_list li:last-child {
        padding-bottom: 0;
    }    
}
@media screen and (min-width: 1200px) {
    .container {
        max-width: 1124px;
    }
    h1,h2 {
        font-size: 40px;
    }
	.alba-navbar .navbar-brand {
        padding-top: 12px;
    }
    .alba-navbar {
        padding-top: 57px;
    }
    .logo img, 
    .alba-navbar .navbar-brand img {
        max-width: 184px;display:none;
    }
    .alba-navbar .navbar-toggler-icon {
        width: 42px;
        height: 32px;
    }
    .alba-navbar .navbar-collapse {
        width: 610px;
        right: -700px;
        padding-left: 165px;
    }
    .alba-navbar .close-navbar {
        width: 32px;
        height: 32px;
        margin-bottom: 45px;
    }
    .alba-navbar h2 {
        font-size: 34px;
    }
    .alba-navbar .navbar-nav .nav-link.active, .alba-navbar .navbar-nav .show>.nav-link, .alba-navbar .navbar-nav .nav-link {
        font-size: 24px;
        letter-spacing: -.5px;
    }
    .hero {
		margin-top: 0;
		overflow: hidden;
	}
	.hero::before {
		background-size: cover;
		background-position-x: center;
		background-position-y: center;
	}
	.five-decades {
		font-size: 90px;
		line-height: 96px;
		right: 0;
		text-transform: uppercase;
		text-align: right;
		font-weight: 600;
		top: 150px;
		left: calc(100% - 475px);
		font-family: 'Joey-Bold';
	}
	.annual-reports {
		right: 0;
		top: 450px;
		left: calc(100% - 300px);
		font-size: 20px;
		text-align: right;
		text-transform: uppercase;
		position: absolute;
		color: #FFF;
		font-weight: 600;
	}
	  .go-down {
		bottom: 72px;
	  }
	  .go-down img {
		width: 28px;
	  }
    .board-of-director {
        padding-top:100px;
        padding-bottom: 72px;
    }
    
    .board-member-image{
        width: 370px;
    }
    
	.board-of-director .carrow {
		
	}
	
	.board-of-director .alba-work-card h3 {
		color:#99161b;
	}
	
	.board-of-director .alba-work-card p {
		margin-bottom: 0;
	}
	.board-of-director .cright {padding-right:1%;}
	
    .board-of-director .carousel-indicators::before {
        width: calc(100% - 286px);
        margin-left: 86px;
        margin-bottom: 46px;
        border-width: 8px;
    }
    .board-of-director .carousel-indicators > button {
        width: 260px;
        margin: 0 19px 15px 0;
        font-size: 12px;
    }
    .board-of-director .carousel-indicators > button:first-child {
        margin-right: 22px;
        letter-spacing: .35px;
    }
    .board-of-director .carousel-indicators > button:nth-child(3n+2):not(:nth-child(2)) {
        margin-left: 282px;
    }
    
    .executive-management {
        padding-top: 55px;
    }
    .executive-management .carousel {
        margin-top: -89px;
    }
    .executive-management .carousel-indicators::before  {
        margin-bottom: 35px;
    }
    .executive-management .board-member-image {
        width: 325px;
    }
    .executive-management .board-member-name {
        width: calc(100% - 325px);
        margin-left: 0;
        padding-top: 43px;
        padding-left: 23px;
    }
    
    .message .hod-message .content, 
    .message .hod-image {
        width: 100%;
        margin: 0;
    }
    .message .hod-image > img {
        max-width: 100%;
    }
	.message .hod-image > img {
    }
    
	.message .hod-message h6 {
		    color: #e40421;
	
	}
    .message .to-shareholder .hod-image {
    }
    .message .to-shareholder .hod-message {
		margin-top: 0px;
    } 
    .worklist-card {
        padding-left: 23px;
    }
    .worklist-card:nth-child(3n) {
        padding-right: 0;
        padding-left: 44px;
    }
    .worklist-card:nth-child(3n+2) {
        padding-left: 33px;
    }
	.footer-top {
        padding: 65px 0 97px;
    }
    .footer-top h3 {
        font-size: 24px;
    }
    .footer-download-statement {
        padding-left: 22px;
        padding-top: 4px;
    }
    .footer-download-statement::after {
        bottom: -13px;
        left: 22px;
        width: calc(100% - 28px);
    }
    .footer-top .download-icon {
        width: 38px;
        height: 38px;
    }
    .alba-footer {
        padding: 76px 0;
    }
    .footer-navigation {
        padding-bottom: 34px;
    }
    .alba-footer .footer-links:first-child {
        padding-left: 20px;
    }
    .alba-footer .footer-links:nth-child(2) {
        padding-left: 48px;
    }
    .alba-footer .footer-links li {
        margin-bottom: 0;
    }
    .footer-links li a {
        font-size: 17px;
        text-transform:uppercase;
    }
    .alba-footer .footer-detail {
        
		
    }
    .alba-footer .back-to-top p {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -.5px;
    }
    .back-to-top-icon svg {
        width: 40px;
    }
    .footer-address p, .footer-address address, .footer-address .list-item {
        font-size: 13px;
    }
    .footer-address p, .footer-address address, .footer-address .list-unstyled {
        margin-bottom: 16px;
    }
    .footer-address p {
        letter-spacing: -.25px;
    }
    .footer-address {
        padding-left: 16px;
    }
    .footer-copyright p {
        margin-bottom: 12px;
        font-size: 14px;
    }
    .footer-copyright .join-the-conversation {
      
        padding-left: 47px;
    }
    .footer-copyright .list-social-media a > img {
        width: 32px;
		margin: 5px 5px;
    }
    .footer-copyright .copyright p {
        font-size: 14px;
        letter-spacing: 0;
    }
    .financial-highlights {
		padding-bottom: 75px;
		margin-top: -100px;
	}
	 
	
	section#executive-management {
		padding-bottom: 200px;
	}
	.financial-highlights .alba-tabbing {
		padding-top: 60px;
	}
	.financial-highlights .alba-tabbing::before {
		height: 105%;
	}
	.financial-highlights .alba-tabbing::after {
		height: 136px;
	}
	  .financial-details h5,
	  .financial-details h5 em,
	  .financial-details h5 span {
		font-size: 24px;
	  }
	  .financial-details h5 {
		margin-bottom: 22px;
	  }
	  .financial-details p {
		font-size: 26px;
	  }
	  .financial-highlights .tab-buttons {
		top: calc(50% + 200px);
		padding: 0 calc((100% - 1124px)/2 - 75px);
	  }
		.operation-highlights {
			padding-top: 80px;
		}
    
    .operation-highlights h2 {
        margin-bottom: 40px;
        line-height: 1.05;
        font-weight: 600;
    }
    .operation-highlights .nav-pills .nav-link {
        font-size: 23px;
        padding: 33px 5px 37px;
    }
    .operation-highlights .nav-pills .nav-item {
        width: calc(16.7% - 5px);
    }
    .hero-inner .heading,
    .hero-inner::after {
        width: calc((100% - 1124px)/2 + 360px);
        max-width: none;
    }
    .hero-inner .heading  {
        display: flex;
        justify-content: flex-end;
        padding: 50px;
    }
    .hero-inner .heading h1 {
        max-width: 305px;
        font-size: 44px;

    }
    .alba-innercontent_tagline h2 {
        font-size: 26px;
        padding-right: 15px;
		color: #86754e;
		font-weight: 600;
    }
    .alba-innercontent_para p, .alba-innercontent_para h3 {
        font-size: 18px;
    }
    .alba-training__heading h4 {
        font-size: 14px;
    }
    
    .alba-training__data_list li {
        font-size: 14px;
    }
    .alba-training__data_list li strong {
        font-size: 32px;
    }    
}
@media screen and (max-width: 1024px) {
	#highlights h2 {
		padding-top: 100px;
		margin-left: 5%;
	}
	#highlights .alba-work-card h6 {
		font-size: 16px;
	}
	#highlights .alba-work-card h3 {
		font-size: 40px;
	}
}
@media screen and (max-width: 768px) {
	
	 section.strategic-review {
    padding-bottom: 0vw !important;
}
	.accordion-item .d-flex {
		display: block ! important;
	}
	.csr-content {
		border-left: 0px solid #b5aca5;
		padding-left: 0px;
	}
	.d-flex .iconbox {
		max-width: 100%;
		min-width: 100%;
	}
	.mt-200 {
		margin-top: 20px;
	}
	.mt100 {
		margin-top: 10px;
	}
	.hse-bg2 .hse-box {
		height: 100%;
	}
	.card.gray-card picture {display: block;}
	.card.gray-card .card-body {
		width: 100%;
		display: block;
		vertical-align: middle;
		text-align: center;
	}
	h4.quotesmsgs {
		max-width: 100%;
	}
	.ceo h2.banner-title {color: #706964;}
	h2.banner-title {margin-top: -20vh;font-size: 30px;}
	.go-down {bottom: 5vw;}
    .hidden-xs {display: none;}
	.to-shareholder .message-box {margin-top: 20px;}
	.carousel {max-width: 80% ! important;margin: 0px auto;}
	.csr .alba-work-card{
		background: #dbd7d0 !important;
		text-align: center;
		margin-bottom: 30px;
		margin-top: -50px;
		max-width: 250px;
		margin: 60px auto 0px;
		border: 0px;
		border-radius: 10px;
	}
	.csr .alba-work-card .card-body {
		padding: 0px 15px 15px;
	}
	.csr .card .box{
		background: #fbfbfa;
		margin: 40px;
		border-radius: 10px 10px 10px 10px;
		margin-top:-39px;
		box-shadow: 1px 1px 9px 5px rgb(151 144 134);
	}
	.csr .card .box:after{
		content: '';
		display: block;
		width: 0px;
		height: 0px;
		border-left: 13px solid transparent;
		border-right: 13px solid transparent;
		border-top: 10px solid #fbfbfa;
		margin-left: 90px;
		margin-bottom: -10px;
	}
	.csr .card .box:before{
		content: '';
		display: none;
		margin-left: 0px;
		margin-top: -15px;
		width: 0;
		height: 0;
		border-left: 170px solid transparent;
		border-right: 0px solid transparent;
		border-bottom: 16px solid #fbfbfa;
		border-radius: 20px 20px 0px 20px
	}
	.csr-content p {
		color: #333333;
	} 
	.csr .alba-work-card h2 {
		margin-bottom: 0px;
		font-size: 45px;
		color: #e40421;
	}
	h2.dark{
		color:#333333 !important;
	}
	.csr .card h3 {
		color: #e40421;
		font-size: 23px;
		text-align: center;
		line-height: 24px;
		letter-spacing: 0;
	}
	.csr .card-img-top {
		width:41%;
		margin: 20px 10px 10px;
	}
	.csr .card p {
		color: #707173;
		padding: 20px;
		font-weight: 400;
		text-align: left;
		font-size: 15px;
		line-height: 20px;
	}
	#carouselExampleIndicators2 .cleft {
		left: -45px;
		padding-left: 0px;
	}
	#carouselExampleIndicators2 .cright {
		right: -45px;
		padding-left: 0px;
	}
	nav.navbar.navbar-light.alba-navbar.position-fixed.w-100 {
		padding: 20px;
	}
	.carousel-item {
		gap:0px;
		width: 100% ! important;
		margin-right: -100% ! important;
	}
	#strategic-review .alba-work-card {
		margin-bottom: 100px;
    }
	#highlights {
    	padding-top: 0;
		padding-left: 0;
		padding-right: 0;
	}
	section {
		padding: 30px 10px;
	}
	section.hero.text-center {
		padding: 0px;
	}
	.board-of-director {
		margin-bottom: 0;
	}
	ul#awards_tab {
		padding-top: 20px;
		padding-right: 0px;
	}
	ul#strategic {
		padding-top: 20px;
		padding-right: 0px;
	}
	section#strategic-review .tab-content {
		margin-top: 125px;
	}
	.cleft {
		left: -45px;
		padding-left: 0%;
	}
	.cright {
		right: -45px;
		padding-right: 0%;
	}
	.cotj #carouselExampleIndicators2 .cright {
		right: -45px;
	}
	.cotj #carouselExampleIndicators2 .cleft {
		left: -45px;
	}
	.iconc #carouselExampleIndicators2 .cright {
		right: -45px;
	}
	.iconc #carouselExampleIndicators2 .cleft {
		left: -45px;
	}
	img.sd-goals {
		width: 100%;
	}
	.ceo .hero .row{
		flex-direction: column-reverse;
	}
}
@media screen and (max-width: 480px) {
	 section.strategic-review {
    padding-bottom: 0vw !important;
}
address {color:#fff !important;}
	.col-lg-4 {
		float: none;
	}
	.footer-copyright {
		margin-top: 0px;
	}
	footer.alba-footer .d-none {
		display: block ! important;
		align-items: center;
		text-align: center;
	}
	.col-lg-3.footer-block.footer-address {
		width: 100% ! important;
		text-align: center;
	}
	
	.five-decades {
		font-size: 64px;
		line-height: 74px;
		right: 15px;
		top: 150px;
		left: calc(100% - 375px);
	}
	.annual-reports{
		right: 15px;	
	}
	#naseer-msg .hod-message .quote {
		margin: 20px 10px;
	}
	.quote h4 {
		font-size: 20px;
		margin-bottom: 20px;
	}
	.message .ceo-message .hod-image {
		padding-top: 0px;
	}
	.message .hod-image {
		padding: 0;
	}
    
}
@media screen and (max-width: 380px) {
    
}

@media (max-width: 767px) {
    .carousel-inner .carousel-item > div {
        display: none;
    }
    .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}