:root {

    --radius-16: 16px;
    --container-padding: 2rem;
    --thiner-border: rgba(255, 255, 255, 0.3);
    --thiner-border-sec: rgba(55, 65, 81, 0.2);

    --white-color: #ffffff;

    --angola-red: #DA291C;
    --angola-yellow: #F7D117;
    --angola-strong-yellow: #d4af37;
    --angola-black: #000000;
    --angola-white: #FFFFFF;

    --golden-color: #f3c303;
    --golden-color-hover: #dbb003;

    --breadcrumb-items-size: 1.4rem;
    /* Hover/Active States */
    --angola-red-hover: #B22216;
    --angola-yellow-hover: #E5BE14;
    --angola-black-hover: #1A1A1A;

    --over-lay: rgba(17, 24, 39, 0.50);
    /* --over-lay: rgba(17, 24, 39, 0.50); */
    /* Soft transparency for overlays */
    --angola-red-alpha: rgba(218, 41, 28, 0.1);

    --primary-over-lay: rgba(0, 0, 0, 0.5);

    --text-gray: rgb(55 65 81);
    --title-gray: rgb(17 24 39);

    --primary-font-family: 'Arial', sans-serif;

    --shadow-1: 0 2px 10px rgba(0, 0, 0, 0.1);

    --shadow-2: 0 10px 20px rgba(0, 0, 0, 0.1);


    --sec-background: #f5f5f5;


    /* =========font size============ */
    --desktop-title-size: 2.6rem;
    --link-text-size: 1.2rem;
    --news-title-size: 1.4rem;

}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--primary-font-family);
    background-color: #fff;
}

html {
    width: 100%;
    scroll-behavior: smooth;
    background-color: #fff;
}



p,
h1,
h2,
h3,
h4,
h5,
ul,
ol,
li {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: var(--text-gray);
}

ul,
ol {
    list-style: none;
}

body .ui-breadcrumb .ui-breadcrumb-items li:first-child a.ui-icon-home {
    font-size: var(--breadcrumb-items-size);
}

body .ui-tabs .ui-tabs-panels .ui-tabs-panel {
    padding: 0;
}

.service-skeleton-wrapper {
    display: none;
}

.news-skeleton-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.hidden-skeleton {
    display: none;
}

.dialog-scroll-component.ui-scrollpanel {
    width: 100%;
    height: 500px;
    border: none;
    padding: 0 1rem;
}

#closeMenu {
    padding-left: 2rem;
    padding-top: 1rem;
}

.service-skeleton-wrapper .skeleton-card {
    padding: 2rem;
    margin-bottom: 1rem;

    border-radius: 8px;
    background: #f6f7f8;
}

.ui-breadcrumb .ui-breadcrumb-items {
    font-size: var(--breadcrumb-items-size);
}

body .ui-breadcrumb .ui-breadcrumb-items li:not(.ui-breadcrumb-chevron):not(.ui-breadcrumb-options):before {
    font-size: .8rem;
}

.scrolly-telling-section,
.president-biography-page-container,
.news-page-container,
.consular-services-page-container,
.destinations-page-container,
.show-news-page {
    padding: 4rem 6rem;
}

.text-align {
    text-align: center !important;
}

.language-selector.ui-menu.ui-menu-dynamic {
    background-color: #fff;
}

.closeContactFormContainer,
.contactInfo {
    padding-left: 1rem;
}

.cards-container .ui-commandlink{
    color: var(--text-gray);
}


.carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: var(--white-color, #fff);
    transform: scale(1.2);
}


.radioBtns .ui-widget,
.layout-line-direction {

    display: flex;
    gap: 1rem;
    font-size: 12pt;
    flex-direction: column;
}


@media (width < 769px) {

    .scrolly-telling-section,
    .president-biography-page-container,
    .news-page-container,
    .consular-services-page-container,
    .destinations-page-container,
    .show-news-page {
        padding: 4rem 2rem;
    }
}

@media (width < 570px) {

    .scrolly-telling-section,
    .president-biography-page-container,
    .news-page-container,
    .consular-services-page-container,
    .destinations-page-container,
    .show-news-page {
        padding: 4rem 1em;
    }
}

.open-menu-button.ui-button {
    display: none;
}

/* 
==============================
PUBLIC PAGES TABLES
==============================
 */

.is-mobile {
    display: none;
}

.public-pages-table-title-container {
    margin: 2rem 0;
}

.public-page-table-1 .ui-datascroller .ui-datascroller-content {
    padding: 0;
    border: none;

}

.public-page-table-1 .ui-datascroller .ui-datascroller-item {
    margin-bottom: 2%;
}


.consular-services-page-container .ui-selectmanycheckbox.layout-line-direction.ui-grid-responsive>div {
    display: flex;
    border-bottom: 1px solid white;
    padding: .9rem 0;

}

.consular-services-page-container .check-boxes-container .ui-chkbox {
    width: fit-content;
}

.consular-services-page-container .ui-selectmanycheckbox label {
    font-size: 1.2rem;
}

.loader_container {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
}

.loader {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    position: absolute;
    top: 40%;
    left: 45%;
    height: 100px;
    /* border: 20px solid; */
    color: #a70202;
    border-radius: 50%;
    border-top-color: transparent;
    animation: loader 1.2s linear infinite;
}


.card {
    background: var(--white-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-2);
}

@keyframes loader {
    100% {
        transform: rotate(360deg);
    }
}

/* 
===========================
NAVBAR
=============================
*/


.nav-bar {
    padding-left: 5.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* border: 1px solid var(--thiner-border); */

}



.row {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.fixed-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 900;
    color: var(--title-gray) !important;
    background-color: var(--white-color);
    box-shadow: var(--shadow-1);
}

.fixed-nav-bar a {

    color: var(--title-gray) !important;
}

.hero-section .dropdown>span a {
    color: #fff;
}

.change-header-elements-border-color {
    border-color: var(--thiner-border-sec) !important;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.logo-divider {
    width: 1px;
    height: 50px;
    background-color: #A0A0A0;
}

.logo,
.insignia {
    height: 60px;
    width: auto;
    display: block;
}


/* If the insignia is naturally more "round", you might want it slightly smaller */
.insignia {
    height: 55px;
}

.nav-content {
    /* width: 88%; */
    display: flex;
    /* flex-direction: column; */
    /* border-left: 1px solid var(--thiner-border); */
}

.nav-content .ui-commandlink {
    color: var(--text-gray);
}

.utility-bar {
    padding: 1.4rem;
    border-bottom: 0;
    border-left: 0;
    text-align: right;
    /* border: 1px solid var(--thiner-border);
    border-bottom: none;
    border-left: none; */
}

.custom-upload-btn .pi-plus:before {
    content: "\e958" !important;
}

.custom-upload-btn.ui-fileupload-simple .ui-button {
    border: 2px dashed #ced4da;
    background-color: #fafafa !important;
    transition: all 0.3s ease !important;
    display: grid !important;
    text-align: center !important;
    padding: 2rem;
}

.custom-upload-btn .ui-button.ui-button-text-icon-left .ui-button-text,
.custom-upload-btn .ui-button.ui-button-text-icon-left .ui-icon {
    display: contents;
}

.main-nav {
    gap: 2rem;
    display: flex;
    justify-content: space-around;
    padding: 1rem;
    flex-direction: row;
    /* border-top: 1px solid var(--thiner-border); */
    /* border-bottom: none; */
    /* border: 1px solid red; */
}

.nav-links {
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1rem;

}

/*the container of the link tha is a dropdown */
.dropdown,
.non-dropdown {
    position: relative;
    cursor: pointer;
    padding: 10px;
    background-color: transparent;
    font-weight: 400;
    display: flex;
    align-items: center;

    font-family: system-ui;
}



/*the style of the content of the dropdown */
.dropdown-content {

    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--white-color);
    color: var(--text-gray);
    width: 350px;
    border-radius: 4px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

/* the hover of dropdown gos here */
.dropdown:hover .dropdown-content {
    animation-name: fadeDonwToUp;
    animation-duration: .2s;
    display: block;
}

/* style of each sub-na-link */
.sub-nav-link,
.sub-nav-link.ui-link {
    width: auto;
    display: block;
    padding: 5px 20px;
    color: var(--text-gray) !important;
    /* Cinza escuro, leitura fácil */
    font-size: 0.9rem;
    /* border: 2px solid red; */
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    /* border-bottom: 1px solid #edf2f7; */
    color: var(--title-gray);
    /* Linha divisória fina */
}

.sub-nav-link * {
    color: var(--text-gray) !important;
}

.nav-bar .sub-nav-link.ui-link:hover {
    color: var(--text-gray);
    background-color: #f0f2f3;
    text-decoration: none;
}


.dateStyle.ui-datepicker .ui-datepicker-calendar td>a.ui-state-active,
.dateStyle.ui-datepicker .ui-datepicker-calendar td>span.ui-state-active {
    color: var(--angola-yellow-hover) !important;
}


.sub-nav-link:hover a {
    color: #f8f8f8 !important;
    text-decoration: none;
}

.sub-nav-links {
    /* padding: 10px; */
}

.sub-nav-link {
    border-radius: 8px;
}

.sub-nav-link a {
    display: block;
    width: 100%;
    color: var(--text-gray) !important;
    text-decoration: none;
    border-radius: 8px;
    padding: 10px;
    /* controla o tamanho da área clicável */
    box-sizing: border-box;
}

.sub-nav-link a:hover {
    background-color: var(--angola-red);
    color: #fff !important;
}


.sub-nav-link a:hover {
    background-color: var(--angola-red);
    color: #fff !important;
}


/* small adjust on icon */
.nav-bar .pi-chevron-down {
    margin-left: 5px;
    font-size: 12px;
}


.nav-bar .travel-dropdown {
    width: 320px;
    padding: 10px;
}

.nav-bar .travel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 6px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s;
}

.nav-bar .travel-item:hover {
    background: var(--angola-red);
    color: #f8f8f8;
    text-decoration: none;
}

.travel-dropdown:hover a {

    text-decoration: none;
}

.nav-bar .travel-text {
    font-weight: 400;
    font-family: system-ui;
}

.nav-bar .travel-img img {
    width: 100px;
    height: 75px;
    object-fit: cover;
    border-radius: 5px;
}


.nav-bar .news-dropdown {
    width: 420px;
    padding: 12px;
}

.nav-bar .news-dropdown .ui-link {
    color: var(--angola-black);
}

.nav-bar .news-dropdown .ui-link:hover {
    color: #02a7a7 !important;
}

/* COLUNAS */
.nav-bar .news-columns {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 0.1rem;
    align-items: stretch;
}

/* garantir mesma altura */
.nav-bar .news-columns>div {


    padding: 10px;
}

/* listas */
.nav-bar .news-columns ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--angola-red);
}

.nav-bar .news-columns h4 {

    padding-bottom: 1rem;
}

.nav-bar .news-columns li {
    padding: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: normal;
}

.news-col-left li:hover,
.news-col-right li:hover {
    background-color: var(--angola-red);
    border-radius: 8px;
}

.news-col-left li:hover a,
.news-col-right li:hover a {
    color: #f8f8f8 !important;
    text-decoration: none;
}

/* IMAGENS */
.nav-bar .news-images {
    display: grid;
    grid-template-columns: 40% 60%;
    margin-top: 12px;
    gap: 0.1rem;
}

.nav-bar .news-images img {
    width: 100%;
    height: 60px;

    border-radius: 6px;
    background-size: cover;
    background-position: center;
}

/* No space between .dropdown and .quick-link */
.dropdown.quick-link .ui-commandlink span {
    color: var(--white-color);
}

/* animations of the nav-links */
@keyframes fadeDonwToUp {
    0% {
        transform: translateY(60px);
        opacity: 0;
    }

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

/* finish here the menu'sCSS *

/* width: 76%; */
.back-button.ui-commandlink {
    color: var(--angola-black);
    display: flex;
    align-items: center;
    gap: .8rem;
    width: fit-content;
    margin: 2rem 0;
    text-decoration: none;
}

.back-button.ui-commandlink:hover {

    text-decoration: none;
}


.booking-form-container .back-button.ui-commandlink {
    color: var(--white-color);
}

.show-news-page .back-button.ui-commandlink {
    display: none;
}

.back-button .pi {
    font-size: 1.8rem;
}

.rounded-button.ui-button.rounded-button {
    color: var(--white-color);
    border: 1px solid var(--white-color)
}

.menu-button.ui-button {
    font-weight: 600;
}

.menu-button.ui-button,
.menu-button.ui-button.ui-state-hover,
.menu-button.ui-button:active,
.menu-button.ui-button:focus {
    background: none;
    border: none;
    box-shadow: none;
    outline: none;
}

.fake-input-container {
    width: 24%;
}

.search-container .ui-input-icon-right {
    width: 100%;
    height: 100%;
}

.search-container .ui-inputfield {
    border-radius: 4px;
    width: 100%;
}

.custom-scrolltop.ui-scrolltop {
    width: 56px;
    height: 56px;
    background: var(--angola-red);
    border-radius: 50%;
    color: #fff;
}

.custom-scrolltop.ui-scrolltop:hover {
    background: var(--angola-red-hover);
}



.language-switcher.ui-selectonemenu {
    background: transparent;
    border: none;
    color: var(--white-color);
}

.language-switcher.ui-selectonemenu .ui-selectonemenu-label,
.language-switcher.ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
    color: var(--white-color);
    font-weight: 600;
}

.change-color {
    color: var(--title-gray) !important;

}


/* 
==============================
HERO SECTION
===============================
*/


.hero-section {
    position: relative;
    height: 100vh;

    overflow: hidden;
    color: var(--white-color);
}

#hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;

    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.hero-content-container {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: row;
    /* padding: 5.4rem; */
    /* Maintain your existing flex/alignment styles here */
}

.landing-page .hero-content-container {
    padding: 5.4rem;
    /* Maintain your existing flex/alignment styles here */
}



.hero-content,
.landing-page .hero-content {
    display: flex;
    flex-direction: column;
    /* margin: 6rem 0 0 5.4rem;*/

    width: fit-content;

}

