/*
File: Layout CSS
*/

@font-face {
    font-family: 'AkzidenzGrotesk-Regular';
    src: url('../fonts/AkzidenzGrotesk-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AkzidenzGrotesk-Medium';
    src: url('../fonts/AkzidenzGrotesk-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'AkzidenzGrotesk-Bold';
    src: url('../fonts/AkzidenzGrotesk-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'AkzidenzGrotesk-BoldCond';
    src: url('../fonts/AkzidenzGrotesk-BoldCond.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
  font-family: 'AkzidenzGrotesk-BoldCond'; 
  src: url('../fonts/AkzidenzGrotesk-Regular.otf') format('opentype'); 
  font-weight: normal; 
  font-style: normal;
}

@font-face {
    font-family: 'AkzidenzGrotesk-Super';
    src: url('../fonts/AkzidenzGrotesk-Super.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'WorkSans';
    src: url('../fonts/WorkSans-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
}

body {
    font-family: 'WorkSans', 'Montserrat', 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    font-size: 1rem;
    color: #212529;
}

.container-scroller {
	overflow: hidden;
}

.text-red { color: #B71219 }
.text-blue { color: #0070B9 }
/* Custom font-size */
.fs-7 { font-size: 0.5rem; }  


/* Navbar */

.navbar {
    background-image: linear-gradient(to right, #0067B1, #009EE2);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5);
}

/* Language Toggle Styling */
.nav-link.active-lang {
    background-color: #f8f9fa;
    color: #000 !important;
    border-radius: 20px;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-link.active-lang:hover {
    color: #000 !important;
}

.nav-link {
    color: rgba(255, 255, 255, 0.75) !important;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #fff !important;
}

/* Language Toggle Links Text Color Fix */
.d-flex.bg-white a.nav-link {
    color: #0070B9 !important; 
}

.d-flex.bg-white a.nav-link.active {
    position: relative;
    z-index: 1;
    color: #fff !important;
}

.d-flex.bg-white a.nav-link.active::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    background-color: #006DB7;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    transform: translate(-50%, -50%);
    z-index: -1;
}

/* Offcanvas menu links text color fix */
.offcanvas-body .nav-link {
    color: #212529 !important; /* Bootstrap's default dark color */
}

/* Styling for Offcanvas menu links */
.offcanvas-body .nav-item {
    border-bottom: 1px solid #e9ecef; /* A light gray line */
}

/* Hover effect for Offcanvas menu links */
.offcanvas-body .nav-link:hover {
    color: #0070B9 !important; /* Change to blue on hover */
}

/* Make the menu icon larger */
.mdi-menu {
    font-size: 1.5rem; /* Adjust this value to change the size */
    vertical-align: middle;
}


/* Hero */

#hero-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-thick {
	font-family: 'AkzidenzGrotesk-Bold';
    position: relative;
}

.hero-thick::before {
    content: attr(data-text);
    position: absolute;
    left: 1px;
    top: 1px;
    -webkit-text-stroke: 0.6px #0070B9;
    paint-order: stroke fill;
    z-index: -1;
}

.hero-title {
	font-family: 'AkzidenzGrotesk-Regular';
}

.hero-title {
    opacity: 0;                      /* start invisible */
    transform: translateX(50px);     /* start shifted right */
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.hero-title.slide-in {
    opacity: 1;                      /* fade in */
    transform: translateX(0);        /* slide to natural position */
}


/* ==== Messages Section (Minister / Chairman / CEO) ==== */

/* Minister's Message Title */
.minister-heading {
  	display: flex;
  	align-items: center;
  	font-family: 'AkzidenzGrotesk-Bold', 'Montserrat', sans-serif;
  	font-weight: 700;
  	margin-top: 2rem;
  	margin-bottom: 1rem;
}

.red-bar {
  	width: 8px;
  	height: 1.3em; /* matches the label line height */
  	background-color: #B71219;
  	margin-top: 0.2rem; /* aligns with label baseline */

}

.minister-label {
  	font-family: 'AkzidenzGrotesk-Regular', 'Montserrat', sans-serif;
  	font-size: 2rem;
  	color: #0070B9;
	font-weight: 200;
  	line-height: 1;
}

.minister-sub {
  	font-family: 'AkzidenzGrotesk-Regular', 'Montserrat', sans-serif;
  	font-size: 1.8rem;
  	color: #B71219;
	font-weight: 400; /* Light */
}

/* Gradient button */
.btn-download {
  	display: inline-flex;
  	align-items: center;
  	gap: 0.75rem;
    background: linear-gradient(to right, #0067B1, #009EE2);
  	color: #fff;
  	text-decoration: none;
  	transition: background 0.3s ease;
}

.btn-download:hover {
    background: linear-gradient(to right, #005a9c, #0088c9);
  	color: #fff;
}

/* Circular icon container */
.btn-download .bi {
	background-color: #fff;
	color: #0070B9;
	border-radius: 50%;
	font-size: 1.2rem;			
	width: 32px;
	height: 32px;
	display: flex;
  	align-items: center;
  	justify-content: center;
}

.btn-primary.btn-download {
	padding: 0.5rem 0.5rem;
}

/* Shared section backgrounds */
#minister-message {
    background: url('../img/bg-minister.jpg') center/cover no-repeat scroll;
    overflow-x: hidden;
}
#chairman-foreword {
    background: url('../img/bg-chairman.jpg') center/cover no-repeat scroll;
    overflow-x: hidden;
}
#ceo-review {
    background: url('../img/bg-ceo.jpg') center/cover no-repeat scroll;
    overflow-x: hidden;
}

/* Photo column flex-bottom */
#minister-message .col-md-4,
#chairman-foreword .col-md-4,
#ceo-review .col-md-4 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Responsive portrait containers with tall ratio + clamp */
.minister-photo-container,
.chairman-photo-container,
.ceo-photo-container {
    aspect-ratio: 3 / 4;   /* visually balanced ratio */
    overflow: hidden;
    min-height: 700px;
    max-height: 900px;
}

.chairman-photo-container {
    margin-left: -10px;      /* keep your offset */
}

.minister-photo-container img,
.chairman-photo-container img,
.ceo-photo-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* fill container without distortion */
    display: block;
}

/* Mobile/tablet: perfect fit */
@media (max-width: 991.98px) {
  .minister-photo-container {
    aspect-ratio: 23 / 50;
    min-height: auto;
    max-height: none;
  }
  .minister-photo-container img {
    object-fit: contain;
  }
}

/* Desktop: hero look */
@media (min-width: 992px) {
  .minister-photo-container {
    aspect-ratio: 3 / 4;
    min-height: 700px;
    max-height: 900px;
  }
  .minister-photo-container img {
    object-fit: cover;
  }
}

/* Initial reveal states */
.minister-photo-container,
#minister-message .col-md-8,
.minister-signature,
.chairman-photo-container,
#chairman-foreword .col-md-8,
.chairman-signature,
.ceo-photo-container,
#ceo-review .review-text,
.ceo-signature {
	font-family: 'AkzidenzGrotesk-Regular', 'Montserrat', sans-serif;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Final revealed states */
.minister-photo-container.reveal,
#minister-message .col-md-8.reveal,
.minister-signature.reveal,
.chairman-photo-container.reveal,
#chairman-foreword .col-md-8.reveal,
.chairman-signature.reveal,
.ceo-photo-container.reveal,
#ceo-review .review-text.reveal,
.ceo-signature.reveal {
    opacity: 1;
    transform: translateY(0);
}

/* Signature pop animation */
.minister-signature.reveal,
.chairman-signature.reveal,
.ceo-signature.reveal {
    animation: signaturePop 0.6s ease forwards;
}
@keyframes signaturePop {
    0%   { transform: translateY(20px) scale(0.95); opacity: 0; }
    60%  { transform: translateY(0) scale(1.03); opacity: 1; }
    100% { transform: translateY(0) scale(1); }
}

/* === Typography === */

/* Titles only: AkzidenzGrotesk-Bold */
#minister-message h3,
#chairman-foreword h3,
#ceo-review h3 {
    font-family: 'AkzidenzGrotesk-Bold', 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: normal;
    font-stretch: normal;
}

/* Body paragraphs + signatures: AkzidenzGrotesk-Regular */
#minister-message .col-md-8 p,
#chairman-foreword .col-md-8 p,
#ceo-review .col-md-8 p,
.minister-signature,
.chairman-signature,
.ceo-signature {
    font-family: 'AkzidenzGrotesk-Regular', Arial, Helvetica, sans-serif;
    letter-spacing: normal;
    font-stretch: normal;
}

/* Desktop column measure & justification */
@media (min-width: 992px) {
    #minister-message .col-md-8 p,
    #chairman-foreword .col-md-8 p,
    #ceo-review .col-md-8 p {
        max-width: 700px;
        font-size: 1.2rem;
        line-height: 1.3;
        margin-bottom: 1rem;
        text-align: justify;
        text-justify: inter-word;
        letter-spacing: normal;
    }
    #minister-message .col-md-8,
    #chairman-foreword .col-md-8,
    #ceo-review .col-md-8 {
        max-width: 700px;
    }
}


/* Key Statistical Information Section */

#key-statistical-information {
	background-image: url('../img/bg-statistic.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #F8F9FA;
}

.key-statistic-title {
    background-image: linear-gradient(to right, #0067B1, #009EE2);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5);
	font-family: 'AkzidenzGrotesk-Regular', Arial, Helvetica, sans-serif;
	font-weight: 400;
}

/* === FIXED CHEVRON DISPLAY === */
.stat-title {
  position: relative;
  display: inline-block;
}

/* Stronger selector for font and color (no inline styles needed) */
#key-statistical-information .statistical-row .stat-title .stat-subtext {
  font-family: 'AkzidenzGrotesk-BoldCond';
  font-size: 0.9rem;
  font-weight: normal;
  color: #000000 !important;           /* ensure it's visible on the light-blue background */
  display: block;
  margin-top: 4px;
  line-height: 1.15;
  text-transform: none;
  letter-spacing: 0;
}

.stat-title .chevron {
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border-top: 6px solid #B71219;
  border-right: 6px solid #B71219;
  width: 18px;
  height: 18px;
}

/* Make sure the small subtext doesn't get the blue outline/stroke */
.statistical-row .stat-title .stat-subtext {
  -webkit-text-stroke: 0 !important;   /* remove inherited stroke */
  paint-order: fill;                   /* ensure fill draws first */
}

.key-item {
	font-family: 'AkzidenzGrotesk-Regular', Arial, Helvetica, sans-serif;
	font-size: 1.2rem;
}


/* Background for the statistical rows */
.statistical-row {
    /*background-image: linear-gradient(to right, #F5FAFD, #B7E3FA);*/
	background-color: #F5FAFD; 
    border-radius: 30px 0 0 30px;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.statistical-row h4, h5 {
    font-family: 'AkzidenzGrotesk-Super', 'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.4rem;          /* adjustable for balance */
    line-height: 1.3;
    color: #0070B9;              /* brand blue */
    text-transform: none;   /* match the visual style you’ve been using */
    margin: 0;                   /* avoid extra spacing shifts */
    display: flex;
    align-items: center;
    letter-spacing: 0.5px;       /* subtle breathing room between letters */
    position: relative;
}

.statistical-row-content {
    /*padding: 1.5rem 0;*/
	padding: 0 0;
}

.statistical-row:last-of-type {
    margin-bottom: 0;
}

/* Styling for cards within a row */
.statistical-row .card {
    background-color: #FFF;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.statistical-row .card h3 {
    color: #0070B9;
}

.statistical-row .card p {
    color: #6c757d;
}

/* Specific text color for the title */
.text-darkblue {
    color: #0070B9;
}

/* Icon and Image Styling */
.statistical-row img {
    width: 90px;
    height: 90px;
    transform: scale(1.5);
    margin-right: 1rem;
}

/* Progress Bar Container */
.compliance-bar-container {
    width: 100%;
    position: relative;
    padding: 1rem 1.5rem;
    border-radius: 30px;
    display: flex;
    align-items: center;
    background-color: #fff;
}

/* Progress Bar Styles */
#compliance-rate {
    width: 100%;
    height: 30px;
    border: none;
    border-radius: 15px;
    background-color: #fff;
    vertical-align: middle;
}

#compliance-rate::-webkit-progress-bar {
    background-color: #fff;
    border-radius: 15px;
}

#compliance-rate::-webkit-progress-value {
    background-image: linear-gradient(
        to right,
        #004A87,  /* deep navy start */
        #0070B9,  /* existing mid-blue */
        #009EE2   /* bright finish */
    );
    border-radius: 15px;
    transition: width 1.5s ease-in-out;
}

#compliance-rate::-moz-progress-bar {
    background-image: linear-gradient(
        to right,
        #004A87,
        #0070B9,
        #009EE2
    );
    border-radius: 15px;
    transition: width 1.5s ease-in-out;
}

/* Percentage Text Position */
.progress-text {
    position: absolute;
    top: 50%;
    left: 50%; /* center horizontally */
    transform: translate(-50%, -50%); /* perfect centering */
    font-weight: bold;
    font-size: 1.25rem;
    color: #fff; /* stands out on blue gradient */
    pointer-events: none; /* avoid blocking clicks on bar */
    z-index: 1; /* ensure it’s above the progress fill */
}

@media (max-width: 1400px){
    .statistical-row .key-item {
        font-size: 1.1rem/* Adjust font size for smaller screens */
    }
}

@media (max-width: 900px){
    .statistical-row .key-item {
        font-size: 1rem/* Adjust font size for smaller screens */
    }
}

@media (min-width: 770px) and (max-width: 1192px) {
    .statistical-row-content {
        flex-wrap: wrap;
    }

    .statistical-row .col-md-3,
    .statistical-row .col-md-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .compliance-bar-container {
        padding-right: 4rem; /* extra space for percentage text */
    }

    .progress-text {
        right: 1rem;
        font-size: 1.1rem;
    }
}

@media (max-width: 1192px) {
    .statistical-row .col-md-3 {
        margin-bottom: 1rem !important;
    }
}

/* Row reveal base state */
.statistical-row {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Revealed state */
.statistical-row.reveal {
    opacity: 1;
    transform: translateY(0);
}

/* Footnote size, weight, and spacing just for Key Statistical Information */
#key-statistical-information .container.text-left p small {
    font-size: 0.72rem;   /* smaller than Bootstrap's default small */
    line-height: 1.3;     /* keeps it snug */
    font-weight: 400;     /* lighter visual feel */
    display: inline-block;
    color: #000;       /* richer neutral tone, higher contrast */
}

#key-statistical-information .container.text-left {
    margin-top: 1rem;     /* was mt-4, tighter to content above */
}


/* Management Report Section */

#management-report {
    background-image: url('../img/bg-report.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#management-report h2 {
	font-family: 'AkzidenzGrotesk-Regular', Arial, Helvetica, sans-serif;
}

.report-item h5 {
    color: #0070B9;
	font-family: 'WorkSans';
    font-size: 1.5rem;
}

/* Custom button for "Read more" */
.btn-primary {
    background-color: #0070B9;
    border-color: #0070B9;
    border-radius: 100px;
    padding: 0.5rem 1.5rem;
}

/* Make whole tile clickable without link styling */
.report-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Downloads Section */

#downloads-section {
    background-color: #fff;
	font-family: 'AkzidenzGrotesk-Regular', Arial, Helvetica, sans-serif;
}

