@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Literata:wght@400;700&display=swap";
@import"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css";
@import"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css";

.primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem 1.25rem;
    background: var(--cas-color-accent);
    color: #fff;
    border: 1px solid var(--cas-color-accent);
    border-radius: 25px;
    font-family: var(--cas-font-primary);
    font-style: normal;
    font-weight: 500;
    font-size: .875rem;
    transition: background .3s, transform .3s
}

.primary-btn:hover {
    background: none;
    color: var(--cas-color-accent);
    transform: scale(1.05)
}

.primary-btn:active {
    transform: scale(0.95)
}

a {
    color: var(--cas-color-accent);
    text-decoration: none;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

a:hover {
    text-decoration: underline
}

a:focus,
a:active,
li > a:focus,
div > a:focus,
div > a:active {
    outline: none !important; /* Forces removal of the outline */
    border: none !important;   /* Forces removal of any border */
    box-shadow: none !important; /* Forces removal of any box shadow */
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    padding: 0;
    margin: 0;
    font-size: var(--cas-font-size-base) !important;
    box-sizing: border-box
}

:root {
    --cas-font-size-base: 16px;
    --cas-font-primary: "Montserrat", sans-serif;
    --cas-font-secondary: "Literata", serif;
    --cas-color-primary: #002357;
    --cas-color-secondary: #F6F9FC;
    --cas-color-text-accent: #666666;
    --cas-color-accent: #A73346;
    --cas-color-text: #002357;
    --cas-color-background: #F5F5F5;
    --cas-color-light-green: #39FFA0;
    --cas-color-light-blue: #48B9FF;
    --cas-color-light-red: #ED676A;
    --font-sm: 0.875rem;
    --font-md: 1rem;
    --font-lg: 1.25rem;
    --font-xl: 1.5rem;
    --font-xxl: 2rem
}

@media(max-width: 768px) {
    :root {
        --cas-font-size-base: 15px
    }
}

@media(max-width: 480px) {
    :root {
        --cas-font-size-base: 14px
    }
}

body {
    font-family: var(--cas-font-primary);
    line-height: 1.6;
    color: var(--cas-color-primary)
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--cas-color-primary) !important
}

h2 {
    font-family: var(--cas-font-primary);
    font-size: 2rem;
    line-height: 2.25rem;
    font-weight: 700
}

h3 {
    font-size: 1.25rem;
    font-weight: 300;
    padding-top: 1rem
}

p {
    margin-bottom: 1rem
}

.table-heading {
    font: 700 1.125rem var(--cas-font-primary);
    text-transform: capitalize;
    background: var(--cas-color-primary);
    color: #fff
}

.table-headin g-subject {
    font: 700 1rem var(--cas-font-primary);
    text-transform: capitalize;
    background: none;
    color: var(--cas-color-primary)
}

table {
    border-collapse: separate;
    width: 100%;
    border-spacing: 0 4px;
    color: var(--cas-color-primary);
    font-family: var(--cas-font-primary)
}

#table-subject {
    max-width: 80%
}

#table-subject thead tr {
    border-bottom: 2px solid var(--cas-color-primary)
}

table tbody tr {
    font-size: 1rem;
    background: var(--cas-color-secondary);
    font-weight: 500
}

#table-subject tbody tr {
    background: none;
    border: 1px solid var(--car-color-secondary)
}

table td:first-child {
    width: 70%
}

.table-row svg {
    width: 30px
}

.table-graph input[type=checkbox] {
    display: none
}

.table-graph-content {
    display: none;
    margin-top: 5px
}

.table-graph input[type=checkbox]:checked+label+.table-graph-content {
    display: block
}

.table-graph h5 {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    font: 700 1rem var(--cas-font-primary);
    color: var(--cas-color-primary)
}

.table-graph h5::before {
    content: "+";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--cas-color-primary);
    border: 2px solid var(--cas-color-primary);
    color: #fff;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700
}

.table-graph input[type=checkbox]:checked+label h5::before {
    content: "-";
    background: none;
    border-color: var(--cas-color-primary);
    color: var(--cas-color-primary)
}

footer {
    background-color: var(--cas-color-primary);
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px !important;
    padding: 20px 40px !important;
}

footer h2 {
    color : #fff !important;
}

.footer-menu-useful-links {
    display: flex;
    flex-direction: row;
    gap: 100px;
  
}


.footer-menu,
.footer-useful-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    font-family: var(--cas-font-primary);
    color: #fff;
    width: 300px;
}

.footer-useful-links ul {

    list-style: none;
    margin:0 !important;

}

.footer-menu a,
.footer-useful-links a {
    font-weight: 500;
    font-size: 1rem;
    color: #fff;
    display: inline-block;
    position: relative;
    transition: font-weight .3s ease-in-out
}

.footer-menu a:hover,
.footer-useful-links a:hover {
    color: #fff;
    font-weight: 600
}

.footer-menu a::after,
.footer-useful-links a::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--cas-color-accent);
    left: 0;
    bottom: 0;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform .25s ease-out
}

.footer-menu a:hover::after,
.footer-useful-links a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left
}

.cas-menu {
    display: flex;
    flex-direction: column;
    margin: 50px 0;
    flex-grow: 1;
    align-items: flex-start;
    justify-content: flex-start;
    padding-left: 40px;
    background: none
}

.primary-menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    height: 70px;
    margin: 0;
    padding: 0
}

.primary-menu ul {
    display: inline-flex;
    font-family: var(--cas-font-primary);
    color: var(--cas-color-primary);
    gap: 50px
}

.primary-menu li {
    list-style: none;
    font-style: normal;
    font-weight: 600;
    font-size: 1.375rem;
    cursor: pointer;
    position: relative
}

.cas-secondary-menu-container {
    display: flex;
    height: 500px;
    z-index: 1;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    gap: 60px;
    padding: 25px 0 0 15px
}

.cas-secondary-menu-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
    font-family: var(--cas-font-primary)
}

.cas-secondary-menu-list ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column
}

.cas-secondary-menu-list li {
    list-style: none;
    transform: translateX(0);
    transition: transform .25s ease-out;
    margin-bottom: 10px
}

.cas-secondary-menu-list li a {
    color: var(--cas-color-primary);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5rem;
    position: relative;
    display: inline-block
}

.cas-secondary-menu-list li:hover {
    transform: translateX(10px)
}

.cas-regular-menu-container {
    display: flex;
    flex-direction: row;
    padding: 0;
    font-family: var(--cas-font-primary);
    color: var(--cas-color-primary);
    gap: 20px;
    width: 70%
}

.cas-regular-menu-item {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    position: relative;
    width: 250px
}

.cas-regular-menu-item h3 {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25rem
}