.landing-page .hero-content {
    max-width: 45%;

}

.glass {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);

    padding: 20px;

    display: flex;
    justify-content: center;
    /* height: 100%; */
    max-height: 150px;
}

.hero-updates {
    width: 50%;
    display: flex;
    justify-content: end;
    /* centraliza horizontalmente */
    align-items: flex-end;
    /* coloca em baixo */
    /* padding-bottom: 30px; espaço do fundo */

}



.title {
    font-size: 2.5rem;
}



.hero-content p {
    margin: .4rem;
}

.hero-content .text {
    font-size: var(--news-title-size);
    line-height: 2rem;
}

.fixed-message-action {
    color: var(--white-color);
    position: fixed;
    top: 90%;
    right: 2%;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    border: 1px solid var(--white-color);
}



/* 
=================================

=================================
*/
.home-section .title {
    font-size: 2.6rem;
    margin-bottom: .8rem;
}

.home-section .subtitle {
    font-size: var(--link-text-size);
    /* width: 90%; */
}

.embassies-angola-section {

    width: 100%;
    height: 80vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 4rem 6rem;
}

.embassies-angola-section-flag {
    height: 50%;
    border-radius: 4px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.embassies-angola-section-flag img {
    width: 100%;
    height: 100%;
}

.embassies-carousel {
    width: 100%;
    height: 300px;
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.embassies-carousel-track {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateCarousel 35s linear infinite;
}

.embassies-angola-section-flag {
    position: absolute;
    width: 120px;
    height: 80px;
    left: 40px;
    top: 60px;
}

.embassies-angola-section-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* POSIÇÃO DOS ITENS NO CÍRCULO */

.embassies-angola-section-flag:nth-child(1) {
    transform: rotateY(0deg) translateZ(250px);
}

.embassies-angola-section-flag:nth-child(2) {
    transform: rotateY(60deg) translateZ(250px);
}

.embassies-angola-section-flag:nth-child(3) {
    transform: rotateY(120deg) translateZ(250px);
}

.embassies-angola-section-flag:nth-child(4) {
    transform: rotateY(180deg) translateZ(250px);
}

.embassies-angola-section-flag:nth-child(5) {
    transform: rotateY(240deg) translateZ(250px);
}

.embassies-angola-section-flag:nth-child(6) {
    transform: rotateY(300deg) translateZ(250px);
}

/* ANIMAÇÃO */

@keyframes rotateCarousel {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}


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

.avatar {

    margin-left: -10px;
}

.avatar:first-child {
    margin-left: 0;
}

.avatar-flag {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #ececec;
    display: block;
}

.avatar:hover {
    transform: translateY(-5px);
    z-index: 10;
    cursor: pointer;
}



.avatar-group img:first-child {
    margin-left: 0;
}

/* Tooltip 
.tooltip {
    position: absolute;
    bottom: 70px;
    left: 80%;
    transform: translateX(-50%);
    background: transparent;
    color: #1A1A1A;
    padding: 0;
    font-size: 12px;
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}*/


/* Tooltip Ajustado */
.tooltip {
    position: absolute;
    bottom: 100%; /* Posiciona acima do elemento pai */
    right: 0;      /* Alinha à direita do pai para não vazar a tela */
    margin-bottom: 15px; /* Espaço para a seta */
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 10;
}

/* seta do tooltip 
.tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 80%;
    transform: translateX(-50%);
    border-width: 15px;
    border-style: solid;
    border-color: #f8f8f8 transparent transparent transparent;
    bottom: -10px;
    border-style: solid;
    border-color: #111827 transparent transparent transparent;
}*/


/* Ajuste da Seta para a nova posição */
.tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 20px; /* Seta alinhada à direita agora */
    border-width: 10px;
    border-style: solid;
    border-color: #111827 transparent transparent transparent;
}



/* mostrar no hover */
.avatar:hover .tooltip {
    opacity: 1;
    visibility: visible;
    cursor: pointer;
}

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



.hero-section {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('./resources/imgs/investments/hro.webp') no-repeat center center;

     background-size: cover;
    color: #fff;

    /* text-align: center; */
    margin-bottom: 30px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

.section-title {
    border-left: 5px solid #d4af37;
    /* Dourado institucional */
    padding-left: 15px;
    margin: 40px 0 20px 0;
    color: #2c3e50;
    font-weight: bold;
}

.card-hover:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease;
}



.icon-box {
    font-size: 2rem;
    color: #d41414;
    /* Vermelho Angola */
    margin-bottom: 10px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.province-card a {
    text-decoration: none !important;
}

.province-card .ui-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.province-card img {
    height: 180px;
    object-fit: cover;
}

.province-content {
    min-height: 140px;
}

/* card  background: linear-gradient(145deg,#0f1633,#1a2347); 
.tooltip-card {
    width: 700px;
    background: #111827;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
    color: #f8f8f8;
    font-family: system-ui;
}*/

.tooltip-card {
    width: 300px; /* Largura menor e fixa para forçar o crescimento vertical */
    background: #111827;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
    color: #f8f8f8;
    font-family: system-ui;
    display: flex;
    flex-direction: column; /* Garante que cresça para baixo/cima */
}


/* Imagem e Conteúdo */
.tooltip-image img {
    width: 100%;
    height: 100px; /* Altura fixa para a imagem */
    object-fit: cover;
}

/* imagem topo 

.tooltip-image img {

    width: 100%;
    height: 140px;
    object-fit: cover;

}*/

/* conteúdo 

.tooltip-content {
    padding: 5px;
}*/


.tooltip-content {
    padding: 15px; /* Mais padding para o texto respirar */
    word-wrap: break-word; /* Força o texto a quebrar e aumentar o height */
}


.tooltip-content h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
}

.tooltip-content p {
    font-size: 13px;
    line-height: 1.5;
    color: #cfd6ff;
}

/* localização */

.tooltip-location {
    margin-top: 10px;
    font-size: 12px;
    color: #9fb3ff;
}

.mission-carousel.ui-carousel .ui-carousel-indicators .ui-carousel-indicator button {
    border-radius: 4px;
}

.mission-carousel.ui-carousel .ui-carousel-indicators .ui-carousel-indicator.ui-state-highlight button {
    background: var(--angola-yellow);
    color: #fff;
}


/*
.dropdown>span a{
    color: #fff;
}
    
========================================= */
/* SOME STYLIES FROM THE GLLERY PAGE */
/* ========================================= */
.gallery-grid {
    padding: 1rem 0;
}

/* GRID: more "gallery-like" density */
.gallery .ui-datascroller-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem !important;
    align-items: stretch;
}

/* CARD */
.gallery-card {
    border-radius: 12px;
    overflow: hidden;
    height: 22rem;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
}

.dialog.gallery-dialog {
    height: 85vh !important;
    overflow-y: auto;
    scrollbar-width: thin;
    background: white;
    border-radius: 8px;
}

/* MEDIA ZONE */
.gallery-media {
    position: relative;
    overflow: hidden;
}

.gallery-description,
.gallery-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* image zoom effect */
.gallery-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.gallery-card:hover .gallery-img {
    transform: scale(1.05);
}

/* video */
.gallery-video {
    width: 100%;
    height: 220px;
    border: 0;
}

/* ICON overlay */
.media-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 1.2rem;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 6px;
    border-radius: 50%;
}

/* INFO */
.gallery-info {
    padding: .6rem .9rem;
}

.gallery-title {
    font-size: 1rem;
    margin: 0;
    font-weight: 700;
}

.gallery-description {
    font-size: 0.85rem;
    color: #666;
    margin: 0.25rem 0 0;
}

/* subtle date styling */
.gallery-date {
    font-size: 0.75rem;
    color: #999;
}

/* =========================
   HIGHLIGHT SYSTEM (IMPORTANT)
   ========================= */

/* normal card */
.gallery-card {
    border: 1px solid transparent;
}

/* highlighted item becomes "featured" */
.gallery-card.highlighted {
    border: 2px solid #f5b301;
    box-shadow: 0 6px 20px rgba(245, 179, 1, 0.25);
}

/* badge */
.badge-highlight {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

/* ========================================= */



/* ===================================== */
/* SOME STYLES FROM THE IMVESTMENTS PAGE */
/* ===================================== */
.investimanets .hero-section {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../resources/imgs/investments/hro.webp') no-repeat center center;
    background-size: cover;
    color: white;
    padding: 60px 20px;
    text-align: center;
    margin-bottom: 30px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

.investimanets .section-title {
    border-left: 5px solid #d4af37;
    /* Dourado institucional */
    padding-left: 15px;
    margin: 40px 0 20px 0;
    color: #2c3e50;
    font-weight: bold;
}

.investimanets .card-hover:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease;
}

/* ======================================= */






/* ===========BOOKING========== */


.booking-form-container {
    position: relative;
    background-image: url('../../resources/imgs/investments/hro.webp');
    background-size: cover;
    overflow: hidden;
    background-position: center;
}

.booking-form-container::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: var(--primary-over-lay);
}


.booking-content-container .header {
    text-align: center;
}

.booking-content-container .booking-button.ui-button {
    width: 100%;
    padding: .4rem;
}

.booking-content-container .booking-btn.active {
    background-color: #DA291C;
    cursor: pointer;
}

.booking-content-container .booking-btn.active:hover {
    opacity: 0.85;
}

.booking-content-container .booking-btn.inactive {
    background-color: rgb(95, 99, 107);
    cursor: not-allowed;
}


.booking-content-container .booking-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-top: 15px;
    border-radius: 8px;
    font-weight: 500;
}

.booking-content-container .booking-status i {
    font-size: 1.5rem;
}

.booking-content-container .booking-status.success {
    background-color: #e6f9f0;
    color: #0a7a4b;
    border: 1px solid #0a7a4b;
}

.booking-content-container .booking-status.error {
    background-color: #fdecea;
    color: #c0392b;
    border: 1px solid #c0392b;
}


.booking-page .booking-dialog .ui-dialog-content {
    border-radius: 8px;
    text-align: center;
    padding: 20px;


    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}



.booking-page .dialog-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.booking-page .dialog-icon {
    font-size: 3rem !important;
}

.booking-page .dialog-content.success {
    color: #0a7a4b;
}

.booking-page .dialog-content.error {
    color: #c0392b;
}

.booking-content-container .confirm-btn {
    margin-top: 15px;
    border-radius: 8px !important;
}






.booking-content-container .button-add-file.ui-button {
    border: 2px dashed #F7D117;
    background-color: #f7d2171e !important;
    transition: all 0.3s ease !important;
    display: grid !important;
    text-align: center !important;
    color: #000;
    padding: 1rem;
}

.discover-angola-section-background-image {
    background-image: url('../../resources/imgs/baobab-tree-in-savanna-at-sunset-free-photo.jpg');

}

.discover-angola-section .main-content {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 80vh;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.main-content-title .subtitle {
    color: var(--white-color);
    font-size: 1rem;
    /* text-align: center; */
}

.discover-angola-section .subcontent-container {
    padding: 2rem 0;
}

.main-content-title-container {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    width: 100%;
    align-items: center;
    padding-bottom: 2rem;
    color: #f8f8f8;
    padding-top: 2rem;
    padding-left: 2rem;
}

.main-content-title-container .content {
    width: fit-content;
}



.main-content-title-container .title {
    font-size: 2.5rem;
}

.main-content-title-container i {
    color: var(--angola-red);
    font-size: 2.5rem;
    align-content: center;
}

@media(width < 431px) {
    .main-content-title-container i {
        display: none;
    }

}

.main-content-title-container .content {
    border-left: 1.5px solid #A0A0A0;
    padding: 1rem;
}


/* OVERLAY */
.discover-angola-section .main-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: var(--primary-over-lay);
    /* intensidade do overlay */

    z-index: 1;
}

/* Conteúdo acima do overlay */
.discover-angola-section .main-content>* {
    position: relative;
    z-index: 1;
}

.discover-angola-section-options {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    height: 90%;
    flex-wrap: wrap;

    text-align: center;
    color: var(--white-color);
    font-size: var(--link-text-size);

}

.discover-angola-section-options .glass {
    width: 270px;
    min-width: 200px;
    text-align: start;
}

@media (width < 970px) {
    .discover-angola-section-options .glass:last-child {
        display: none !important;
    }

    .discover-angola-section .main-content {
        justify-content: start;
    }
}


/*========================
NEWS
========================== 
 */


.news-section .subtitle {
    font-size: var(--link-text-size);
    margin: .8rem 0;
}


.news-section .cards-container,
.news-page-container .cards-container {
    display: flex;
    align-items: stretch;
    /* width: 100%; */
    gap: 2rem;
    padding: 0;
    margin: 3rem auto 6rem;
}

.news-section .card .learn-more {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

.news-section .card,
.news-page-container .card {
    display: flex;
    flex-direction: column;
    flex: 1;
    cursor: pointer;
    background-color: var(--angola-white);
    border-radius: 4px;
    /* border: 1px solid #ddd; */
    transition: transform 0.3s ease;
    min-height: 40rem;
    /* height: fit-content; */
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
}

.news-section img,
.news-page-container img {
    width: 100%;
    height: 440px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

.news-section .content,
.news-page-container .content {
    margin-top: 1rem;
    padding: .8rem;
}

.news-section .card .title,
.news-page-container .card .title {
    width: 96%;
    margin: 1rem 0;
    color: var(--title-gray);
    font-weight: 600;
    font-size: var(--news-title-size);
}



.heigh-light-carousel:hover .image-description,
.news-section .card:hover .content,
.news-page-container .card:hover .content,
.news-section .card:hover .title,
.news-page-container .card:hover .title {
    text-decoration: none;
    color: var(--angola-yellow) !important;
}


/* ===============EVENTS=============== */




/* 
==============================
HIGH-LIST CAROUSEL 
==============================
*/

.heigh-light-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    height: 90vh;
    /* Adjust height as needed */
}

.heigh-light-slides {
    display: flex;
    height: 100%;
    transition: transform 0.4s ease;
}

.heigh-light-slide {
    min-width: 100%;
    position: relative;
    text-decoration: none;
    display: block;
}

.heigh-light-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 12px;
    /* Ensures images don't stretch weirdly */
}



