/* =====================================
   APA PORTAL V2
   Corporate Maritime Theme
===================================== */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


:root{

    --apa-navy:#06283D;
    --apa-blue:#006699;
    --apa-light-blue:#EAF4FB;
    --apa-gold:#D4A017;
    --apa-red:#BE2630;

    --text:#1B263B;
    --muted:#6B7280;

    --light:#F6F8FA;

}



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



body{

    font-family:'Inter',sans-serif;

    color:var(--text);

    background:white;

}



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


.apa-navbar{

    height:85px;

    background:white;

    box-shadow:
    0 5px 25px rgba(0,0,0,.08);

}



.navbar-brand{

    font-size:32px;

    color:var(--apa-navy)!important;

    letter-spacing:-1px;

}



.navbar-brand span{

    color:var(--apa-red);

}



.nav-link{

    font-size:15px;

    font-weight:600;

    color:#374151!important;

    margin-left:20px;

}



.nav-link:hover{

    color:var(--apa-blue)!important;

}



.btn-login{

    background:transparent;

    color:var(--apa-navy)!important;

    border:1px solid var(--apa-navy);

    padding:8px 20px;

    border-radius:25px;

    font-size:14px;

    font-weight:600;

    transition:.3s;

}


.btn-login:hover{

    background:var(--apa-navy);

    color:white!important;

}



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


.hero{

    height:100vh;

    min-height:700px;

    position:relative;

    background-image:

    linear-gradient(
        90deg,
        rgba(6,40,61,.85),
        rgba(6,40,61,.25)
    ),

    url('../images/hero-1.jpg');


    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

}



.hero-content{

    color:white;

}



.hero-content span{

    display:inline-block;

    color:#F5D06F;

    font-weight:700;

    letter-spacing:3px;

    font-size:14px;

    margin-bottom:20px;

}



.hero h1{

    font-size:clamp(42px,5vw,70px);

    font-weight:800;

    line-height:1.1;

    max-width:750px;

}



.hero p{

    font-size:20px;

    line-height:1.7;

    max-width:650px;

    color:rgba(255,255,255,.85);

    margin-top:25px;

}



.btn-primary-custom{

    margin-top:30px;

    padding:16px 38px;

    background:var(--apa-red);

    color:white;

    border-radius:50px;

    font-weight:700;

    border:none;

}


.btn-primary-custom:hover{

    background:#991d26;

}



/* =====================================
   STATISTICS
===================================== */


.statistics{

    background:white;

    margin-top:-70px;

    position:relative;

    z-index:2;

}



.statistics .container{

    background:white;

    border-radius:20px;

    box-shadow:

    0 20px 50px rgba(0,0,0,.1);

    padding:40px;

}



.statistics h2{

    font-size:45px;

    color:var(--apa-blue);

    font-weight:800;

}



.statistics p{

    color:var(--muted);

    font-weight:600;

}



/* =====================================
   GENERAL SECTION
===================================== */


.section{

    padding:50px 0;

}



.section h2{

    font-size:40px;

    font-weight:800;

    margin-bottom:45px;

    color:var(--apa-navy);

}




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


.card-news{

    background:white;

    height:360px;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

    display:flex;

    flex-direction:column;

    transition:.3s ease;

}



.card-news:hover{

    transform:translateY(-8px);

}



.news-image{

    width:100%;

    height:210px;

    object-fit:cover;

    display:block;

    flex-shrink:0;

}



.card-news h5{

    margin:0;

    font-size:18px;

    line-height:1.35;

    font-weight:700;

    color:#06283D;


    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    overflow:hidden;

}



.card-news small{

    padding:0 25px;

    color:var(--apa-red);

    font-weight:600;

}



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


.event-card{

    background:white;

    display:flex;

    gap:25px;

    align-items:center;

    padding:30px;

    border-radius:18px;

    box-shadow:

    0 10px 30px rgba(0,0,0,.06);

}



.date-box{

    width:90px;

    height:100px;

    background:var(--apa-navy);

    color:white;

    border-radius:15px;

    text-align:center;

    padding:15px;

}



.date-box strong{

    color:#F5D06F;

    font-size:18px;

}



.date-box h3{

    font-size:38px;

}



/* =====================================
   PORT NETWORK
===================================== */


/* =================================
   ASEAN PORT NETWORK
================================= */


.port-network{

    padding:20px 0;

    background:#F6F8FA;

}



.network-label{

    color:#D4A017;

    font-size:13px;

    letter-spacing:3px;

    font-weight:700;

}



.network-title{

    font-size:42px;

    font-weight:800;

    color:#06283D;

}

@media(max-width:768px){

    .network-title{

        font-size:32px;

        line-height:1.2;

    }


    .network-desc{

        font-size:15px;

        padding:0 20px;

    }

}

.network-desc{

    color:#6B7280;

    font-size:18px;

}






@media(max-width:1200px){

    .port-grid{

        grid-template-columns:
        repeat(3,1fr);

    }

}



@media(max-width:768px){

    .port-grid{

        grid-template-columns:
        repeat(2,1fr);

        gap:15px;

    }

}



@media(max-width:480px){

    .port-grid{

        grid-template-columns:
        repeat(2,1fr);

        gap:12px;

    }

}


/* ===============================
   ASEAN FLAG NETWORK
================================ */


.port-grid{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-top:50px;

    flex-wrap:nowrap;

}


.country-card{

    background:white;

    width:120px;

    min-width:120px;

    padding:25px 10px;

    border-radius:22px;

    text-align:center;

    box-shadow:
    0 15px 40px rgba(0,0,0,.06);

    transition:.35s ease;

}



.country-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 25px 60px rgba(0,0,0,.12);

}



.flag-circle{

    width:65px;

    height:65px;

    margin:auto;

    border-radius:50%;

    overflow:hidden;

    box-shadow:

    0 8px 20px rgba(0,0,0,.15);

}



.flag-circle img{

    width:100%;

    height:100%;

    object-fit:cover;

}



.country-card h4{

    margin-top:25px;

    font-size:18px;

    font-weight:700;

    color:#06283D;

}



.country-card span{

    color:#D4A017;

    font-size:13px;

    font-weight:600;

}

@media(max-width:1200px){

    .port-grid{

        grid-template-columns:
        repeat(3,1fr);

    }

}


@media(max-width:768px){

    .port-grid{

        grid-template-columns:
        repeat(2,1fr);

        gap:15px;

    }


    .flag-circle{

        width:70px;

        height:70px;

    }

}

.port-card:hover{


    transform:
    translateY(-10px);


    box-shadow:

    0 25px 60px rgba(0,0,0,.12);


}

@media(max-width:768px){

    .port-card{

        padding:20px 10px;

        border-radius:18px;

    }


    .port-icon{

        width:55px;

        height:55px;

        font-size:25px;

    }


    .port-card h4{

        font-size:16px;

    }


    .port-card p{

        font-size:12px;

    }

}

.port-icon{


    width:70px;

    height:70px;


    margin:auto;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    background:#EAF4FB;


    font-size:35px;


}



.port-card h4{


    margin-top:20px;


    color:#06283D;


    font-weight:700;


}



.port-card p{


    color:#D4A017;


    font-size:14px;


    font-weight:600;


}



/* =====================================
   FOOTER
===================================== */


.apa-footer{

    background:var(--apa-navy);

    color:white;

    padding:70px 0;

}



.apa-footer h4,
.apa-footer h6{

    font-weight:700;

}



.apa-footer p{

    color:rgba(255,255,255,.65);

}



/* =====================================
   MOBILE
===================================== */


@media(max-width:768px){


.hero{

height:750px;

}



.hero h1{

font-size:40px;

}



.statistics{

margin-top:0;

}



.statistics .container{

border-radius:0;

}



.section h2{

font-size:32px;

}


}

.apa-logo{

    height:65px;

    width:auto;

    object-fit:contain;
	
	transition:.35s;

}


/* =================================
   NAVBAR OVERLAY + SCROLL EFFECT
================================= */


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


.apa-navbar-glass{

    top:50px;

    left:0;

    transform:none;

    width:100%;

    max-width:none;


    background:
    rgba(255,255,255,.18);


    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);


    border-top:
    1px solid rgba(255,255,255,.25);


    border-bottom:
    1px solid rgba(255,255,255,.25);


    border-left:none;

    border-right:none;


    box-shadow:

    0 10px 30px rgba(0,0,0,.12);


    padding:12px 0;

}



.apa-navbar-glass .nav-link{

    color:white!important;

    font-weight:600;

    font-size:15px;

}



.apa-navbar-glass .nav-link:hover{

    color:#F5D06F!important;

}

/* =================================
   ACTIVE NAVIGATION
================================= */

.apa-navbar-glass .nav-link.active{

    color:#F5D06F!important;

    font-weight:700;

}


.apa-navbar-glass .nav-link.active::after{

    transform:scaleX(1);

}


/* ===============================
   SCROLLED ACTIVE NAVIGATION
================================ */

.apa-navbar-glass.scrolled .nav-link.active{

    color:#D4A017!important;

}

.apa-navbar-glass .nav-link.active{
    color:#F5D06F!important;
    font-weight:700;
}

.apa-navbar-glass .nav-link.active::after{
    transform:scaleX(1);
}

.apa-navbar-glass.scrolled .nav-link.active{
    color:#D4A017!important;
}

.apa-navbar-glass .btn-login{


    background:white;

    color:#06283D!important;


    border-radius:30px;

    padding:8px 22px;

    font-size:14px;

    font-weight:700;


}



/* ==========================
   WHEN SCROLL
========================== */


.apa-navbar-overlay.scrolled{

    top:0;

    background:white;

    box-shadow:
    0 5px 25px rgba(0,0,0,.08);

}




.apa-navbar-overlay.scrolled .nav-link{


    color:#374151!important;


}



.apa-navbar-overlay.scrolled .navbar-brand{


    color:#06283D!important;


}




.apa-navbar-overlay.scrolled .apa-logo{


    height:50px;


}




.apa-navbar-overlay.scrolled .btn-login{


    background:#06283D;


    color:white!important;


    border-color:#06283D;


}

.hero-slider{
	
	position:relative;
	
    height:40vh;

    min-height:420px;

    max-height:550px;

}



.carousel,
.carousel-inner,
.carousel-item{

height:100%;

}



.carousel-item img{

width:100%;

height:100%;

object-fit:cover;

}



.carousel-item::after{

content:"";

position:absolute;

inset:0;


background:
linear-gradient(
90deg,
rgba(6,40,61,.85),
rgba(6,40,61,.25)
);


}



.hero-caption{

position:absolute;

top:50%;

left:7%;

transform:translateY(-50%);

max-width:700px;

color:white;

z-index:2;

}



.hero-caption span{

color:#D4A017;

letter-spacing:3px;

font-weight:700;

}



.hero-caption h1{

font-size:clamp(16px,4vw,28px);

font-weight:800;

line-height:1.15;

margin-top:50px; margin-left:50px
}



.hero-caption p{

margin-top:15px;
margin-left:50px;
font-size:14px;

max-width:600px;

color:rgba(255,255,255,.85);

}

/* ==========================
   APA LOGO HEADER BAR
========================== */


.apa-logo-header{

    height:50px;

    background:white;

    display:flex;

    align-items:center;

    position:relative;

    z-index:1100;

}



.apa-logo{

    height:45px;

    width:auto;

}

/* ================================
   SCROLL STATE
================================ */


.apa-navbar-glass.scrolled{
	
	position:fixed;
	
    top:0;

    left:0;

    transform:none;

    width:100%;

    max-width:none;

    border-radius:0;


    background:
    rgba(255,255,255,.95);


    box-shadow:
    0 5px 25px rgba(0,0,0,.12);


}


/* =================================
   SCROLL NAVBAR LOGO POSITION
================================= */


.apa-navbar-glass.scrolled .scroll-logo{

    position:absolute;

    left:25px;


    transform:translateY(-50%);

}



.apa-navbar-glass.scrolled .nav-link{

    color:#374151!important;

}



.apa-navbar-glass.scrolled .btn-login{


    background:#06283D;

    color:white!important;

}

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


.apa-navbar-glass .nav-link::after{

    content:"";

    position:absolute;

    left:2%;

    bottom:-3px;

    width:95%;

    height:2px;

    background:#D4A017;

    transform:scaleX(0);

    transition:.3s ease;

}



.apa-navbar-glass .nav-link:hover::after{

    transform:scaleX(1);

}

/* ===============================
   BRAND HEADER
================================ */


.apa-logo-header{

    height:50px;

    background:white;

    display:flex;

    align-items:center;

}



.apa-brand-area{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 40px;

}

.apa-brand-left{

    display:flex;

    align-items:center;

    gap:18px;

}

.apa-logo{

    height:50px;

    width:auto;

}


@media(max-width:768px){

    .apa-brand-area{

        padding:0 15px;

    }


    .apa-brand-text h1{

        font-size:12px;

    }


    .apa-logo{

        height:45px;

    }


    .btn-member-login{

        padding:2px 7px;

        font-size:10px;
		text-align:center

    }

}

.apa-brand-text h1{

    margin:0;

    font-size:12px;

    font-weight:700;

    color:#06283D;

    letter-spacing:-.5px;

}



.apa-brand-text span{

    display:block;

    margin-top:4px;

    font-size:7px;

    text-transform:uppercase;

    letter-spacing:2px;

    color:#D4A017;

    font-weight:600;

}

/* ===============================
   MEMBER LOGIN HEADER BUTTON
================================ */


.btn-member-login{

    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:7px 16px;


    border-radius:18px;


    background:#06283D;


    color:white!important;


    font-size:10px;


    font-weight:600;


    text-decoration:none;


    line-height:1;


    transition:.3s ease;

}


.btn-member-login:hover{

    background:#D4A017;

    color:#06283D!important;

}

.scroll-logo{
	display:none;
    opacity:0;

    transform:translateX(-15px);

    transition:.3s ease;

}


.apa-navbar-glass.scrolled .scroll-logo{

    display:block;

    opacity:1;

    transform:translateX(0);

}


.scroll-logo-img{

    height:60px;

    width:auto;

}


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


.events-section{

    padding:40px 0;

    background:#F6F8FA;

}



.section-header span{

    color:#D4A017;

    font-size:13px;

    letter-spacing:3px;

    font-weight:700;

}



.section-header h2{

    margin-top:15px;

    font-size:42px;

    font-weight:800;

    color:#06283D;

}



.section-header p{

    color:#6B7280;

    font-size:18px;

}




/* ===============================
   EVENT GRID
================================ */


.events-grid{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:25px;

}



.event-card-v2{


    background:white;

    border-radius:22px;

    padding:25px;

    display:flex;

    gap:25px;

    align-items:flex-start;


    box-shadow:

    0 15px 40px rgba(0,0,0,.06);


    transition:.3s ease;


}



.event-card-v2:hover{


    transform:translateY(-6px);


    box-shadow:

    0 25px 60px rgba(0,0,0,.12);


}



.event-date-v2{


    min-width:85px;

    height:90px;


    background:#06283D;

    border-radius:18px;


    color:white;

    text-align:center;

    padding:12px;


}



.event-date-v2 span{


    display:block;

    color:#D4A017;

    font-size:14px;

    font-weight:700;


}



.event-date-v2 strong{


    display:block;

    font-size:38px;

    line-height:1;


}




.event-content-v2 h4{


    margin:0;

    color:#06283D;

    font-size:20px;

    font-weight:700;


}



.event-content-v2 p{


    color:#6B7280;

    font-size:14px;


}



.event-content-v2 .location{


    color:#BE2630;

    font-weight:600;

}



.event-content-v2 a{


    color:#006699;

    font-weight:700;

    text-decoration:none;


}


@media(max-width:768px){

    .events-grid{

        grid-template-columns:1fr;

    }

}


.btn-event{


    display:inline-block;


    padding:12px 35px;


    border-radius:30px;


    background:#06283D;


    color:white;


    font-weight:600;


}



.btn-event:hover{


    background:#D4A017;

    color:#06283D;

}

.apa-logo-header{

    transition:.35s ease;

}


.apa-logo-header.hide-logo{

    height:0;

    overflow:hidden;

    opacity:0;

}

/* =================================
   HERO SLIDER CONTROL
================================= */


.carousel-control-prev,
.carousel-control-next{

    width:55px;

    height:55px;

    top:50%;

    transform:translateY(-50%);

    background:

    rgba(255,255,255,.15);


    backdrop-filter:blur(8px);

    border-radius:50%;


    opacity:1;


    transition:.3s ease;


}



.carousel-control-prev{

    left:35px;

}



.carousel-control-next{

    right:35px;

}




.carousel-control-prev:hover,
.carousel-control-next:hover{


    background:#D4A017;


}




.carousel-control-prev-icon,
.carousel-control-next-icon{


    width:20px;

    height:20px;


}