.cas-regular-menu-item h3 span {
    position: relative;
    display: inline-block
}

.cas-regular-menu-item h3 span::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--cas-color-accent);
    left: 0;
    bottom: -5px
}

.cas-regular-menu-item-list ul {
    padding: 0;
    margin: 0
}

.cas-regular-menu-item-list li {
    list-style: none
}

.cas-regular-menu-item-list a {
    font-style: normal;
    font-weight: 300;
    font-size: .875rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: font-weight .3s ease
}

.cas-regular-menu-item-list a:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important
}

.cas-regular-menu-item-list a:hover {
    font-weight: 500
}

.cas-regular-menu-item-list a::before {
    content: "";
    width: 0px;
    margin-right: 5px;
    height: 2px;
    background-color: var(--e-global-color-primary);
    transition: width .3s ease
}

.cas-regular-menu-item-list a:hover::before {
    width: 15px
}

.cas-secondary-menu,
.cas-secondary-menu-container,
.regular-item-container {
    display: none;
    flex-direction: row
}

.primary-menu li::after,
.cas-secondary-menu-list li a::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--cas-color-accent);
    left: 0;
    bottom: 0;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform .25s ease-out
}

.primary-menu li:hover::after,
.cas-secondary-menu-list li a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left
}

/* Mobile menu */
.mobile-submenu {
    display: none; /* Submenu is hidden by default */
    /* Add any other styling for a closed state */
}

.mobile-submenu.is-open {
    display: block; /* Submenu is shown when 'is-open' class is added */
    /* Add any other styling for an open state */
}
/* Mobile menu button (hamburger) */


.cas-mobile-menu-toggle .menu-icon {
  font-size: 28px;
  cursor: pointer;
}

/* Submenus */
.footer-submenu {
  display: none;
  padding-left: 15px;
  margin-top: 10px!important;
}

.footer-submenu li a {

  color: #fff;
  font: 400;
  text-decoration: none;
  line-height: 20px;
  font-size: 0.9rem;
  background: none;
  border: none;
}

.footer-submenu.is-open {
    display: block; 
}


/* Fullscreen menu overlay */
.cas-mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--cas-color-primary);
    z-index: 9999;
    overflow-y: auto;
}

.cas-mobile-menu-overlay.active {
    display: block;
}

/* Close button */
.cas-mobile-close {
  font-size: 40px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

/* Menu lists */
.cas-mobile-menu-overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.cas-mobile-menu-overlay li {
  margin-bottom: 12px;
}

.cas-mobile-menu-overlay a,
.cas-mobile-menu-overlay button.mobile-dropdown-toggle {
  color: #fff;
  font: 600;
  text-decoration: none;
  line-height: 30px;
  font-size: 25px;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.cas-mobile-menu-overlay a:focus {
    color:white;
}

/* Submenus */
.mobile-submenu {
  display: none;
  padding-left: 15px;
  margin-top: 10px!important;
}

.mobile-submenu li a {

      color: #fff;
  font: 600;
  text-decoration: none;
  line-height: 15px;
  font-size: 18px;
  background: none;
  border: none;
}

.mobile-has-children.open .mobile-submenu {
  display: block;
}


.cas-mobile-header {
    margin-bottom: 80px;
}


/* Desktop default */
.cas-desktop-header { display: block; }
.cas-mobile-header { display: none; }


#cas-mobile-menu.active {
    position: fixed; /* ensure it covers viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow-y: auto; /* scroll menu content only */
    -webkit-overflow-scrolling: touch;
}


.cas-mobile-social {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.cas-mobile-social svg {
    width:40px;

}


.cas-page-container {
    max-width: 1440px !important;
    margin: 0 auto;
    width: 90%;
    box-sizing: inherit
}

.cas-page-container-wrapper {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    color: var(--cas-color-primary)
}

.cas-page-title-description {
    max-width: 80%;
    margin-bottom: 3.125rem;
    color: var(--cas-color-primary)
}

.cas-page-title-description h1 {
    font: 700 3rem var(--cas-font-primary);
    color: var(--cas-color-primary)
}

.cas-page-title-description p {
    font: 400 1rem var(--cas-font-secondary)
}

.cas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem;
    background-color: var(--cas-color-secondary)
}

.cas-top-header {
    background-color: var(--cas-color-primary);
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    z-index: 1
}

.cas-top-header-svg {

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.cas-top-mobile-header-svg {
    background-color: var(--cas-color-primary);
    display: flex;
    gap:5px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.cas-top-mobile-header-svg svg {
width:6%;
}

.cas-top-mobile-header-svg span {
    color:white;
}

.cas-top-header svg {
    width: 40px
}

.cas-top-header span {
    color: #fff;
    margin-left: 10px;
    font-family: var(--cas-font-secondary);
    font-weight: 400;
    font-size: .875rem;
    text-transform: uppercase
}

.cas-top-header-social {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center
}

.cas-top-header-social svg {
    height: 30px;
    width: auto
}

.cas-top-header-social svg:last-child {
    height: 25px
}

.cas-top-menu-search {
    display: flex;
    flex-direction: row;
    gap: 50px;
    justify-content: flex-end;
    margin: 20px 40px 20px 0
}

.cas-top-menu ul {
    display: inline-flex;
    font-family: var(--cas-font-primary);
    color: var(--cas-color-primary);
    gap: 20px
}

.cas-top-menu li {
    list-style: none;
    font-style: normal;
    font-weight: 600;
    font-size: .875rem
}

.cas-top-search {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 15px
}


.cas-top-search .cas-searchBox {
    display: flex;
    align-items: center;
    padding-left: 10px;
    color: var(--cas-color-primary);
    font-family: var(--cas-font-primary);
    font-size: 1rem;
    font-weight: 400;
    width: 350px;
    height: 40px;
    border: 1.25px solid var(--cas-color-primary);
    border-radius: 25px;
    transition: all .4s
}

.cas-mobile-search .cas-top-search .cas-searchBox {
    display: flex;
    align-items: center;
    padding-left: 10px;
    color: white;
    font-family: var(--cas-font-primary);
    font-size: 1rem;
    font-weight: 400;
    width: 300px;
    height: 40px;
    border: 1.25px solid white;
    border-radius: 25px;
    transition: all .4s
}



.cas-top-search .cas-searchBox:focus {
    border-color: var(--cas-color-primary);
    box-shadow: 0 1px 12px #b8c6db;
    -moz-box-shadow: 0 1px 12px #b8c6db;
    -webkit-box-shadow: 0 1px 12px #b8c6db
}

.cas-top-search .cas-searchBtn {
    background: var(--cas-color-primary);
    border: 1px solid var(--cas-color-primary);
    padding: 10px 20px;
    border-radius: 25px;
    color: #fff;
    cursor: pointer;
    transition: all .4s
}

.cas-top-search .cas-searchBtn:hover {
    color: var(--cas-color-primary);
    border: 1px solid var(--cas-color-primary);
    background: rgba(0, 0, 0, 0)
}


.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

.cas-logo-flag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 40px;
    height: 120px
}

.cas-logo, .cas-logo-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px
}

.cas-logo:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important
}