.heigh-light-carousel .image-description {
    color: var(--white-color);
    font-size: var(--news-title-size);
    padding: 2rem 1rem;
    bottom: -20%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 9) 90%);
    position: absolute;
    height: 50%;
    width: 100%;
    border-radius: 8px;

    /* transition: all .3s ease-out; */
}

.heigh-light-carousel .title {
    font-size: 1.8rem;
    margin: .8rem 0;
}





/* 
=============================
NEWS CARDS
=============================
*/

.news-section .card .title span {
    margin-left: 1rem;
    font-size: 2rem;
}

.news-section .card .title span .pi {
    font-size: var(--link-text-size);
}

.title-icon {
    display: flex;
    align-items: center;
}

.booking-button.ui-button,
.password-recovery-button,
.ui-calendar .ui-button.ui-button-icon-only,
.red-button.ui-button,
.descover-button.ui-button {
    border-color: var(--angola-red);
    color: var(--white-color);
    text-transform: uppercase;
    background-color: var(--angola-red) !important;
}

.password-recovery-button:hover,
.booking-content-container .ui-calendar .ui-button.ui-button-icon-only:hover,
.red-button.ui-button:hover,
.descover-button.ui-button:hover {
    color: var(--white-color);
    background-color: var(--angola-red-hover) !important;
}

.transparent-button.ui-button,
.red-button.ui-button {
    width: 30%;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0 auto;
    display: flex;
    padding: .8rem;
    border: none;
    font-size: 1rem;
}

.dashboard-menu .ui-button,
.dashboard-menu .ui-menubutton .ui-button,
.language-selector.ui-menu.ui-menubar,
.language-selector .ui-menubutton .ui-button {
    background-color: transparent;
    border: none;
}


.open-menu-button.ui-button,
.open-menu-button.ui-button.ui-state-hover,
.open-menu-button.ui-button.ui-state-focus,
.open-menu-button.ui-button.ui-state-active,
.open-menu-button.ui-button .ui-button.ui-state-active,
.dashboard-menu .ui-menubutton .ui-button,
.dashboard-menu .ui-menubutton .ui-button.ui-state-focus,
.dashboard-menu .ui-menubutton .ui-button.ui-state-active,
.language-selector .ui-menubutton .ui-button,
.language-selector .ui-menubutton .ui-button.ui-state-focus,
.language-selector .ui-menubutton .ui-button.ui-state-active {
    outline: none;
    box-shadow: none;
    transform: none;
    background: none;
    border: none;
    /* Removes gradient shifts if present */
}

.dashboard-menu .ui-button.ui-button-icon-only .ui-icon,
.nav-bar .language-selector .ui-button.ui-button-icon-only .ui-icon {
    color: var(--angola-red);
}

.dashboard-menu .ui-button.ui-button-icon-only .ui-icon,
.language-selector .ui-button.ui-button-icon-only .ui-icon {
    font-size: var(--news-title-size);
}

.dashboard-menu .avatar {
    margin-left: .8rem;
    cursor: pointer;
}

.hero-content .ui-commandlink,
.hero-content .ui-link {
    width: 50%;
}

.hero-content .ui-commandlink {
    width: 50%;
    margin: 0 auto;
}

.descover-button.ui-button {

    margin-top: 1rem;
    width: 100%;
    padding: .5rem;
    border: none;
}

/* 
================================
DIALOGS
================================
*/
.create-news-dialog.ui-dialog {
    width: 80% !important;
    max-height: 80vh !important;
}


.create-news-dialog.ui-dialog .title {
    font-size: var(--news-title-size);
    /* margin-bottom: 2rem; */
}

.create-news-dialog .components-container {
    display: flex;
    /* gap: .4rem; */
}

.create-news-dialog .left-component {
    width: 40%;
    display: flex;
    flex-direction: column;
}

.create-news-dialog .right-component {
    width: 60%;

}



.create-news-dialog.ui-dialog .ui-dialog-titlebar {
    padding: .5rem 1.5rem 0;
}

.create-news-dialog.ui-dialog .ui-dialog-content {
    height: 100%;
    overflow: hidden;
}

.create-news-dialog .ui-tabs .ui-tabs-panels .ui-tabs-panel {
    padding: 0;
    overflow-y: auto;
}

.create-news-dialog .ui-scrollpanel {
    width: 100%;
    height: 410px;
    border: none;
}

/*========================
 SERVICES PAGE
========================== 
 */

.consular-services-page-container .content-container {
    display: flex;
}

.service-accordion-item,
.consular-grid-button-container {
    display: none;
}

.consular-services-page-container .body {
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.consular-services-page-container .side-bar {
    border-radius: 12px;
    position: sticky;
    left: 0;
    top: 10%;
    align-self: flex-start;
    /*crucial for fixing*/
    background-color: var(--angola-red);
    padding: 2rem;
    color: var(--white-color);
    width: 30%;
}

.check-boxes-container {
    width: 100%;
    margin-top: 2rem;
}


.check-boxes-container .ui-chkbox {
    font-size: var(--link-text-size);
    width: 100%;
}

.check-boxes-container .ui-chkbox .ui-chkbox-label {
    width: 100%;
}

.consular-services-page-container .body {
    padding: 0 2rem 2rem;
}

/* The Main Card */
.consular-services-page-container .card {
    /* cursor: pointer; */
    background: var(--white-color);
    border: 1px solid #e0e6ed;
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    /* max-width: 800px; */
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Top Right Bookmark */
.consular-services-page-container .bookmark-container {
    position: absolute;
    top: 20px;
    right: 20px;
    border: var(--thiner-border);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.consular-services-page-container .bookmark-container i {
    color: var(--angola-red);
    /* Dark red/maroon color from image */
    font-size: 0.9rem;
}

/* Title Styling */
.consular-services-page-container .service-title {
    color: var(--title-gray);
    /* Deep blue from image */
    font-size: 1.25rem;
    margin: 0 40px 16px 0;
    /* Space for the bookmark */
    line-height: 1.4;
    font-weight: 500;
}

/* Info Rows (Provider/Mode) */
.consular-services-page-container .info-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.consular-services-page-container .info-row i {
    margin-right: 10px;
    color: var(--text-gray);

    font-size: 1.1rem;
}

.consular-services-page-container .label {
    color: var(--text-gray);

    margin-right: 5px;
}

.consular-services-page-container .value {
    color: var(--text-gray);

    font-weight: 400;
}

/* Description Text */
.consular-services-page-container .description {
    margin: .8rem 0;
    color: var(--text-gray);
    line-height: 1.6;
    font-size: 0.95rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    font-style: oblique;

    /* Limits to two lines with ellipsis if needed */
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.consular-services-page-container .booking-btn {
    border: none;
    color: var(--white-color);
    font-weight: 600;
    border-radius: 8px;
    padding: .2rem;
    transition: all 0.3s ease;
    border: none !important;
}

.consular-services-page-container .booking-btn.active {
    background-color: var(--angola-red);
    cursor: pointer;
}

.consular-services-page-container .booking-btn.active:hover {
    color: var(--white-color);
    background-color: var(--angola-red-hover) !important;
}

.consular-services-page-container .booking-btn.inactive {
    background-color: #dcdcdc;
    cursor: not-allowed;
}

.consular-services-page-container .info-row-schedule-and-price {

    justify-content: space-between;
    font-weight: 700;
    color: var(--angola-black);
}

.consular-services-page-container .info-row-schedule-and-price-label,
.consular-services-page-container .info-row-schedule-and-price-value {

    color: var(--angola-black) !important;
}

.consular-services-page-container .card:hover {
    background-color: var(--sec-background);
}

.consular-services-page-container .btn-download.ui-button.ui-button-icon-only .ui-icon {
    color: var(--angola-red);
}


/*========================
INDEX SERVICES
========================== 
 */
.consular-services-section {
    /* border: 2px solid red; */
}

.consular-services-section .cards-container,
.quick-links-embassadors-section .cards-container {
    padding: 0;
    margin-top: 2rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.consular-services-section .card,
.quick-links-embassadors-section .card {
    width: 100%;
    height: 100%;
}

.link-title {
    font-size: var(--link-text-size);
    font-weight: 400;
    color: var(--angola-black);
}


.consular-services-section .card,
.quick-links-embassadors-section .card {
    cursor: pointer;
    border-radius: 8px;
    justify-content: space-between;
    align-items: center;
    flex: 30%;
    height: 7rem;

    font-size: var(--link-text-size);
    padding: 2rem 4rem;
    display: flex;
    border: 1px solid var(--thiner-border-sec);
}

.link-for-page-list {
    text-decoration: underline;
}


.embassador-card:hover .embassador-content {
    color: var(--angola-black);
    text-decoration: underline;
    text-decoration-color: var(--angola-black);
}

.consular-services-section .card:hover {
    color: var(--white-color);
    background-color: #DA291C;
}

.consular-services-section .subtitle {
    line-height: 2rem;
}

.consular-services-section .card:hover .icon-container {
    border-color: var(--white-color);
}

.quick-links-embassadors-section .link-for-page-list:hover .icon-container,
.consular-services-section .link-for-page-list:hover .icon-container {
    transform: translateX(20px);
    border-color: var(--white-color);
}

.consular-services-section .icon-container,
.quick-links-embassadors-section .icon-container {
    transition: transform 0.3s ease-out;
    width: 50px;
    padding: .8rem;

}

/* 
============================
INFORMATIVE NOTES SECTION

============================
*/

.informative-notes-section {
    border: 2px solid blue;
}

/* 
============================
LEADERS SECTION

============================
*/

.leaders-section {
    background-color: var(--title-gray);
    color: var(--white-color);
}


/* 
==========================
RANDOM SUBJECTS
===========================*/

.random-subjects-section {
    height: 180vh;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "a a b b b b"
        "c c c c d d";
    gap: 2rem;
}

/* Base style for grid items */
.image {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.random-subjects-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image.a {
    grid-area: a;
}

.image.b {
    grid-area: b;
}

.image.c {
    grid-area: c;
}

.image.d {
    grid-area: d;
}


.random-subjects-section .image-description {
    color: var(--white-color);
    font-size: 1rem;
    padding: 2rem 1rem;
    bottom: -25%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 5%,
            rgba(0, 0, 0, 9) 50%);
    position: absolute;
    height: 50%;
    width: 100%;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;

}

.image-description p strong {
    display: block;
    font-size: 1.1rem;
    color: var(--angola-yellow);
    /* Uses the yellow from the logo for the name */
    margin-bottom: 2px;
}

.image-description .title {
    font-size: var(--news-title-size);
}

.image-description.sustainableGrowth p strong,
.image-description.sustainableGrowth .subtitle {
    max-width: 300px;
}

.image-description.sustainableGrowth .descover-button {
    display: inline-block;
    width: 230px;
    padding: 5px auto;
}

@media(width < 575px) {
    .image-description.sustainableGrowth p strong {
        margin-top: -3rem;
    }
}

@media(width < 445px) {
    .image-description.sustainableGrowth p strong {
        margin-top: -5.8rem;
    }
}

/* 
============================
FOOTER
==========================
*/
.footer-section {
    padding-bottom: 1rem;
    background-color: var(--title-gray);
    color: var(--white-color);
}

.footer-section .links-container {
    display: flex;
    justify-content: space-around;

}

.footer-section .links-container .title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: .8rem 0;
}

.footer-section .links-container a {
    color: var(--white-color);
    text-decoration: none;
    /* font-size: var(--link-text-size); */
}

.footer-section .links {
    display: flex;
    flex-direction: column;
    gap: .8rem;

}

.footer-section small {
    display: block;
    text-align: center;
}


.social-icons-wrapper {
    justify-content: center;
    display: flex;
    gap: 15px;
    padding-top: .8rem;
}

.social-icons-wrapper .pi {
    font-size: 1.5rem;
    color: var(--angola-red);
}

/* 
==============================
CONTACT
=============================
*/
.custom-icon-container {
    z-index: 2;
    cursor: pointer;
    bottom: 90px;
    right: 22px;
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 50%;

    /* background: var(--angola-yellow); */
    background: var(--title-gray);

    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #d1d9e6;
    /* Subtle outer ring simulation */

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

.custom-icon {
    color: white;
    font-size: 2.5rem !important;
    /* Adjust size as needed */
}


.contactFormOverLay,
.mobile-nav-bar-overlay {
    right: -100%;
    /* background-color: #ffffffc4; */
    background-color: var(--over-lay);
    top: 0;
    z-index: 901;
    position: fixed;
    /* border: 2px solid red; */
    width: 100%;
    height: 100vh;
    transition: right 0.5s ease;
    /* animação suave */
}

.contactForm {
    background-color: var(--white-color);
    right: 0;
    /* width: fit-content; */
    /* max-width: 50%;  padding: 2rem;*/
    width: 50%;
    height: 100%;
    position: absolute;

    overflow-y: auto;
}

.signup .contactForm {
    width: 30%;
}

.login .contactForm {
    width: 50%;
}


.logo-contact {
    margin-top: 2rem;
}

#closeContactForm {
    cursor: pointer;
    font-size: var(--news-title-size);
}

.contactImg {
    margin: 2rem 0rem !important;
}


.contactInfo h6 {
    font-size: 1.3rem;
}

.contactInfo p {
    line-height: 2rem;
}

.contacts {
    /* border: 2px solid yellow; */
    display: flex;
    justify-content: space-between;
    padding: 2rem 0rem;
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: box-shadow .3s ease;
}

.contacts:hover {
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.6);

}

.contacts .item {
    display: flex;
    gap: 1rem;

}



.chat-fab.ui-dialog {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* Gradient from dark burgundy to teal */
    /* background: linear-gradient(135deg, #7b1d3d 0%, #3a8da8 100%); */
    border: 2px solid white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1000;
}

/* .chat-fab i {
    color: white;
    font-size: 2rem;
} */


/* 
================================
CAROUSEL
===============================
*/

/* Container styling */
.member-card {
    padding: 0 0 0 0;
    padding-right: 1rem;
    padding-top: 1rem;
    text-align: center;
}

.member-card-content {
    cursor: pointer;
    background: var(--angola-white);
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 2rem 1rem;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.member-card-content:hover {
    /* border-color: var(--angola-red); */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Image styling - circular for profiles */
.member-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1.5rem;
    border: 3px solid #f8f8f8;
}

/* Typography */
.member-name {
    color: var(--angola-black);
    font-weight: 700;
    margin: 0.5rem 0;
    font-size: 1.25rem;
}

.member-role {
    color: var(--angola-yellow);
    /* Using the official red for titles */
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.member-bio {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    padding: 0 10px;
}

/* PrimeFaces Carousel Navigation Overrides */
.ui-carousel-dot-item .ui-state-active {
    background-color: var(--angola-red) !important;
}

.ui-carousel-prev,
.ui-carousel-next {
    color: var(--angola-black) !important;
}


/* 
================================
NEWS SECTION
=================================
*/

.public-page-support-nav-bar {
    padding-top: 152px !important;
    /* border: 2px solid blue; */
}

.title-container {
    border-bottom: 1px solid var(--angola-red);
}


.title-container .title {
    width: fit-content;
    border-bottom: 6px solid var(--angola-red);
}


.news-page-container .filters {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin: 2rem auto 4rem;
    gap: 1rem;
    list-style: none;
    padding: 0;
}

.news-page-container .filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border: 1.5px solid #e0e0e0;
    border-radius: 2rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-gray);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.news-page-container .filter a {
    color: var(--text-gray);
}

.news-page-container .filter:hover,
.news-page-container .filter:hover a {
    /* background-color: #f8f9fa; */
    border-color: var(--angola-red);
    color: var(--angola-red);
}

.news-page-container .filter.active {
    background-color: var(--angola-red);
}

.news-page-container .filter.active a,
.news-page-container .filter.active i {
    color: white;
}

.news-page-container .filter i {
    font-size: 0.85rem;
}

.news-page-container .ui-datascroller .ui-datascroller-content .ui-datascroller-list {
    border: none;
}

.news-page-container .ui-datascroller .ui-datascroller-content {
    padding: 0;
    border: none;
}

.news-page-container .ui-datascroller .ui-datascroller-content .ui-datascroller-list,
.quick-links-embassadors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 0;

}

.quick-links-embassadors {
    margin: 3rem auto 6rem;
}


/* 
==============================
SHOW NEWS
==============================
*/

#showNewsForm {
    background: linear-gradient(to bottom,
            #ffffff 0%,
            #f1f4f6 100%);

}

.show-news-page-content {
    /* border: 2px solid red; */
    display: flex;
    gap: 2rem;
    color: var(--text-gray);
}

body .ui-breadcrumb {
    border: none;
    padding: 2rem 0;
}

.show-news-page .content-body {
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.show-news-page .content-body .image-container,
.show-news-page .content-body .card {
    width: 100%;
    background-color: var(--white-color);
    border-radius: 8px;
    /* box-shadow: 0 1px 10px rgba(0, 0, 0, 0.08); */
}

.show-news-page .header-container {
    width: 80%;
    /* border: 2px solid red; */
}

.show-news-page .header-container .headline {
    text-align: center;
    /* border: 2px solid yellow; */
    padding: 1rem 2rem;
}

.show-news-page .header-container .top {
    font-size: var(--link-text-size);
    /* border: 2px solid blue; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.show-news-page .category {
    background-color: var(--angola-yellow);
    padding: .4rem 2rem;
    border-radius: 8px;
}

.show-news-page .header-container .title {
    font-size: 1.8rem;
    margin: 2rem 0;
}

.show-news-page .header-container .subtitle {
    margin: 1rem 0;
}

.show-news-page .image-container {
    height: 600px;
    width: 100%;
    overflow: hidden;
}

.show-news-page .image-container img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.show-news-page .description p {
    text-indent: 60px;
    padding: 2rem;
    font-size: var(--news-title-size);
    line-height: 2.2rem;
}

.show-news-page .support-section {
    width: 30%;
    position: sticky;
    top: 0;
    left: 0;
    /* border: 3px solid blue; */
}

.show-news-page .support-section .support-section {
    width: 80%;
    display: flex;
    gap: .8rem;
}

.show-news-page .support-section ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.show-news-page .support-section .card {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.show-news-page .support-section .card:hover {
    opacity: 0.8;
}

.show-news-page .support-section .card .image {
    flex-shrink: 0;
    height: 90px;
    width: 90px;
    overflow: hidden;
    border-radius: 12px;
}

.show-news-page .support-section .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.show-news-page .support-section .content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.2rem 0;
}

.show-news-page .support-section .content .date {
    color: #99aab5;
    font-size: 0.9rem;
    margin: 0;
}

.show-news-page .support-section h1 {
    font-size: 1rem;
    font-weight: 400;
    color: var(--title-gray);
}

.show-news-page .support-section .content .title {
    font-weight: 500;
    line-height: 1.3;
    color: var(--title-gray);
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 16px;
    padding: 0 0 0;
    margin-bottom: 0;
    margin-top: 5px;
    text-transform: capitalize;
}



/* 
========================================
AUTH
========================================
*/

.auth-container {
    padding-bottom: 1rem;
    width: 100%;
    /* border: 2px solid red; */
}

.auth-container header {
    display: flex;
    justify-content: space-between;
    height: 30%;
    background-color: var(--angola-red);
    padding: 1rem 2rem;

}

.auth-container .logo-container {
    width: 20%;
}

.auth-container .insignia {
    height: 80px;
}

.auth-container .logo-container {
    width: 20%;
}

.auth-container h1,
.auth-container h2 {
    font-size: var(--news-title-size);
    color: var(--text-gray);
}

.auth-container h2 {
    margin: .8rem 0;
}

.auth-container #loginForm,
.auth-container #signupForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin: 3rem auto;
    /* width: 40%; */
    padding: .8rem;

    /* border: 2px solid blue; */
}

.auth-container #signupForm {
    width: 40%;

    /* border: 2px solid blue; */
}

.login .form-group {
    width: 30%;

}

.signup .form-group {
    width: 100%;

}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;

}

.single-form-group {
    width: 30%;
}

.dual-form-group {
    width: 100%;
}

.dual-inputs-container {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    margin: 0 auto;
    justify-content: center;

    /* border: 3px solid red; */
}

body .ui-selectcheckboxmenu,
.auth-container .ui-input-icon-left,
body .ui-selectonemenu,
body .ui-input-icon-right {
    width: 100%;
}

label {
    font-size: 0.875rem;
    /* margin-bottom: 0.3rem; */
}


body .ui-inputfield {
    width: 100%;
}

.p-datepicker {
    display: flex !important;
}

.booking-content-container .ui-calendar.ui-trigger-calendar input.hasDatepicker {
    width: 95%;
}

.booking-content-container .ui-calendar .ui-button.ui-button-icon-only {
    width: 5%;
}

.login-button-container,
.signup-button-container {
    height: 3rem;
}

.login-button-container {
    height: 3rem;
}

#loginForm .login-button-container {
    height: 3rem;
    width: 30%;
}