.carousel-indicators button{

    width:10px;

    height:10px;

    border-radius:50%;

}

/* =================================
   SCROLL DOWN INDICATOR
================================= */


.scroll-indicator{

    position:absolute;

    bottom:75px;

    left:50%;

    transform:translateX(-50%);

    z-index:10;

    display:flex;

    flex-direction:column;

    align-items:center;

    color:white;

    opacity:.85;

}

.carousel-indicators{

    bottom:20px;

}

.scroll-indicator span{

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:600;

    margin-bottom:10px;

}



.scroll-arrow{

    width:35px;

    height:35px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.6);

    display:flex;

    align-items:center;

    justify-content:center;


    animation:
    scrollBounce 1.8s infinite;

}



.scroll-arrow i{

    font-size:18px;

}



@keyframes scrollBounce{


    0%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(8px);

    }


    100%{

        transform:translateY(0);

    }


}

.scroll-indicator{
    cursor:pointer;
}

#latestNews{

    scroll-margin-top:100px;

}

@media(max-width:1200px){

    .port-grid{

        overflow-x:auto;

        justify-content:flex-start;

        padding-bottom:20px;

    }


    .country-card{

        flex-shrink:0;

    }

}

/* ===============================
   APA AT A GLANCE
================================ */


.apa-glance{

    padding:35px 0;

    background:white;

}



.glance-wrapper{

    background:#06283D;

    border-radius:20px;

    padding:25px 40px;

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    box-shadow:

    0 15px 40px rgba(0,0,0,.12);

}



.glance-item{

    text-align:center;

    border-right:

    1px solid rgba(255,255,255,.2);

}



.glance-item:last-child{

    border-right:none;

}



.glance-item h2{

    margin:0;

    color:white;

    font-size:38px;

    font-weight:800;

}



.glance-item span{

    color:#D4A017;

    font-size:13px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

}



@media(max-width:768px){


    .glance-wrapper{

        grid-template-columns:
        repeat(2,1fr);

        gap:20px;

        padding:25px;

    }


    .glance-item{

        border:none;

    }


}

/* ===============================
   MINI APA GLANCE
================================ */




/* =================================
   BACK TO TOP
================================= */

.back-to-top{

    position:fixed;

    right:5px;

    bottom:25px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#06283D;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    box-shadow:
    0 8px 25px rgba(0,0,0,.20);

    cursor:pointer;

    z-index:9998;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:
    opacity .3s ease,
    visibility .3s ease,
    transform .3s ease,
    background .3s ease;

}


.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


.back-to-top:hover{

    background:#D4A017;

    color:#06283D;

}


@media(max-width:768px){

    .back-to-top{

        right:18px;

        bottom:18px;

        width:42px;

        height:42px;

        font-size:17px;

    }

}


/* =================================
   APA HIGHLIGHTS
================================= */

.apa-highlights{

    padding:20px 0;

    background:#F6F8FA;

}


.apa-highlights .section-header{

    margin-bottom:40px;

}


.apa-highlights .section-header span{

    color:#D4A017;

    font-size:12px;

    letter-spacing:3px;

    font-weight:700;

}


.apa-highlights .section-header h2{

    margin-top:10px;

    color:#06283D;

    font-size:34px;

    font-weight:800;

}


.apa-highlights .section-header p{

    color:#6B7280;

    font-size:16px;

    margin:10px auto 0;

    max-width:650px;

}


/* ===============================
   TWO PILLARS
================================ */

.highlights-grid{

    display:grid;

    grid-template-columns:
    1.15fr .85fr;

    gap:25px;
	
	align-items:start;

}


/* ===============================
   FEATURED EVENT
================================ */

.highlight-event{

    background:#06283D;

    color:white;

    border-radius:24px;

    padding:30px;

    height:280px;

    min-height:280px;

    align-self:start;

    position:relative;

    overflow:hidden;

}


.highlight-event::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-80px;

    bottom:-100px;

    border-radius:50%;

    background:rgba(212,160,23,.12);

}

@media(max-width:900px){

    .highlight-event{

        height:auto;

        min-height:300px;

    }

}

.highlight-label{

    font-size:11px;

    letter-spacing:2px;

    font-weight:700;

    color:#D4A017;

}


.featured-event-content{

    display:flex;

    gap:25px;

    align-items:center;

    margin-top:30px;

}


.featured-date{

    width:85px;

    min-width:85px;

    height:95px;

    border-radius:18px;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.15);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}


.featured-date span{

    color:#D4A017;

    font-size:14px;

    font-weight:700;

}


.featured-date strong{

    color:white;

    font-size:38px;

    line-height:1;

}


.featured-event-info{

    position:relative;

    z-index:2;

}


.featured-event-info h3{

    margin:0;

    color:white;

    font-size:24px;

    font-weight:700;

}


.featured-event-info p{

    color:rgba(255,255,255,.65);

    font-size:14px;

    margin:8px 0;

}


.featured-event-info .event-location{

    color:#D4A017;

    font-weight:600;

}


.highlight-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:8px;

    color:#D4A017;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

}


.highlight-link:hover{

    color:white;

}

.highlight-linkMember{

    display:inline-flex;

    align-items:center;

    gap:8px;


    color:#D4A017;

    font-size:13px;

    font-weight:700;

    text-decoration:none;
	

}


.highlight-linkMember:hover{

    color:black;

}

/* ===============================
   MEMBER NETWORK
================================ */

/* =================================
   COMPACT APA AT A GLANCE
================================= */

.highlight-network .network-stats{

    width:100%;

    margin:15px auto 0;

    padding:8px 5px;

    background:#06283D;

    border-radius:12px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

}


.highlight-network .network-stat{

    position:relative;

    text-align:center;

    padding:3px 5px;

}

.highlight-network .highlight-linkMember{

    display:flex;

    width:fit-content;

    margin:24px auto 0;

    align-items:center;

    justify-content:center;

    gap:8px;

}

.highlight-network .network-stat:not(:last-child)::after{

    content:"";

    position:absolute;

    right:0;

    top:10%;

    height:80%;

    width:1px;

    background:rgba(255,255,255,.18);

}


.highlight-network .network-stat strong{

    display:block;

    color:white;

    font-size:19px;

    line-height:1;

    font-weight:800;

}


.highlight-network .network-stat span{

    display:block;

    margin-top:4px;

    color:#D4A017;

    font-size:7px;

    line-height:1.2;

    text-transform:uppercase;

    letter-spacing:.7px;

}

.highlight-network h3{

    margin:8px 0 0;

    color:#06283D;

    font-size:23px;

    font-weight:800;

    text-align:center;

}

.highlight-network .highlight-label{

    text-align:center;

    font-size:10px;

    letter-spacing:2.5px;

}

@media(max-width:576px){

    .highlight-network .network-stats{

        width:90%;

        padding:7px 3px;

    }


    .highlight-network .network-stat strong{

        font-size:17px;

    }


    .highlight-network .network-stat span{

        font-size:6.5px;

    }

}



.highlight-flags{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:8px;

    margin:22px auto 18px;

    max-width:430px;

}


.highlight-flags img{

    width:34px;

    height:34px;

    border-radius:50%;

    object-fit:cover;

    box-shadow:
    0 4px 10px rgba(0,0,0,.15);

    transition:.25s ease;

}


.highlight-flags img:hover{

    transform:translateY(-3px);

}




@media(max-width:900px){

    .highlights-grid{

        grid-template-columns:1fr;

    }

}


@media(max-width:576px){

    .apa-highlights{

        padding:45px 0;

    }


    .apa-highlights .section-header h2{

        font-size:27px;

    }


    .featured-event-content{

        gap:15px;

    }


    .featured-date{

        width:70px;

        min-width:70px;

        height:80px;

    }


    .featured-date strong{

        font-size:30px;

    }


    .featured-event-info h3{

        font-size:19px;

    }

}


/* =================================
   INTERACTIVE ASEAN PORT MAP
================================= */


.port-network{

    padding:55px 0;

    background:#F6F8FA;

}


.network-map-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:25px;

}


.network-label{

    color:#D4A017;

    font-size:12px;

    letter-spacing:3px;

    font-weight:700;

}


.network-title{

    margin-top:8px;

    margin-bottom:5px;

    color:#06283D;

    font-size:36px;

    font-weight:800;

}


.network-desc{

    margin:0;

    color:#6B7280;

    font-size:15px;

}


/* COUNTRY FILTER */


.map-filter select{

    min-width:180px;

    padding:10px 35px 10px 15px;

    border:1px solid rgba(6,40,61,.12);

    border-radius:25px;

    background:white;

    color:#06283D;

    font-size:13px;

    font-weight:600;

    outline:none;

}


/* MAP CONTAINER */


.map-wrapper{

    position:relative;

    overflow:hidden;

    width:100%;

    height:400px;

    margin:0 auto;

    border-radius:24px;

    background:#DCEEF7;

    border:1px solid rgba(6,40,61,.08);

    box-shadow:
    0 20px 55px rgba(6,40,61,.10);

}


#apaPortMap{

    width:100%;

    height:100%;

}


/* RESET MAP */


.map-reset{

    position:absolute;

    right:20px;

    bottom:20px;

    z-index:1000;

    border:none;

    padding:9px 15px;

    border-radius:20px;

    background:white;

    color:#06283D;

    font-size:12px;

    font-weight:700;

    box-shadow:

    0 6px 20px rgba(0,0,0,.15);

}


.map-reset:hover{

    background:#D4A017;

}


/* CUSTOM MARKER */


.apa-map-marker{

    width:18px;

    height:18px;

    border-radius:50% 50% 50% 0;

    background:#BE2630;

    border:3px solid white;

    box-shadow:

    0 4px 12px rgba(0,0,0,.30);

    transform:rotate(-45deg);

}


.apa-map-marker-inner{

    width:5px;

    height:5px;

    border-radius:50%;

    background:white;

    position:absolute;

    top:4px;

    left:4px;

}


/* POPUP */


.apa-popup{

    min-width:210px;

}


.apa-popup-label{

    color:#D4A017;

    font-size:10px;

    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;

}


.apa-popup h4{

    margin:5px 0;

    color:#06283D;

    font-size:17px;

    font-weight:800;

}


.apa-popup p{

    margin:3px 0;

    color:#6B7280;

    font-size:12px;

}


.apa-popup .popup-country{

    color:#BE2630;

    font-weight:700;

}


/* LEAFLET OVERRIDE */


.leaflet-control-zoom{

    border:none!important;

    box-shadow:

    0 6px 20px rgba(0,0,0,.12)!important;

}


.leaflet-control-zoom a{

    color:#06283D!important;

}


.leaflet-popup-content-wrapper{

    border-radius:16px;

    box-shadow:

    0 15px 40px rgba(0,0,0,.18);

}


.leaflet-popup-tip{

    box-shadow:none;

}


/* NETWORK STATS */


.port-network .network-stats{

    width:65%;

    margin:20px auto 0;

    padding:10px 15px;

    background:#06283D;

    border-radius:14px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    box-shadow:none;

}


.port-network .network-stat{

    position:relative;

    text-align:center;

}


.port-network .network-stat:not(:last-child)::after{

    content:"";

    position:absolute;

    right:0;

    top:10%;

    height:80%;

    width:1px;

    background:rgba(255,255,255,.18);

}


.port-network .network-stat strong{

    display:block;

    color:white;

    font-size:22px;

    line-height:1;

    font-weight:800;

}


.port-network .network-stat span{

    display:block;

    margin-top:5px;

    color:#D4A017;

    font-size:8px;

    text-transform:uppercase;

    letter-spacing:.8px;

}


@media(max-width:768px){

    .network-map-header{

        display:block;

    }


    .map-filter{

        margin-top:15px;

    }


    .map-filter select{

        width:100%;

    }


    .map-wrapper{

        width:100%;

        height:360px;

        border-radius:18px;

    }


    .port-network .network-stats{

        width:100%;

    }


    .port-network .network-stat strong{

        font-size:19px;

    }

}

.apa-network-line{

    stroke-dasharray:6 8;

    animation:
    apaNetworkFlow 3s linear infinite;

}


@keyframes apaNetworkFlow{

    to{

        stroke-dashoffset:-28;

    }

}

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


.highlight-news-single{

    margin-top:20px;

    height:155px;

    display:flex;

    background:white;

    border-radius:20px;

    overflow:hidden;

    box-shadow:
    0 12px 30px rgba(0,0,0,.06);

    transition:.3s ease;

}


.highlight-news-single:hover{

    transform:translateY(-4px);

    box-shadow:
    0 18px 40px rgba(0,0,0,.10);

}


.highlight-news-single img{

    width:210px;

    height:100%;

    object-fit:cover;

}


.highlight-news-content{

    padding:18px 22px;

}


.highlight-news-content span{

    color:#D4A017;

    font-size:9px;

    font-weight:700;

    letter-spacing:2px;

}


.highlight-news-content h3{

    margin:5px 0;

    color:#06283D;

    font-size:17px;

    font-weight:700;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    overflow:hidden;

    text-overflow:ellipsis;

}


.highlight-news-content small{

    color:#6B7280;

    font-size:11px;

}


.highlight-news-content a{

    display:block;

    margin-top:7px;

    color:#D4A017;

    font-size:11px;

    font-weight:700;

    text-decoration:none;

}

.highlight-news-grid{

    display:flex;

    flex-direction:column;

    gap:18px;

}


.highlight-news-card{

    display:flex;

    width:100%;

    min-height:150px;

    background:white;

    border-radius:20px;

    overflow:hidden;

    border:1px solid rgba(6,40,61,.07);

    box-shadow:
    0 12px 35px rgba(0,0,0,.06);

    transition:.3s ease;

}


.highlight-news-card:hover{

    transform:translateY(-4px);

}


.highlight-news-image{

    width:230px;

    min-width:230px;

    height:150px;

    overflow:hidden;

}

.highlight-news-body{

    flex:1;

    padding:20px 25px;

}

.highlight-news-card img{

    width:100%;

    height:75px;

    object-fit:cover;

}


.highlight-news-card .highlight-news-content{

    padding:10px 15px;

}


.highlight-news-card h3{

    margin:3px 0;

    font-size:13px;

    line-height:1.25;

}


.highlight-news-card small{

    font-size:9px;

}

@media(max-width:900px){

    .highlight-event{

        height:auto;

        min-height:280px;

    }


    .highlight-news-single{

        height:auto;

        min-height:140px;

    }


}


@media(max-width:576px){

    .highlight-news-grid{

        grid-template-columns:1fr;

    }


    .highlight-news-single img{

        width:130px;

    }

    .highlight-news-card{

        display:block;

    }


    .highlight-news-image{

        width:100%;

        min-width:0;

        height:180px;

    }


    .highlight-news-body{

        padding:18px;

    }

}


/* =================================
   GLOWING ASEAN PORT MARKERS
================================= */

.apa-glow-marker{

    position:relative;

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.apa-glow-core{

    width:9px;

    height:9px;

    border-radius:50%;

    background:#F5D06F;

    border:2px solid white;

    box-shadow:

        0 0 6px #F5D06F,

        0 0 14px #D4A017,

        0 0 25px rgba(212,160,23,.9);

    position:relative;

    z-index:3;

}


.apa-glow-ring{

    position:absolute;

    width:30px;

    height:30px;

    border-radius:50%;

    border:1px solid rgba(245,208,111,.7);

    box-shadow:

        0 0 15px rgba(212,160,23,.5);

    animation:

        apaMarkerPulse 2s ease-out infinite;

}


@keyframes apaMarkerPulse{

    0%{

        transform:scale(.35);

        opacity:1;

    }

    70%{

        transform:scale(1);

        opacity:.15;

    }

    100%{

        transform:scale(1.15);

        opacity:0;

    }

}

/* =================================
   MAP GRID EFFECT
================================= */

#apaPortMap{

    background:

        radial-gradient(
            circle at center,
            rgba(0,150,180,.12),
            transparent 60%
        );

}


#apaPortMap::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:400;

    background-image:

        linear-gradient(
            rgba(80,200,220,.08) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(80,200,220,.08) 1px,
            transparent 1px
        );

    background-size:
        50px 50px;

    mix-blend-mode:
        screen;

}

.map-wrapper{

    background:#061C2B;

}


#apaPortMap{

    background:#061C2B;

}

.map-wrapper{

    box-shadow:

        0 20px 60px rgba(0,0,0,.18),

        inset 0 0 50px rgba(0,150,190,.08);

}

.news-card-content{

    padding:5px 22px;

    display:flex;

    flex-direction:column;

    flex:1;

}


.news-card-content h5{

    margin:0;

    min-height:49px;

    font-size:18px;

    line-height:1.35;

    font-weight:700;

    color:#06283D;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    overflow:hidden;

}


.news-card-content small{

    margin-top:10px;

    padding:0;

    color:var(--apa-red);

    font-size:10px;

    font-weight:600;

}