.download-links a {
    color: #0070B9;
    font-weight: normal;
    font-size: 1.4rem;
    text-decoration: none;
    line-height: 2.5rem;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

.download-links a:hover {
    color: #e1f4fd;
}

/* Custom styling for the download icon container */
.download-icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    /*border: 6px solid #0070B9;*/
    display: flex;
    align-items: center;
    justify-content: center;
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);*/
    position: relative;
    z-index: 1;
}

.download-icon-circle .bi {
    color: #0070B9;
    font-size: 1rem;
    position: relative;
    z-index: 2;
}

.download-links a:hover .download-icon-circle {
    background-color: #e1f4fd;
    border-color: #ccc;
}

/* Footer Section */

#main-footer {
    background-image: linear-gradient(to right, #0067B1, #009EE2);
    color: #fff;
}

#main-footer p, #main-footer li {
    font-size: 0.9rem;
}

#main-footer .mdi {
    font-size: 1.25rem;
    margin-right: 0.5rem;
}

.social-icons .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    /* Removed border */
    color: #fff;
    font-size: 1.25rem; /* Adjusted for better visibility without border */
    transition: color 0.3s ease;
	text-decoration: none;
}

.social-icons .social-icon:hover {
    color: #e9ecef; /* Changed color on hover */
}