#signupForm .login-button-container {
    margin: .8rem 0;
    width: 100%;
}

.signup-button-container {
    height: 3rem;
    width: 100%;
}


.auth-container .links {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: 1rem;
}

.link,
.password-recovery-link {
    cursor: pointer;
    color: var(--text-gray);
}

.link {
    color: var(--text-gray);
}

.password-recovery-link {
    width: fit-content;
    color: var(--golden-color);

}

.password-recovery-link:hover {
    color: var(--golden-color-hover);
}


/* CUSTOMIZED UPLOAD FILE */
.ui-fileupload-simple {
    display: block !important;
}

.ui-fileupload-simple .ui-button {
    width: 100% !important;
    background: transparent !important;
    color: #333;
    border: 1px dashed #ced4da;
}

.ui-fileupload-simple .ui-button:hover {
    background: transparent !important;
    color: #333;
    border: 1px dashed #2196f3;
}


/* Primary button */
.btn-primary.ui-button {
    width: 100%;
    height: 100%;
    background-color: var(--angola-red);
    border: none;
    padding: .3rem;
    font-weight: 600;
    border-radius: 0.375rem;
    cursor: pointer;
    /* margin-top: 1rem; */
}

.btn-primary.ui-button:hover {

    background-color: var(--angola-red-hover);
}


.auth-footer {
    margin-top: 40px;
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.security-notice {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 8px;
}

.copyright {
    font-size: 12px;
    color: #9ca3af;
}


/* ===============PASSWORD RECOVERY================ */

.password-recovery .ui-input-icon-left {

    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    width: 100% !important;
}


.password-recovery .ui-inputfield {
    padding: .8rem .8rem .8rem 2rem !important;
    width: 100% !important;
    margin: .4rem 0rem;
}

.password-recovery.ui-dialog {
    width: 36% !important;

}


.password-recovery .greenButton.ui-button {
    width: 100%;
}



.password-recovery.ui-dialog .ui-dialog-titlebar {
    display: none;
    background-color: var(--wh-gb);
    border: none;
}

.password-recovery.ui-dialog .ui-dialog-content {
    justify-content: center;
    align-items: center;
    padding: 2rem;
    display: flex;
    background: #fff;
    color: #333;
    border: 1px solid #c8c8c8;
    padding: 1rem;
    border: none;
    flex-direction: column;
}

.pw_header {
    font-size: var(--news-title-size);
    font-weight: 700;
}

.password-recovery.ui-dialog .ui-dialog-content i.pi.pi-key {
    font-size: 2.8rem;
    margin-bottom: 1.2rem;
    font-weight: 700;
    color: var(--angola-yellow);
    /* color: #5995fd; */
}

.pw_txt {
    margin: 1.2rem;
    text-align: center;
}

.password-recovery-button.ui-button {
    width: 100%;
    border: none;
}

.pw_back_container {
    padding: 1rem 0;
    gap: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/*=============================
DASHBOARD
============================
*/

.dashbord-layout {
    display: grid;
    grid-template-columns: 18% auto;
    height: 100vh;
    overflow: hidden;
    /* border: 3px solid blue; */
}

.dashbord-layout .logo {
    height: 40px;
}

.layout-content-container {
    height: 100%;
    overflow: hidden;
    /* width: 80%; */
    /* border: 2px solid yellow; */
}

.layout-side-bar-container {
    /* border-right: 1px solid var(--thiner-border-sec); */
    box-shadow: var(--shadow-1);
    /* border: 2px solid red; */
}

.sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100% !important;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
}

/*========================
SIDER BAR
=========================*/
.side-bar.ui-menu {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0rem;
}


.layout-menu-container {
    height: 10%;
}

.layout-menu-container nav {
    height: 10%;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem;
    border-bottom: 1px solid var(--thiner-border-sec);
    justify-content: right;

    position: sticky;
    left: 0;
    top: 0;
}

.side-bar.ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-text,
.side-bar.ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-icon,
.sidebar-overlay .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-text,
.sidebar-overlay .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-icon {
    font-weight: 500;
    color: var(--angola-black);
}

.side-bar.ui-menu .ui-menuitem-link {
    font-size: 0.9rem;
    display: flex;
    padding: .8rem !important;
    align-items: center;
    gap: 1rem;
}

.side-bar.ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.ui-state-hover {
    background-color: var(--angola-red);
}

.side-bar.ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.ui-state-hover .ui-menuitem-text,
.side-bar.ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link.ui-state-hover .ui-menuitem-icon {
    color: var(--white-color);
}

.side-bar .logout-button {
    position: absolute;
    bottom: 0;
    left: 0;
}

.layout-children-container {
    padding: 1rem 1rem 0;
    /* border: 2px solid red; */
    height: 90%;
    overflow: hidden;

}


/* 
===============================
DASHBOARD CONTENT
===============================
*/

.table-header {
    /* border: 2px solid blue; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 1rem; */
    height: 10%
}

.header .title,
.table-title {
    color: var(--title-gray);
    font-size: var(--news-title-size);
    font-weight: 400;
}

.ui-datatable {
    width: 100%;
    height: 90%;
}

.ui-datatable-tablewrapper {
    height: 85%;
    overflow: auto;
}

/* .table {
    height: 75%;
    width: 100%;
} */

.dashboard-form {
    height: 100%;
}

/*
===============================
DIALOGS
===============================
*/


.create-button.ui-button,
.save-button.ui-button {
    background-color: var(--angola-red);
    color: var(--white-color);
    border: none;
    box-shadow: none;
}

.save-button.ui-button {
    margin-top: .8rem;
    width: 100%;
}

.create-button.ui-button.ui-state-hover,
.save-button.ui-button.ui-state-hover {
    background-color: var(--angola-red-hover);
}

.label-for-input {
    margin-top: .8rem;
    display: block;
}

.label-toggle-switch {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: .8rem;
}

/* ========================GOVERNMENT SECTION FOR DASHBOARD================= */
.dashbord-layout .gov-card {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e5e7eb;
    background: #fff;
}

.dashbord-layout .grid-ambassadors-dahsboard .ui-md-4 {
    flex: 25%;
    max-width: 25%;
}

/* .gov-card:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
            } */

/* IMAGEM */
.dashbord-layout .gov-img-container {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f3f4f6;
}

.dashbord-layout .gov-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* CONTEÚDO */
.dashbord-layout .gov-content {
    padding: 1.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 120px;
}

/* TÍTULO */
.dashbord-layout .gov-content h3 {
    font-size: 1.1rem;
    line-height: 1.3;
    margin: 0.3rem 0;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* DESCRIÇÃO */
.dashbord-layout .gov-content p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* BADGE */
.dashbord-layout .gov-type-badge {
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 4px 10px;
    background: #eef2ff;
    color: var(--angola-red);
    border-radius: 4px;
    font-weight: bold;
    margin-bottom: 0.5rem;
    display: inline-block;
}

/* AÇÕES */
.dashbord-layout .gov-actions {
    padding: 0 1rem;
    /* background: #fafafa; */
    /* border-top: 1px solid #f0f0f0; */
    display: flex;
    justify-content: space-between;
}

/* GRID MODERNO */
.dashbord-layout .grid-ambassadors-dahsboard {
    height: 90%;
    width: 100%;
}

.dashbord-layout .ui-dataview .ui-dataview-content {
    height: 100%;
    overflow-y: auto;
}

.dashbord-layout .grid-ambassadors-dahsboard .ui-dataview-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    border: 2px solid red;
}

/* ===================================== */
/* dialog SEE OF THE ENTITIES ON DASHBOARD *
/* =========================================0/ */

/* Goverments */
/* Container geral do dialog */
.goverment-detail .ui-dialog-content {
    padding: 2rem 2.5rem;
    background: #ffffff;
    height: 85vh !important;
    overflow-y: auto;
    border-radius: 10px;
}

/* Botão fechar */
.goverment-detail .ui-dialog-titlebar-icon {
    color: #6b7280;
    transition: 0.2s;
}

.goverment-detail .ui-dialog-titlebar-icon:hover {
    color: #111827;
}

/* Centralização e imagem */
.goverment-detail .text-center {
    text-align: center;
}

.goverment-detail .ui-dialog-titlebar {
    padding: 1rem 1rem .5rem 1rem !important;
}

.goverment-detail img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 10px;
    border: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    margin-bottom: 1rem;
}

