/* ===== Module CSS Imports ===== */
@import url("footer.css");
@import url("modulecard.css");

/* =====================================================
   GLOBAL
===================================================== */
body{
    font-size:16px;
    line-height:1.8;
}
/* =====================================================
   HEADER
===================================================== */

.container-header{
box-shadow:0 3px 20px rgba(0,0,0,.08);
padding-top:0;
}

.navbar-brand{
padding:0;
margin-bottom:4px;
}

.navbar-brand img{
max-height:110px;
width:auto;
}

/* =====================================================
   MENU
===================================================== */

.container-nav{
padding:4px 0 8px;
}

.container-nav .mod-menu{
    display:flex !important;
    flex-wrap:wrap;
    gap:0 !important;
    margin:0 !important;
    padding:0 !important;
}

.container-nav .mod-menu > li{
    margin:0 10px !important;
    padding:0 !important;
}

.container-nav .mod-menu > li > a{
    display:block;
    padding:5px 12px !important;
    margin:0 !important;
    background:rgba(255,255,255,.18);
    color:#fff !important;
    border:1px solid rgba(255,255,255,.20);
    border-radius:8px;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    transition:.25s;
}

.container-nav .mod-menu > li > a:hover,
.container-nav .mod-menu > li.current > a,
.container-nav .mod-menu > li.active > a{
background:#1f4f63;
color:#fff !important;
}

.container-nav .mod-menu > li > a::before,
.container-nav .mod-menu > li > a::after{
display:none !important;
}

/* hide dropdown arrows */

.mod-menu__toggle-sub{
display:none !important;
}

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

@media(min-width:992px){

.container-nav .mod-menu li ul{
display:none;
position:absolute;
left:0;
top:100%;
min-width:250px;
background:#fff;
border-radius:10px;
padding:6px 0;
z-index:99999;
box-shadow:0 12px 30px rgba(0,0,0,.15);
}

.container-nav .mod-menu li:hover > ul{
display:block;
}

.container-nav .mod-menu li ul li{
width:100%;
}

.container-nav .mod-menu li ul a{
display:block;
padding:10px 15px;
color:#333 !important;
background:none !important;
border-radius:0 !important;
box-shadow:none !important;
}

.container-nav .mod-menu li ul a:hover{
background:#1f4f63 !important;
color:#fff !important;
}
}



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

.container-component{
padding:8px;
}

.container-component main{
margin-top:0;
background:#fff;
border-radius:18px;
padding:5px 5px;
box-shadow:0 8px 25px rgba(0,0,0,.08);
}

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

.com-content-article{
max-width:100%;
}

.com-content-article h1{
font-size:2rem;
font-weight:700;
margin-bottom:20px;
}

.com-content-article h1::after{
content:"";
display:block;
width:70px;
height:4px;
background:#1f4f63;
margin-top:10px;
border-radius:20px;
}

.com-content-article h2{
margin-top:30px;
margin-bottom:15px;
font-weight:600;
}

.com-content-article p{
text-align:justify;
margin-bottom:15px;
}

/* =====================================================
   MODULES
===================================================== */

.moduletable,
.card{
background:#fff;
border:none;
border-radius:18px;
overflow:hidden;
box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.moduletable{
padding:20px;
}

/* =====================================================
   BREADCRUMBS
===================================================== */

.mod-breadcrumbs{
background:#fff;
padding:12px 18px;
border-radius:12px;
margin-bottom:15px;
box-shadow:0 3px 10px rgba(0,0,0,.05);
}

/* =====================================================
   TABLES
===================================================== */

table{
width:100%;
border-collapse:collapse;
}

table th,
table td{
padding:12px;
border:1px solid rgba(0,0,0,.08);
}

table th{
background:rgba(0,0,0,.03);
}

/* =====================================================
   BUTTONS
===================================================== */

.btn{
border-radius:10px;
transition:.3s;
}

.btn:hover{
transform:translateY(-2px);
}

/* =====================================================
   FORMS
===================================================== */

input,
textarea,
select{
border-radius:10px !important;
}

/* =====================================================
   IMAGES
===================================================== */

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

.com-content-article img{
border-radius:15px;
}

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

.card-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:10px;
}

.info-card{
background:#fff;
border-radius:18px;
padding:25px;
box-shadow:0 5px 20px rgba(0,0,0,.08);
transition:.3s;
}

.info-card:hover{
transform:translateY(-4px);
box-shadow:0 12px 30px rgba(0,0,0,.12);
}


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

@media(max-width:991px){

.navbar-brand img{
max-height:80px;
}

.container-component{
padding:5px;
}

.container-component main{
padding:15px;
}
}

@media(max-width:768px){

.com-content-article h1{
font-size:1.6rem;
}

.container-component main{
border-radius:12px;
}
}

/* Remove all menu underlines */

.container-nav .mod-menu a,
.container-nav .mod-menu a:hover,
.container-nav .mod-menu a:focus,
.container-nav .mod-menu a:active{
    text-decoration:none !important;
}

/* Remove Cassiopeia active indicator */

.container-nav .mod-menu a::before,
.container-nav .mod-menu a::after{
    display:none !important;
    content:none !important;
}

/* Active / Current menu item */

.container-nav .mod-menu .current > a,
.container-nav .mod-menu .active > a{
    text-decoration:none !important;
    box-shadow:none !important;
}

/* Force ShowPlus banner image to center */
.container-banner,
.container-banner .mod-showplus,
.container-banner .showplus,
.container-banner .sp-slide,
.container-banner .sp-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ensure image itself is centered */
.container-banner img {
    display: block;
    margin: 0 auto;
    object-fit: cover;
}

/* Reduce gap below banner */

.container-banner {
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

.container-banner,
.container-banner *{
    margin-bottom:0 !important;
}

.container-component{
    margin-top:0 !important;
    padding-top:15px !important;
}

.container-component main{
    padding-top:0px !important;
}

/* =====================================
   Joomla Category List Cleanup
===================================== */

.com-content-category table,
.com-content-category tbody,
.com-content-category tr,
.com-content-category th,
.com-content-category td{
    background:none !important;
    box-shadow:none !important;
    border:none !important;
}

.com-content-category tr{
    border-bottom:1px solid #e5e5e5 !important;
}

.com-content-category td{
    padding:8px 0 !important;
}

.com-content-category a{
    background:none !important;
    padding:0 !important;
    margin:0 !important;
    border:none !important;
    text-decoration:none !important;
    font-weight:600;
}

/* Menu + Social Icons */

.container-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.menu-social-below{
    text-align:right;
    padding:8px 20px 0 0;
}

.menu-social-below a{
    color:#fff;
    font-size:20px;
    margin-left:12px;
    text-decoration:none;
}

.menu-social-below a:hover{
    color:#0b4f6c;
    transform:translateY(-2px);
}