:root{
    /* Brand */
    --primary:          #1F4E79;
    --primary-hover:    #173B5E;
    --secondary:        #6FAF8F;
    --secondary-hover:  #5B997A;
    --accent:           #4A90E2;

    /* Surfaces */
    --background:       #F8FAFC;
    --surface:          #FFFFFF;
 
	/* Typography */
    --text:             #2E3440;
    --text-muted:       #6B7280;

    /* Borders */
    --border:           #E5E7EB;

    /* States */
    --success:          #28A745;
    --warning:          #FFC107;
    --danger:           #DC3545;
    --info:             #17A2B8;
}

body{
	background:		var(--background);
    color:			var(--text);
    font-family:	Arial, sans-serif;
}
header{
	background:		var(--primary);
    color:			var(--surface);
	min-height:		20vh;
}
header .container-fluid,
header .row {
    min-height:		100%;
}
h1, h2, h3, h4, h5, h6{
	color:			var(--primary);
}

header h1, 
header h2,
header h3,
header h4,
header h5,
header h6{
	color:			var(--surface);
}

.custom-btn{
	background:		var(--secondary);
    color:			var(--surface);
}
.custom-btn:hover{
	background:		var(--secondary-hover);
    color:			var(--surface);
}
.header-logo {
	text-align:		center;
}
.header-logo img{
	max-height:		120px; 
}
.header-title {
	text-align:		left;
}
.flag{
	padding:		0px;
	text-align:		right;
}
.flag img{
	width:			30px;
}
.navbar-row{
	background:		var(--primary);
    color:			var(--surface);
	min-height:		7vh;
}
.navbar-row .nav-link {
    color:			var(--surface);
}

.navbar-row .nav-link:hover{
    color:			var(--surface);
	border-bottom:	2px solid var(--secondary);
	border-radius:	0;
}
.navbar-toggler {
    border:			2px solid var(--secondary);
    border-radius:	15px;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%236FAF8F' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler:focus {
    box-shadow:		none;
}

main{
	min-height:			62vh;
	/*overflow: auto;*/
}
.home-page{
	
}
.text-card{
	border:1px solid var(--border);
    border-radius:14px;
    padding:1rem;
    text-align:justify;
    background:var(--surface);
}
.feature-item {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.25rem;
}
.feature-icon-primary {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--surface);
	background-color: var(--primary);
}
.feature-item-padding {
	padding: 1rem;
	display: flex;
	gap: 1rem;
}
.feature-icon-secondary {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--background);
	background-color: var(--secondary);
}
.gallery-page{
	background:		var(--background);
	min-height:		100%;
}
.gallery-image{
	border:1px solid var(--border);
    border-radius:14px;
    padding:1rem;
    text-align:center;
    background:var(--surface);
}

.office-section-title{
    font-weight:700;
    text-align:center;
	font-size: 20pt;
    padding:3rem 0 1rem;
}
.office-hours{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:1rem;
    padding-top:1rem;
}

.office-day{
    border:1px solid var(--border);
    border-radius:14px;
    padding:1rem;
    text-align:center;
    background:var(--surface);
}

.office-day-title{
    font-weight:700;
    padding-bottom:.75rem;
}

.office-time{
    color:var(--text);
    line-height:1.6;
}
.map{
	min-height: 50vh;
}

.gallery-album-cover {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.gallery-page .card {
    overflow: hidden;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.gallery-page .card:hover {
    transform: translateY(-4px);
}

.gallery-page .card-img-top {
    transition: transform 0.3s ease;
}

.gallery-page .card:hover .card-img-top {
    transform: scale(1.03);
}

footer{
	background:		var(--primary);
    color:			var(--surface);	
	min-height:			10vh;
}
footer a{
	color: var(--surface);
}
footer a:hover{
	color: var(--secondary);
}
.copyright{
	font-size: 10px;
}
@media(max-width:992px){
    .office-hours{
        grid-template-columns:1fr;
    }

    .office-card{
        border-radius:0;
        padding:1.5rem;
    }
}