/* Grid geral */
.goverment-detail .grid {
    margin-top: 1.5rem;
    gap: 1.2rem;
}

/* Labels */
.goverment-detail label {
    font-size: 0.75rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: block;
}

/* Valores principais */
.goverment-detail span {
    font-size: 1rem;
    color: #111827;
    font-weight: 500;
}

/* Título principal */
.goverment-detail .col-12:first-child span {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1f2937;
}

/* Subtítulo */
.goverment-detail .col-12:nth-child(2) span {
    color: #4b5563;
    font-style: italic;
    font-size: 1.05rem;
}

.goverment-detail .same-line {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 1.5rem;
}

/* Descrição */
.goverment-detail p {
    font-size: 0.95rem;
    color: #374151;
    margin-top: 0.5rem;
}

.goverment-detail .ui-dialog-titlebar {
    padding: 1.2rem 1.5rem !important;
    background: linear-gradient(to right, #f9fafb, #f3f4f6);
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    font-size: 1.1rem;
    color: #111827;
}

/* Espaçamento entre blocos */
.goverment-detail .col-12 {
    padding: .6rem 1.2rem;
    border-radius: 8px;
    margin-bottom: .3rem;
    background: #ccc7;
    border: 1px solid #f1f1f1;
    transition: all 0.2s ease;
}

/* Remove linha do último */
.goverment-detail .col-12:last-child {
    border-bottom: none;
}

.goverment-detail .col-12:hover {
    background: #f3f4f6;
}

/* Header do dialog */
.goverment-detail .ui-dialog-titlebar {
    background: #f9fafb;
    border: none;
    font-weight: 600;
    color: #111827;
}

/* Botão fechar */
.goverment-detail .ui-dialog-titlebar-icon {
    color: #6b7280;
}

.grupo-details-on-news {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

}



.d-flex {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
}

/* Summary */
.goverment-detail .col-12:nth-child(6) span {
    font-size: 1rem;
    color: #374151;
}

/* Descrição */
.goverment-detail .description {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: #374151;
    line-height: 1.7;
    text-align: justify;
}

.group-details {
    display: flex;
    flex-direction: row wrap;
    gap: 1rem;
    padding: 1rem 0;
    align-items: center;
    justify-content: space-between;
}

.group-details div {
    display: flex;
    flex-flow: column;
    /* align-items: center; */
}

/* Scroll suave */
.goverment-detail .ui-dialog-content::-webkit-scrollbar {
    width: 6px;
}

.goverment-detail .ui-dialog-content::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}


/* ============================================= */

/* RESPONSIVIDADE */
@media (max-width: 1024px) {
    .dashbord-layout .grid-ambassadors-dahsboard .ui-dataview-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .dashbord-layout .grid-ambassadors-dahsboard .ui-dataview-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .embassy-stats {
        display: flex;
        gap: 15px;

    }

    .discover-angola-section-options p {
        padding-left: 0;
        padding-right: 0;
    }


    .login .form-group,
    #loginForm .login-button-container {
        width: 90%;
    }



    .filter-content {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 1rem;
    }

    .radioBtns .ui-widget,
    .layout-line-direction {

        display: flex;
        gap: 1rem;
        font-size: 12pt;
        flex-direction: column;
    }

     .layout-line-direction .ui-g-12 {
        display: flex;
         font-size: 12pt;
    }


    .heigh-light-carousel .image-description {

        bottom: 0%;
        height: 100%;
    }

    .tooltip{
            display: none;
    }

    .the-president-section img{
        width: 100%;
    }

    .news-page-container .filter a{
        color: var(--text-gray);
    display: block;
    width: 100%;
    }

    .dashbord-layout .grid-ambassadors-dahsboard .ui-dataview-row  .ui-g{
      display: flex;
      flex-direction: column;
    }

    .dashbord-layout .grid-ambassadors-dahsboard .ui-md-4 {
    flex: 25%;
    width: 100%;
}

        
}

@media (max-width: 480px) {
    .dashbord-layout .grid-ambassadors-dahsboard .ui-dataview-grid {
        grid-template-columns: 1fr;
    }
}

/* =======================PRESIDENT PAGE================= */
/* Styles of the presedent-biography page *
  /* container of the content of the page */
.president-biography .president-biography-page-container {
    /* padding: 20px; */
    /* width: 90%; */
    margin: 0 auto;
    margin-bottom: 50px;
}

/* title of the page, i sugggest that it beomes a component */
.president-biography .title {
    margin-top: 40px;
    padding-bottom: 7px;
    font-weight: bold;
}

/* the text about the president */
.president-biography .bio-text,
.angola-page .text {
    line-height: 1.8;
    text-align: justify;
    color: var(--angola-black);
    font-size: 1.2rem;
    padding: 2rem 0 0;
}

.card .description {
    line-height: 1.8;
    text-align: justify;
    padding: 1rem;
    font-size: 1.2rem;
}


.president-biography .profile-header {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin-top: 30px;
    margin-bottom: 30px;
}

.category-chip {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    /* Colors - Using a neutral gray/blue as base */
    background-color: var(--angola-yellow);
    color: var(--white-color);

    /* background-color: #f0f2f5; */
    /* color: #495057; */
    /* border: 1px solid #e9ecef; */

    /* Spacing */
    /* margin-bottom: 8px; */
    transition: all 0.3s ease;
}



.president-biography .profile-image {
    flex: 0 0 260px;
    overflow: hidden;
}

.profile-image-province img {
    height: 100%;
    width: 100%;
}

.president-biography .profile-image:hover img {
    transform: scale(1.1);
}

.president-biography .president-img {
    width: 100%;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.15);
    transition: .3s ease-in-out;
}

.president-biography .profile-info {
    flex: 1;
}

.president-biography .president-name {
    margin: 5px 0 10px 0;
    font-size: 1.8rem;
    color: var(--angola-black);
}

.president-biography .president-meta p {
    margin: 4px 0;
    color: #444;
}

.president-biography .bio-text h3 {
    margin-top: 25px;
    color: var(--angola-black);
    border-left: 4px solid var(--angola-red);
    padding-left: 10px;
}

.president-biography .tag {
    margin-bottom: 3px;
    background: var(--angola-red) !important;
}

@media(width < 700px) {
    .president-biography .profile-header {
        flex-flow: column;
    }

    .president-biography .profile-image {
        width: 100%;
        overflow: hidden;
        min-height: 20vh;
    }
}


/* ===========GENERAL INFORMATIONS PAGE========== */
.general-informations-page .ui-card .ui-card-title,
.general-informations-page .ui-card .ui-card-subtitle {
    color: var(--angola-black);
}

.general-informations-page .ui-card .ui-card-title {
    font-size: var(--news-title-size);
    font-weight: 600;
}

.embassador-section {
    padding: 20px;
    display: flex;
    justify-content: center;
}

.embassador-link-container {
    display: flex;

}



.embassador-card {
    text-decoration: none;
    color: var(--angola-black);
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    width: 100%;
    max-width: 600px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.embassador-card:hover {
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
    /* transform: translateY(-2px); */
    text-decoration: underline;
    background: transparent !important;
}

.embassador-content {
    /* border: 3px solid red; */
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.embassador-info .title {
    margin: 0 0 8px 0;
    font-size: 1.5rem;
    color: var(--angola-black);
}

.embassador-info .description {
    margin: 0;
    font-size: 0.95rem;
    color: var(--angola-black-hover);
    line-height: 1.5;
}

.embassador-card:hover .icon-container {
    transform: translateX(1rem);
}

.embassador-action {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--angola-red-hover);
    font-weight: bold;
    border-left: 1px solid #eee;
    padding-left: 20px;
    margin-left: 20px;
    white-space: nowrap;
}



/* the end of the president-biography ends at this line/ */

/*
===============================
STYLE that is used to all pages of the travel in angola menu
===============================
*/

/* Filter bar used on destination and hotel page */
.filter-bar {
    background: var(--title-gray);
    padding: 20px;
    margin: 4rem 0;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

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

.filter-label {
    font-weight: bold;
    color: var(--angola-white);
    font-family: 'Arial', sans-serif;
}

/* Estilo para ajustar o PrimeFaces select */
.ui-selectonemenu {
    vertical-align: middle;
    /* border-radius: 20px !important; */
}

/* ---------------------------------------------- */


.destinations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    padding: 20px 0;
}

/* CARD */
.destination-card {
    background: var(--title-gray);
    border-radius: 12px;
    overflow: hidden;
    /* importante pro zoom não vazar */
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex;
    flex-direction: column;
    max-width: 25rem;
}

.hotel-grid .ui-button.ui-button-text-icon-left,
.destinations-page-container .ui-button.ui-button-text-icon-left {
    border: none !important;
}

/* IMAGEM EM CIMA */
.destination-image {
    overflow: hidden;
    /* corta o zoom */
}

/* IMAGEM */
.destination-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

/*  Hover: zoom só na imagem */
.destination-card:hover .destination-img {
    transform: scale(1.08);
}

/* CONTEÚDO EM BAIXO */
.destination-content {
    padding: 18px;
    text-align: center;
    color: var(--angola-white);
}

.destination-content h3 {
    font-size: 1.15rem;
    color: var(--angola-white);
    margin: 0 0 6px;
    font-weight: 600;
}

.destination-location {
    color: var(--angola-white);
    font-size: 0.9rem;
    margin-bottom: 14px;
}

/* LINK */
.destination-link {
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--angola-red) !important;
    transition: opacity .2s ease;
}

.destination-link:hover {
    opacity: .75;
}

/* DIALOG */
.destinations-page-container .dialog {
    height: auto !important;
    border-radius: 12px;
    width: 80% !important;
    max-width: 900px !important;
    /* min-height: 300px !important; */
    /* max-height: 700px !important; */
    overflow-y: auto;
    scrollbar-width: none;
    background: var(--angola-white);

}

.destinations-page-container .ui-dialog .ui-dialog-titlebar {
    position: sticky;
    color: var(--angola-black);
    top: 0;
    z-index: 12;
    left: 0;
}

.home-section.random-subjects-section.in-destiantion .container {
    margin: auto;
    width: 85%;
    max-width: 100vw;
}

.hotel-container {
    position: relative;
}

/* GRID */
.hotel-grid {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 20px;
    scroll-behavior: smooth;

    /* esconder scrollbar */
    scrollbar-width: none;
    /* Firefox */
}

.hotel-grid::-webkit-scrollbar {
    display: none;
    /* Chrome */
}

/* CARD */
.hotel-card {
    min-width: 260px;
    background: #f8f8f8;
    border-radius: 16px;
    overflow: hidden;
    color: #333;
    transition: 0.3s;
}

.hotel-card:hover {
    transform: translateY(-5px);
}

.hotel-image img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.hotel-content {
    padding: 15px;
}

.hotel-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}

.hotel-city {
    font-size: 14px;
    color: #777;
    margin-bottom: 8px;
}

.hotel-stars {
    margin-bottom: 10px;
}

.star-filled {
    color: #ffb400;
}

.star-empty {
    color: #ccc;
}

.hotel-description {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
}

.hotel-link {
    color: #ff7a00;
    border-bottom: 2px solid #ff7a00;
    text-decoration: none;
    font-size: 14px;
}

/* BOTÃO (SETA) */
.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;

    width: 40px;
    height: 40px;

    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 10;
}

.scroll-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.hotel-grid .ui-button.ui-button-text-icon-left .ui-button-text,
.destinations-page-container .ui-button.ui-button-text-icon-left .ui-button-text {
    background: red;
    border: none !important;
}

/* hero section */
.destinations-page-container .random-subjects-section {
    padding: 0;
    padding-top: 3rem;
    margin: 0;
    height: 100vh;
    display: flex;

    .buttons-container {
        display: none;
    }

    &>* {
        width: 100%;
    }
}

.home-section.random-subjects-section.in-destiantion {
    height: 100vh;
}

.destinations-page-container .home-section .discover-angola-section-title-text {
    color: #fff;
}

.destinations-page-container .home-section .discover-angola-section-options {
    color: #fff;

    .glass {
        display: flex;
        flex-flow: column;
        min-height: 120px !important;
        gap: 1rem;
    }

    h5 {
        text-align: center;
        font-size: 1.1rem;
    }
}

.destinations-page-container .home-section .ui-button.red-button {
    display: none;
}

.hotel-container .ui-dialog .ui-dialog-titlebar {
    background: var(--angola-white) !important;
    color: var(--title-gray) !important;
}

@media (width < 769px) {
    .home-section.random-subjects-section.in-destiantion .container {
        width: 90%;

    }
}

@media (width < 570px) {
    .home-section.random-subjects-section.in-destiantion .container {
        width: 95%;
    }
}