@media(max-width:768px){

    .card-news{

        height:370px;

    }

}

/* =================================
   INNER PAGE
================================= */


.inner-page{

    background:#F6F8FA;

    min-height:70vh;

}



/* =================================
   INNER PAGE HERO
================================= */

.inner-page-hero{

    padding:70px 0 65px;

    background:

    linear-gradient(
        135deg,
        #06283D,
        #0B405B
    );

    color:white;

}


.inner-page-label{

    color:#D4A017;

    font-size:11px;

    font-weight:700;

    letter-spacing:3px;

}


.inner-page-hero h1{

    margin:10px 0 10px;

    font-size:46px;

    font-weight:800;

}


.inner-page-hero p{

    max-width:650px;

    margin:0;

    color:
    rgba(255,255,255,.72);

    font-size:16px;

    line-height:1.6;

}



/* =================================
   INNER CONTENT
================================= */

.inner-page-content{

    padding-top:20px;

    padding-bottom:70px;

}



/* =================================
   PAGE HEADER
================================= */

.news-page-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    margin-bottom:30px;

}


.news-page-header span{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:2.5px;

}


.news-page-header h2{

    margin:6px 0 0;

    color:#06283D;

    font-size:30px;

    font-weight:800;

}


.news-count{

    color:#6B7280;

    font-size:12px;

    font-weight:600;

}



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

.news-page-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:25px;

}


.news-page-card{

    background:white;

    border-radius:20px;

    overflow:hidden;

    box-shadow:
    0 12px 35px rgba(0,0,0,.06);

    transition:.3s ease;

}


.news-page-card:hover{

    transform:translateY(-7px);

    box-shadow:
    0 20px 45px rgba(0,0,0,.10);

}



/* =================================
   IMAGE
================================= */

.news-page-image{

    width:100%;

    height:220px;

    overflow:hidden;

}


.news-page-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.4s ease;

}


.news-page-card:hover
.news-page-image img{

    transform:scale(1.04);

}



/* =================================
   BODY
================================= */

.news-page-body{

    padding:22px 24px 25px;

}


.news-category{

    color:#D4A017;

    font-size:9px;

    font-weight:700;

    letter-spacing:2px;

}


.news-page-body h3{

    margin:8px 0 10px;

    color:#06283D;

    font-size:19px;

    line-height:1.35;

    font-weight:700;


    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    overflow:hidden;

}


.news-page-body small{

    color:#6B7280;

    font-size:11px;

}


.news-page-body a{

    display:flex;

    align-items:center;

    gap:7px;

    margin-top:14px;

    color:#D4A017;

    font-size:12px;

    font-weight:700;

    text-decoration:none;

}


.news-page-body a:hover{

    color:#06283D;

}



/* =================================
   RESPONSIVE
================================= */

@media(max-width:992px){

    .news-page-grid{

        grid-template-columns:
        repeat(2,1fr);

    }

}


@media(max-width:768px){

    .inner-page-hero{

        padding:55px 0;

    }


    .inner-page-hero h1{

        font-size:36px;

    }


    .news-page-header{

        align-items:flex-start;

    }


    .news-page-grid{

        grid-template-columns:1fr;

    }

}


@media(max-width:576px){

    .inner-page-content{

        padding-top:35px;

    }


    .news-page-header h2{

        font-size:26px;

    }


    .news-page-image{

        height:200px;

    }

}

/* =================================
   NEWS DETAIL PAGE
================================= */


.news-detail-page{

    background:#F6F8FA;

    padding:45px 0 80px;

    min-height:70vh;

}


/* ===============================
   BREADCRUMB
================================ */

.news-breadcrumb{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:10px;
	margin-top:10px;

    font-size:11px;

}


.news-breadcrumb a{

    color:#D4A017;

    font-weight:700;

    text-decoration:none;

}


.news-breadcrumb i{

    color:#9CA3AF;

    font-size:9px;

}


.news-breadcrumb span{

    color:#6B7280;

}


/* ===============================
   HEADER
================================ */

.news-detail-header{

    max-width:900px;

    margin:0 auto 35px;

    text-align:center;

}


.news-detail-category{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:2.5px;

}


.news-detail-header h1{

    margin:12px 0 18px;

    color:#06283D;

    font-size:46px;

    line-height:1.15;

    font-weight:800;

}


.news-detail-meta{

    display:flex;

    justify-content:left;

    align-items:left;

    gap:20px;

    color:#6B7280;

    font-size:12px;

}


.news-detail-meta span{

    display:flex;

    align-items:center;

    gap:6px;

}


.news-detail-meta i{

    color:#D4A017;

}


/* ===============================
   FEATURED IMAGE
================================ */

.news-detail-image{

    max-width:1200px;

    height:480px;

    margin:0 auto;

    border-radius:24px;

    overflow:hidden;

    box-shadow:
    0 20px 55px rgba(0,0,0,.10);

}


.news-detail-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}


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

.news-detail-layout{

    max-width:1100px;

    margin:45px auto 0;

}


.news-detail-content{

    background:white;

    border-radius:22px;

    padding:45px 55px;

    box-shadow:
    0 12px 35px rgba(0,0,0,.05);

}


.news-detail-excerpt{

    color:#06283D;

    font-size:18px;

    line-height:1.7;

    font-weight:600;

    margin-bottom:30px;

}


.news-detail-content p:not(.news-detail-excerpt){

    color:#4B5563;

    font-size:16px;

    line-height:1.9;

    margin-bottom:22px;

}


/* ===============================
   BACK
================================ */

.news-detail-back{

    margin-top:40px;

    padding-top:25px;

    border-top:
    1px solid #E5E7EB;

}


.news-detail-back a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#D4A017;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

}


.news-detail-back a:hover{

    color:#06283D;

}


/* ===============================
   NOT FOUND
================================ */

.news-not-found{

    max-width:700px;

    margin:80px auto;

    text-align:center;

}


.news-not-found span{

    color:#D4A017;

    font-size:11px;

    font-weight:700;

    letter-spacing:3px;

}


.news-not-found h1{

    margin:12px 0;

    color:#06283D;

    font-size:40px;

    font-weight:800;

}


.news-not-found p{

    color:#6B7280;

}


.news-not-found a{

    display:inline-block;

    margin-top:20px;

    color:#D4A017;

    font-weight:700;

    text-decoration:none;

}


/* ===============================
   RESPONSIVE
================================ */

@media(max-width:768px){

    .news-detail-page{

        padding:40px 0 60px;

    }


    .news-detail-header h1{

        font-size:34px;

    }


    .news-detail-meta{

        flex-direction:column;

        gap:8px;

    }


    .news-detail-image{

        height:300px;

        border-radius:18px;

    }


    .news-detail-content{

        padding:30px 25px;

        border-radius:18px;

    }


    .news-detail-excerpt{

        font-size:16px;

    }


    .news-detail-content p:not(.news-detail-excerpt){

        font-size:15px;

        line-height:1.8;

    }

}

/* =================================
   ARTICLE LISTING
================================= */

.article-list-page{

    background:#F6F8FA;

    padding:20px 0 70px;

    min-height:70vh;

}


/* ===============================
   HEADER
================================ */

.article-page-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    margin-bottom:30px;

}


.article-page-header > div:first-child span{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:2.5px;

}


.article-page-header h2{

    margin:6px 0 0;

    color:#06283D;

    font-size:30px;

    font-weight:800;

}


.article-count{

    color:#6B7280;

    font-size:12px;

    font-weight:600;

}


/* ===============================
   GRID
================================ */

.article-page-grid{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:25px;

}


/* ===============================
   CARD
================================ */

.article-page-card{

    background:white;

    border-radius:22px;

    overflow:hidden;

    box-shadow:
    0 12px 35px rgba(0,0,0,.06);

    display:flex;

    transition:.3s ease;

}


.article-page-card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 20px 45px rgba(0,0,0,.10);

}


/* ===============================
   IMAGE
================================ */

.article-page-image{

    width:230px;

    min-width:230px;

    overflow:hidden;

}


.article-page-image img{

    width:100%;

    height:100%;

    min-height:260px;

    object-fit:cover;

    display:block;

    transition:.4s ease;

}


.article-page-card:hover
.article-page-image img{

    transform:scale(1.05);

}


/* ===============================
   BODY
================================ */

.article-page-body{

    padding:25px;

    display:flex;

    flex-direction:column;

    flex:1;

}


.article-category{

    color:#D4A017;

    font-size:9px;

    font-weight:700;

    letter-spacing:2px;

}


.article-page-body h3{

    margin:9px 0 10px;

    color:#06283D;

    font-size:21px;

    line-height:1.3;

    font-weight:800;

}


.article-page-body p{

    margin:0;

    color:#6B7280;

    font-size:13px;

    line-height:1.6;

}


.article-page-meta{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:18px;

    color:#6B7280;

    font-size:10px;

}


.article-page-meta span:first-child{

    color:#BE2630;

    font-weight:600;

}


.article-read-link{

    display:inline-flex;

    align-items:center;

    gap:7px;

    margin-top:auto;

    padding-top:18px;

    color:#D4A017;

    font-size:12px;

    font-weight:700;

    text-decoration:none;

}


.article-read-link:hover{

    color:#06283D;

}


/* ===============================
   RESPONSIVE
================================ */

@media(max-width:992px){

    .article-page-grid{

        grid-template-columns:1fr;

    }

}


@media(max-width:768px){

    .article-page-header{

        align-items:flex-start;

    }


    .article-page-card{

        display:block;

    }


    .article-page-image{

        width:100%;

        min-width:0;

        height:220px;

    }


    .article-page-image img{

        min-height:0;

    }

}


@media(max-width:576px){

    .article-list-page{

        padding:40px 0 60px;

    }


    .article-page-header h2{

        font-size:26px;

    }


    .article-page-body{

        padding:20px;

    }


    .article-page-body h3{

        font-size:19px;

    }

}

/* =================================
   ARTICLE DETAIL
================================= */


.article-breadcrumb{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:25px;

    font-size:11px;

}


.article-breadcrumb a{

    color:#D4A017;

    font-weight:700;

    text-decoration:none;

}


.article-breadcrumb i{

    color:rgba(255,255,255,.45);

    font-size:9px;

}


.article-breadcrumb span{

    color:rgba(255,255,255,.60);

}


.article-detail-category{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:3px;

}


.article-detail-title{

    max-width:1000px;

    margin:12px 0 18px;

    color:white;

    font-size:46px;

    line-height:1.15;

    font-weight:800;

}


.article-detail-meta{

    display:flex;

    align-items:center;

    gap:20px;

    color:rgba(255,255,255,.68);

    font-size:12px;

}


.article-detail-meta span{

    display:flex;

    align-items:center;

    gap:6px;

}


.article-detail-meta i{

    color:#D4A017;

}



/* =================================
   ARTICLE CONTENT PAGE
================================= */


.article-detail-page{

    background:#F6F8FA;

    padding:25px 0 80px;

    min-height:70vh;

}


.article-detail-image{

    max-width:1200px;

    height:480px;

    margin:0 auto;

    border-radius:24px;

    overflow:hidden;

    box-shadow:
    0 20px 55px rgba(0,0,0,.10);

}


.article-detail-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


.article-detail-layout{

    max-width:1100px;

    margin:45px auto 0;

}


.article-detail-content{

    background:white;

    border-radius:22px;

    padding:45px 55px;

    box-shadow:
    0 12px 35px rgba(0,0,0,.05);

}


.article-detail-excerpt{

    color:#06283D;

    font-size:19px;

    line-height:1.7;

    font-weight:600;

    margin-bottom:30px;

}


.article-detail-content p{

    color:#4B5563;

    font-size:16px;

    line-height:1.9;

    margin-bottom:22px;

}


.article-detail-content h2{

    margin:35px 0 15px;

    color:#06283D;

    font-size:25px;

    font-weight:800;

}


.article-detail-content h3{

    margin:30px 0 12px;

    color:#06283D;

    font-size:20px;

    font-weight:700;

}



/* =================================
   BACK TO ARTICLES
================================= */


.article-detail-back{

    margin-top:40px;

    padding-top:25px;

    border-top:
    1px solid #E5E7EB;

}


.article-detail-back a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#D4A017;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

}


.article-detail-back a:hover{

    color:#06283D;

}



/* =================================
   NOT FOUND
================================= */


.article-not-found{

    max-width:700px;

    margin:80px auto;

    text-align:center;

}


.article-not-found span{

    color:#D4A017;

    font-size:11px;

    font-weight:700;

    letter-spacing:3px;

}


.article-not-found h1{

    margin:12px 0;

    color:#06283D;

    font-size:40px;

    font-weight:800;

}


.article-not-found p{

    color:#6B7280;

}


.article-not-found a{

    display:inline-block;

    margin-top:20px;

    color:#D4A017;

    font-weight:700;

    text-decoration:none;

}



/* =================================
   RESPONSIVE
================================= */


@media(max-width:768px){

    .article-detail-title{

        font-size:34px;

    }


    .article-detail-meta{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }


    .article-detail-image{

        height:300px;

        border-radius:18px;

    }


    .article-detail-content{

        padding:30px 25px;

        border-radius:18px;

    }


    .article-detail-excerpt{

        font-size:17px;

    }


    .article-detail-content p{

        font-size:15px;

        line-height:1.8;

    }

}

/* =================================
   EVENTS LISTING PAGE
================================= */

.events-page{

    background:#F6F8FA;

    padding:55px 0 80px;

    min-height:70vh;

}


/* ===============================
   HEADER
================================ */

.events-page-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    margin-bottom:25px;

}


.events-page-header span{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:2.5px;

}


.events-page-header h2{

    margin:6px 0 0;

    color:#06283D;

    font-size:30px;

    font-weight:800;

}


.events-count{

    color:#6B7280;

    font-size:12px;

    font-weight:600;

}


/* ===============================
   FILTERS
================================ */

.events-filters{

    display:flex;

    align-items:flex-end;

    gap:15px;

    padding:18px;

    margin-bottom:30px;

    background:white;

    border-radius:18px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

}


.event-filter{

    display:flex;

    flex-direction:column;

    gap:6px;

}


.event-filter label{

    color:#6B7280;

    font-size:10px;

    font-weight:700;

}


.event-filter select{

    min-width:170px;

    padding:10px 35px 10px 14px;

    border:1px solid #E5E7EB;

    border-radius:12px;

    background:white;

    color:#06283D;

    font-size:12px;

    font-weight:600;

    outline:none;

}


.event-filter select:focus{

    border-color:#D4A017;

}


.events-reset{

    padding:10px 15px;

    color:#BE2630;

    font-size:11px;

    font-weight:700;

    text-decoration:none;

}


.events-reset:hover{

    color:#06283D;

}


/* ===============================
   EVENT GRID
================================ */

.events-page-grid{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:20px;

}


/* ===============================
   EVENT CARD
================================ */

.events-page-card{

    display:flex;

    gap:22px;

    padding:25px;

    background:white;

    border-radius:20px;

    box-shadow:
    0 12px 35px rgba(0,0,0,.06);

    transition:.3s ease;

}


.events-page-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 20px 45px rgba(0,0,0,.10);

}


/* ===============================
   DATE
================================ */

.event-page-date{

    width:75px;

    min-width:75px;

    height:85px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:#06283D;

}


.event-page-date span{

    color:#D4A017;

    font-size:12px;

    font-weight:700;

}


.event-page-date strong{

    color:white;

    font-size:32px;

    line-height:1;

}


/* ===============================
   BODY
================================ */

.event-page-body{

    flex:1;

}


.event-page-tags{

    display:flex;

    gap:7px;

    margin-bottom:8px;

}


.event-page-tags span{

    padding:4px 8px;

    border-radius:10px;

    background:#EAF4FB;

    color:#006699;

    font-size:8px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.7px;

}


.event-page-body h3{

    margin:0 0 8px;

    color:#06283D;

    font-size:20px;

    line-height:1.3;

    font-weight:800;

}


.event-page-location{

    margin-bottom:8px;

    color:#BE2630;

    font-size:12px;

    font-weight:600;

}


.event-page-body p{

    margin:0;

    color:#6B7280;

    font-size:12px;

    line-height:1.6;

}


.event-page-link{

    display:inline-flex;

    align-items:center;

    gap:7px;

    margin-top:14px;

    color:#D4A017;

    font-size:12px;

    font-weight:700;

    text-decoration:none;

}


.event-page-link:hover{

    color:#06283D;

}


/* ===============================
   EMPTY STATE
================================ */

.events-empty{

    padding:70px 20px;

    text-align:center;

    background:white;

    border-radius:20px;

}


.events-empty i{

    color:#D4A017;

    font-size:40px;

}


.events-empty h3{

    margin:15px 0 5px;

    color:#06283D;

}


.events-empty p{

    color:#6B7280;

    font-size:13px;

}