.cas-logo img {
    width: 80px;
    height: auto
}
.cas-logo-mobile img {
    width:80px;
    height: auto
}

.cas-logo-text, .cas-logo-text-mobile {
    display: flex;
    flex-direction: column
}

.cas-logo-text h3,
.cas-logo-text h5,
.cas-logo-text-mobile h3,
.cas-logo-text-mobile h5 {
    margin: 0;
    padding: 0;
    color: var(--cas-color-primary);
    font-family: var(--cas-font-primary)
}

.cas-logo-text h3 {
    font-style: normal;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 18px
}

.cas-logo-text h5 {
    font-style: normal;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 21px;
    letter-spacing: .02em
}

.cas-logo-text-mobile h3 {
    font-style: normal;
    font-weight: 700;
    font-size: 1rem;
    line-height: 22px 
}

.cas-logo-text-mobile h5 {
    font-style: normal;
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 18px;
    letter-spacing: .02em
}


.cas-lebanon-flag {
    background: url("/wp-content/uploads/2024/09/Lebanese_flag.png");
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    height: 120px;
    width: 630px;
    z-index: -1
}

.cas-lebanon-flag-mobile {
    background: url("/wp-content/uploads/2024/09/Lebanese_flag.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 80px;
    width: auto;
    z-index: -100;
    margin-top:-1px;
}

.cas-mobile-logo-toggleMenu {
    display:flex;
    flex-direction: row;
    align-items: center;
    margin:auto;
    margin-top:10px;
    justify-content:space-between;
    width:90%;
    max-width: 90%;
}

.cedar-tree-closebtn-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: auto;
    max-width: 90%;
}

.cas-mobile-primary {
    margin-left:20px;
    margin-top: 50px;
}

.cas-mobile-top {
    margin-left:20px;
}

.cas-mobile-top ul li a {
    font-size:16px !important;
    font-weight: 500;
    line-height: 14px!important;
    margin:0;
    padding:0;
}



.cas-mt-1 {
    margin-top: 1rem
}

.cas-mb-1 {
    margin-bottom: 1rem
}

.cas-p-1 {
    padding: 1rem
}

.cas-d-flex {
    display: flex
}

.cas-flex-column {
    flex-direction: column
}

.cas-flex-row {
    flex-direction: row
}

.cas-hidden {
    display: none
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2)
}

.cas-text-center {
    text-align: center
}

.cas-text-right {
    text-align: right
}

.cas-text-left {
    text-align: left
}


#filter-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2rem;
    background-color: var(--cas-color-secondary);
}


.publication-filters {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 1.5rem;
    width: 100%;
    padding: 1.5rem;
    background-color: var(--cas-color-secondary);
    border-radius: 8px;
    overflow-x: auto;
    box-sizing: border-box;
}

.filter-group {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 180px;
    max-width: 80%;
}

.filter-go-group {

    align-self: flex-end;
    min-width: 150px; 
}

.filter-group label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--cas-color-primary);
    font-size: 0.95rem;
    white-space: nowrap;
}

.custom-select-wrapper {
    position: relative;
    display: block;
    width: 100%;

}

.filter-select {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 6px;
    appearance: none;
    -webkit-appearance: none; 
    -moz-appearance: none;    
    background-image: none;  
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    height: calc(1rem * 1.5 + 1.5rem + 2px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.filter-select:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}



.custom-select-arrow {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;

}

.custom-select-arrow svg {
    fill: var(--car-color-primary);
    width: 15px;
    height: 15px;
}

.filter-go-button {
    padding: 0.5rem 1.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #fff;
    background: var(--cas-color-primary);
    border: 1px solid var(--cas-color-primary);
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%; /* Make button fill its container */
    box-sizing: border-box;
}

.filter-go-button:hover {
    background: none;
    color: var(--cas-color-primary);
    border-color: var(--cas-color-primary);
}

.filter-go-button:active {
    background-color: #00366b;
    border-color: #00274c;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.filter-go-button:disabled {
    background-color: #6c757d;
    border-color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

#selected-filters {
    display: flex;
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;;
    gap: 10px;
}

.filter-tag {
    display: flex;
    align-items: center;
    padding: 0.15rem 1rem;
    border: 1px solid var(--cas-color-primary);
    border-radius: 1rem;
    font-size: 0.875rem;
    gap: 10px;
}

.filter-tag button {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--cas-color-primary);
    cursor: pointer;
}

.filter-tag button:hover {
    color: var(--cas-color-accent);
}



.pagination {
    display: flex;
    gap: 4px;
    align-self: center;
    margin-top: 2%;
    font-family: var(--cas-font-primary);
    color: var(--cas-color-primary);
    font-size: .875rem;
    font-weight: 500
}

.pagination .page-numbers {
    /* border: 1px solid var(--cas-color-primary); */
    padding: .1rem .5rem;
    color: var(--cas-color-primary);
    text-decoration: none;
    transition: background-color .3s, color .3s
}

.pagination .page-numbers.current {
    background-color: var(--cas-color-primary);
    padding: .1rem .5rem;
    color: #fff
}


.cas-breadcrumb {
    width:100%;
}

.cas-breadcrumb a, .cas-breadcrumb span {
    text-transform: capitalize;
}

.cas-breadcrumb-first, .breadcrumb-separator{
    font-weight: 600;
}


.pdf-download-svg .cls-1,
.pdf-download-svg .cls-2,
.xls-download-svg .cls-1,
.xls-download-svg .cls-2,
.docx-download-svg .cls-1,
.docx-download-svg .cls-2 {
    fill: #fff
}

.pdf-download-svg .cls-3 {
    fill: var(--e-global-color-c2a9fee)
}

.xls-download-svg .cls-3 {
    fill: var(--e-global-color-8e040d1)
}

.docx-download-svg .cls-3 {
    fill: var(--e-global-color-9d71522)
}

.pdf-download-svg .cls-2,
.xls-download-svg .cls-2,
.docx-download-svg .cls-2 {
    font-family: var(--cas-font-primary);
    font-size: 3.75rem;
    font-weight: 700
}

.svg-email-icon {
    width: 2rem
}

.svg-bullet-icon {
    width: 1rem;
    margin-right: 5px
}