/* style of the dialog container */
/* Container */
.content-dialog {
    display: flex;
    flex-direction: column;
}

.dialog-body {
    overflow-y: auto;
    min-height: 80px;
    padding: 4px 2px 2px;
    flex: 1;
    /* ocupa o espaço restante */
}

/* Hero imagem */
.dialog-hero {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}


.dialog-hero-img {
    width: 100%;
    min-height: 250px;
    max-height: 350px;
    object-fit: cover;
    display: block;
}

/* Badge categoria */
.dialog-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--angola-red);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 20px;
    letter-spacing: .3px;
}


.dialog-title {
    margin: 0 0 6px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--angola-black);
}

.dialog-location {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: #666;
}

.dialog-description {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 14px;
}

/* Link */
.dialog-website {
    display: inline-block;
    max-width: max-content;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--angola-red);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all .2s ease;
}

.dialog-website:hover {
    opacity: .75;
    border-bottom-color: var(--angola-red);
}

.home-section.random-subjects-section.in-destiantion {
    height: 75vh !important;
}

.taag-image {
    background-image: url('../resources/imgs/taag.png');
    background-size: cover;
    background-position: center;
}

.tourism-image {
    background-image: url('../resources/imgs/monomento.jpg');
    background-size: cover;
    background-position: center;
}


/* end */


/* 
==================================
ABOUT THE EMBASSY
==================================
*/

.about-angola .content-container {
    display: flex;
    gap: 2rem;
    padding: 2rem;
}

.about-angola .content-container .content {
    margin-top: 2rem;
    width: 60%;

}

.angola-page .map-image-container {
    width: 50%;
    display: flex;
    flex-direction: column;
}

.symbol-content-container {
    padding: 2rem;
}

.symbol-description-container {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.symbol-description {
    line-height: 1.8;
    text-align: justify;
    font-size: 1.2rem;
}

.symbol-description {
    width: 85%;
}

.national-symbols-images {
    position: relative;
    width: 15%;
    height: 150px;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
}

.national-symbols-images img {
    width: 100%;
    height: 100%;
    /*object-fit: contain;*/
    transition: transform 0.4s ease;
}

/* Efeito zoom */
.national-symbols-images:hover img {
    transform: scale(1.2);
}

/* Overlay */
.symbol-description-container .overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    transition: opacity 0.4s ease;
    font-weight: bold;
    text-align: center;
    padding: 10px;
}

.national-symbols-images:hover .overlay {
    opacity: 1;
}

.angola-page .map-image-container img {
    width: 100%;
    height: 80%;
    border-radius: .2rem;
    object-fit: contain;
}

.angola-page .education-economy {
    display: flex;
    gap: 4rem;
}

.angola-page .education,
.angola-page .economy {
    width: 50%;
    padding: 1rem;
}

.about-the-embassy-page .hero-section .title {
    font-size: 3rem;
}

.about-the-embassy-page .about-the-embassy-page .title {
    font-size: 2.6rem;
    margin-bottom: .8rem;
}

.about-the-embassy-page .hero-section .subtitle {
    font-size: var(--news-title-size);
}

.about-the-embassy-page .hero-section,
.angola-page .hero-section {
    height: 70vh;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    /* height: 100%; */

    position: relative;
}

.about-the-embassy-page .hero-section {
    background-image: url('../resources/imgs/embassy/casa-rosada-caba-argentina-.webp');


    background-size: cover;
    background-position: center;
}

.about-the-embassy-page .hero-overlay,
.angola-page .hero-overlay {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.about-the-embassy-page .section .text {
    font-size: 1.2rem;
}

.about-the-embassy-page .quick-facts {
    text-align: justify;
    display: flex;
    justify-content: center;
    background: var(--sec-background);
}

.about-the-embassy-page .section {
    padding: 8rem 6rem;

}


.about-the-embassy-page .section,
.diplomatic-representation {
    padding: 8rem 6rem;

}

.page-padding {
    padding: 8rem 6rem;

}

.about-the-embassy-page .diplomatic-representation {
    /* border: 3px solid blue; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5rem;
}

.about-the-embassy-page .embassies-container {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-start;
    /* Prevents the first flag from being cut off */
    padding-left: 20px;
    width: 50%;
}

.about-the-embassy-page .embassy-flag {
    position: relative;
    /* This creates the overlap */
    margin-left: -35px;
    transition: transform 0.3s ease;
}

/* Removes overlap for the first flag so it stays put */
.about-the-embassy-page .embassy-flag:first-child {
    margin-left: 0;
}

.about-the-embassy-page .embassy-flag img {
    border-radius: 50%;
    height: 150px;
    width: 150px;
    border: 4px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    background-color: white;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.about-the-embassy-page .embassy-flag:hover {
    transform: translateY(-5px);
}

.about-the-embassy-page .consular-services {
    background: var(--sec-background);
    /* border: 2px solid red; */
}

.about-the-embassy-page .embassy-flag img {

    transition: transform 0.3s ease;
}

.about-the-embassy-page .embassy-flag:hover img {
    transform: scale(1.1);
}

.about-the-embassy-page .embassies-container-details {

    min-height: 100px;
    padding: 15px;
    width: 50%;
    background: #111827;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
    color: #f8f8f8;
    font-family: system-ui;
}

/* ============================== */
/* EMBASSY-DETAIL PAGE */
/* ===================================== */
/* .ui-widget */
.embassy-details .president-biography-page-container.mobile-view {
    display: none;
}

@media(max-width: 700px) {

    .embassy-details .president-biography-page-container.mobile-view {
        display: block !important;
    }

    .embassy-details .president-biography-page-container.desktop-view {
        display: none !important;
    }

    .embassy-details .president-biography-page-container .ui-chronoline-event {
        position: relative;
        display: block !important;
    }

    .embassy-details .ui-chronoline.ui-chronoline-vertical .ui-chronoline-event-content {
        margin-bottom: 2rem;
    }
}



/* 
==================================
Page of the Embassadors
==================================
*/

/* cards of the embassadors */

body .ui-datascroller .ui-datascroller-content {
    border: none !important;
    padding: 0rem !important;
}

.profiles-grid .ui-datascroller-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 24px;
    align-items: stretch;
}

.main-content-embassadors,
.main-content-media {
    padding-top: 5rem;
}

/* section hero of the page */
.media-hero,
.embassy-hero,
.gallery-hero,
.traveling-to-angola-hero {
    padding: 60px 40px;
    border-radius: 16px;
    background-size: cover !important;
    background-position: center !important;
    color: #fff;
    margin-bottom: 3rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.embassy-hero,
.media-hero {
    height: 45vh;
}

.embassy-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
        url('../resources/imgs/AngolaMinisteriodasRelaccoesExterioresLuandaFotoAngopArq.jpg');
}

.media-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
        url('../resources/imgs/media/hero.webp');
}

.media-hero {
    border-radius: none !important;
}

.gallery-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
        url('../resources/imgs/gallery-hero.webp');
    height: 65vh;
    text-align: center;
}

.traveling-to-angola-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
        url('../resources/imgs/travel.webp');
    height: 65vh;
    text-align: center;
}

.radioBtns .ui-widget {

    display: flex;
    gap: 1rem;
    font-size: 12pt;
    flex-direction: column;
}




/* .title-container {
    padding: 2rem 0;
} */

.hero-content {
    width: 100%;
}

.hero-content h1 {
    font-size: var(--desktop-title-size);
    /* margin-bottom: 10px; */
    font-weight: 600;
}

.hero-content p {
    font-size: 1rem;
    opacity: 0.9;
    max-width: 640px;
    margin: auto;
}



.profile-card {
    position: relative;
    display: flex;
    gap: 18px;
    padding: 1rem;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #eee;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease;

    flex-direction: column;
    height: 35rem;
    /*  overflow-y: hidden; */

    &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 18px;
        bottom: 18px;
        width: 4px;
        border-radius: 4px;
        background: linear-gradient(to bottom,
                var(--angola-yellow),
                var(--white-color));
        opacity: 0.6;
    }
}

@media(width < 780px) {
    .profile-card {
        height: 100%;
    }
}

.profile-image-embassador {
    flex: 0 0 120px;
    display: flex;
    align-items: center;
}

.profile-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: top;
    border-radius: 12px;
}

.profile-info {
    flex: 1;
}

.profile-name {
    margin: 6px 0 4px;
    font-size: 18px;
    font-weight: 600;
    color: #222;
}

.profile-title {
    margin: 0;
    font-weight: 500;
    color: #444;
    font-size: 14px;
}

.profile-subtitle {
    margin: 2px 0 10px;
    color: #777;
    font-size: 13px;
}

.profile-meta {
    font-size: 13px;
    color: #555;
    margin-bottom: 2rem;
}

.profile-desc {
    color: var(--angola-black);
    line-height: 1.5;
    font-size: .9rem;
    text-align: justify;
    padding-bottom: .5rem;
    /* box-shadow: 0px 4px 8px -5px #0001; */
    height: 7rem;
    overflow-y: auto;
    scrollbar-width: none;
}

.tag-embassador {
    background: var(--angola-red) !important;
}

/* stats of the embassy */
.embassy-stats {
    display: flex;
    gap: 40px;
    margin: 40px 0;
    padding: 28px;
    border-radius: 14px;
    background: #fafafa;
    border: 1px solid #eee;
    justify-content: center;
}

.stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #222;
}

.stat-label {
    font-size: 13px;
    color: #666;
}

/* timeeLine */
.embassy-timeline {
    margin: 50px 0;
}

.timeline {
    list-style: none;
    padding-left: 0;
    border-left: 3px solid #ddd;
    margin-left: 10px;
}

.timeline li {
    margin: 18px 0;
    padding-left: 18px;
    position: relative;
    color: #444;
}

.timeline li::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 6px;
    width: 12px;
    height: 12px;
    background: #d4af37;
    border-radius: 50%;
}

/* Container Principal */
.ambassador-message-section {
    background-color: #ccc2;
    padding-bottom: 2rem;
    margin: 2rem 0;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.ambassador-message-section .message-wrapper {
    max-width: 750px;
    /* Largura contida para leitura confortável */
    width: 100%;
    text-align: center;
}

/* Cabeçalho */
.ambassador-message-section .message-header .title {
    font-family: 'Playfair Display', serif;
    /* Se puder usar Google Fonts, esta é ideal */
    font-size: 2.8rem;
    color: #1a202c;
    margin-bottom: 8px;
    font-weight: 400;
    letter-spacing: -0.5px;
}

.ambassador-message-section .update-date {
    font-size: 0.85rem;
    color: #a0aec0;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 30px;
}

.ambassador-message-section .elegant-divider {
    width: 40px;
    height: 2px;
    background-color: #c5a059;
    /* Tom dourado suave / bronze */
    margin: 0 auto 50px auto;
}

/* Corpo do Texto */
.ambassador-message-section .message-body {
    text-align: justify;
    line-height: 1.9;
    color: #4a5568;
}

.ambassador-message-section .lead-text {
    font-size: var(--news-title-size);
    font-style: italic;
    color: #2d3748;
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.6;
    font-weight: 300;
}

.ambassador-message-section .main-content p {
    margin-bottom: 25px;
    font-size: 1.1rem;
}

/* Assinatura */
.ambassador-message-section .message-footer {
    margin-top: 60px;
    text-align: center;
}

.ambassador-message-section .signature-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 2px;
}

.ambassador-message-section .signature-role {
    font-size: 0.95rem;
    color: #718096;
    letter-spacing: 0.5px;
}

/* Ajustes Responsivos */
@media (max-width: 600px) {
    .ambassador-message-section {
        padding: 60px 25px;
    }

    .ambassador-message-section .message-header .title {
        font-size: 2.2rem;
    }

    .ambassador-message-section .lead-text {
        font-size: 1.2rem;
    }
}

/* 
--------------------------
travel-to-angola footer of navigation
--------------------------
*/


.explore-section-travel-to-angola {
    padding: 50px 10px;
    background: #f8f8f8;
    text-align: center;
    margin: auto;
    display: block;



    /* TITLE */
    .explore-title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 30px;
        color: #1B365D;
        letter-spacing: 0.5px;
    }

    /* GRID LAYOUT */
    .explore-grid {
        display: flex;
        justify-content: center;
        gap: 24px;
        flex-wrap: wrap;
    }

    /* CARD LINK */
    .explore-card {
        width: 180px;
        background: #ffffff;
        border-radius: 6px;
        padding: 16px;
        text-decoration: none;
        color: #1A1A1A;
        transition: all 0.2s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    }

    /* HOVER */
    .explore-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
    }

    /* IMAGE */
    .explore-img {
        width: 100%;
        height: 70px;
        object-fit: contain;
        margin-bottom: 12px;
        opacity: 0.9;
    }

    /* TEXT */
    .explore-text {
        font-size: 14px;
        font-weight: 600;
        display: block;
    }
}

@media (width < 769px) {
    .explore-section-travel-to-angola {
        width: 90%;

    }
}

@media (width < 570px) {
    .explore-section-travel-to-angola {
        width: 95%;
    }
}