.events-empty a{

    display:inline-block;

    margin-top:15px;

    color:#D4A017;

    font-size:12px;

    font-weight:700;

    text-decoration:none;

}


/* ===============================
   RESPONSIVE
================================ */

@media(max-width:900px){

    .events-page-grid{

        grid-template-columns:1fr;

    }


    .events-filters{

        flex-wrap:wrap;

    }

}


@media(max-width:576px){

    .events-page{

        padding:40px 0 60px;

    }


    .events-page-header{

        align-items:flex-start;

    }


    .events-page-header h2{

        font-size:26px;

    }


    .events-filters{

        display:grid;

        grid-template-columns:1fr;

    }


    .event-filter select{

        width:100%;

    }


    .events-page-card{

        padding:20px;

        gap:15px;

    }


    .event-page-date{

        width:65px;

        min-width:65px;

        height:75px;

    }


    .event-page-date strong{

        font-size:28px;

    }


    .event-page-body h3{

        font-size:17px;

    }

}

/* =================================
   EVENT DETAIL
================================= */

.event-breadcrumb{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:25px;

    font-size:11px;

}


.event-breadcrumb a{

    color:#D4A017;

    font-weight:700;

    text-decoration:none;

}


.event-breadcrumb i{

    color:rgba(255,255,255,.45);

    font-size:9px;

}


.event-breadcrumb span{

    color:rgba(255,255,255,.60);

}


.event-detail-category{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:3px;

}


.event-detail-title{

    max-width:1000px;

    margin:12px 0 18px;

    color:white;

    font-size:46px;

    line-height:1.15;

    font-weight:800;

}


.event-detail-meta{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

    color:rgba(255,255,255,.68);

    font-size:12px;

}


.event-detail-meta span{

    display:flex;

    align-items:center;

    gap:6px;

}


.event-detail-meta i{

    color:#D4A017;

}


/* =================================
   EVENT CONTENT
================================= */

.event-detail-page{

    background:#F6F8FA;

    padding:25px 0 80px;

    min-height:70vh;

}


.event-detail-layout{

    display:grid;

    grid-template-columns:
    minmax(0,1fr) 300px;

    gap:30px;

    align-items:start;

}


.event-detail-content{

    background:white;

    border-radius:22px;

    overflow:hidden;

    box-shadow:
    0 12px 35px rgba(0,0,0,.05);

}


.event-detail-image{

    width:100%;

    height:430px;

    overflow:hidden;

}


.event-detail-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


.event-detail-copy{

    padding:40px 45px;

}


.event-detail-excerpt{

    color:#06283D;

    font-size:18px;

    line-height:1.7;

    font-weight:600;

    margin-bottom:30px;

}


.event-detail-copy p{

    color:#4B5563;

    font-size:16px;

    line-height:1.9;

    margin-bottom:22px;

}


.event-detail-copy h2{

    margin:35px 0 15px;

    color:#06283D;

    font-size:25px;

    font-weight:800;

}


.event-detail-copy h3{

    margin:30px 0 12px;

    color:#06283D;

    font-size:20px;

    font-weight:700;

}


/* =================================
   EVENT SIDEBAR
================================= */

.event-detail-sidebar{

    position:sticky;

    top:100px;

}


.event-info-card{

    background:#06283D;

    color:white;

    border-radius:22px;

    padding:25px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.10);

}


.event-info-label{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:2px;

}


.event-info-date{

    width:90px;

    height:95px;

    margin:18px 0 25px;

    border-radius:18px;

    background:
    rgba(255,255,255,.10);

    border:
    1px solid rgba(255,255,255,.15);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}


.event-info-date span{

    color:#D4A017;

    font-size:13px;

    font-weight:700;

}


.event-info-date strong{

    color:white;

    font-size:38px;

    line-height:1;

}


.event-info-row{

    display:flex;

    gap:12px;

    padding:15px 0;

    border-top:
    1px solid rgba(255,255,255,.10);

}


.event-info-row > i{

    color:#D4A017;

    font-size:16px;

    margin-top:2px;

}


.event-info-row div{

    display:flex;

    flex-direction:column;

    gap:3px;

}


.event-info-row small{

    color:rgba(255,255,255,.50);

    font-size:9px;

    text-transform:uppercase;

    letter-spacing:1px;

}


.event-info-row strong{

    color:white;

    font-size:12px;

    font-weight:600;

}


.event-status{

    display:inline-block;

    margin-top:15px;

    padding:6px 12px;

    border-radius:20px;

    background:rgba(212,160,23,.15);

    color:#D4A017;

    font-size:9px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}


/* =================================
   BACK
================================= */

.event-detail-back{

    margin:0 45px 35px;

    padding-top:25px;

    border-top:
    1px solid #E5E7EB;

}


.event-detail-back a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#D4A017;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

}


.event-detail-back a:hover{

    color:#06283D;

}


/* =================================
   NOT FOUND
================================= */

.event-not-found{

    max-width:700px;

    margin:80px auto;

    text-align:center;

}


.event-not-found span{

    color:#D4A017;

    font-size:11px;

    font-weight:700;

    letter-spacing:3px;

}


.event-not-found h1{

    margin:12px 0;

    color:#06283D;

    font-size:40px;

    font-weight:800;

}


.event-not-found p{

    color:#6B7280;

}


.event-not-found a{

    display:inline-block;

    margin-top:20px;

    color:#D4A017;

    font-weight:700;

    text-decoration:none;

}


/* =================================
   RESPONSIVE
================================= */

@media(max-width:992px){

    .event-detail-layout{

        grid-template-columns:1fr;

    }


    .event-detail-sidebar{

        position:static;

    }


    .event-info-card{

        display:grid;

        grid-template-columns:
        repeat(2,1fr);

        gap:10px;

    }


    .event-info-label,
    .event-info-date{

        grid-column:
        1 / -1;

    }

}


@media(max-width:768px){

    .event-detail-title{

        font-size:34px;

    }


    .event-detail-meta{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }


    .event-detail-page{

        padding-top:20px;

    }


    .event-detail-image{

        height:300px;

    }


    .event-detail-copy{

        padding:30px 25px;

    }


    .event-detail-excerpt{

        font-size:16px;

    }


    .event-detail-copy p{

        font-size:15px;

        line-height:1.8;

    }


    .event-detail-back{

        margin-left:25px;

        margin-right:25px;

    }

}


@media(max-width:576px){

    .event-info-card{

        display:block;

    }


    .event-info-row{

        display:flex;

    }

}

/* =================================
   MEMBER PORTS
================================= */

.member-ports-page{

    background:#F6F8FA;

    padding:55px 0 80px;

    min-height:70vh;

}


.member-ports-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    margin-bottom:25px;

}


.member-ports-header > div:first-child span,
.member-directory-header span{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:2.5px;

}


.member-ports-header h2{

    margin:6px 0 0;

    color:#06283D;

    font-size:30px;

    font-weight:800;

}


.member-port-count{

    color:#6B7280;

    font-size:12px;

    font-weight:600;

}


/* =================================
   FILTER
================================= */

.member-port-filters{

    background:white;

    border-radius:18px;

    padding:15px;

    margin-bottom:25px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

}


.member-port-filters form{

    display:flex;

    align-items:center;

    gap:12px;

}


.port-search{

    position:relative;

    flex:1;

}


.port-search i{

    position:absolute;

    left:14px;

    top:50%;

    transform:translateY(-50%);

    color:#9CA3AF;

    font-size:13px;

}


.port-search input{

    width:100%;

    height:42px;

    padding:0 15px 0 38px;

    border:1px solid #E5E7EB;

    border-radius:12px;

    outline:none;

    font-size:12px;

    color:#06283D;

}


.port-search input:focus{

    border-color:#D4A017;

}


.port-country-filter select{

    height:42px;

    min-width:180px;

    padding:0 35px 0 14px;

    border:1px solid #E5E7EB;

    border-radius:12px;

    background:white;

    color:#06283D;

    font-size:12px;

    font-weight:600;

    outline:none;

}


.port-filter-button{

    height:42px;

    padding:0 20px;

    border:none;

    border-radius:12px;

    background:#06283D;

    color:white;

    font-size:12px;

    font-weight:700;

}


.port-filter-button:hover{

    background:#D4A017;

    color:#06283D;

}


.port-reset{

    color:#BE2630;

    font-size:11px;

    font-weight:700;

    text-decoration:none;

}


/* =================================
   MAP CARD
================================= */

.member-map-card{

    background:white;

    border-radius:24px;

    padding:20px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.06);

}


.member-map-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:15px;

}


.member-map-header span{

    color:#D4A017;

    font-size:9px;

    font-weight:700;

    letter-spacing:2px;

}


.member-map-header h3{

    margin:5px 0 0;

    color:#06283D;

    font-size:22px;

    font-weight:800;

}


.member-map-info{

    color:#6B7280;

    font-size:11px;

    font-weight:600;

}


.member-map-info i{

    color:#D4A017;

}


.member-map-wrapper{

    position:relative;

    overflow:hidden;

    width:100%;

    height:380px;

    border-radius:20px;

    background:#061C2B;

}


.member-map-wrapper #apaPortMap{

    width:100%;

    height:100%;

}


/* =================================
   DIRECTORY
================================= */

.member-directory-header{

    margin:50px 0 25px;

}


.member-directory-header h3{

    margin:6px 0 0;

    color:#06283D;

    font-size:28px;

    font-weight:800;

}


.member-port-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:20px;

}


.member-port-card{

    display:flex;

    gap:16px;

    padding:22px;

    background:white;

    border-radius:18px;

    box-shadow:
    0 12px 30px rgba(0,0,0,.05);

    transition:.3s ease;

}


.member-port-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 20px 45px rgba(0,0,0,.10);

}


.member-port-icon{

    width:58px;

    min-width:58px;

    height:58px;

    border-radius:50%;

    overflow:hidden;

    background:#EAF4FB;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:
    0 5px 15px rgba(0,0,0,.12);

}


.member-port-icon img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


.member-port-country{

    color:#D4A017;

    font-size:9px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

}


.member-port-content h4{

    margin:5px 0;

    color:#06283D;

    font-size:17px;

    font-weight:800;

}


.member-port-content p{

    margin:0;

    color:#6B7280;

    font-size:11px;

}


.member-port-content a{

    display:inline-flex;

    align-items:center;

    gap:6px;

    margin-top:10px;

    color:#D4A017;

    font-size:11px;

    font-weight:700;

    text-decoration:none;

}


.member-port-content a:hover{

    color:#06283D;

}


/* =================================
   EMPTY
================================= */

.member-port-empty{

    padding:70px 20px;

    background:white;

    border-radius:20px;

    text-align:center;

}


.member-port-empty i{

    color:#D4A017;

    font-size:38px;

}


.member-port-empty h3{

    margin:15px 0 5px;

    color:#06283D;

}


.member-port-empty p{

    color:#6B7280;

    font-size:13px;

}


.member-port-empty a{

    display:inline-block;

    margin-top:15px;

    color:#D4A017;

    font-size:12px;

    font-weight:700;

    text-decoration:none;

}


/* =================================
   RESPONSIVE
================================= */

@media(max-width:992px){

    .member-port-grid{

        grid-template-columns:
        repeat(2,1fr);

    }

}


@media(max-width:768px){

    .member-port-filters form{

        flex-direction:column;

        align-items:stretch;

    }


    .port-country-filter select,
    .port-filter-button{

        width:100%;

    }


    .member-map-header{

        display:block;

    }


    .member-map-info{

        margin-top:8px;

    }


    .member-map-wrapper{

        height:400px;

    }


    .member-port-grid{

        grid-template-columns:1fr;

    }

}


@media(max-width:576px){

    .member-ports-page{

        padding:40px 0 60px;

    }


    .member-ports-header{

        align-items:flex-start;

    }


    .member-ports-header h2{

        font-size:26px;

    }


    .member-map-card{

        padding:12px;

        border-radius:18px;

    }


    .member-map-wrapper{

        height:350px;

        border-radius:16px;

    }

}

/* =================================
   PORT DETAIL
================================= */

.port-breadcrumb{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:25px;

    font-size:11px;

}


.port-breadcrumb a{

    color:#D4A017;

    font-weight:700;

    text-decoration:none;

}


.port-breadcrumb i{

    color:rgba(255,255,255,.45);

    font-size:9px;

}


.port-breadcrumb span{

    color:rgba(255,255,255,.60);

}


.port-detail-label{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:3px;

}


.port-detail-title{

    max-width:1000px;

    margin:12px 0 18px;

    color:white;

    font-size:46px;

    line-height:1.15;

    font-weight:800;

}


.port-detail-meta{

    display:flex;

    align-items:center;

    gap:20px;

    color:rgba(255,255,255,.68);

    font-size:12px;

}


.port-detail-meta span{

    display:flex;

    align-items:center;

    gap:6px;

}


.port-detail-meta i{

    color:#D4A017;

}



/* =================================
   PORT DETAIL PAGE
================================= */

.port-detail-page{

    background:#F6F8FA;

    padding:25px 0 80px;

    min-height:70vh;

}



/* =================================
   MAP
================================= */

.port-detail-map-card{

    position:relative;

    overflow:hidden;

    width:100%;

    height:220px;

    background:#061C2B;

    border-radius:24px;

    box-shadow:

    0 20px 55px rgba(0,0,0,.12);

}


.port-detail-map{

    width:100%;

    height:100%;

}


.port-map-label{

    position:absolute;

    left:20px;

    bottom:20px;

    z-index:500;

    display:flex;

    align-items:center;

    gap:7px;

    padding:9px 14px;

    border-radius:20px;

    background:rgba(6,40,61,.90);

    color:white;

    font-size:11px;

    font-weight:600;

    box-shadow:

    0 5px 20px rgba(0,0,0,.20);

}


.port-map-label i{

    color:#D4A017;

}


.port-coordinate{

    position:absolute;

    right:20px;

    bottom:20px;

    z-index:500;

    padding:8px 12px;

    border-radius:18px;

    background:rgba(255,255,255,.92);

    color:#06283D;

    font-size:10px;

    font-weight:600;

}



/* =================================
   INFORMATION LAYOUT
================================= */

.port-detail-layout{

    display:grid;

    grid-template-columns:
    minmax(0,1fr) 300px;

    gap:25px;

    margin-top:25px;

    align-items:start;

}


.port-detail-main{

    min-width:0;

}


.port-detail-content{

    background:white;

    border-radius:22px;

    padding:35px 40px;

    box-shadow:

    0 12px 35px rgba(0,0,0,.05);

}


.port-content-label{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:2.5px;

}


.port-detail-content h2{

    margin:8px 0 15px;

    color:#06283D;

    font-size:28px;

    font-weight:800;

}


.port-detail-content p{

    color:#4B5563;

    font-size:15px;

    line-height:1.9;

    margin-bottom:20px;

}


.port-detail-description{

    color:#06283D!important;

    font-size:17px!important;

    line-height:1.7!important;

    font-weight:600;

}



/* =================================
   PORT SIDEBAR
================================= */

.port-detail-sidebar{

    position:sticky;

    top:100px;

}


.port-info-card{

    background:#06283D;

    color:white;

    border-radius:22px;

    padding:25px;

    box-shadow:

    0 15px 40px rgba(0,0,0,.10);

}


.port-info-label{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:2px;

}


.port-detail-flag{

    width:65px;

    height:65px;

    margin:18px 0 20px;

    border-radius:50%;

    overflow:hidden;

    border:3px solid rgba(255,255,255,.8);

    box-shadow:

    0 6px 18px rgba(0,0,0,.25);

}


.port-detail-flag img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


.port-info-row{

    display:flex;

    flex-direction:column;

    gap:4px;

    padding:14px 0;

    border-top:

    1px solid rgba(255,255,255,.10);

}


.port-info-row small{

    color:rgba(255,255,255,.48);

    font-size:9px;

    text-transform:uppercase;

    letter-spacing:1px;

}


.port-info-row strong{

    color:white;

    font-size:13px;

    font-weight:600;

}



/* =================================
   BACK
================================= */

.port-detail-back{

    margin-top:20px;

}


.port-detail-back a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#D4A017;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

}


.port-detail-back a:hover{

    color:#06283D;

}



/* =================================
   NOT FOUND
================================= */

.port-not-found{

    max-width:700px;

    margin:80px auto;

    text-align:center;

}


.port-not-found span{

    color:#D4A017;

    font-size:11px;

    font-weight:700;

    letter-spacing:3px;

}


.port-not-found h1{

    margin:12px 0;

    color:#06283D;

    font-size:40px;

    font-weight:800;

}


.port-not-found p{

    color:#6B7280;

}


.port-not-found a{

    display:inline-flex;

    align-items:center;

    gap:7px;

    margin-top:20px;

    color:#D4A017;

    font-weight:700;

    text-decoration:none;

}