.svg-email-icon.cls-e1,
.svg-bullet-icon .cls-b1 {
    fill: var(--cas-color-primary)
}

.years-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    text-align: center
}

.year-item {
    position: relative;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 8px;
    background: #f9f9f9;
    transition: transform .2s
}

.year-item:hover {
    transform: scale(1.05)
}

.image-wrapper {
    position: relative;
    display: inline-block
}

.image-wrapper img {
    width: 100%;
    max-width: 150px;
    height: auto;
    border-radius: 5px
}

.year-overlay {
    position: absolute;
    top: 5px;
    left: 5px;
    background: var(--cas-color-primary);
    color: #fff;
    padding: 3px 7px;
    border-radius: 3px;
    font-size: .75rem;
    font-weight: bold
}

.download-btn {
    display: inline-block;
    width: 50px;
    margin-top: 5px;
    padding: 5px 10px;
    text-decoration: none
}

.download-all-btn {
    display: inline-block;
    padding: 5px 10px
}

.download-all-svg {
    margin-left: 5px;
    width: 25px;
    display: inline-block
}

.cpi-sub-container {
    width: 100%;
    margin-top: 80px
}

.cpi-sub-container-contact {
    display: flex;
    flex-direction: row
}

.cpi-sub-container-contact>ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    max-width: 80%;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative
}

.cpi-sub-container-contact>li {
    flex: 1 1 330px;
    max-width: 330px;
    display: flex;
    align-items: stretch
}

.cpi-subclass {
    display: flex;
    flex-direction: column;
    width: 330px
}

.cpi-subClass-items {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px
}

.cpi-subClass-items a {
    font-weight: 500;
    font-size: .875rem;
    font-family: var(--cas-font-primary);
    transition: font-weight .1s ease-in-out
}

.cpi-subClass-items a:hover {
    font-weight: 700
}

.cpi-subclass-btn {
    max-width: 50%
}

.cpi-figure {
    width: 330px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: 30px;
    background-color: var(--cas-color-secondary)
}

.cpi-number {
    font: 700 3.125rem var(--cas-font-primary)
}

.cpi-figure-title {
    font-family: var(--cas-font-primary);
    font-weight: 600;
    font-size: 1rem;
    margin-top: .6rem;
    color: var(--cas-color-primary)
}

.cpi-tables-graphs {
    margin-top: 80px;
    width: 60%
}

.figures-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    padding: 0;
    margin: 0
}

.figures-container>li {
    flex: 1 1 330px;
    max-width: 330px;
    display: flex;
    align-items: stretch
}

.figure-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    background-color: var(--cas-color-secondary);
    border-radius: 30px;
    padding: 20px;
    width: 100%;
    height: 100%
}

.figure-item-text {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.figure-number {
    font-family: var(--cas-font-primary);
    font-weight: 700;
    font-size: 3.125rem;
    line-height: 36px;
    margin-bottom: 10px;
    color: var(--cas-color-primary)
}

.figure-title {
    font-family: var(--cas-font-primary);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 20px;
    margin-bottom: 6px;
    color: var(--cas-color-accent)
}

.figure-description {
    font-family: var(--cas-font-secondary);
    font-weight: 400;
    font-size: .85rem;
    line-height: 20px;
    color: var(--cas-color-primary)
}

.figure-read-more {
    width: 45%
}

.homepage-news-container {
    margin-top: 80px
}

.homepage-news-items {
    display: flex;
    gap: 20px
}

.latest-news-with-btn {
    width: 25%
}

.latest-new-container {
    display: flex;
    flex-direction: column
}

.latest-new-item {
    display: flex;
    flex-direction: column;
    color: var(--cas-color-primary);
    transition: transform .3s ease-out
}

.latest-new-item:hover {
    transform: scale(1.02);
}

.latest-new-title {
    font-family: var(--cas-font-primary);
    font-weight: 600;
    font-size: 1rem;
    line-height: 20px
}

.latest-new-title::before {
    content: "";
    display: inline-flex;
    width: 8px;
    height: 8px;
    background-color: var(--cas-color-primary);
    margin-right: 8px
}

.latest-new-excerpt {
    font-family: var(--cas-font-secondary);
    font-weight: 400;
    font-size: .75rem;
    width: 80%;
    margin-left: 1rem
}

.main-news,
.secondary-news {
    display: flex;
    flex-direction: column;
    color: var(--cas-color-primary);
    transition: transform .3s ease
}

.main-news {
    width: 50%
}

.secondary-news {
    width: 25%
}

.secondary-news-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px
}

.main-news:hover,
.secondary-news-item:hover {
    transform: scale(1.02)
}

.main-news h3,
.secondary-news h3 {
    font-family: var(--cas-font-primary);
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0 !important
}

.main-news p,
.secondary-news p {
    font-family: var(--cas-font-secondary);
    font-weight: 300;
    font-size: 1rem;
    margin: 0 !important
}

.featured-news-image-container,
.secondary-news-image-container {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    background-size: cover;
    background-position: center;
    border-radius: 1.5rem;
    margin-bottom: 1rem
}

.news-type {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--cas-color-primary);
    color: #fff;
    padding: 5px 10px;
    border-radius: 20px;
    font-family: var(--cas-font-primary);
    font-weight: 600;
    font-size: .75rem;
    z-index: 1
}

.secondary-news-image-container img {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover
}

.homepage-sdgs-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 80px
}

.sdgs {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 100px;
    height: 600px;
    background: url("/wp-content/uploads/2024/09/pexels-yunus-emre-ilica-15818123-scaled.jpg") no-repeat center center;
    background-size: cover
}

.sdgs h3,
.sdgs p,
.sdgs a {
    z-index: 0
}

.sdgs h3 {
    font-family: var(--cas-font-primary);
    color: #fff !important;
    font-size: 2.5rem;
    line-height: 40px;
    width: 50%
}

.sdgs p {
    font-family: var(--cas-font-secondary);
    color: #fff;
    font-size: 1.5rem;
    line-height: 30px;
    width: 50%
}

.homepage-didYouKnow {
    display: none;
    flex-direction: column;
    height: 650px;
    margin-top: 80px;
    padding: 80px;
    background-color: var(--cas-color-secondary)
}

.homepage-didYouKnow p {
    font-family: var(--cas-font-secondary);
    font-weight: 400;
    font-size: 1rem;
    width: 60%
}

.did-you-know-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px
}

.did-you-know-item {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #fff;
    width: 600px;
    height: 120px;
    padding: 0 20px;
    border-radius: 25px
}

.did-you-know-icon {
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px
}

.did-you-know-text {
    font-family: var(--cas-font-primary);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 25px;
    color: var(--cas-color-primary)
}