/* 
---------------
hero section, this serve to hotels, arlines
---------------
*/
/* HERO CONTAINER */
.hotel-hero {
    margin-top: 3rem;
    height: 70vh;
    /* background-image: url("./hotel_images/0img-2026-03-1719-34-19img.png"); */
    /* troque pela sua imagem */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI", Arial, sans-serif;


    /* OVERLAY ESCURO */
    .hero-overlay {
        width: 100%;
        height: 100%;
        background: rgba(27, 54, 93, 0.65);
        /* azul institucional */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* CONTEÚDO */
    .hero-content {
        text-align: center;
        color: #ffffff;
        max-width: 800px;
        padding: 20px;
    }

    .hero-content h1 {
        font-size: 42px;
        margin-bottom: 16px;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    .hero-content p {
        /* font-size: 18px; */
        margin-bottom: 1rem;
        opacity: 0.95;
    }

    /* BOTÃO */
    .hero-btn {
        display: inline-block;
        background: var(--angola-red);
        /* dourado discreto */
        color: #ffffff;
        text-decoration: none;
        padding: 12px 28px;
        font-weight: 600;
        border-radius: 4px;
        transition: background 0.2s ease;
    }

    .hero-btn:hover {
        background: var(--angola-red-hover);
    }
}



/* ANGOLA PAGE */
.the-president {
    height: 70vh;
    padding: 2rem 6rem;
}

.the-president-section {
    padding: 2rem;
    height: 100%;
    display: flex;
    /* align-items: ; */
    gap: 3rem;
    /* width: 50%; */
}

.the-president-section img {
    height: 100%;
}


.angola-page .quick-links-embassadors-section {
    padding-top: 0.5rem;
}

/* =============BOOKING PAGE=====================*/


.booking-content-container {
    width: 100%;
    margin: 0 auto;
    display: flex;

    justify-content: center;
    height: auto;
    padding: 2rem;


}

.booking-content-container .card {
    flex-direction: column;
    display: flex;
    gap: .8rem;
    padding: 2rem;
}

/* ================FAQs============== */
.common-questions {
    padding-top: 4rem;
}

.common-questions .title {
    padding-bottom: 2rem;
}

.common-questions .ui-accordion .ui-accordion-header {
    background-color: var(--sec-background);
    color: var(--angola-black);
    font-size: 1.4rem;
    font-weight: 400;
    margin: .8rem 0;
}

.common-questions .ui-accordion .ui-accordion-header:focus {
    box-shadow: none;
}

.common-questions p {
    color: var(--angola-black);
    font-size: 1.2rem;

}





/* ================404============== */
.page-not-found .error-container {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.page-not-found .error-card {
    width: 40%;
    text-align: center;
    background: var(--white-color);
    padding: 3rem;
    border-top: 5px solid var(--angola-red);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.page-not-found .error-code {
    font-size: 6rem;
    font-weight: 900;
    color: #e0e0e0;
    line-height: 1;
    margin-bottom: 1rem;
}

.page-not-found .error-title {
    color: var(--angola-red);
    font-size: 1.75rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.page-not-found .error-msg {
    color: var(--title-gray);
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.page-not-found .quick-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2rem;
    text-align: left;
}

.page-not-found .link-item,
.page-not-found .link-item.ui-commandlink {
    padding: 10px;
    border-left: 3px solid var(--angola-strong-yellow);
    ;
    background: #fffdf9;
    text-decoration: none;
    color: var(--angola-strong-yellow);
    font-weight: 600;
    font-size: 0.9rem;
}

.page-not-found .link-item:hover,
.page-not-found .link-item.ui-commandlink:hover {
    color: var(--angola-strong-yellow);
    text-decoration: none;
    background: #f1f1f1;
}



/* ================PROVINCES SECTION ================= */
.provinces-section .hero-section p {
    max-width: 700px;
    margin: 0.75rem auto 0;
    font-weight: 400;
    font-size: var(--link-text-size);
}

/* cada grupo étnico = bloco principal */
.provinces-section .ethnic-block {
    margin-bottom: 4rem;
    background: white;
    border-radius: 2rem;
    box-shadow: 0 15px 35px rgba(0, 20, 30, 0.04);
    transition: all 0.2s ease;
}

.provinces-section .ethnic-header {
    /*background: linear-gradient(98deg, #eef2f5 0%, #ffffff 100%);*/
    padding: 1.25rem 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: space-between;
}

.provinces-section .ethnic-title {
    /* font-size: 1.85rem; */
    font-size: var(--desktop-title-size);
    font-weight: 700;
    letter-spacing: -0.3px;
    background: var(--angola-black);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.provinces-section .ethnic-title i {
    background: none;
    color: #2b7a62;
    font-size: 1.8rem;
    background-clip: unset;
    -webkit-background-clip: unset;

}

.provinces-section .province-badge-count {
    background: var(--angola-red);
    padding: 0.3rem 1rem;
    border-radius: 40px;

    font-weight: 600;
    color: var(--angola-white);
}

/* carrossel horizontal customizado */
.provinces-section .scroll-container {
    position: relative;
    padding: 1.5rem 0.5rem 2rem 0.5rem;
}

.provinces-section .hotel-grid-scroll {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 1.8rem;
    padding: 0.8rem 1rem 2rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.provinces-section .hotel-grid-scroll::-webkit-scrollbar {
    height: 6px;
}

.provinces-section .hotel-grid-scroll::-webkit-scrollbar-track {
    background: #eef2f6;
    border-radius: 8px;
}

.provinces-section .hotel-grid-scroll::-webkit-scrollbar-thumb {
    background: #b9cad6;
    border-radius: 8px;
}

.provinces-section .province-card {
    flex: 0 0 300px;
    width: 300px;
    transition: transform 0.25s ease, box-shadow 0.25s;
    cursor: pointer;
}

.provinces-section .province-card:hover,
.cards-container a:hover {
    transform: translateY(-10px);
    text-decoration: none;
}

.cards-container a {
    transition: transform 0.25s ease, box-shadow 0.25s;
}

/* card estilo moderno */
.provinces-section .custom-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.provinces-section .custom-card:hover {
    box-shadow: 0 20px 30px -12px rgba(0, 32, 32, 0.15);
}

.provinces-section .card-img {
    height: 170px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    background-color: #d9e2e8;
}

.provinces-section .card-content {
    padding: 1.3rem 1.2rem 1.2rem;
    flex: 1;
}

.provinces-section .card-title {
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    letter-spacing: -0.2px;
    color: #000;
}

.provinces-section .card-subtitle {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.9rem;
    border-left: 3px solid var(--angola-yellow);
    /* color: var(--angola-yellow); */
    padding-left: 8px;
    color: #000;
}

.provinces-section .province-stats {
    font-size: var(--link-text-size);
    line-height: 1.45;
    margin-bottom: 0.8rem;
    color: #000;
}

.provinces-section .desc-text {
    font-size: var(--link-text-size);
    color: #0009;
    border-top: 1px solid #e9edf2;
    margin-top: 0.6rem;
    padding-top: 0.7rem;
}

.provinces-section .scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 60px;
    background: rgba(0, 0, 0, 0.6);
    ;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 1.2rem;
}

.provinces-section .scroll-btn.left {
    left: -8px;
}

.provinces-section .scroll-btn.right {
    right: -8px;
}

.provinces-section .scroll-btn:hover {
    background: var(--angola-red);
    color: white;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.provinces-section .hero-section-province {

    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
        url('../../resources/imgs/younggirl.jfif');

    position: relative;

    background-size: cover;
    overflow: hidden;
    background-position: center;
    border-radius: 16px;
    text-align: center;
}


.provinces-section .ethnic-img {
    position: relative;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}



.provinces-section .ethnic-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.4);

    z-index: 1;
}


.provinces-section footer {
    text-align: center;
    margin-top: 3rem;
    padding: 1.5rem;
    font-size: 0.8rem;
    color: #5f7f8c;
    border-top: 1px solid #dfe6ec;
}

.provinces-section .img-placeholder {
    background-size: cover;
    background-position: center;
}

/* =============MEDIA SECTION (LANDING PAGE)========== */
.angola-media-section .ui-carousel-container,
.official-representatives-section .ui-carousel-container {
    position: relative;

}

.angola-media-section .ui-carousel .ui-carousel-content .ui-carousel-prev,
.official-representatives-section .ui-carousel .ui-carousel-content .ui-carousel-prev {
    left: 0;
}

.official-representatives-section .ui-carousel .ui-carousel-content .ui-carousel-prev,
.official-representatives-section .ui-carousel .ui-carousel-content .ui-carousel-next {
    position: absolute;
    bottom: -2rem;
    display: none;
}

.angola-media-section .ui-carousel .ui-carousel-content .ui-carousel-prev,
.angola-media-section .ui-carousel .ui-carousel-content .ui-carousel-next {
    bottom: -1rem;
    position: absolute;
}

.official-representatives-section .ui-carousel .ui-carousel-content .ui-carousel-next,
.angola-media-section .ui-carousel .ui-carousel-content .ui-carousel-next {
    right: 0;
}

/*====================MEDIA PAGE=============  */
.media-page-container .news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    padding: 40px 0;
}

.media-page-container .news-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.0);
}

.media-page-container .news-card h3 {
    color: var(--dark-blue);
    margin: 15px 0 10px 0;
    font-size: 1.25rem;
}

.media-page-container .news-card p {
    color: var(--text-gray);
    font-size: 0.95rem;
    line-height: 1.5;
}

.media-page-container .news-card .external-link {
    color: var(--angola-red);
    font-weight: 600;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.media-page-container .category-tag {
    background: #e9ecef;
    color: #495057;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: fit-content;
}

.media-page-container .section-header {
    text-align: center;
    max-width: 800px;
    margin: 50px auto 20px;
}

.media-page-container .section-header h2 {
    font-size: 2rem;
    color: var(--title-gray);
    position: relative;
    padding-bottom: 15px;
}

.media-page-container .news-logo-container {
    width: 100%;
    height: 100px;
    /* Altura fixa para manter o alinhamento */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background-color: #fcfcfc;
    border-radius: 8px;
    padding: 10px;
    overflow: hidden;
}

.media-page-container .news-logo {
    max-width: 80%;
    max-height: 70px;
    object-fit: contain;
    /* Garante que a imagem não estique */
    transition: transform 0.3s ease;
}

.media-page-container .footer-media-section {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 60px 10%;
    background-color: #ffffff;
    border-top: 1px solid #eee;
    gap: 40px;
}

.media-page-container .flag-container {
    flex: 1;
    text-align: right;
    /* Alinha a bandeira para o centro da divisória */
}

.media-page-container .angola-flag-img {
    /* max-width: 350px; */
    /* Tamanho controlado da bandeira */
    height: auto;
    width: 600px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s ease;
}

.media-page-container .social-container {
    flex: 1;
    text-align: left;
}

.media-page-container .social-container h2 {
    color: var(--dark-blue);
    font-size: 2rem;
    margin-bottom: 15px;
}

.media-page-container .social-grid {
    display: flex;
    gap: 20px;
    margin-top: 25px;
}

.media-page-container .social-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
    text-decoration: none;
    transition: 0.3s;
}

.media-page-container .fb {
    background: #1877F2;
}

.media-page-container .xt {
    background: var(--title-gray);
}

.media-page-container .ig {
    background: #E4405F;
}

.media-page-container .yt {
    background: #FF0000;
}

.media-page-container .social-btn:hover {
    transform: translateY(-5px);
    filter: brightness(1.1);
}



/* ON EVENT PAGE */
.more-Infor-event {
    padding-top: 1.3rem;
}

 .the-president-section img {
        width: 30%;
        border-radius: 8px;
    }


@media screen and (max-width: 1290px) {
    .the-president-section img {
        height: 90%;
    }

}

@media screen and (max-width: 1200px) {

    .nav-bar {
        padding: 0rem 2rem;
    }

    .logo-container {
        gap: .5rem;
    }

    .logo,
    .insignia {
        height: 40px;
    }

    .desktop {
        display: none;
    }

    .open-menu-button.ui-button {
        padding-left: 2rem;
        display: inline-block;
    }

    .is-mobile {
        display: flex;
    }

    .main-nav {
        gap: 1rem;
    }

    .nav-links {
        gap: 0;
    }

    /* ===============MOBILE NAVBAR========== */
    .mobile-nav-container {
        /* border: 2px solid red; */
        padding: 20px 15px;
    }

    /* content container */
    .mobile-accordion {
        /* border: 2px solid blue; */
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-accordion .ui-overlaypanel {
        background-color: #fff;
    }


    /* Accordion Header (Presidência, Governo, etc) */
    .accordion-item {
        border-bottom: 1px solid #f0f0f0;
    }

    .accordion-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 10px;
        font-weight: 700;
        color: var(--title-gray);
        font-size: 1.1rem;
        cursor: pointer;
        transition: background 0.3s;
    }

    .accordion-header i {
        color: var(--title-gray);
        font-size: 0.8rem;
        transition: transform 0.3s ease;
    }

    /* Open State for Arrow */
    .service-accordion-header.active i,
    .accordion-item.active .accordion-header i {
        transform: rotate(180deg);
    }



    /* Accordion Content (The sub-links) */
    .service-accordion-content,
    .accordion-content {
        list-style: none;
        /* Indent to make room for the line */
        margin: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        position: relative;
    }





    .accordion-item.active .service-accordion-content {
        padding: .6rem;
    }

    .accordion-item.active .service-accordion-content,
    .accordion-item.active .accordion-content {
        max-height: 1000px;
    }

    .accordion-item.active .accordion-content {
        padding: 0 0 10px 40px;

    }

    /* Sub-links style */
    .service-accordion-content li,
    .accordion-content li {
        padding: .6rem 0;
    }



    .accordion-content li a,
    .accordion-item div a {
        text-decoration: none;
        color: var(--title-gray);
        font-weight: 600;
        font-size: 0.95rem;
        display: block;
    }

    .service-accordion-header {
        position: relative;
    }



    .service-accordion-header,
    .accordion-header,
    .accordion-header a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 700;
        color: var(--title-gray);
        font-size: 1.1rem;
        cursor: pointer;
        transition: background 0.3s;
    }

    .accordion-header {
        padding: 1rem 1.4rem;
    }

    .accordion-header a {
        padding: .2rem 0;
    }



    .news-page-container .ui-datascroller .ui-datascroller-content .ui-datascroller-list,
    .quick-links-embassadors {
        grid-template-columns: repeat(2, 1fr);
        gap: .8rem;
    }

    /* ==========PAGE CONTAINERS========== */
    .landing-page .hero-content-container,
    .page-padding,
    .scrolly-telling-section,
    .president-biography-page-container,
    .news-page-container,
    .consular-services-page-container,
    .destinations-page-container,
    .show-news-page {
        padding: 2rem;
    }

    .news-section .cards-container,
    .news-page-container .cards-container {
        gap: 1rem;

    }


    .about-the-embassy-page .embassies-container-details {
        display: none;
    }


    .about-the-embassy-page .section {
        padding: 2rem;
    }

    .diplomatic-representation {
        padding: 4rem 2rem;
    }

    .about-the-embassy-page .section .text {
        text-align: justify;
    }

    .about-the-embassy-page .embassies-container {
        width: 100%;
    }

    .about-the-embassy-page .embassy-flag img {
        width: 180px;
        height: 180px;
    }

    .consular-services-section .card,
    .quick-links-embassadors-section .card {
        flex: 48%;
        height: 6rem;
    }

    .random-subjects-section {
        gap: 1rem;
        height: auto;
    }
}

@media screen and (max-width: 910px) {


    .logo,
    .insignia {
        height: 30px;
    }




    .home-section .image.a .subtitle,
    .home-section .image.b .subtitle,
    .home-section .image.c .subtitle {
        display: none;
    }




}

@media screen and (max-width: 768px) {

    .page-padding {
        /*  padding: 2rem .8rem;*/
    }

    .desktop {
        display: none;
    }

    .home-section .title {
        font-size: 1.2rem;
    }

    .descover-button.ui-button {
        margin: 10% auto 0;
        display: block;
        width: 70%;
    }

    .transparent-button.ui-button,
    .red-button.ui-button {
        width: 100%;
    }

    /* ============NAVEBAR==========*/
    .nav-bar {
        padding: 0 .8rem;
    }

    .logo-container {
        gap: .8rem;
    }

    .logo,
    .insignia {
        height: 26px;
    }

    .main-nav {
        padding: 0;
    }

    .media-hero,
    .embassy-hero,
    .gallery-hero,
    .traveling-to-angola-hero {
        padding: 0;
    }

    /* ===============MOBILE NAVBAR============== */


    .service-accordion-item {
        display: block;
        padding-bottom: 1rem;
        border: none;
    }

    /* ===============DATA TABLE========== */
    .news-page-container .ui-datascroller .ui-datascroller-content .ui-datascroller-list,
    .quick-links-embassadors {
        grid-template-columns: none;
    }

    .title-container {
        padding: 0;
        margin-bottom: 2rem;
    }

    /* body .ui-sidebar.ui-sidebar-active {
        z-index: 1021;
        } */

    /* ===================CARDS=========== */
    .profile-card {
        height: auto;
        flex-direction: column;
    }

    .profile-image-embassador {
        flex: 100%;
    }

    .profile-img {
        width: 100%;
        height: 100%;
    }

    .explore-card {
        width: 60%;
    }

    /*==============HERO============== */
    .landing-page .hero-content-container {
        padding: 6rem .8rem 0;
        flex-direction: column;
    }

    .landing-page .hero-content,
    .hero-updates {
        min-width: 100%;
        max-width: 100%;
    }

    .hero-content h1 {
        text-align: center;
    }

    .hero-content h1,
    .title {
        font-size: 1.6rem;
    }

    .hero-content .text {
        text-align: center;
        font-size: 1.2rem;
    }

    .hero-updates {
        padding-top: 10%;
        justify-content: center;
    }


    .hero-content .ui-commandlink,
    .hero-content .ui-link {
        width: 100%;
        margin: 0 auto;
    }

    .contactForm {
        width: 100%;
        /*padding: .8rem;*/
    }

    .contacts {
        padding: .8rem 0;
    }

    .contacts .item {
        gap: .4rem;
    }

    .contactInfo p {
        line-height: 1.4rem;
    }

    /* ==============EMBASSIES PAGE============ */
    .main-content-embassadors,
    .main-content-media {
        padding-top: 0;
    }

    /* ================EMABSSIES CAROUSEL================ */
    .embassies-carousel {
        height: 500px;
    }

    .embassies-carousel-track {
        width: 150px;
    }

    .embassies-angola-section-flag {
        width: 100px;
        height: 65px;
        left: 25px;
        /* Adjusted to keep centered in track */
    }


    /* =======CONSULAR SERVICES======= */


    .consular-services-section .cards-container,
    .quick-links-embassadors-section .cards-container {
        gap: .8rem;
    }

    .consular-services-section .card,
    .quick-links-embassadors-section .card {
        flex: 100%;
        padding: .8rem;
    }

    /* =============GALLERY PAGE========= */
    .gallery-hero,
    .traveling-to-angola-hero {
        height: 100%;
        width: 100%;

        padding-top: 20%;
        padding-bottom: 20%;
    }

    /* ==========NEWS=========== */
    .heigh-light-carousel {
        height: auto;
    }

    .heigh-light-slide img {
        object-position: unset;
    }

    .news-section .cards-container,
    .news-page-container .cards-container {
        flex-direction: column;
    }

    .news-page-container .desktop {
        display: none;
    }

    .news-page-container .filters {
        flex-direction: column;
        justify-content: center;
        width: 100%;
        margin: 0 auto;
        gap: .8rem;
    }

    .news-page-container .filter {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 1.2rem;
        border: 1.5px solid #e0e0e0;
        border-radius: 2rem;
        cursor: pointer;
        font-size: 0.9rem;
        color: var(--text-gray);
        transition: all 0.3s ease;
        white-space: nowrap;
    }

    .news-section .card,
    .news-page-container .card {
        min-height: fit-content;
    }


    .news-section .cards-container img,
    .news-page-container img {
        height: auto;
    }


    /* ============SHOW NEWS=========== */
    .show-news-page .ui-breadcrumb {
        display: none !important;
    }

    .show-news-page .header-container {
        width: 100%;
    }

    .show-news-page-content {
        flex-direction: column;
    }

    .show-news-page .back-button.ui-commandlink {
        display: flex;
    }

    .back-button .pi {
        font-size: var(--news-title-size);
    }

    .show-news-page .support-section ul {
        gap: 0;
    }

    .show-news-page .support-section .card {
        padding: .4rem;
    }

    .show-news-page .image-container {
        height: fit-content;
    }

    .show-news-page .header-container .headline {
        padding: 1rem .6rem;
    }

    .show-news-page .description p {
        font-size: 1.2rem;
        line-height: 1.8rem;
        padding: 0 1rem;
    }

    .show-news-page .header-container .title {
        font-size: 1.2rem;
        margin: 0;
        text-align: start;
    }

    .show-news-page .header-container .top {
        display: block;
        font-size: .9rem;
    }

    .show-news-page .support-section {
        width: 100%;
    }

    /* ==================EXPLORE ANGOLA =================== */

    .discover-angola-section .subcontent-container {
        padding: .8rem;
    }

    .discover-angola-section .main-content {
        height: auto;
        padding: 2rem .8rem;
    }

    .discover-angola-section-options {
        padding: 2rem 0;
        height: 40%;

    }

    .discover-angola-section .red-button.ui-button {
        margin-top: 20%;
    }

    /* ==============RANDOM SUBJECTS=========== */
    .random-subjects-section {
        height: auto;
    }

    .random-subjects-section {
        height: auto;

        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;

        grid-template-areas:
            "d a"
            "d b"
            "d c";
        gap: 0.5rem;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .random-subjects-section .image-description {
        padding: .8rem;
        height: auto;
        font-size: .9rem;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 90) 100%);
    }



    /* ===============CONSULAR SERVICES PAGE ================ */
    .consular-services-page-container .side-bar {
        display: none;
    }

    .consular-grid-button-container {
        display: flex;
        align-items: center;
        gap: .4rem;
        padding: 0 0 1rem;
        cursor: pointer;
        width: fit-content;
    }

    .consular-services-page-container .body {
        width: 100%;
        padding: 0;
    }

    .consular-services-page-container .description {
        margin: 2rem 0;
        padding: 0;
        line-height: normal;
        font-size: 1rem;
    }

    /* ============DESTINATION================= */
    .destinations-page-container .home-section .discover-angola-section-options .glass {
        width: 100%;
    }



    /* ==============ANGOLA PAGE================ */
    .about-angola .content-container,
    .angola-page .education-economy {
        flex-direction: column;
    }

    .angola-page .education,
    .angola-page .economy {
        width: 100%;
    }

    .angola-page .map-image-container {
        width: 100%;
        margin: 0 auto;
        height: unset;
        display: flex;
        flex-direction: column;
    }

    .about-angola .content-container .content,
    .the-president-section {
        width: 100%;
        margin: 0;
    }

    .symbol-description-container {
        flex-direction: column;
        gap: 1.5rem;
        margin-top: 3rem;
    }

    .national-symbols-images {
        width: 100%;
        height: 250px;
        order: 1;
    }

    .symbol-description {
        width: 100%;
        font-size: 1.1rem;
        order: 2;
    }

    .symbol-content-container {
        padding: 1rem;
    }

    .the-president {
        height: auto;
        padding: .8rem;
    }

    .the-president-section {
        flex-direction: column;
    }

    /* ==============ABOUT THE EMBASSY PAGE================ */
    .about-the-embassy-page .hero-overlay,
    .angola-page .hero-overlay {
        padding: .8rem;
    }

    .about-the-embassy-page .hero-section .title {
        font-size: 2rem;
    }

    .about-the-embassy-page .hero-section .subtitle {
        padding: .8rem;
        text-align: center;
    }

    .about-the-embassy-page .section {
        padding: 4rem .8rem;
        flex-direction: column;
    }

    .diplomatic-representation {
        padding: 0rem .8rem 4rem;
        flex-direction: column !important;

    }

    .about-the-embassy-page .diplomatic-representation-title {

        font-size: 1.1rem;
        font-weight: 600;
    }

    .about-the-embassy-page .diplomatic-representation-title {

        font-size: 1.1rem;
        font-weight: 600;
    }

    .about-the-embassy-page .embassy-flag img {
        width: 4.25rem;
        height: 4.25rem;
    }

    .about-the-embassy-page .embassies-container {
        width: 100%;
        justify-content: center;
        padding: 0;
    }

    /* As long as mobile devices don't have hover effect
        it makes no sense to still show this component */


    .ui-datascroller .ui-datascroller-list {
        grid-template-columns: none;
    }

    .about-the-embassy-page .section .text {
        text-align: justify;
        padding-top: .8rem;
    }

    /* ===============BOOKING PAGE============ */
    .booking-content-container {
        width: 90%;
        margin-bottom: 8rem;
        padding: 0rem;
    }

    .booking-page .booking-dialog.ui-dialog {
        width: 90% !important;
    }

    .booking-content-container .booking-dialog.ui-dialog {
        width: 100%;
    }

    .booking-content-container .ui-calendar.ui-trigger-calendar input.hasDatepicker {
        width: 90%;
    }

    .booking-content-container .ui-calendar .ui-button.ui-button-icon-only {
        width: 10%;
    }

    /* 
    =============================
    FOOTER
    ============================
    */

    .footer-section .links-container {
        flex-direction: column;
    }

    .social-icons-wrapper {
        justify-content: start;
    }

    /* ================404=============== */
    .page-not-found .error-container {
        width: 100%;
        height: 100vh;
        padding: 1rem;

    }

    .page-not-found .error-card {
        padding: 1rem;
        width: 100%;
    }


    /* ==============PROVINCES SECTION================ */

    .provinces-section .ethnic-header {
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }

    .provinces-section .ethnic-title {
        font-size: 1.5rem;
    }

    .provinces-section .scroll-btn {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
    }

    .provinces-section .scroll-btn.left {
        left: -2px;
    }

    .provinces-section .scroll-btn.right {
        right: -2px;
    }

    .provinces-section .province-card {
        flex: 0 0 270px;
        width: 270px;
        cursor: pointer;
    }



    .media-page-container .footer-media-section {
        flex-direction: column;
        /* Empilha os itens se necessário */
        /* padding: 40px 20px; */
    }

    .media-page-container .flag-container {
        display: none;
        /* A BANDEIRA DESAPARECE NO MOBILE */
    }

    .media-page-container .social-container {
        text-align: center;
        /* Centraliza o texto no mobile */
        width: 100%;
    }

    .media-page-container .social-grid {
        justify-content: center;
        /* Centraliza os ícones no mobile */
    }


    .news-skeleton-container {
        grid-template-columns: 1fr;
        /* Single column */
        gap: 1rem;
    }

    /* Target the large "image" skeleton to be smaller on mobile */
    .news-skeleton-card .image-placeholder {
        height: 200px;
    }

    /* Shrink the "title" skeleton height for mobile screens */
    .news-skeleton-card .title-placeholder {
        height: 60px;
    }


    .about-the-embassy-page .embassy-flag {
        margin-left: -35px;
    }

}