/* =================================
   RESPONSIVE
================================= */

@media(max-width:992px){

    .port-detail-layout{

        grid-template-columns:1fr;

    }


    .port-detail-sidebar{

        position:static;

    }

}


@media(max-width:768px){

    .port-detail-title{

        font-size:34px;

    }


    .port-detail-meta{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }


    .port-detail-map-card{

        height:350px;

        border-radius:18px;

    }


    .port-detail-content{

        padding:30px 25px;

    }


    .port-detail-content h2{

        font-size:24px;

    }

}


@media(max-width:576px){

    .port-detail-map-card{

        height:300px;

    }


    .port-map-label{

        left:12px;

        bottom:12px;

    }


    .port-coordinate{

        right:12px;

        bottom:12px;

    }

}

/* =================================
   CONSTITUTION
================================= */

.constitution-breadcrumb{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:25px;

    font-size:11px;

}


.constitution-breadcrumb a{

    color:#D4A017;

    font-weight:700;

    text-decoration:none;

}


.constitution-breadcrumb i{

    color:rgba(255,255,255,.45);

    font-size:9px;

}


.constitution-breadcrumb span{

    color:rgba(255,255,255,.60);

}


.constitution-page{

    background:#F6F8FA;

    padding:45px 0 80px;

}


.constitution-layout{

    display:grid;

    grid-template-columns:260px minmax(0,1fr);

    gap:35px;

    align-items:start;

}


/* =================================
   SIDEBAR
================================= */

.constitution-sidebar{

    position:sticky;

    top:100px;

}


.constitution-nav-card{

    background:white;

    border-radius:20px;

    padding:22px;

    box-shadow:
    0 12px 35px rgba(0,0,0,.06);

}


.constitution-nav-label{

    color:#D4A017;

    font-size:9px;

    font-weight:700;

    letter-spacing:2px;

}


.constitution-nav-card h3{

    margin:6px 0 18px;

    color:#06283D;

    font-size:22px;

    font-weight:800;

}


.constitution-nav-card nav{

    display:flex;

    flex-direction:column;

}


.constitution-nav-card nav a{

    position:relative;

    display:flex;

    flex-direction:column;

    padding:13px 28px 13px 12px;

    border-top:1px solid #EEF1F4;

    text-decoration:none;

    transition:.25s ease;

}


.constitution-nav-card nav a:first-child{

    border-top:none;

}


.constitution-nav-card nav a span{

    color:#D4A017;

    font-size:8px;

    font-weight:700;

    letter-spacing:1px;

}


.constitution-nav-card nav a strong{

    margin-top:3px;

    color:#06283D;

    font-size:11px;

    line-height:1.35;

}


.constitution-nav-card nav a i{

    position:absolute;

    right:10px;

    top:50%;

    transform:translateY(-50%);

    color:#9CA3AF;

    font-size:9px;

}


.constitution-nav-card nav a:hover{

    background:#F6F8FA;

}


.constitution-nav-card nav a.active{

    background:#EAF4FB;

}


.constitution-nav-card nav a.active i{

    color:#D4A017;

}


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

.constitution-content{

    min-width:0;

}


.constitution-article{

    scroll-margin-top:100px;

    margin-bottom:35px;

    padding:35px 40px;

    background:white;

    border-radius:22px;

    box-shadow:
    0 12px 35px rgba(0,0,0,.05);

}


.constitution-article-header{

    padding-bottom:22px;

    margin-bottom:25px;

    border-bottom:
    1px solid #E5E7EB;

}


.constitution-article-header span{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:2.5px;

}


.constitution-article-header h2{

    margin:7px 0 0;

    color:#06283D;

    font-size:28px;

    font-weight:800;

}


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

.constitution-section{

    margin-bottom:30px;

}


.constitution-section:last-child{

    margin-bottom:0;

}


.constitution-section-heading{

    display:flex;

    align-items:baseline;

    gap:10px;

    margin-bottom:12px;

}


.constitution-section-heading span{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    white-space:nowrap;

}


.constitution-section-heading h3{

    margin:0;

    color:#06283D;

    font-size:17px;

    font-weight:800;

}


.constitution-section p{

    margin:0 0 14px;

    color:#4B5563;

    font-size:14px;

    line-height:1.85;

}


.constitution-section ol,
.constitution-section ul{

    margin:10px 0 18px;

    padding-left:24px;

}



.constitution-section li{

    margin-bottom:9px;

    color:#4B5563;

    font-size:14px;

    line-height:1.75;

}


.constitution-sub-intro{

    margin-top:18px!important;

    color:#06283D!important;

    font-weight:600;

}


.constitution-sub-items{

    margin:12px 0 18px;

    padding-left:18px;

    border-left:2px solid #EAF4FB;

}


.constitution-sub-items p{

    margin-bottom:10px;

}


.constitution-sub-items strong{

    color:#06283D;

}


.constitution-note{

    margin-top:15px;

    padding:14px 16px;

    border-left:3px solid #D4A017;

    background:#FFF9E8;

    color:#4B5563;

    font-size:13px;

    line-height:1.7;

}


/* =================================
   BACK
================================= */

.constitution-back{

    padding:5px 0 20px;

}


.constitution-back a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#D4A017;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

}


.constitution-back a:hover{

    color:#06283D;

}


/* =================================
   RESPONSIVE
================================= */

@media(max-width:992px){

    .constitution-layout{

        grid-template-columns:1fr;

    }


    .constitution-sidebar{

        position:static;

    }


    .constitution-nav-card nav{

        display:grid;

        grid-template-columns:
        repeat(2,1fr);

    }


    .constitution-nav-card nav a{

        border:1px solid #EEF1F4;

    }

}


@media(max-width:768px){

    .constitution-page{

        padding:35px 0 60px;

    }


    .constitution-article{

        padding:28px 22px;

        border-radius:18px;

    }


    .constitution-article-header h2{

        font-size:24px;

    }


    .constitution-section-heading{

        align-items:flex-start;

    }


    .constitution-section-heading h3{

        font-size:16px;

    }


    .constitution-section p,
    .constitution-section li{

        font-size:13px;

        line-height:1.8;

    }


    .constitution-nav-card nav{

        grid-template-columns:1fr;

    }

}


/* =================================
   ABOUT APA
================================= */

.about-apa-page{

    background:#F6F8FA;

    padding:55px 0 80px;

}


/* =================================
   INTRO
================================= */

.about-intro{

    max-width:850px;

    margin:0 auto 50px;

    text-align:center;

}


.about-intro > span{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:3px;

}


.about-intro h2{

    margin:8px 0 18px;

    color:#06283D;

    font-size:34px;

    font-weight:800;

}


.about-intro p{

    margin:0 auto 12px;

    max-width:780px;

    color:#5F6B78;

    font-size:15px;

    line-height:1.8;

}



/* =================================
   THREE PILLARS
================================= */

.about-pillars{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:22px;

    margin-bottom:70px;

}


.about-pillar-card{

    padding:28px;

    background:white;

    border-radius:22px;

    text-decoration:none;

    box-shadow:
    0 12px 35px rgba(0,0,0,.05);

    transition:.3s ease;

}


.about-pillar-card:hover{

    transform:translateY(-7px);

    box-shadow:
    0 20px 45px rgba(0,0,0,.10);

}


.about-pillar-icon{

    width:55px;

    height:55px;

    margin-bottom:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:#EAF4FB;

    color:#006699;

    font-size:23px;

}


.about-pillar-card > span{

    color:#D4A017;

    font-size:9px;

    font-weight:700;

    letter-spacing:2px;

}


.about-pillar-card h3{

    margin:7px 0 10px;

    color:#06283D;

    font-size:23px;

    font-weight:800;

}


.about-pillar-card p{

    margin:0;

    color:#6B7280;

    font-size:13px;

    line-height:1.7;

}


.about-pillar-link{

    display:flex;

    align-items:center;

    gap:7px;

    margin-top:20px;

    color:#D4A017;

    font-size:11px;

    font-weight:700;

}


.about-pillar-card:hover
.about-pillar-link{

    color:#06283D;

}



/* =================================
   SECTION HEADING
================================= */

.about-section-heading{

    max-width:700px;

    margin-bottom:28px;

}


.about-section-heading span{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:2.5px;

}


.about-section-heading h2{

    margin:7px 0 0;

    color:#06283D;

    font-size:30px;

    line-height:1.25;

    font-weight:800;

}



/* =================================
   OBJECTIVES
================================= */

.objective-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:18px;

}


.objective-card{

    position:relative;

    padding:25px;

    min-height:220px;

    background:white;

    border-radius:20px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

}


.objective-number{

    color:#D4A017;

    font-size:11px;

    font-weight:800;

    letter-spacing:1px;

}


.objective-card h3{

    margin:35px 0 10px;

    color:#06283D;

    font-size:18px;

    font-weight:800;

}


.objective-card p{

    margin:0;

    color:#6B7280;

    font-size:12px;

    line-height:1.7;

}



/* =================================
   MEMBERSHIP
================================= */

.about-membership{

    display:grid;

    grid-template-columns:
    1fr 220px;

    gap:30px;

    align-items:center;

    margin-top:70px;

    padding:40px;

    background:#06283D;

    border-radius:24px;

    color:white;

}


.about-membership-content > span{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:2.5px;

}


.about-membership-content h2{

    margin:8px 0 12px;

    color:white;

    font-size:29px;

    font-weight:800;

}


.about-membership-content p{

    max-width:700px;

    color:rgba(255,255,255,.68);

    font-size:13px;

    line-height:1.8;

}


.about-membership-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:8px;

    color:#D4A017;

    font-size:12px;

    font-weight:700;

    text-decoration:none;

}


.about-membership-stat{

    padding:25px;

    text-align:center;

    border-left:
    1px solid rgba(255,255,255,.15);

}


.about-membership-stat strong{

    display:block;

    color:white;

    font-size:50px;

    line-height:1;

    font-weight:800;

}


.about-membership-stat span{

    display:block;

    margin-top:8px;

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}



/* =================================
   CONSTITUTION CTA
================================= */

.about-constitution-cta{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    margin-top:25px;

    padding:28px 32px;

    background:white;

    border:1px solid rgba(6,40,61,.07);

    border-radius:20px;

}


.about-constitution-cta span{

    color:#D4A017;

    font-size:9px;

    font-weight:700;

    letter-spacing:2px;

}


.about-constitution-cta h2{

    margin:5px 0;

    color:#06283D;

    font-size:21px;

    font-weight:800;

}


.about-constitution-cta p{

    margin:0;

    color:#6B7280;

    font-size:12px;

}


.about-cta-button{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:11px 18px;

    white-space:nowrap;

    border-radius:20px;

    background:#06283D;

    color:white;

    font-size:11px;

    font-weight:700;

    text-decoration:none;

    transition:.3s ease;

}


.about-cta-button:hover{

    background:#D4A017;

    color:#06283D;

}



/* =================================
   RESPONSIVE
================================= */

@media(max-width:992px){

    .about-pillars{

        grid-template-columns:
        1fr;

    }


    .objective-grid{

        grid-template-columns:
        repeat(2,1fr);

    }


    .about-membership{

        grid-template-columns:
        1fr;

    }


    .about-membership-stat{

        border-left:none;

        border-top:
        1px solid rgba(255,255,255,.15);

    }

}


@media(max-width:768px){

    .about-apa-page{

        padding:40px 0 60px;

    }


    .about-intro h2{

        font-size:28px;

    }


    .objective-grid{

        grid-template-columns:
        1fr;

    }


    .about-membership{

        padding:28px;

        border-radius:20px;

    }


    .about-constitution-cta{

        display:block;

        padding:25px;

    }


    .about-cta-button{

        margin-top:18px;

    }

}

/* =================================
   OFFICERS PAGE
================================= */

.officers-breadcrumb{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:25px;

    font-size:11px;

}


.officers-breadcrumb a{

    color:#D4A017;

    font-weight:700;

    text-decoration:none;

}


.officers-breadcrumb i{

    color:rgba(255,255,255,.45);

    font-size:9px;

}


.officers-breadcrumb span{

    color:rgba(255,255,255,.60);

}


.officers-page{

    background:#F6F8FA;

    padding:55px 0 80px;

}


.officers-intro{

    max-width:800px;

    margin:0 auto 40px;

    text-align:center;

}


.officers-intro > span{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:3px;

}


.officers-intro h2{

    margin:8px 0 12px;

    color:#06283D;

    font-size:32px;

    font-weight:800;

}


.officers-intro p{

    margin:0;

    color:#6B7280;

    font-size:14px;

    line-height:1.8;

}


/* =================================
   OFFICER GRID
================================= */

.officers-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:25px;

}


.officer-card{

    background:white;

    border-radius:22px;

    overflow:hidden;

    box-shadow:
    0 12px 35px rgba(0,0,0,.06);

    transition:.3s ease;

}


.officer-card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 20px 45px rgba(0,0,0,.10);

}


/* =================================
   IMAGE
================================= */

.officer-image{

    position:relative;

    width:100%;

    height:300px;

    overflow:hidden;

    background:#EAF4FB;

}


.officer-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


.officer-placeholder{

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(
            135deg,
            #EAF4FB,
            #DCECF5
        );

    color:#7A91A0;

}


.officer-placeholder i{

    font-size:65px;

    line-height:1;

}


.officer-placeholder span{

    margin-top:8px;

    font-size:10px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

}


/* =================================
   POSITION
================================= */

.officer-position{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:10px 15px;

    background:
    rgba(6,40,61,.92);

    color:#D4A017;

    text-align:center;

    font-size:10px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

}


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

.officer-content{

    padding:25px 28px 28px;

}


.officer-content h3{

    margin:0 0 18px;

    color:#06283D;

    font-size:23px;

    font-weight:800;

}


.officer-organisation,
.officer-title,
.officer-address,
.officer-email{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-top:10px;

    color:#5F6B78;

    font-size:12px;

    line-height:1.6;

}


.officer-organisation i,
.officer-title i,
.officer-address i,
.officer-email i{

    flex:0 0 15px;

    color:#D4A017;

    margin-top:2px;

}


.officer-email a{

    color:#006699;

    text-decoration:none;

}


.officer-email a:hover{

    color:#D4A017;

}


/* =================================
   BACK
================================= */

.officers-back{

    margin-top:30px;

}


.officers-back a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#D4A017;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

}


.officers-back a:hover{


    color:#06283D;

}


/* =================================
   RESPONSIVE
================================= */

@media(max-width:768px){

    .officers-page{

        padding:40px 0 60px;

    }


    .officers-intro h2{

        font-size:27px;

    }


    .officers-grid{

        grid-template-columns:1fr;

    }


    .officer-image{

        height:280px;

    }

}


@media(max-width:576px){

    .officer-image{

        height:250px;

    }


    .officer-content{

        padding:22px;

    }


    .officer-content h3{

        font-size:20px;

    }

}

/* =================================
   HISTORY PAGE
================================= */

.history-breadcrumb{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:25px;

    font-size:11px;

}


.history-breadcrumb a{

    color:#D4A017;

    font-weight:700;

    text-decoration:none;

}


.history-breadcrumb i{

    color:rgba(255,255,255,.45);

    font-size:9px;

}


.history-breadcrumb span{

    color:rgba(255,255,255,.60);

}


.history-page{

    background:#F6F8FA;

    padding:55px 0 80px;

}


/* =================================
   INTRO
================================= */

.history-intro{

    max-width:850px;

    margin:0 auto 65px;

    text-align:center;

}


.history-intro > span{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:3px;

}


.history-intro h2{

    margin:8px 0 15px;

    color:#06283D;

    font-size:34px;

    line-height:1.25;

    font-weight:800;

}


.history-intro p{

    margin:0;

    color:#6B7280;

    font-size:14px;

    line-height:1.8;

}


/* =================================
   TIMELINE
================================= */

.history-timeline{

    position:relative;

    max-width:1000px;

    margin:0 auto;

    padding:10px 0 30px;

}


.history-timeline::before{

    content:"";

    position:absolute;

    top:0;

    bottom:0;

    left:50%;

    width:2px;

    transform:translateX(-50%);

    background:

    linear-gradient(
        to bottom,
        transparent,
        #D4A017 8%,
        #D4A017 92%,
        transparent
    );

    opacity:.5;

}


.history-item{

    position:relative;

    display:flex;

    width:50%;

    margin-bottom:35px;

}


.history-left{

    justify-content:flex-end;

    padding-right:35px;

}


.history-right{

    margin-left:50%;

    padding-left:35px;

}


.history-marker{

    position:absolute;

    top:25px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#06283D;

    border:3px solid #D4A017;

    box-shadow:

    0 0 0 5px #F6F8FA;

    z-index:2;

}


.history-left
.history-marker{

    right:-9px;

}


.history-right
.history-marker{

    left:-9px;

}