.national-account-container {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column
}

.national-account-container h1 {
    font: 700 3rem var(--cas-font-primary);
    margin-bottom: 3.125rem
}

.h-2col {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 5%;
}

.national-account-annual,
.right-sidebar-contact {
    display: flex;
    flex-direction: column
}

.national-account-annual {
    width: 80%
}

.national-account-container h3 {
    font: 600 1.5rem var(--cas-font-primary)
}

.national-account-annual p,
.national-account-methodology p {
    font: 400 1.125rem var(--cas-font-secondary);
    line-height: 1.5;
    width: 50%
}

.national-accounts-links {
    display: flex;
    flex-direction: column;
    width: 70%
}

.national-accounts-links h5 {
    margin-top: 80px;
    font: 700 1rem var(--cas-font-primary);
    color: var(--cas-color-primary)
}

.national-account-annual-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem
}

.national-account-figure {
    position: relative;
    width: 25rem;
    height: 14rem;
    padding: 1rem;
    background-color: var(--cas-color-secondary);
    border-radius: 30px;
    font-family: var(--cas-font-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.national-account-figure h4 {
    font: 700 3.125rem var(--cas-font-primary);
    margin-bottom: 10px;
    color: var(--cas-color-primary);
    text-align: center
}

.national-account-figure h5 {
    position: absolute;
    bottom: 0;
    font: 700 1.25rem;
    color: var(--cas-color-accent)
}

.right-sidebar-contact {
    width: 25%;
}

.right-sidebar-contact-info-wrap-details {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    font-family: var(--cas-font-primary)
}

.right-sidebar-contact-info-wrap-details h4 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cas-color-primary);
    margin: 0;
    padding: 0
}

.right-sidebar-contact-info-wrap-details p {
    font-size: .875rem;
    margin: 0;
    padding: 0
}

.right-sidebar-contact-info-wrap-details span {
    display: flex;
    gap: 8px;
    margin-top: 5px
}

.right-sidebar-contact-info-wrap-details a {
    font-size: .875rem
}

.right-sidebar-contact-info-wrap-details a:hover {
    font-weight: 600
}

.national-account-methodology {
    margin-top: 80px;
    max-width: 80%
}

.all-news-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto
}

.all-news-h1 {
    font-family: var(--cas-font-primary);
    font-weight: 600;
    font-size: 2.5rem;
    color: var(--cas-color-primary);
    width: 90%;
    margin: 0 auto 2%
}

.all-news-list {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    color: var(--cas-color-primary)
}

.news-list-item {
    flex: 0 1 23.5%;
    min-width: 250px;
    aspect-ratio: 16/9;
    display: flex;
    flex-direction: column;
    transition: transform .3s
}

.news-list-item:hover {
    transform: scale(1.02);
}

.news-list-img {
    position:relative;
    width: 100%;
    padding-bottom: 56.25%;
    background-size: cover;
    background-position: center;
    border-radius: 1rem;
    margin-bottom: 1rem
}

.news-list-item h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0
}

.news-list-item p {
    font-size: 1rem;
    color: var(--cas-color-primary);
    margin: 0
}

.news-list-item p span {
    font-weight: 600;
    font-family: var(--cas-font-primary)
}

.no-news-found {
    font-family: var(--cas-font-primary);
    font-size: 2rem;
    font-weight: 500;
    text-align: center;
    width: 100%;
    height: 10vh
}

.posts-per-page {
    width:100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2%;
     margin-top: 4%;
}

.posts-per-page-selector {
    width:100%;
    display: flex;
    gap:0.25rem;
    
    align-items: center;
    font-family: var(--cas-font-primary);
    color: var(--cas-color-primary);
    font-size: .875rem;
    font-weight: 500;
}


.posts-per-page-selector select {
    width: 15%;
}


.posts-per-page-selector label {
    width: 85%;
    text-align: right;
}


.single-new-article {
    display: flex;
    align-items: flex-start;
    gap: 10%
}

.single-new-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 80%
}

.single-new-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.single-new-top-row-date-writer-time {
    display: flex;
    gap: 3rem;
    font-family: var(--cas-font-primary);
    font-weight: 300;
    font-size: 1rem;
    align-items: center;
}

.single-new-top-row-date-writer,
.single-new-top-row-read-time {
    display: flex;
    gap: 4px;
    align-items: center;
}

.single-new-top-row-date-writer p {
    margin: 0;
    padding: 0;
    line-height: 1;
}

.time-to-read {
    margin: 0;
    padding: 0;
    line-height: 1;
}

.single-new-top-row-icons {
    display: flex;
    align-items: center;
    gap: 2px;
}

.single-new-top-row-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-new-top-row-icons svg {
    vertical-align: middle;
}

.single-new-title {
    font-family: var(--cas-font-primary);
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 36px;
    color: var(--cas-color-primary);
}

.single-new-image-container {
    width: 100%;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: var(--cas-color-primary);
}

.single-new-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-new-summary {
    font-family: var(--cas-font-primary);
    font-weight: 300;
    font-size: 1.25rem;
    line-height: 1.875rem;
    color: var(--cas-color-primary);
}

.single-new-line {
    width: 100%;
    border: 1px solid #a8a8a8;
}

.single-new-body {
    font-family: var(--cas-font-secondary);
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.875rem;
    color: var(--cas-color-primary);
}

.single-new-sidebar {
    display: flex;
    flex-direction: column;
    gap: 4rem
}

.single-new-sidebar-more-about,
.single-new-slider-about-writer {
    width: 300px;
    height: 300px;
    background: var(--cas-color-secondary);
    border-radius: 1.25rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    position: relative
}

.single-new-sidebar h4,
.writer-bio h5 {
    font-family: var(--cas-font-primary);
    font-weight: 600;
    color: var(--cas-color-primary);
    margin: 0
}

.single-new-sidebar h4 {
    font-size: 1rem;
    line-height: 1.25rem
}

.writer-bio h5 {
    font-size: .75rem
}

.single-new-sidebar p {
    font-family: var(--cas-font-secondary);
    font-weight: 400;
    font-size: .75rem;
    line-height: 1.125rem;
    color: var(--cas-color-primary)
}

.single-new-sidebar-more-about a {
    position: absolute;
    bottom: 1.25rem
}

.single-new-slider-about-writer-icon-text {
    display: flex;
    gap: .5rem;
    align-items: flex-start
}

.publications-header {
    text-align: center;
    margin-bottom: 20px
}

.publications-filters {
    text-align: center;
    margin-bottom: 20px
}

.publications-filters select,
.publications-filters button {
    margin: 5px;
    padding: 8px
}

.publications-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px
}