/*=======================================
Responsivo para celulares
==========================================
 */
@media (max-width: 480px) {
    .embassador-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .embassador-action:hover {
        transform: translateX(1rem);
    }

    .embassador-action {
        margin-left: 0;
        margin-top: 20px;
        padding-left: 0;
        border-left: none;
    }


    /* =============EMBASSIES CAROUEL (BELLOW THE HERO SECTION IN LANDING PAGE=========== */

    .embassies-carousel {
        height: 300px;
        perspective: 800px;
        /* Adjusted perspective for tighter view */
    }

    /* Tighten the radius even more for mobile portrait */
    .embassies-angola-section-flag:nth-child(1) {
        transform: rotateY(0deg) translateZ(140px);
    }

    .embassies-angola-section-flag:nth-child(2) {
        transform: rotateY(60deg) translateZ(140px);
    }

    .embassies-angola-section-flag:nth-child(3) {
        transform: rotateY(120deg) translateZ(140px);
    }

    .embassies-angola-section-flag:nth-child(4) {
        transform: rotateY(180deg) translateZ(140px);
    }

    .embassies-angola-section-flag:nth-child(5) {
        transform: rotateY(240deg) translateZ(140px);
    }

    .embassies-angola-section-flag:nth-child(6) {
        transform: rotateY(300deg) translateZ(140px);
    }



}



/* this style is to prevent the content overlap, when the navbar turns fixed
I am placing as the last style, for it'll override other styles */

.support-fixed-nav-bar-1 {
    padding-top: 170px !important;
}

.support-fixed-nav-bar-2 {
    padding-top: 150px !important;
}

.support-fixed-nav-bar-3 {
    padding-top: 120px !important;
}