.copyright {
	font-family: 'AkzidenzGrotesk-Regular', Arial, Helvetica, sans-serif;
	font-size: 12px;
	opacity: 1;
	padding: 5px 10px;
	border-radius: 0px;
	display: inline-block;
}

/* Fix for blue background on links in Management Report and Downloads sections */
#management-report a:not(.btn-download):link,
#management-report a:not(.btn-download):visited,
#management-report a:not(.btn-download):hover,
#management-report a:not(.btn-download):active,
#management-report a:not(.btn-download):focus,
#downloads-section a:not(.btn-download):link,
#downloads-section a:not(.btn-download):visited,
#downloads-section a:not(.btn-download):hover,
#downloads-section a:not(.btn-download):active,
#downloads-section a:not(.btn-download):focus {
    background-color: transparent !important;
    background-image: none !important;
}

/* Additional specific rules for download links */
.download-links a:not(.btn-download):link,
.download-links a:not(.btn-download):visited,
.download-links a:not(.btn-download):hover,
.download-links a:not(.btn-download):active,
.download-links a:not(.btn-download):focus {
    background-color: transparent !important;
    background-image: none !important;
}

/* Rules for report links */
.report-link:not(.btn-download):link,
.report-link:not(.btn-download):visited,
.report-link:not(.btn-download):hover,
.report-link:not(.btn-download):active,
.report-link:not(.btn-download):focus {
    background-color: transparent !important;
    background-image: none !important;
}