.history-marker span{

    display:block;

    width:5px;

    height:5px;

    margin:3.5px;

    border-radius:50%;

    background:#F5D06F;

}


.history-card{

    width:100%;

    padding:25px 28px;

    background:white;

    border-radius:20px;

    box-shadow:

    0 12px 35px rgba(0,0,0,.06);

    transition:.3s ease;

}


.history-card:hover{

    transform:translateY(-4px);

    box-shadow:

    0 18px 40px rgba(0,0,0,.09);

}


.history-year{

    color:#D4A017;

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

}


.history-card h3{

    margin:7px 0 10px;

    color:#06283D;

    font-size:20px;

    font-weight:800;

}


.history-card p{

    margin:0;

    color:#6B7280;

    font-size:12px;

    line-height:1.8;

}


/* =================================
   MEMBERSHIP
================================= */

.history-membership{

    margin-top:50px;

    padding:40px;

    background:#06283D;

    border-radius:24px;

    color:white;

}


.history-membership-header{

    max-width:700px;

    margin-bottom:30px;

}


.history-membership-header span{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:2.5px;

}


.history-membership-header h2{

    margin:7px 0 10px;

    color:white;

    font-size:30px;

    font-weight:800;

}


.history-membership-header p{

    margin:0;

    color:rgba(255,255,255,.65);

    font-size:13px;

}


.history-membership-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:15px;

}


.history-country{

    padding:22px;

    border:

    1px solid rgba(255,255,255,.12);

    border-radius:16px;

    background:
    rgba(255,255,255,.05);

    text-align:center;

}


.history-country strong{

    display:block;

    color:#D4A017;

    font-size:24px;

    font-weight:800;

}


.history-country span{

    display:block;

    margin-top:5px;

    color:white;

    font-size:11px;

}


/* =================================
   BACK
================================= */

.history-back{

    margin-top:30px;

}


.history-back a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#D4A017;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

}


.history-back a:hover{

    color:#06283D;

}


/* =================================
   RESPONSIVE
================================= */

@media(max-width:768px){

    .history-page{

        padding:40px 0 60px;

    }


    .history-intro h2{

        font-size:28px;

    }


    .history-timeline{

        padding-left:25px;

    }


    .history-timeline::before{

        left:8px;

        transform:none;

    }


    .history-item,
    .history-right{

        width:100%;

        margin-left:0;

        padding-left:25px;

        padding-right:0;

        justify-content:flex-start;

    }


    .history-left
    .history-marker,
    .history-right
    .history-marker{

        left:0;

        right:auto;

    }


    .history-membership{

        padding:28px;

    }


    .history-membership-grid{

        grid-template-columns:
        repeat(2,1fr);

    }

}


@media(max-width:576px){

    .history-membership-grid{

        grid-template-columns:1fr;

    }


    .history-card{

        padding:22px;

    }


    .history-card h3{

        font-size:18px;

    }

}

/* =================================
   RESOURCES PAGE
================================= */

.resources-page{

    background:#F6F8FA;

    padding:55px 0 80px;

}


/* =================================
   HEADER
================================= */

.resources-page-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    margin-bottom:25px;

}


.resources-page-header span,
.initiatives-header > span{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:2.5px;

}


.resources-page-header h2{

    margin:6px 0 0;

    color:#06283D;

    font-size:30px;

    font-weight:800;

}


.resources-count{

    color:#6B7280;

    font-size:12px;

    font-weight:600;

}


/* =================================
   FILTER
================================= */

.resources-filter-card{

    padding:15px;

    margin-bottom:25px;

    background:white;

    border-radius:18px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

}


.resources-filter-card form{

    display:flex;

    align-items:center;

    gap:12px;

}


.resource-search{

    position:relative;

    flex:1;

}


.resource-search i{

    position:absolute;

    left:14px;

    top:50%;

    transform:translateY(-50%);

    color:#9CA3AF;

    font-size:13px;

}


.resource-search input{

    width:100%;

    height:42px;

    padding:0 15px 0 38px;

    border:1px solid #E5E7EB;

    border-radius:12px;

    outline:none;

    color:#06283D;

    font-size:12px;

}


.resource-search input:focus{

    border-color:#D4A017;

}


.resource-filter select{

    height:42px;

    min-width:170px;

    padding:0 35px 0 14px;

    border:1px solid #E5E7EB;

    border-radius:12px;

    background:white;

    color:#06283D;

    font-size:12px;

    font-weight:600;

    outline:none;

}


.resource-filter-button{

    height:42px;

    padding:0 20px;

    border:none;

    border-radius:12px;

    background:#06283D;

    color:white;

    font-size:12px;

    font-weight:700;

    cursor:pointer;

}


.resource-filter-button:hover{

    background:#D4A017;

    color:#06283D;

}


.resource-reset{

    color:#BE2630;

    font-size:11px;

    font-weight:700;

    text-decoration:none;

}


/* =================================
   RESOURCE LIST
================================= */

.resources-list{

    display:flex;

    flex-direction:column;

    gap:14px;

}


.resource-card{

    display:flex;

    align-items:center;

    gap:20px;

    padding:20px 22px;

    background:white;

    border-radius:18px;

    box-shadow:
    0 8px 25px rgba(0,0,0,.045);

    transition:.3s ease;

}


.resource-card:hover{

    transform:translateY(-3px);

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);

}


.resource-icon{

    width:52px;

    min-width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:#EAF4FB;

    color:#006699;

    font-size:21px;

}


.resource-content{

    flex:1;

    min-width:0;

}


.resource-meta{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:5px;

}


.resource-meta span{

    color:#D4A017;

    font-size:8px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1.2px;

}


.resource-meta span + span{

    padding-left:8px;

    border-left:
    1px solid #D1D5DB;

}


.resource-content h3{

    margin:0 0 6px;

    color:#06283D;

    font-size:17px;

    line-height:1.35;

    font-weight:800;

}


.resource-content p{

    margin:0;

    color:#6B7280;

    font-size:11px;

    line-height:1.6;

}


.resource-country{

    display:inline-flex;

    align-items:center;

    gap:5px;

    margin-top:8px;

    color:#6B7280;

    font-size:10px;

}


.resource-country i{

    color:#D4A017;

}


.resource-action{

    min-width:120px;

    text-align:right;

}


.resource-action a,
.resource-action span{

    display:inline-flex;

    align-items:center;

    gap:6px;

    color:#D4A017;

    font-size:11px;

    font-weight:700;

    text-decoration:none;

}


.resource-action a:hover{

    color:#06283D;

}


.resource-action span{

    color:#9CA3AF;

}


/* =================================
   INITIATIVES
================================= */

.initiatives-section{

    margin-top:65px;

}


.initiatives-header{

    max-width:700px;

    margin-bottom:25px;

}


.initiatives-header h2{

    margin:6px 0 8px;

    color:#06283D;

    font-size:30px;

    font-weight:800;

}


.initiatives-header p{

    margin:0;

    color:#6B7280;

    font-size:13px;

    line-height:1.7;

}


.initiatives-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:18px;

}


.initiative-card{

    position:relative;

    padding:25px;

    min-height:250px;

    background:#06283D;

    border-radius:20px;

    overflow:hidden;

    transition:.3s ease;

}


.initiative-card::after{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    right:-50px;

    bottom:-50px;

    border-radius:50%;

    background:rgba(212,160,23,.12);

}


.initiative-card:hover{

    transform:translateY(-6px);

}


.initiative-number{

    color:rgba(255,255,255,.25);

    font-size:11px;

    font-weight:800;

}


.initiative-icon{

    width:48px;

    height:48px;

    margin:20px 0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:rgba(255,255,255,.09);

    color:#F5D06F;

    font-size:20px;

}


.initiative-card h3{

    margin:0 0 10px;

    color:white;

    font-size:16px;

    line-height:1.35;

    font-weight:800;

}


.initiative-card p{

    margin:0;

    color:rgba(255,255,255,.60);

    font-size:11px;

    line-height:1.6;

}


.initiative-card a{

    position:absolute;

    left:25px;

    bottom:22px;

    display:inline-flex;

    align-items:center;

    gap:6px;

    color:#D4A017;

    font-size:11px;

    font-weight:700;

    text-decoration:none;

}


/* =================================
   EMPTY
================================= */

.resources-empty{

    padding:70px 20px;

    text-align:center;

    background:white;

    border-radius:20px;

}


.resources-empty i{

    color:#D4A017;

    font-size:38px;

}


.resources-empty h3{

    margin:15px 0 5px;

    color:#06283D;

}


.resources-empty p{

    color:#6B7280;

    font-size:13px;

}


.resources-empty a{

    display:inline-block;

    margin-top:15px;

    color:#D4A017;

    font-size:12px;

    font-weight:700;

    text-decoration:none;

}


/* =================================
   RESPONSIVE
================================= */

@media(max-width:992px){

    .initiatives-grid{

        grid-template-columns:
        repeat(2,1fr);

    }


    .resources-filter-card form{

        flex-wrap:wrap;

    }


    .resource-search{

        flex-basis:100%;

    }

}


@media(max-width:768px){

    .resources-page{

        padding:40px 0 60px;

    }


    .resources-page-header{

        align-items:flex-start;

    }


    .resources-filter-card form{

        flex-direction:column;

        align-items:stretch;

    }


    .resource-filter select,
    .resource-filter-button{

        width:100%;

    }


    .resource-card{

        align-items:flex-start;

        flex-wrap:wrap;

    }


    .resource-action{

        width:100%;

        min-width:0;

        padding-left:72px;

        text-align:left;

    }

}


@media(max-width:576px){

    .resources-page-header h2{

        font-size:26px;

    }


    .initiatives-grid{

        grid-template-columns:1fr;

    }


    .resource-card{

        gap:14px;

        padding:18px;

    }


    .resource-icon{

        width:45px;

        min-width:45px;

        height:45px;

        font-size:18px;

    }


    .resource-content h3{

        font-size:15px;

    }


    .resource-action{

        padding-left:59px;

    }

}

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

.industry-news-page{

    background:#F6F8FA;

    padding:55px 0 80px;

}


.industry-news-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    margin-bottom:25px;

}


.industry-news-header span{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:2.5px;

}


.industry-news-header h2{

    margin:6px 0 0;

    color:#06283D;

    font-size:30px;

    font-weight:800;

}


.industry-news-status{

    display:flex;

    align-items:center;

    gap:7px;

    color:#059669!important;

    font-size:11px!important;

    font-weight:700;

    letter-spacing:0!important;

}


.industry-news-status > span{

    width:7px;

    height:7px;

    padding:0;

    border-radius:50%;

    background:#10B981;

    box-shadow:
    0 0 0 4px rgba(16,185,129,.12);

}



/* =================================
   LIST
================================= */

.industry-news-list{

    display:flex;

    flex-direction:column;

    gap:14px;

}


.industry-news-card{

    display:grid;

    grid-template-columns:145px minmax(0,1fr) 140px;

    gap:20px;

    align-items:center;

    padding:20px 22px;

    background:white;

    border-radius:18px;

    box-shadow:
    0 8px 25px rgba(0,0,0,.045);

    transition:.3s ease;

}


.industry-news-card:hover{

    transform:translateY(-3px);

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);

}


.industry-news-category{

    align-self:start;

    padding:7px 10px;

    border-radius:12px;

    background:#EAF4FB;

    color:#006699;

    font-size:8px;

    font-weight:700;

    text-align:center;

    letter-spacing:1px;

}


.industry-news-content{

    min-width:0;

}


.industry-news-content h3{

    margin:0 0 7px;

    color:#06283D;

    font-size:17px;

    line-height:1.4;

    font-weight:800;

}


.industry-news-content p{

    margin:0;

    color:#6B7280;

    font-size:11px;

    line-height:1.6;

}


.industry-news-meta{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:9px;

}


.industry-news-meta span{

    color:#9CA3AF;

    font-size:9px;

    letter-spacing:0;

}


.industry-news-meta span:first-child{

    color:#D4A017;

    font-weight:700;

}


.industry-news-meta span + span{

    padding-left:10px;

    border-left:
    1px solid #D1D5DB;

}


.industry-news-action{

    text-align:right;

}


.industry-news-action a{

    display:inline-flex;

    align-items:center;

    gap:6px;

    color:#D4A017;

    font-size:11px;

    font-weight:700;

    text-decoration:none;

}


.industry-news-action a:hover{

    color:#06283D;

}


/* =================================
   EMPTY
================================= */

.industry-news-empty{

    padding:70px 20px;

    background:white;

    border-radius:20px;

    text-align:center;

}


.industry-news-empty i{

    color:#D4A017;

    font-size:40px;

}


.industry-news-empty h3{

    margin:15px 0 5px;

    color:#06283D;

}


.industry-news-empty p{

    color:#6B7280;

    font-size:13px;

}



/* =================================
   RESPONSIVE
================================= */

@media(max-width:768px){

    .industry-news-page{

        padding:40px 0 60px;

    }


    .industry-news-header{

        align-items:flex-start;

    }


    .industry-news-header h2{

        font-size:26px;

    }


    .industry-news-card{

        grid-template-columns:1fr;

        gap:12px;

    }


    .industry-news-category{

        justify-self:start;

    }


    .industry-news-action{

        text-align:left;

    }

}

/* =================================
   HOMEPAGE INDUSTRY NEWS
================================= */

.industry-news-home{

    padding:20px 0;

    background:#F6F8FA;
	margin-bottom:60px;
	

}


.industry-news-home-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:28px;

}


.industry-news-home-header span{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:2.5px;

}


.industry-news-home-header h2{

    margin:6px 0 7px;

    color:#06283D;

    font-size:30px;

    font-weight:800;

}


.industry-news-home-header p{

    margin:0;

    color:#6B7280;

    font-size:13px;

}


.industry-news-view-all{

    display:inline-flex;

    align-items:center;

    gap:7px;

    white-space:nowrap;

    color:#D4A017;

    font-size:12px;

    font-weight:700;

    text-decoration:none;

}


.industry-news-view-all:hover{

    color:#06283D;

}



/* =================================
   GRID
================================= */

.industry-news-home-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:18px;

}


.industry-news-home-card{

    min-height:245px;

    display:flex;

    flex-direction:column;

    padding:22px;

    background:white;

    border-radius:20px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

    transition:.3s ease;

}


.industry-news-home-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 18px 40px rgba(0,0,0,.09);

}



/* =================================
   TOP
================================= */

.industry-news-home-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:15px;

}


.industry-news-home-top span{

    padding:5px 8px;

    border-radius:9px;

    background:#EAF4FB;

    color:#006699;

    font-size:8px;

    font-weight:700;

    letter-spacing:1px;

}


.industry-news-home-top i{

    color:#D4A017;

    font-size:14px;

}



/* =================================
   TITLE
================================= */

.industry-news-home-card h3{

    margin:0 0 10px;

    color:#06283D;

    font-size:16px;

    line-height:1.4;

    font-weight:800;


    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:3;

    overflow:hidden;

}


.industry-news-home-card p{

    margin:0;

    color:#6B7280;

    font-size:11px;

    line-height:1.65;


    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:3;

    overflow:hidden;

}



/* =================================
   FOOTER
================================= */

.industry-news-home-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    margin-top:auto;

    padding-top:18px;

    border-top:
    1px solid #EEF1F4;

}


.industry-news-home-footer > div{

    display:flex;

    flex-direction:column;

    gap:3px;

}


.industry-news-home-footer strong{

    color:#D4A017;

    font-size:9px;

    font-weight:700;

}


.industry-news-home-footer small{

    color:#9CA3AF;

    font-size:9px;

}


.industry-news-home-footer a{

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#06283D;

    color:white;

    font-size:11px;

    text-decoration:none;

    transition:.3s ease;

}


.industry-news-home-footer a:hover{

    background:#D4A017;

    color:#06283D;

}



/* =================================
   EMPTY
================================= */

.industry-news-home-empty{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:35px;

    background:white;

    border-radius:18px;

    color:#6B7280;

    font-size:12px;

}


.industry-news-home-empty i{

    color:#D4A017;

}



/* =================================
   RESPONSIVE
================================= */

@media(max-width:992px){

    .industry-news-home-grid{

        grid-template-columns:
        repeat(2,1fr);

    }

}


@media(max-width:768px){

    .industry-news-home{

        padding:55px 0;

    }


    .industry-news-home-header{

        align-items:flex-start;

        flex-direction:column;

        gap:15px;

    }


    .industry-news-home-header h2{

        font-size:26px;

    }


    .industry-news-home-grid{

        grid-template-columns:1fr;

    }


    .industry-news-home-card{

        min-height:220px;

    }

}

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

.navbar .dropdown-menu{

    min-width:210px;

    margin-top:12px;

    padding:8px;

    border:1px solid
    rgba(6,40,61,.08);

    border-radius:14px;

    background:rgba(255,255,255,.98);

    box-shadow:
    0 18px 45px rgba(0,0,0,.12);

}