.publication-item {
    display: flex;
    flex-direction: column;
    text-align: center;
    text-decoration: none;
    color: inherit
}

.publication-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
    border-radius: 1rem;
    object-fit: cover
}

.publication-date {
    font-size: 14px;
    color: gray
}

.publication-title {
    font-size: 18px;
    font-weight: bold
}

.pagination {
    text-align: center;
    margin-top: 20px
}

.single-publication-container {
    display: flex;
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    gap: 20px
}

.cas-page-container-filter-wrapper {
    margin-bottom: 8rem;
}

.single-publication-image img {
    width: 400px;
    height: auto;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 8px
}

.single-publication-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.single-publication-details .publication-date {
    font-size: 16px;
    color: gray
}

.single-publication-details .publication-title {
    font-size: 24px;
    font-weight: bold;
    margin: 10px 0
}

.publication-description {
    font-size: 16px;
    line-height: 1.5
}

.publication-files {
    display: flex;
    flex-direction: row;
    gap: 5px
}

.publication-files svg {
    width: 30px
}

.publication-meta-item {
    margin-top: 30px
}

.single-publication-container h4 {
    margin: 0;
    padding: 0
}

.thematic-series-container {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.thematic-series-container h1 {
    font-family: var(--cas-font-primary);
    font-weight: 700;
    font-size: 3rem;
    margin-bottom: 3.125rem
}

.h-grid-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2vh 2%;
    color: var(--cas-color-primary);
    font-family: var(--cas-font-primary)
}

.h-grid-list__item {
    flex: 0 1 32%;
    min-width: 350px;
    aspect-ratio: 16/9;
    position: relative;
    transition: transform .3s ease-out;
}

.h-grid-list__item-hover:hover {
    transform: scale(1.02);
}


.h-grid-list__item-img-wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    border-radius: 1.5rem
}

.h-grid-list__item-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.thematic-series-sdg-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 22%
}

.h-grid-list__item h3 {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: var(--cas-font-primary);
    padding-top: 1rem
}

.subject-subCategory-item {
    display: flex;
    flex-direction: row
}

.survey-hero-image {
    margin-bottom: 30px;
    text-align: center
}

.survey-hero-image img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px
}

.survey-information-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px
}

.survey-info-left {
    flex: 2;
    min-width: 350px;
    padding-right: 20px
}

.survey-info-right {
    flex: 1;
    min-width: 250px;
    background-color: var(--cas-color-secondary);
    padding: 25px
}

.survey-year {
    font-size: .95em;
    color: var(--cas-color-text);
    margin-bottom: 10px;
    font-weight: bold
}

.entry-title {
    font-size: 2.2em;
    color: var(--cas-color-text);
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 1.2
}

.survey-description {
    font-size: 1.1em;
    line-height: 1.7;
    color: var(--cas-color-text);
    margin-bottom: 30px
}

.section-title {
    font-size: 1.5em;
    color: var(--cas-color-text);
    margin-top: 30px;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid #eee;
    display: flex;
    align-items: center
}

.section-title span {
    font-size: .8em;
    color: var(--cas-color-text);
    font-weight: normal;
    margin-left: 8px
}

.datasets-list,
.microdata-list,
.reports-publications-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px
}

.datasets-list li,
.microdata-list li,
.reports-publications-list li {
    margin-bottom: 6px;
    line-height: 1.5
}

.datasets-list li a,
.microdata-list li a,
.reports-publications-list li a {
    text-decoration: none;
    color: var(--cas-color-light-blue);
    font-weight: 500;
    transition: color .2s ease-in-out
}

.datasets-list li a:hover,
.microdata-list li a:hover,
.reports-publications-list li a:hover {
    color: var(--cas-color-text);
    text-decoration: underline
}

.section-title i,
.datasets-list i,
.microdata-list i,
.reports-publications-list i {
    margin-right: 10px;
    color: var(--cas-color-text-accent);
    font-size: 1.1em
}

.survey-video-section {
    margin-top: 40px;
    margin-bottom: 40px
}

.reports-publications-list h5 {
    margin-top: 20px;
    margin-bottom: 0;
    padding: 0
}

.survey-video-section h2 {
    font-size: 1.8em;
    margin-bottom: 20px;
    color: var(--cas-color-text)
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    border-radius: 6px
}

.video-wrapper iframe,
.video-wrapper object,
.video-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.survey-other-section {
    margin-top: 40px
}

.survey-other-section h2 {
    font-size: 1.8em;
    margin-bottom: 20px;
    color: var(--cas-color-text)
}

.survey-other-section .wysiwyg-content {
    line-height: 1.7;
    color: var(--cas-color-text-accent)
}

@media(max-width: 992px) {

    .survey-info-left,
    .survey-info-right {
        flex: 1 1 100%;
        min-width: unset;
        padding-right: 0;
        border-left: none
    }

    .survey-info-right {
        margin-top: 30px
    }
}

.director-feature-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding: 40px 0;
    margin-bottom: 50px
}

.director-feature-section .director-info {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-shrink: 0
}

.director-feature-section .director-photo-container {
    width: 250px;
    position: relative;
    overflow: hidden;
    border-radius: 8px
}

.director-feature-section .director-photo-container::before {
    content: "";
    display: block;
    padding-bottom: 133.3333333333%
}

.director-feature-section .director-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.director-feature-section .director-info h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0
}

.director-feature-section .director-info p {
    font-size: 1rem;
    color: var(--cas-color-text-accent);
    margin: 0
}

.director-feature-section .director-quote {
    flex-grow: 1;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2rem;
    font-family: var(--cas-font-secondary);
    text-align: left;
    max-width: 50%;
    position: relative;
    padding-left: 20px
}

.director-feature-section .director-quote::before {
    content: "“";
    position: absolute;
    top: 10px;
    left: 0;
    font-size: 8rem;
    color: var(--cas-color-text-accent);
    line-height: 1;
    font-style: normal;
    font-family: Georgia, serif
}

.cas-sections-container {
    margin-top: 40px
}

.cas-sections-container h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 50px
}

.cas-sections-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 100px 60px
}

.cas-section-block {
    border-bottom: 1px solid var(--cas-color-text-accent);
    padding-bottom: 15px
}

.cas-section-block h3 {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0 0 10px 0
}

.cas-section-block p {
    font-size: .9rem;
    color: var(--cas-color-text-accent);
    margin-bottom: 10px
}

.learn-more-link {
    display: inline-block;
    color: var(--cas-color-light-blue);
    text-decoration: none;
    font-weight: bold;
    font-size: .9rem;
    transition: color .2s
}

.learn-more-link:hover {
    color: var(--cas-color-light-blue)
}