/* More specific rules to override any blue background */
#management-report .report-link a,
#management-report .report-item a,
#downloads-section .download-links a {
    background-color: transparent !important;
    background-image: none !important;
}

/* Ensure btn-download elements maintain their styling */
.btn-download {
    background: linear-gradient(to right, #0067B1, #009EE2) !important;
}

.btn-download:hover {
    background: linear-gradient(to right, #005a9c, #0088c9) !important;
}

/* Specific styling for Management Report main download button to ensure it has blue background */
#management-report .btn-primary.btn-download {
    background: linear-gradient(to right, #0067B1, #009EE2) !important;
    border-color: #0067B1 !important;
}

#management-report .btn-primary.btn-download:hover {
    background: linear-gradient(to right, #005a9c, #0088c9) !important;
    border-color: #005a9c !important;
}

/* Remove blue background from "Read More" buttons in Management Report section */
#management-report .report-item .btn-download:not(.btn-primary) {
    background: transparent !important;
    border: none !important;
}

#management-report .report-item .btn-download:not(.btn-primary):hover {
    background: transparent !important;
    border: none !important;
}

/* Back to top button */
#backToTop {
	position: fixed;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999;
	cursor: pointer;
}

#backToTop img {
	opacity: 0.7;
	transition: opacity 0.3s ease;
}

#backToTop img:hover {
	opacity: 1;
}

.chevron-new {
    position: relative;
    z-index: 1;
	float: right;
}

.chevron-new img {
	width: 12px;
	height: 20px;
}