.navbar .dropdown-item{

    padding:10px 13px;

    border-radius:9px;

    color:#06283D;

    font-size:12px;

    font-weight:600;

}


.navbar .dropdown-item:hover{

    background:#EAF4FB;

    color:#006699;

}


.navbar .dropdown-item.active{

    background:#EAF4FB;

    color:#006699;

}


.navbar .dropdown-divider{

    margin:6px 4px;

    border-color:#E5E7EB;

}


.navbar .nav-link.dropdown-toggle::after{

    margin-left:6px;

    vertical-align:middle;

    font-size:9px;

}

@media(max-width:991px){

    .navbar .dropdown-menu{

        position:static;

        width:100%;

        margin-top:5px;

        border:none;

        border-radius:10px;

        box-shadow:none;

        background:#F6F8FA;

    }


    .navbar .dropdown-item{

        padding:9px 15px;

    }

}

/* =================================
   APA FOOTER V2
================================= */

.apa-footer-v2{

    background:#06283D;

    color:white;

    padding:60px 0 25px;

}


/* =================================
   MAIN
================================= */

.apa-footer-main{

    display:grid;

    grid-template-columns:
    2fr 1fr 1fr 1fr;

    gap:50px;

}


/* =================================
   BRAND
================================= */

.apa-footer-brand{

    max-width:420px;

}


.apa-footer-logo{

    width:65px;

    height:65px;

    object-fit:contain;

    margin-bottom:15px;

}


.apa-footer-brand-text h3{

    margin:0;

    color:white;

    font-size:19px;

    font-weight:800;

}


.apa-footer-brand-text span{

    display:block;

    margin-top:4px;

    color:#D4A017;

    font-size:8px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}


.apa-footer-brand p{

    max-width:380px;

    margin:18px 0 20px;

    color:rgba(255,255,255,.62);

    font-size:12px;

    line-height:1.8;

}


/* =================================
   SOCIAL
================================= */

.apa-footer-social{

    display:flex;

    gap:8px;

}


.apa-footer-social a{

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    border:
    1px solid rgba(255,255,255,.15);

    color:rgba(255,255,255,.75);

    font-size:13px;

    text-decoration:none;

    transition:.3s ease;

}


.apa-footer-social a:hover{

    background:#D4A017;

    border-color:#D4A017;

    color:#06283D;

}


/* =================================
   COLUMNS
================================= */

.apa-footer-column h4{

    margin:5px 0 18px;

    color:white;

    font-size:13px;

    font-weight:800;

}


.apa-footer-column ul{

    list-style:none;

    margin:0;

    padding:0;

}


.apa-footer-column li{

    margin-bottom:10px;

}


.apa-footer-column a{

    color:rgba(255,255,255,.58);

    font-size:11px;

    font-weight:500;

    text-decoration:none;

    transition:.25s ease;

}


.apa-footer-column a:hover{

    color:#D4A017;

}


/* =================================
   DIVIDER
================================= */

.apa-footer-divider{

    height:1px;

    margin:40px 0 20px;

    background:
    rgba(255,255,255,.10);

}


/* =================================
   BOTTOM
================================= */

.apa-footer-bottom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    color:rgba(255,255,255,.40);

    font-size:9px;

}


.apa-footer-bottom-links{

    display:flex;

    gap:20px;

}


.apa-footer-bottom-links a{

    color:rgba(255,255,255,.45);

    text-decoration:none;

}


.apa-footer-bottom-links a:hover{

    color:#D4A017;

}


/* =================================
   RESPONSIVE
================================= */

@media(max-width:992px){

    .apa-footer-main{

        grid-template-columns:
        1.5fr 1fr 1fr;

    }


    .apa-footer-brand{

        grid-column:
        1 / -1;

        max-width:600px;

    }

}


@media(max-width:768px){

    .apa-footer-v2{

        padding:45px 0 20px;

    }


    .apa-footer-main{

        grid-template-columns:
        repeat(2,1fr);

        gap:30px;

    }


    .apa-footer-brand{

        grid-column:
        1 / -1;

    }


    .apa-footer-bottom{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

}


@media(max-width:576px){

    .apa-footer-main{

        grid-template-columns:1fr;

    }


    .apa-footer-brand{

        grid-column:auto;

    }


    .apa-footer-divider{

        margin:30px 0 18px;

    }



    .apa-footer-bottom-links{

        flex-wrap:wrap;

        gap:12px;

    }

}

/* =================================
   APA 404 PAGE
================================= */

.apa-404-page{

    min-height:
    calc(100vh - 180px);

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    overflow:hidden;

    background:

    radial-gradient(
        circle at 50% 35%,
        rgba(0,150,190,.12),
        transparent 45%
    ),

    #061C2B;

}


/* =================================
   BACKGROUND GRID
================================= */

.apa-404-page::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(
            rgba(80,200,220,.045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(80,200,220,.045) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

    pointer-events:none;

}


/* =================================
   DECORATIVE GLOW
================================= */

.apa-404-page::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:
    rgba(212,160,23,.05);

    filter:blur(80px);

    top:-250px;

    right:-180px;

    pointer-events:none;

}


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

.apa-404-content{

    position:relative;

    z-index:2;

    max-width:650px;

    margin:0 auto;

    padding:80px 20px;

    text-align:center;

}


/* =================================
   ICON
================================= */

.apa-404-icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    border:
    1px solid rgba(245,208,111,.25);

    background:
    rgba(255,255,255,.06);

    color:#F5D06F;

    font-size:38px;

    box-shadow:

    0 0 0 10px
    rgba(212,160,23,.035),

    0 0 40px
    rgba(212,160,23,.12);

}


/* =================================
   LABEL
================================= */

.apa-404-label{

    color:#D4A017;

    font-size:11px;

    font-weight:800;

    letter-spacing:4px;

}


/* =================================
   TITLE
================================= */

.apa-404-content h1{

    margin:12px 0 12px;

    color:white;

    font-size:48px;

    line-height:1.1;

    font-weight:800;

}


/* =================================
   DESCRIPTION
================================= */

.apa-404-content p{

    max-width:500px;

    margin:0 auto;

    color:
    rgba(255,255,255,.62);

    font-size:14px;

    line-height:1.8;

}


/* =================================
   ACTIONS
================================= */

.apa-404-actions{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-top:28px;

}


.apa-404-actions a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:11px 20px;

    border-radius:25px;

    font-size:11px;

    font-weight:700;

    text-decoration:none;

    transition:.3s ease;

}


.apa-404-primary{

    background:#D4A017;

    color:#06283D;

}


.apa-404-primary:hover{

    background:#F5D06F;

    color:#06283D;

}


.apa-404-secondary{

    border:
    1px solid rgba(255,255,255,.25);

    color:white;

    background:
    rgba(255,255,255,.05);

}


.apa-404-secondary:hover{

    background:white;

    border-color:white;

    color:#06283D;

}


/* =================================
   RESPONSIVE
================================= */

@media(max-width:768px){

    .apa-404-page{

        min-height:
        calc(100vh - 130px);

    }


    .apa-404-content{

        padding:60px 20px;

    }


    .apa-404-icon{


        width:75px;

        height:75px;

        font-size:30px;

    }


    .apa-404-content h1{

        font-size:36px;

    }


    .apa-404-content p{

        font-size:13px;

    }


    .apa-404-actions{

        flex-direction:column;

        width:100%;

    }


    .apa-404-actions a{

        width:200px;

    }

}


/* =================================
   MOBILE SCROLL NAVBAR
================================= */

@media(max-width:991px){

    .apa-navbar-glass.scrolled .scroll-logo{

        display:none !important;

    }


    .apa-navbar-glass.scrolled .navbar-toggler{

        position:relative;

        z-index:10;

    }


    .apa-navbar-glass.scrolled .navbar-collapse{

        margin-top:10px;

    }

}

@media(max-width:768px){

    .inner-page-hero{

        padding-top:95px;
        padding-bottom:55px;

    }

}


/* =================================
   GALLERY PAGE
================================= */

.gallery-page{

    background:#F6F8FA;

    padding:55px 0 80px;

    min-height:70vh;

}


/* =================================
   HEADER
================================= */

.gallery-page-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    margin-bottom:25px;

}


.gallery-page-header span{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:2.5px;

}


.gallery-page-header h2{

    margin:6px 0 0;

    color:#06283D;

    font-size:30px;

    font-weight:800;

}


.gallery-count{

    color:#6B7280;

    font-size:12px;

    font-weight:600;

}


/* =================================
   CATEGORY FILTER
================================= */

.gallery-categories{

    display:flex;

    align-items:center;

    gap:8px;

    flex-wrap:wrap;

    margin-bottom:30px;

}


.gallery-categories a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:38px;

    padding:8px 16px;

    border:1px solid #E5E7EB;

    border-radius:20px;

    background:white;

    color:#06283D;

    font-size:11px;

    font-weight:700;

    text-decoration:none;

    transition:.25s ease;

}


.gallery-categories a:hover{

    border-color:#D4A017;

    color:#D4A017;

}


.gallery-categories a.active{

    border-color:#006699;

    background:#006699;

    color:white;

    box-shadow:
    0 6px 18px rgba(0,102,153,.18);

}


/* =================================
   GALLERY GRID
================================= */

.gallery-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:22px;

}


.gallery-card{

    overflow:hidden;

    background:white;

    border-radius:20px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

    transition:.3s ease;

}


.gallery-card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 18px 40px rgba(0,0,0,.10);

}


/* =================================
   IMAGE
================================= */

.gallery-image-button{

    display:block;

    width:100%;

    padding:0;

    border:none;

    background:none;

    cursor:pointer;

}


.gallery-image{

    position:relative;

    width:100%;

    height:240px;

    overflow:hidden;

    background:#EAF4FB;

}


.gallery-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:
    transform .5s ease;

}


.gallery-card:hover
.gallery-image img{

    transform:scale(1.06);

}


/* =================================
   IMAGE OVERLAY
================================= */

.gallery-image-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    rgba(6,40,61,.40);

    color:white;

    opacity:0;

    transition:.3s ease;

}


.gallery-image-overlay i{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:
    rgba(255,255,255,.15);

    border:
    1px solid rgba(255,255,255,.4);

    backdrop-filter:blur(5px);

    font-size:17px;

}


.gallery-card:hover
.gallery-image-overlay{

    opacity:1;

}


/* =================================
   IMAGE PLACEHOLDER
================================= */

.gallery-image-placeholder{

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    color:#8AA2B1;

}


.gallery-image-placeholder i{

    font-size:40px;

}


.gallery-image-placeholder span{

    margin-top:8px;

    font-size:10px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}


/* =================================
   CARD CONTENT
================================= */

.gallery-card-content{

    padding:17px 20px 20px;

}


.gallery-card-meta{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    margin-bottom:6px;

}


.gallery-card-meta span{

    color:#D4A017;

    font-size:8px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1.2px;

}


.gallery-card-meta small{

    color:#9CA3AF;

    font-size:9px;

}


.gallery-card-content h3{

    margin:0;

    color:#06283D;

    font-size:14px;

    line-height:1.4;

    font-weight:800;


    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    overflow:hidden;

}


/* =================================
   EMPTY
================================= */

.gallery-empty{

    padding:80px 20px;

    text-align:center;

    background:white;

    border-radius:20px;

}


.gallery-empty i{

    color:#D4A017;

    font-size:42px;

}


.gallery-empty h3{

    margin:15px 0 5px;

    color:#06283D;

    font-size:22px;

    font-weight:800;

}


.gallery-empty p{

    margin:0;

    color:#6B7280;

    font-size:13px;

}


.gallery-empty a{

    display:inline-block;

    margin-top:18px;

    color:#D4A017;

    font-size:12px;

    font-weight:700;

    text-decoration:none;

}


/* =================================
   LIGHTBOX
================================= */

.gallery-modal-content{

    overflow:hidden;

    border:none;

    border-radius:20px;

    background:#061C2B;

    box-shadow:
    0 25px 80px rgba(0,0,0,.40);

}


.gallery-modal-header{

    padding:16px 20px;

    border-bottom:
    1px solid rgba(255,255,255,.10);

    background:#06283D;

}


.gallery-modal-header span{

    color:#D4A017;

    font-size:8px;

    font-weight:700;

    letter-spacing:2px;

}


.gallery-modal-header h5{

    margin:4px 0 0;

    color:white;

    font-size:16px;

    font-weight:800;

}


.gallery-modal-body{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:15px;

    background:#061C2B;

}


.gallery-modal-body img{

    display:block;

    width:auto;

    max-width:100%;

    max-height:75vh;

    object-fit:contain;

}


/* =================================
   RESPONSIVE
================================= */

@media(max-width:992px){

    .gallery-grid{

        grid-template-columns:
        repeat(2,1fr);

    }

}


@media(max-width:768px){

    .gallery-page{

        padding:40px 0 60px;

    }


    .gallery-page-header{

        align-items:flex-start;

    }


    .gallery-page-header h2{

        font-size:26px;

    }


    .gallery-categories{

        gap:6px;

    }


    .gallery-categories a{

        min-height:34px;

        padding:7px 12px;

        font-size:10px;

    }


    .gallery-grid{

        grid-template-columns:1fr;

        gap:18px;

    }


    .gallery-image{

        height:230px;

    }

}


@media(max-width:576px){

    .gallery-card-content{

        padding:15px 17px 18px;

    }


    .gallery-image{

        height:220px;

    }

}

/* =================================
   COUNTRIES PAGE
================================= */

.countries-page{

    background:#F6F8FA;

    padding:55px 0 80px;

    min-height:70vh;

}


/* =================================
   HEADER
================================= */

.countries-page-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    margin-bottom:30px;

}


.countries-page-header span{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:2.5px;

}


.countries-page-header h2{

    margin:6px 0 0;

    color:#06283D;

    font-size:30px;

    font-weight:800;

}


.countries-count{

    color:#6B7280;

    font-size:12px;

    font-weight:600;

}


/* =================================
   COUNTRY GRID
================================= */

.countries-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:22px;

}


.country-profile-card{

    display:flex;

    align-items:center;

    gap:22px;

    min-height:190px;

    padding:25px;

    background:white;

    border-radius:22px;

    text-decoration:none;

    box-shadow:
    0 12px 35px rgba(0,0,0,.05);

    transition:.3s ease;

}


.country-profile-card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 20px 45px rgba(0,0,0,.10);

}


/* =================================
   FLAG
================================= */

.country-profile-flag{

    width:72px;

    min-width:72px;

    height:72px;

    border-radius:50%;

    overflow:hidden;

    background:#EAF4FB;

    box-shadow:
    0 8px 20px rgba(0,0,0,.14);

}


.country-profile-flag img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


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

.country-profile-content{

    min-width:0;

}


.country-profile-content > span{

    color:#D4A017;

    font-size:8px;

    font-weight:700;

    letter-spacing:1.5px;

}


.country-profile-content h3{

    margin:5px 0 7px;

    color:#06283D;

    font-size:21px;

    font-weight:800;

}


.country-profile-content p{

    margin:0;

    color:#6B7280;

    font-size:11px;

    line-height:1.6;

}


.country-profile-link{

    display:inline-flex;

    align-items:center;

    gap:7px;

    margin-top:13px;

    color:#D4A017;

    font-size:11px;

    font-weight:700;

}


.country-profile-card:hover
.country-profile-link{

    color:#06283D;

}


/* =================================
   EMPTY
================================= */

.countries-empty{

    padding:75px 20px;

    background:white;

    border-radius:20px;

    text-align:center;

}


.countries-empty i{

    color:#D4A017;

    font-size:40px;

}


.countries-empty h3{

    margin:15px 0 5px;

    color:#06283D;

    font-size:22px;

    font-weight:800;

}


.countries-empty p{

    margin:0;

    color:#6B7280;

    font-size:13px;

}


/* =================================
   RESPONSIVE
================================= */

@media(max-width:992px){

    .countries-grid{

        grid-template-columns:
        repeat(2,1fr);

    }

}


@media(max-width:768px){

    .countries-page{

        padding:40px 0 60px;

    }


    .countries-page-header{

        align-items:flex-start;

    }


    .countries-page-header h2{

        font-size:26px;

    }


    .countries-grid{

        grid-template-columns:1fr;

    }

}


@media(max-width:576px){

    .country-profile-card{

        min-height:160px;

        padding:20px;

        gap:18px;

    }


    .country-profile-flag{

        width:62px;

        min-width:62px;

        height:62px;

    }


    .country-profile-content h3{

        font-size:19px;

    }

}

/* =================================
   COUNTRY DETAIL
================================= */

.country-detail-hero{

    padding:45px 0 50px;

    background:
    linear-gradient(
        135deg,
        #06283D,
        #0B405B
    );

    color:white;

}