.arrow {
    margin-left: 5px;
    font-size: 1.2rem;
    vertical-align: middle
}

@media(max-width: 768px) {
    .cas-sections-grid {
        grid-template-columns: 1fr
    }
}

.location-section {
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.acf-map {
    width: 100%;
    height: 500px;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    margin-bottom: 30px
}

.location-details {
    padding: 0
}

.address-details p {
    margin: 0 0 15px;
    font-size: 1.1em
}

.address-details strong {
    color: var(--cas-color-primary);
    font-weight: 600
}

.address-details a {
    color: var(--cas-color-text-accent);
    text-decoration: none;
    transition: color .3s ease
}

.address-details a:hover {
    color: var(--cas-color-accent)
}

.departments-form-section {
    display: flex;
    flex-direction: column;
    gap: 30px
}

.departments-contact-list {
    padding-top: 50px
}

.departments-contact-list h2 {
    color: var(--cas-color-primary);
    margin: 0 0 15px;
    border-bottom: 2px solid var(--cas-color-light-blue);
    padding-bottom: 10px;
    font-size: 1.8em
}

.department-card {
    border-bottom: 1px solid var(--cas-color-text-accent);
    padding: 20px 0;
    margin-bottom: 0;
    transition: background-color .3s ease
}

.department-card:last-child {
    border-bottom: none;
    padding-bottom: 0
}

.department-card h3 {
    margin-top: 0;
    color: var(--car-color-primary);
    font-size: 1.4em
}

.contact-form-container {
    padding-top: 50px;
    padding-left: 30px
}

.contact-form {
    max-width: 80%
}

.contact-form-container h2 {
    margin: 0 0 20px;
    border-bottom: 2px solid var(--cas-color-light-blue);
    padding-bottom: 10px;
    font-size: 1.8em
}

.contact-form .form-group {
    margin-bottom: 25px
}

.contact-form label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--car-color-primary)
}

.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--cas-color-text-accent);
    border-radius: 6px;
    font-size: 1em;
    box-sizing: border-box;
    transition: border-color .3s ease
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--cas-color-text-accent);
    outline: 0
}

.contact-form textarea {
    resize: vertical
}

.submit-button {
    width: 100%;
    padding: 15px 25px;
    background: var(--cas-color-primary);
    border: 1px solid var(--cas-color-primary);
    border-radius: 6px;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    transition: background .3s ease
}

.submit-button:hover {
    background: none;
    border: 1px solid var(--cas-color-primary);
    color: var(--cas-color-primary)
}

.submit-button:active {
    background-color: var(--cas-color-accent);
    transform: translateY(0)
}


.announcement-content {
    margin-top: 20px;
}


@media(min-width: 992px) {
    .departments-form-section {
        flex-direction: row;
        align-items: flex-start
    }

    .departments-contact-list {
        flex: 0 0 30%
    }

    .contact-form-container {
        flex: 0 0 70%;
        position: sticky;
        top: 20px
    }
}


    .figure-nav-btn {
        display: none !important;

}

.homepage-news-title-viewmore span {
 display: none;
}

@media(max-width: 1024px) {


   /* Hide desktop, show mobile */
    .cas-desktop-header { display: none; }
    .cas-mobile-header { display: block; }
    .cas-top-search .cas-searchBtn {display:none;}
    .cas-mobile-logo-toggleMenu .cas-logo-text-mobile {
        display:none;
    }
    
  /* 1. Main Container: Position arrows */
    .figures-main-container {
        position: relative !important;
        padding: 0 20px !important; /* Space for the navigation buttons */
        overflow: hidden !important; 
    }

    /* 2. Figures Container (The <ul>): Set up scroll, horizontal row, and initial padding */
    .figures-container {
        /* Flex properties for horizontal layout */
        display: flex !important;
        width:100%;
        flex-wrap: nowrap !important; /* CRITICAL: Must be NOWRAP */
        
        /* Scroll properties */
        overflow-x: scroll !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        
        /* Spacing: We'll put the 20px initial gap here */
        padding: 0 0 0 10px !important; 
        margin: 0 !important;
        gap: 0 !important; /* Remove any default gap */
        
        /* Ensure vertical stretching */
        align-items: stretch !important; 
        
        /* Hide Scrollbar */
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }
    .figures-container::-webkit-scrollbar {
        display: none !important;
    }

    /* 3. List Item (The <li>): Define the robust SINGLE-ITEM width */
    .figures-container > li {
        /* CRITICAL: Enforce single item view (100% of the visible area) */
        flex: 0 0 calc(100% - 10px) !important; 
        
        /* Enforce calculated width */
        width: calc(100% - 10px) !important; /* 100% minus 40px total spacing */
        min-width: 320px !important; 
        
        /* Add a margin to the right to create the space between items (20px) */
        margin-right: 20px !important; 
        margin-left: 0 !important;
        padding: 0 !important;
        
        scroll-snap-align: start !important; 
        
        /* CRITICAL VERTICAL FIX */
        height: auto !important; 
        align-self: stretch !important; /* Ensure it stretches to match tallest sibling */
    }
    
    /* 4. Last item fix: Adjust the margin to prevent excessive scroll space */
    .figures-container > li:last-child {
        margin-right: 40px !important; /* Match the padding of the figures-main-container */
    }

    /* 5. Figure Item (The inner content box) */
    .figure-item {
        /* CRITICAL VERTICAL FIX */
        height: 100% !important; /* Forces the inner content to fill the LI's height */
        width: 100% !important; 
        
        /* Re-apply flex-direction to ensure content stacks correctly */
        display: flex !important; 
        flex-direction: column !important; 
        justify-content: flex-start !important; 
    }
    
    /* 6. Figure Read More button adjustment (push to bottom) */
    .figure-read-more {
        margin-top: auto !important; /* Pushes the button to the bottom of the figure-item */
    }
    
.figure-nav-btn {
    /* Critical Positioning */
    position: absolute !important;
    top: 50% !important; /* Center vertically */
    transform: translateY(-50%) !important;
    z-index: 10 !important; /* Ensure the button is above the figures */
    
    /* Appearance */
    width: 32px !important; /* Diameter of the circle */
    height: 32px !important; /* Diameter of the circle */
    border-radius: 50% !important; /* Makes it a circle */
    background-color: #fff !important; /* White background */
    border: 1px solid #ccc !important; /* Light border */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow */
    cursor: pointer !important;
    
    /* Content Centering (The < or >) */
    display: flex !important; 
    align-items: center !important;
    justify-content: center !important;
    
    /* Arrow Symbol Color */
    color: var(--car-color-primary); 
    font-size: 1.2rem !important; /* Size of the arrow symbol */
    line-height: 1 !important;
}

/* Specific positioning for Left/Previous button */
.prev-btn {
    left: 0px !important; /* Position closer to the edge */
}

/* Specific positioning for Right/Next button */
.next-btn {
    right: 0px !important; /* Position closer to the edge */
}

/* Hover/Focus States (Optional but Recommended) */
.figure-nav-btn:hover,
.figure-nav-btn:focus {
    border-color: var(--cas-color-accent, #6A1B4D) !important; /* Use a defined accent color */
    outline: none !important;
}




  /* 1. News Container: Set up the main vertical stack */
    .homepage-news-items {
        display: flex !important;
        flex-direction: column !important; /* Forces the main sections (latest, main, secondary) to stack */
        gap: 0 !important; /* Remove gap */
        padding: 0 15px; /* Add padding to the container edges */
    }

    /* 2. LATEST NEWS (The List) - HIDE ON MOBILE */
    .latest-news-with-btn {
        display: none !important; 
    }

    /* 3. MAIN NEWS: Make it full width */
    .main-news {
        width: 100% !important; /* CRITICAL: Full width */
        margin-bottom: 30px; /* Add space before secondary news */
    }

    .main-news h3 {
        font-size: 1.25rem !important; /* Adjust title size */
    }
    
    /* 4. SECONDARY NEWS: Make its wrapper full width */
    .secondary-news {
        width: 100% !important; /* CRITICAL: Full width within the column */
        display: flex !important; /* Set secondary news items to be horizontal */
        flex-direction: row;
        flex-wrap: nowrap !important; /* Ensure they stay on one line */
        gap: 20px; /* Space between the two secondary items */
    }
    
    /* 5. SECONDARY NEWS ITEMS: Force two items side-by-side */
    .secondary-news-item {
        /* CRITICAL: Each item takes half the space, minus half the gap */
        flex: 0 0 calc(50% - 10px) !important; 
        max-width: none !important; 
        margin-bottom: 0 !important; /* Remove bottom margin since we use gap */
        
        display: flex !important;
        flex-direction: column !important;
    }
    
    .secondary-news-item h3 {
        font-size: 1.1rem !important; /* Adjust secondary title size */
    }
    
    /* Adjustments to ensure text/image doesn't overflow */
    .secondary-news-image-container {
        width: 100% !important;
        /* Optionally ensure image container radius matches the main image */
        border-radius: 1.5rem !important;
    }

    .homepage-news-title-viewmore {
        display:flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        margin: auto;
    }

    .homepage-news-title-viewmore span {
    display: flex;
        flex-direction: row;
        align-items: flex-start;
}


    .cas-page-container {
        max-width: 95%
    }

    .h-2col {
        flex-direction: column
    }



    .cas-top-menu-search {
        flex-direction: column;
        gap: 20px;
        align-items: flex-end
    }

    .cpi-tables-graphs,
    .national-account-annual,
    .right-sidebar-contact {
        width: 100%
    }

    .single-new-article {
        flex-direction: column
    }

    .homepage-didYouKnow {
        padding: 40px 20px;
        height: auto
    }

    .homepage-didYouKnow p,
    .sdgs h3,
    .sdgs p {
        width: 100%
    }

    .sdgs {
        padding-left: 20px;
        height: auto
    }
}

@media(max-width: 768px) {
    html {
        font-size: 15px
    }

    .cas-header,
    .cas-top-header {
        flex-direction: column;
        align-items: flex-start
    }

    .cas-searchBox {
        width: 100%
    }


    .did-you-know-container {
        flex-direction: column
    }

    .did-you-know-item,
    .figure-item {
        width: 100%
    }

    .news-list-item {
        flex: 0 1 100%
    }

    .publications-list {
        grid-template-columns: 1fr
    }

    .single-publication-container {
        flex-direction: column;
        padding: 10px
    }

    .single-publication-image img {
        width: 100%
    }

    .cpi-sub-container-contact {
        flex-direction: column
    }

    .cpi-subclass,
    .cpi-figure {
        width: 100%
    }

    .national-account-annual p,
    .national-account-methodology p {
        width: 100%
    }

    .h-grid-list__item {
        flex: 0 1 100%;
        min-width: 100%
    }

    .cas-top-header span {
        font-size: .75rem
    }



    .sdgs {
        padding: 40px 20px;
        height: auto;
        align-items: flex-start
    }

    .sdgs h3,
    .sdgs p {
        width: 100%;
        font-size: 1.5rem
    }

    .sdgs a.sdgs-btn {
        margin-top: 20px
    }

    .homepage-didYouKnow {
        padding: 40px 20px;
        height: auto
    }

    .homepage-didYouKnow p {
        width: 100%;
        font-size: 1rem
    }

    .did-you-know-container {
        flex-direction: column;
        gap: 20px
    }

    .did-you-know-item {
        width: 100%;
        height: auto;
        padding: 20px;
        flex-direction: column;
        align-items: flex-start
    }

    .did-you-know-icon {
        margin-bottom: 10px
    }

    .did-you-know-text {
        font-size: 1rem;
        line-height: 22px
    }

    .publication-filters {
        flex-direction: column;
        align-items: stretch; 
        padding: 1rem;
    }

    .filter-group {
        max-width: 100%; 
        min-width: unset;
    }

    .filter-go-group {
        align-self: auto; 
        min-width: unset;
        margin-top: 1rem; 
    }

    .filter-go-button {
        width: 100%; 
    }
}

@media(max-width: 480px) {
    html {
        font-size: 14px
    }

    .cas-top-menu ul {
        flex-direction: column;
        gap: 10px
    }

    .cas-logo-flag {
        flex-direction: column;
        margin-left: 0
    }

    .cas-searchBox {
        height: 35px;
        font-size: .875rem
    }


   .footer-menu-useful-links {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  footer h2 {
    display:none !important;
}

    .sdgs {
        padding: 20px
    }

    .sdgs h3 {
        font-size: 1.75rem
    }

    .homepage-didYouKnow {
        padding: 30px 15px
    }

    .did-you-know-item {
        flex-direction: column;
        height: auto;
        padding: 15px
    }

    .thematic-series-sdg-icon {
        width: 20%
    }
}

@media(max-width: 768px) {
    .cas-page-container-wrapper {
        padding: 15px
    }

    .site-main.single-survey {
        padding: 20px
    }

    .entry-title {
        font-size: 1.8em
    }

    .section-title {
        font-size: 1.3em
    }

    .section-title span {
        display: block;
        margin-left: 0;
        margin-top: 5px
    }
}

@media(max-width: 480px) {
    .entry-title {
        font-size: 1.6em
    }

    .section-title {
        font-size: 1.2em
    }
}