.country-detail-breadcrumb{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:28px;

    font-size:11px;

}


.country-detail-breadcrumb a{

    color:#D4A017;

    font-weight:700;

    text-decoration:none;

}


.country-detail-breadcrumb i{

    color:rgba(255,255,255,.4);

    font-size:9px;

}


.country-detail-breadcrumb span{

    color:rgba(255,255,255,.65);

}


.country-detail-identity{

    display:flex;

    align-items:center;

    gap:22px;

}


.country-detail-flag{

    width:82px;

    min-width:82px;

    height:82px;

    overflow:hidden;

    border-radius:50%;

    border:3px solid rgba(255,255,255,.75);

    box-shadow:
    0 8px 25px rgba(0,0,0,.25);

}


.country-detail-flag img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


.country-detail-label{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:2.5px;

}


.country-detail-identity h1{

    margin:6px 0 4px;

    color:white;

    font-size:46px;

    line-height:1;

    font-weight:800;

}


.country-detail-identity p{

    margin:0;

    color:rgba(255,255,255,.65);

    font-size:13px;

}


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

.country-detail-page{

    background:#F6F8FA;

    padding:50px 0 80px;

}


.country-section-heading{

    margin-bottom:20px;

}


.country-section-heading > span{

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    letter-spacing:2.5px;

}


.country-section-heading h2{

    margin:6px 0 0;

    color:#06283D;

    font-size:30px;

    font-weight:800;

}


.country-section-heading p{

    margin:8px 0 0;

    color:#6B7280;

    font-size:12px;

}


/* =================================
   OVERVIEW
================================= */

.country-overview-section{

    margin-bottom:55px;

}


.country-overview-card{

    display:grid;

    grid-template-columns:
    minmax(0,1fr) 230px;

    gap:30px;

    padding:32px 35px;

    background:white;

    border-radius:22px;

    box-shadow:
    0 12px 35px rgba(0,0,0,.05);

}


.country-overview-content{

    min-width:0;

}


.country-lead{

    margin:0;

    color:#4B5563;

    font-size:15px;

    line-height:1.9;

}


.country-overview-meta{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:20px;

    padding-left:25px;

    border-left:1px solid #E5E7EB;

}


.country-overview-meta div{

    display:flex;

    flex-direction:column;

    gap:4px;

}


.country-overview-meta small{

    color:#9CA3AF;

    font-size:8px;

    font-weight:700;

    letter-spacing:1.2px;

}


.country-overview-meta strong{

    color:#06283D;

    font-size:17px;

    font-weight:800;

}


/* =================================
   PORT LANDSCAPE
================================= */

.country-port-landscape{

    margin-bottom:60px;

}


.country-port-overview-card{

    margin-bottom:25px;

    padding:25px 30px;

    background:#06283D;

    border-radius:20px;

}


.country-port-overview-card p{

    margin:0;

    color:rgba(255,255,255,.72);

    font-size:13px;

    line-height:1.8;

}


/* =================================
   PORT CATEGORY
================================= */

.country-port-category{

    margin-top:25px;

    padding:28px;

    background:white;

    border-radius:20px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.045);

}


.country-port-category-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:15px;

}


.country-port-category-header span{

    color:#D4A017;

    font-size:9px;

    font-weight:700;

    letter-spacing:2px;

}


.country-port-category-header h3{

    margin:5px 0 0;

    color:#06283D;

    font-size:21px;

    font-weight:800;

}


.country-port-category-header > i{

    color:#D4A017;

    font-size:24px;

}


.country-port-category-header > strong{

    min-width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#EAF4FB;

    color:#006699;

    font-size:13px;

}


.country-category-intro{

    margin:0 0 20px;

    color:#6B7280;

    font-size:12px;

    line-height:1.75;

}


/* =================================
   PORT NAMES
================================= */

.country-port-name-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:10px;

}


.country-port-name{

    display:flex;

    align-items:center;

    gap:9px;

    padding:13px;

    border:1px solid #EEF1F4;

    border-radius:12px;

    color:#06283D;

    font-size:11px;

    font-weight:700;

}


.country-port-name i{

    color:#D4A017;

    font-size:14px;

}


/* =================================
   INFORMATION
================================= */

.country-information{

    margin-top:20px;

    padding-top:20px;

    border-top:1px solid #EEF1F4;

}


.country-information p{

    margin:0;

    color:#6B7280;

    font-size:12px;

    line-height:1.8;

}


.country-highlight{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-top:18px;

    padding:15px;

    border-left:3px solid #D4A017;

    background:#FFF9E8;

    color:#4B5563;

    font-size:11px;

    line-height:1.6;

}


.country-highlight i{

    color:#D4A017;

    margin-top:2px;

}


/* =================================
   STATE PORTS
================================= */

.state-port-grid{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:18px;

}


.state-port-card{

    padding:20px;

    border:1px solid #EEF1F4;

    border-radius:16px;

}


.state-port-title{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:12px;

}


.state-port-title i{

    color:#D4A017;

}


.state-port-title h4{

    margin:0;

    color:#06283D;

    font-size:17px;

    font-weight:800;

}


.state-port-card p{

    margin:0 0 12px;

    color:#6B7280;

    font-size:11px;

    line-height:1.75;

}


.state-port-card p:last-child{

    margin-bottom:0;

}


/* =================================
   MINOR PORTS
================================= */

.country-minor-list{

    margin:10px 0 0;

    padding-left:22px;

}


.country-minor-list li{

    margin-bottom:10px;

    padding-left:5px;

    color:#5F6B78;

    font-size:12px;

    line-height:1.7;

}


/* =================================
   MEMBER PORTS
================================= */

.country-member-ports{

    margin-bottom:40px;

}


.country-member-port-list{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:12px;

}


.country-member-port-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:15px;

    background:white;

    border-radius:16px;

    text-decoration:none;

    box-shadow:
    0 8px 25px rgba(0,0,0,.045);

    transition:.25s ease;

}


.country-member-port-item:hover{

    transform:translateY(-3px);

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);

}


.country-member-port-icon{

    width:48px;

    min-width:48px;

    height:48px;

    overflow:hidden;

    border-radius:50%;

}


.country-member-port-icon img{

    width:100%;

    height:100%;

    object-fit:cover;

}


.country-member-port-item > div:not(
    .country-member-port-icon
){

    min-width:0;

    flex:1;

}


.country-member-port-item span{

    color:#D4A017;

    font-size:8px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}


.country-member-port-item h3{

    margin:3px 0;

    color:#06283D;

    font-size:14px;

    font-weight:800;

}


.country-member-port-item p{

    margin:0;

    color:#6B7280;

    font-size:10px;

}


.country-member-port-item > i{

    color:#D4A017;

    font-size:14px;

}


.country-member-empty{

    padding:40px;

    background:white;

    border-radius:18px;

    text-align:center;

    color:#6B7280;

}


.country-member-empty i{

    display:block;

    margin-bottom:10px;

    color:#D4A017;

    font-size:30px;

}


/* =================================
   POSTED
================================= */

/* =================================
   COUNTRY POST ATTRIBUTION
================================= */

.country-posted{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:5px;

    margin-top:25px;

    padding-top:18px;

    border-top:1px solid #E5E7EB;

    color:#6B7280;

    font-size:11px;

}


.country-posted strong{

    color:#06283D;

    font-weight:700;

}


.country-posted time{

    color:#6B7280;

}


/* =================================
   BACK
================================= */

.country-detail-back{

    margin-top:30px;

}


.country-detail-back a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#D4A017;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

}


.country-detail-back a:hover{

    color:#06283D;

}


/* =================================
   NOT FOUND
================================= */

.country-not-found{

    min-height:70vh;

    display:flex;

    align-items:center;

    background:#F6F8FA;

}


.country-not-found-content{

    max-width:700px;

    margin:80px auto;

    text-align:center;

}


.country-not-found-content span{

    color:#D4A017;

    font-size:11px;

    font-weight:700;

    letter-spacing:3px;

}


.country-not-found-content h1{

    margin:12px 0;

    color:#06283D;

    font-size:40px;

    font-weight:800;

}


.country-not-found-content p{

    color:#6B7280;

}


.country-not-found-content a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:20px;

    color:#D4A017;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

}


/* =================================
   RESPONSIVE
================================= */

@media(max-width:992px){

    .country-overview-card{

        grid-template-columns:1fr;

    }


    .country-overview-meta{

        display:grid;

        grid-template-columns:
        repeat(2,1fr);

        padding-left:0;

        padding-top:20px;

        border-left:none;

        border-top:1px solid #E5E7EB;

    }


    .country-port-name-grid{

        grid-template-columns:
        repeat(2,1fr);

    }


    .country-member-port-list{

        grid-template-columns:1fr;

    }

}


@media(max-width:768px){

    .country-detail-hero{

        padding:35px 0 45px;

    }


    .country-detail-identity h1{

        font-size:36px;

    }


    .country-detail-page{

        padding:40px 0 60px;

    }


    .country-section-heading h2{

        font-size:26px;

    }


    .state-port-grid{

        grid-template-columns:1fr;

    }


    .country-port-name-grid{

        grid-template-columns:1fr;

    }


    .country-port-category{

        padding:22px;

    }

}


@media(max-width:576px){

    .country-detail-identity{

        align-items:flex-start;

    }


    .country-detail-flag{

        width:65px;

        min-width:65px;

        height:65px;

    }


    .country-detail-identity h1{

        font-size:30px;

    }


    .country-detail-identity p{

        font-size:11px;

    }


    .country-overview-card{

        padding:25px;

    }


    .country-lead{

        font-size:13px;

        line-height:1.8;

    }


    .country-overview-meta{

        grid-template-columns:1fr;

    }

}


/* =================================
   COUNTRY COMING SOON
================================= */

.country-coming-soon{

    min-height:
    calc(100vh - 180px);

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    overflow:hidden;

    background:

    radial-gradient(
        circle at 50% 35%,
        rgba(0,150,190,.12),
        transparent 45%
    ),

    #061C2B;

}


/* =================================
   GRID
================================= */

.country-coming-soon::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(
            rgba(80,200,220,.045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(80,200,220,.045) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

    pointer-events:none;

}


/* =================================
   GOLD GLOW
================================= */

.country-coming-soon::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:
        rgba(212,160,23,.05);

    filter:blur(80px);

    top:-250px;

    right:-180px;

    pointer-events:none;

}


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

.country-coming-soon-content{

    position:relative;

    z-index:2;

    max-width:680px;

    margin:0 auto;

    padding:80px 20px;

    text-align:center;

}


/* =================================
   ICON
================================= */

/* =================================
   COUNTRY FLAG
================================= */

.country-coming-soon-flag{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    padding:5px;

    border-radius:50%;

    border:
        1px solid
        rgba(245,208,111,.35);

    background:
        rgba(255,255,255,.06);

    box-shadow:

        0 0 0 10px
        rgba(212,160,23,.035),

        0 0 40px
        rgba(212,160,23,.12);

}


.country-coming-soon-flag img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    border-radius:50%;

}


/* =================================
   LABEL
================================= */

.country-coming-soon-label{

    color:#D4A017;

    font-size:10px;

    font-weight:800;

    letter-spacing:3.5px;

}


/* =================================
   COUNTRY
================================= */

.country-coming-soon-content h1{

    margin:10px 0 8px;

    color:white;

    font-size:48px;

    line-height:1.1;

    font-weight:800;

}


/* =================================
   TITLE
================================= */

.country-coming-soon-content h2{

    margin:0 0 12px;

    color:white;

    font-size:21px;

    font-weight:700;

}


/* =================================
   DESCRIPTION
================================= */

.country-coming-soon-content p{

    max-width:520px;

    margin:0 auto;

    color:
        rgba(255,255,255,.62);

    font-size:14px;

    line-height:1.8;

}


/* =================================
   ACTIONS
================================= */

.country-coming-soon-actions{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-top:28px;

}


.country-coming-soon-actions a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:11px 20px;

    border-radius:25px;

    font-size:11px;

    font-weight:700;

    text-decoration:none;

    transition:.3s ease;

}


/* PRIMARY */

.country-coming-soon-primary{

    background:#D4A017;

    color:#06283D;

}


.country-coming-soon-primary:hover{

    background:#F5D06F;

    color:#06283D;

}


/* SECONDARY */

.country-coming-soon-secondary{

    border:
        1px solid
        rgba(255,255,255,.25);

    background:
        rgba(255,255,255,.05);

    color:white;

}


.country-coming-soon-secondary:hover{

    background:white;

    border-color:white;

    color:#06283D;

}


/* =================================
   MOBILE
================================= */

@media(max-width:768px){

    .country-coming-soon{

        min-height:
        calc(100vh - 130px);

    }


    .country-coming-soon-content{

        padding:60px 20px;

    }


    .country-coming-soon-icon{

        width:75px;

        height:75px;

        font-size:30px;

    }


    .country-coming-soon-content h1{

        font-size:36px;

    }


    .country-coming-soon-content h2{

        font-size:18px;

    }


    .country-coming-soon-content p{

        font-size:13px;

    }


    .country-coming-soon-actions{

        flex-direction:column;

    }


    .country-coming-soon-actions a{

        width:200px;

    }

}

/* =================================
   COUNTRY PROFILE UNAVAILABLE
================================= */

.country-profile-unavailable{

    margin-bottom:55px;

}


.country-content-unavailable{

    display:flex;

    align-items:center;

    gap:18px;

    padding:25px 30px;

    background:#F0F0F0;

    border-bottom:3px solid #D8D8D8;

    border-radius:4px;

}


.country-content-unavailable-icon{

    width:42px;

    min-width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#242424;

    color:white;

    font-size:20px;

}


.country-content-unavailable h3{

    margin:0 0 5px;

    color:#333;

    font-size:17px;

    font-weight:600;

}


.country-content-unavailable p{

    margin:0;

    color:#6B7280;

    font-size:12px;

    line-height:1.6;

}


@media(max-width:576px){

    .country-content-unavailable{

        align-items:flex-start;

        padding:20px;

    }

}

/* =================================
   COUNTRY PORT MAP
================================= */

.country-map-section{

    margin-bottom:55px;

}


.country-map-card{

    overflow:hidden;

    background:white;

    border-radius:22px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.06);

}


.country-map-card img{

    display:block;

    width:100%;

    height:auto;

    max-height:650px;

    object-fit:contain;

}

@media(max-width:768px){

    .country-map-card{

        border-radius:16px;

    }

}


/* =================================
   OFFICIAL COUNTRY WEBSITE
================================= */

.country-official-website{

	margin-bottom: 10px

}


.country-official-website a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:11px 17px;

    border-radius:20px;

    background:#06283D;

    color:white;

    font-size:11px;

    font-weight:700;

    text-decoration:none;

    transition:.3s ease;

}


.country-official-website a:hover{

    background:#D4A017;

    color:#06283D;

}

/* =================================
   COUNTRY DETAIL - JUSTIFIED CONTENT
================================= */

.country-detail-page
.country-overview-content p,
.country-detail-page
.country-port-overview-card p,
.country-detail-page
.country-information p,
.country-detail-page
.country-category-intro,
.country-detail-page
.state-port-card p,
.country-detail-page
.country-minor-list li,
.country-detail-page
.country-content-unavailable p{

    text-align:justify;

}

/* =================================
   MAP POPUP PORT LINK
================================= */

.apa-popup-port-link{

    display:inline-flex;

    align-items:center;

    gap:5px;

    color:#06283D;

    text-decoration:none;

    transition:.2s ease;

}


.apa-popup-port-link:hover{

    color:#D4A017;

}


.apa-popup-port-link i{

    color:#D4A017;

    font-size:10px;

}


.apa-popup-view-port{

    display:inline-flex;

    align-items:center;

    gap:5px;

    margin-top:8px;

    color:#D4A017;

    font-size:10px;

    font-weight:700;

    text-decoration:none;

}


.apa-popup-view-port:hover{

    color:#06283D;

}

/* =================================
   COUNTRY FLAG LINK
================================= */

.apa-country-flag-link{

    display:block;

    width:36px;

    height:36px;

    border-radius:50%;

    text-decoration:none;

    transition:
        transform .25s ease;

}


.apa-country-flag-link img{

    width:100%;

    height:100%;

    display:block;

    border-radius:50%;

}


.apa-country-flag-link:hover{

    transform:translateY(-4px) scale(1.08);

}

/* =================================
   MEMBER HEADER ACTIONS
================================= */

.apa-member-actions{

    display:flex;

    align-items:center;

    gap:8px;

}


.btn-member-register{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:7px 16px;

    border:1px solid #D4A017;

    border-radius:20px;

    color:#06283D;

    background:white;

    font-size:10px;

    font-weight:700;

    text-decoration:none;

    transition:.25s ease;

}


.btn-member-register:hover{

    background:#D4A017;

    color:#06283D;

}