/*!
Theme Name: new_seatecah
Theme URI: http://underscores.me/
Author: Êbel Diogo Chimunthu
Author URI: http://ladesign.art.br
Description: Brazil Marine Surveyor | Seatech Marine & Cargo Surveys
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: seatecah
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

new_seatecah is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

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

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */
/* Reset and Base Styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Quattrocento Sans", sans-serif;
	line-height: 1.6;
	color: #333;
}

body.mobile-menu-open {
	overflow: hidden;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Header/Navigation */
.header {
	position: fixed;
	top: 50px;
	left: 0;
	right: 0;
	z-index: 1000;
	background: rgba(41, 84, 144, 0.95);
	backdrop-filter: blur(10px);
	transition: top 0.3s ease;
}

.header.scrolled {
	top: 0;
}

.navbar {
	padding: 10px 0;
	transition: padding 0.3s ease;
}



.nav-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
	position: relative;
}

.nav-brand {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1001;
	transition: all 0.3s ease;
}

.header.scrolled .nav-brand {
	top: 60px;
	transform: translate(-50%, -50%);
}

.header.scrolled .navbar {
	padding: 12px 0;
	/* Aumentar padding para dar mais espaço ao logo */
}

.main-logo {
	width: 140px;
	height: auto;
	transition: all 0.3s ease;
}

.header.scrolled .main-logo {
	width: 120px;
}

.mobile-menu-toggle {
	display: none;
	flex-direction: column;
	background: none;
	border: none;
	cursor: pointer;
	padding: 5px;
	z-index: 1001;
}

.hamburger-line {
	width: 25px;
	height: 3px;
	background: white;
	margin: 3px 0;
	transition: all 0.3s ease;
	border-radius: 2px;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
	transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
	opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -6px);
}

.nav-menu-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	position: relative;
}

.nav-menu {
	display: flex;
	list-style: none;
	gap: 30px;
	margin: 0;
	padding: 0;
}

.nav-menu-left {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	padding-right: 100px;
	/* Espaço para o logo - 4 itens */
}

.nav-menu-right {
	flex: 1;
	display: flex;
	justify-content: flex-start;
	padding-left: 100px;
	/* Espaço para o logo - 4 itens */
}

.nav-menu a {
	color: white;
	text-decoration: none;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	padding: 8px 15px;
	border-radius: 4px;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 5px;
}

.nav-menu a:hover {
	background: rgba(255, 255, 255, 0.1);
	transform: translateY(-2px);
}

.dropdown {
	position: relative;
}

.dropdown-toggle i {
	font-size: 10px;
	transition: transform 0.3s ease;
}

.dropdown.active .dropdown-toggle i {
	transform: rotate(180deg);
}

.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background: #295490;
	min-width: 200px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.3s ease;
	border-radius: 4px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	list-style: none;
	padding: 0;
	margin: 0;
	z-index: 1000;
}

.dropdown:hover .dropdown-menu,
.dropdown.active .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dropdown-menu li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown-menu li:last-child {
	border-bottom: none;
}

.dropdown-menu a {
	display: block;
	padding: 12px 20px;
	font-size: 12px;
	border-radius: 0;
}

/* Hero Section */
.hero {
	position: relative;
	height: 680px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: 100%;
	transition: margin-top 0.3s ease;
}

body.scrolled .hero {
	margin-top: 70px;
	/* Espaço reduzido quando header está colado */
}

.hero-slideshow {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.hero-slideshow::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		45deg, 
		rgba(0, 0, 0, 0.4) 0%, 
		rgba(0, 0, 0, 0.2) 50%, 
		rgba(0, 0, 0, 0.4) 100%
	);
	z-index: 3;
	pointer-events: none;
}

.hero-slide {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transform: scale(1);
	transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), transform 8s ease-in-out;
	animation: heroZoom 8s ease-in-out infinite;
	z-index: 1;
}

.hero-slide.active {
	opacity: 1;
	z-index: 2;
	animation: heroZoomActive 8s ease-in-out infinite;
}

.hero-slide.fade-out {
	opacity: 0;
	transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1;
}

@keyframes heroZoom {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes heroZoomActive {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.1);
		opacity: 1;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.hero-content {
	position: relative;
	z-index: 4;
	text-align: center;
	color: white;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.hero-text h1 {
	font-size: 4rem;
	font-weight: bold;
	color: white;
	margin-bottom: 20px;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6);
	letter-spacing: 2px;
}

.hero-text p {
	font-size: 1.5rem;
	color: white;
	margin-bottom: 40px;
	text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6);
	letter-spacing: 1px;
}

.cta-button {
	display: inline-block;
	background: rgba(255, 255, 255, 0.9);
	color: #295490;
	padding: 15px 40px;
	text-decoration: none;
	border-radius: 30px;
	font-weight: bold;
	font-size: 16px;
	text-transform: uppercase;
	transition: all 0.3s ease;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.cta-button:hover {
	background: white;
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Certification Sidebar */
.cert-sidebar {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 15px;
	z-index: 10;
	padding-right: 20px;
}

.cert-item {
	background: white;
	padding: 10px;
	border-radius: 8px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
}

.cert-item:hover {
	transform: translateX(-10px);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.cert-item a {
	display: block;
	text-decoration: none;
}

.cert-item a:hover {
	opacity: 0.8;
}

.cert-item img {
	width: 120px;
	height: auto;
	display: block;
	transition: all 0.3s ease;
}

.cert-item:hover img {
	transform: scale(1.05);
}

/* ========================================
   SOCIAL MEDIA SIDEBAR - ENHANCED VERSION
   ======================================== */
.social-sidebar {
	position: fixed !important;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 1050 !important; /* Higher than header z-index: 1000 */
	padding: 0;
	transition: all 0.3s ease;
}

.social-item {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	padding: 12px;
	border-radius: 50%;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid transparent;
	position: relative;
	overflow: hidden;
	pointer-events: auto;
	cursor: pointer;
}

.social-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, #3182ce, #2b77cb);
	opacity: 0;
	transition: opacity 0.3s ease;
	border-radius: 50%;
}

.social-item:hover {
	transform: translateX(-8px) scale(1.1);
	box-shadow: 0 8px 25px rgba(49, 130, 206, 0.3);
	border-color: #3182ce;
	animation-play-state: paused;
}

.social-item:hover::before {
	opacity: 1;
}

.social-item a {
	color: #3182ce;
	font-size: 1.3rem;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	transition: all 0.3s ease;
	position: relative;
	z-index: 2;
	pointer-events: auto;
	cursor: pointer;
}

.social-item:hover a {
	color: white;
	transform: scale(1.1);
}

/* Platform-specific hover colors */
.social-item[data-platform="facebook"]:hover::before {
	background: #1877f2;
}

.social-item[data-platform="instagram"]:hover::before {
	background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.social-item[data-platform="linkedin"]:hover::before {
	background: #0077b5;
}

.social-item[data-platform="twitter"]:hover::before,
.social-item[data-platform="x"]:hover::before {
	background: #1da1f2;
}

.social-item[data-platform="youtube"]:hover::before {
	background: #ff0000;
}

.social-item[data-platform="whatsapp"]:hover::before {
	background: #25d366;
}

.social-item[data-platform="tiktok"]:hover::before {
	background: #000000;
}

.social-item[data-platform="flickr"]:hover::before {
	background: #ff0084;
}

/* Animation keyframes for social sidebar */

@keyframes slideInRight {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Floating animation for subtle movement */
@keyframes socialFloat {
	0%, 100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-3px);
	}
}

/* Simplified animations for better interactivity */

/* Initial state for entrance animation */
.social-sidebar .social-item {
	opacity: 0;
	transform: translateX(100px);
	animation: slideInRight 0.6s ease-out forwards;
}

/* Stagger entrance animation only */
.social-sidebar .social-item:nth-child(1) { animation-delay: 0.1s; }
.social-sidebar .social-item:nth-child(2) { animation-delay: 0.2s; }
.social-sidebar .social-item:nth-child(3) { animation-delay: 0.3s; }
.social-sidebar .social-item:nth-child(4) { animation-delay: 0.4s; }
.social-sidebar .social-item:nth-child(5) { animation-delay: 0.5s; }
.social-sidebar .social-item:nth-child(6) { animation-delay: 0.6s; }

/* After entrance animation completes, apply subtle floating */
.social-sidebar .social-item.loaded {
	animation: socialFloat 4s ease-in-out infinite;
}

/* Enhanced hover state - pause floating animation */
.social-item:hover {
	animation-play-state: paused;
}

/* Smooth transitions for all states */
.social-sidebar,
.social-item,
.social-item a,
.social-item::before {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure clickability during all states */
.social-sidebar .social-item,
.social-sidebar .social-item a {
	pointer-events: auto !important;
	cursor: pointer !important;
}

/* Prevent animation interference with clicks */
.social-sidebar .social-item * {
	pointer-events: none;
}

.social-sidebar .social-item a {
	pointer-events: auto !important;
}

/* Ensure social sidebar appears on service pages */
.single-servico .social-sidebar,
.single-marine_service .social-sidebar,
.page-template-page-main-services .social-sidebar {
	display: flex !important;
}

/* Hide social sidebar when mobile menu is open */
body.menu-open .social-sidebar {
	opacity: 0;
	pointer-events: none;
}

/* Smooth scroll behavior when social sidebar is present */
html {
	scroll-behavior: smooth;
}

/* Ensure social sidebar doesn't interfere with page content */
.social-sidebar + * {
	position: relative;
	z-index: 1;
}

/* Additional accessibility improvements */
.social-item a:focus {
	outline: 2px solid #3182ce;
	outline-offset: 2px;
	transform: scale(1.1);
	box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.5);
}

.social-item a:focus-visible {
	outline: 2px solid #3182ce;
	outline-offset: 2px;
}

/* Internal Page Hero */
.hero-internal {
	height: 400px;
	position: relative;
	overflow: hidden;
}

.hero-internal .hero-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 1;
}

.hero-internal .hero-content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.hero-internal .hero-text h1 {
	color: white;
	font-size: 3rem;
	font-weight: bold;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
	margin: 0;
	text-transform: uppercase;
}

/* Internal Page Content Spacing */
.site-main.internal-page {
	padding-top: 60px;
}

/* Internal Page Content Container */
.internal-page-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
}

.site-main.internal-page .internal-page-container {
	padding-top: 40px;
	padding-bottom: 60px;
}

/* Internal Page Content Styling */
.site-main.internal-page article {
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.site-main.internal-page .entry-header {
	display: none;
	/* Hide title since it's in the hero */
}

.site-main.internal-page .entry-content {
	padding: 40px;
	margin: 0;
}

.site-main.internal-page .entry-content h1,
.site-main.internal-page .entry-content h2,
.site-main.internal-page .entry-content h3,
.site-main.internal-page .entry-content h4,
.site-main.internal-page .entry-content h5,
.site-main.internal-page .entry-content h6 {
	color: #007bbf;
	margin-top: 30px;
	margin-bottom: 15px;
}

.site-main.internal-page .entry-content h1 {
	font-size: 2.5rem;
	margin-top: 0;
}

.site-main.internal-page .entry-content h2 {
	font-size: 2rem;
}

.site-main.internal-page .entry-content h3 {
	font-size: 1.5rem;
}

.site-main.internal-page .entry-content p {
	margin-bottom: 20px;
	line-height: 1.7;
	color: #333;
}

.site-main.internal-page .entry-content ul,
.site-main.internal-page .entry-content ol {
	margin-bottom: 20px;
	padding-left: 30px;
}

.site-main.internal-page .entry-content li {
	margin-bottom: 8px;
	line-height: 1.6;
}

/* Enhanced Content Grid Styles for Lists and Organized Content */
.site-main.internal-page .entry-content .content-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin: 30px 0;
}

.site-main.internal-page .entry-content .content-grid.grid-6-cols {
	grid-template-columns: repeat(6, minmax(180px, 1fr));
	gap: 16px;
}

@media (min-width: 1200px) {
	.site-main.internal-page .entry-content .content-grid.grid-6-cols {
		grid-template-columns: repeat(6, minmax(180px, 360px));
	}
}

.site-main.internal-page .entry-content .grid-item {
	background: #fafafa;
	border: 1px solid #e8e8e8;
	border-radius: 10px;
	padding: 14px 16px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	transition: all 0.3s ease;
}

.site-main.internal-page .entry-content .grid-item:hover {
	background: #f0f9ff;
	border-color: #3498db;
	box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15);
	transform: translateY(-2px);
}

.site-main.internal-page .entry-content .grid-item:hover h3 {
	color: #007bbf;
	border-bottom-color: #3498db;
}

.site-main.internal-page .entry-content .grid-item h3,
.site-main.internal-page .entry-content .grid-item h4,
.entry-content .grid-item h3,
.grid-item h3 {
	font-size: 16px !important;
	margin: 0 0 10px 0 !important;
	color: #295490 !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	border-bottom: 2px solid #e8e8e8 !important;
	padding-bottom: 4px !important;
}

.site-main.internal-page .entry-content .grid-item h3:not(:first-child) {
	margin-top: 20px;
	padding-top: 8px;
	border-top: 1px solid #f0f0f0;
}

.site-main.internal-page .entry-content .grid-item ul {
	list-style: disc;
	margin: 0 0 12px 0;
	padding-left: 18px;
}

.site-main.internal-page .entry-content .grid-item ul:last-child {
	margin-bottom: 0;
}

.site-main.internal-page .entry-content .grid-item li {
	margin: 4px 0;
	line-height: 1.35;
	font-size: 14px;
	color: #555;
}

/* Responsive adjustments for content grid */
@media (max-width: 1024px) {
	.site-main.internal-page .entry-content .content-grid.grid-6-cols {
		grid-template-columns: repeat(3, minmax(160px, 1fr));
		gap: 14px;
	}
}

@media (max-width: 768px) {
	.site-main.internal-page .entry-content .content-grid,
	.site-main.internal-page .entry-content .content-grid.grid-6-cols {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	
	.site-main.internal-page .entry-content .grid-item {
		padding: 12px 14px;
	}
}

@media (max-width: 480px) {
	.site-main.internal-page .entry-content .content-grid,
	.site-main.internal-page .entry-content .content-grid.grid-6-cols {
		grid-template-columns: 1fr;
		gap: 10px;
	}
}

/* Comments section styling for internal pages */
.site-main.internal-page .comments-area {
	margin-top: 40px;
	padding: 40px;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Post navigation for internal pages */
.site-main.internal-page .post-navigation {
	margin-top: 40px;
	padding: 30px;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.site-main.internal-page .post-navigation .nav-subtitle {
	color: #666;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.site-main.internal-page .post-navigation .nav-title {
	color: #007bbf;
	font-weight: bold;
	font-size: 1.1rem;
}

/* Archive and search results styling */
.site-main.internal-page .post {
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	margin-bottom: 30px;
	padding: 30px;
}

.site-main.internal-page .post .entry-title {
	color: #007bbf;
	margin-bottom: 15px;
}

.site-main.internal-page .post .entry-title a {
	color: inherit;
	text-decoration: none;
}

.site-main.internal-page .post .entry-title a:hover {
	color: #005a8b;
}

.site-main.internal-page .post .entry-meta {
	color: #666;
	font-size: 0.9rem;
	margin-bottom: 15px;
}

.site-main.internal-page .post .entry-summary,
.site-main.internal-page .post .entry-content {
	margin: 0;
}

/* Posts navigation */
.site-main.internal-page .posts-navigation {
	margin-top: 40px;
	padding: 30px;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.site-main.internal-page .posts-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.site-main.internal-page .posts-navigation a {
	color: #007bbf;
	text-decoration: none;
	padding: 10px 20px;
	border: 2px solid #007bbf;
	border-radius: 5px;
	transition: all 0.3s ease;
}

.site-main.internal-page .posts-navigation a:hover {
	background: #007bbf;
	color: white;
}

/* 404 page styling */
.site-main.internal-page .error-404 {
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	padding: 40px;
	text-align: center;
}

.site-main.internal-page .error-404 .page-content {
	margin: 0;
}

.site-main.internal-page .error-404 .widget {
	margin-top: 30px;
	text-align: left;
}

.site-main.internal-page .error-404 .widget-title {
	color: #007bbf;
	border-bottom: 2px solid #007bbf;
	padding-bottom: 10px;
	margin-bottom: 15px;
}

/* Hero Navigation Dots */
.hero-nav-dots {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 15px;
	z-index: 10;
}

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

.dot.active,
.dot:hover {
	background: white;
	transform: scale(1.2);
	border-color: white;
}

/* Welcome Section */
.welcome-section {
	padding: 100px 0;
	background: white;
}

.welcome-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.welcome-text h2 {
	color: #295490;
	font-size: 2.5rem;
	font-weight: bold;
	margin-bottom: 40px;
	position: relative;
}

.welcome-text h2::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 60px;
	height: 4px;
	background: #ff6b35;
}

.engineers {
	display: flex;
	gap: 40px;
	margin-bottom: 40px;
}

.engineer {
	text-align: center;
}

.engineer-photo {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 15px;
	border: 4px solid #295490;
	transition: all 0.3s ease;
}

.engineer-photo:hover {
	transform: scale(1.05);
	box-shadow: 0 5px 20px rgba(41, 84, 144, 0.3);
}

.engineer h3 {
	color: #295490;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 10px;
}

.social-icons a {
	color: #295490;
	font-size: 18px;
	/* margin: 0 5px; */
	transition: all 0.3s ease;
}

.social-icons a:hover {
	color: white;
	transform: translateY(-2px);
}

.follow-me {
	display: flex;
	align-items: center;
	gap: 20px;
}

.follow-me span {
	color: #295490;
	font-weight: bold;
	font-size: 14px;
}

.social-links a {
	color: white;
	background: #295490;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	margin: 0 5px;
	transition: all 0.3s ease;
}

.social-links a:hover {
	background: #ff6b35;
	transform: translateY(-3px);
}

.welcome-description {
	font-size: 16px;
	line-height: 1.8;
	color: #666;
}

.welcome-description p {
	margin-bottom: 20px;
}

/* Services Section */
.services-section {
	padding: 100px 0;
	background: #295490;
	color: white;
	text-align: center;
}

.services-section h2 {
	font-size: 2.5rem;
	font-weight: bold;
	margin-bottom: 60px;
	position: relative;
}

.services-section h2::after {
	content: '';
	position: absolute;
	bottom: -15px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 4px;
	background: #ff6b35;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 40px;
	margin-top: 60px;
}

.service-item {
	background: rgba(255, 255, 255, 0.1);
	padding: 40px 20px;
	border-radius: 15px;
	transition: all 0.3s ease;
	border: 2px solid transparent;
}

.service-item:hover {
	background: rgba(255, 255, 255, 0.15);
	transform: translateY(-10px);
	border-color: #ff6b35;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.service-icon {
	width: 80px;
	height: 80px;
	border: 3px solid white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	transition: all 0.3s ease;
}

.service-item:hover .service-icon {
	border-color: #ff6b35;
	background: #ff6b35;
}

.service-icon i {
	font-size: 30px;
	color: white;
}

.service-item h3 {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.4;
	/* text-transform: uppercase; */
}

/* Certifications Section */
.certifications-section {
	padding: 100px 0;
	background: white;
	text-align: center;
}

.certifications-section h2 {
	color: #295490;
	font-size: 2.5rem;
	font-weight: bold;
	margin-bottom: 60px;
	position: relative;
}

.certifications-section h2::after {
	content: '';
	position: absolute;
	bottom: -15px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 4px;
	background: #ff6b35;
}

.certifications-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 30px;
	margin-top: 60px;
}

.cert-card {
	background: white;
	padding: 30px;
	border-radius: 15px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	border: 2px solid transparent;
}

.cert-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	border-color: #295490;
}

.cert-card img {
	max-width: 100%;
	height: auto;
	max-height: 80px;
	object-fit: contain;
}

/* Footer */
.footer {
	background-color: #e8f4f8;
	color: #666;
	padding: 80px 0;
	position: relative;
	background-position: top !important;
}

/* Removed overlay to show background image */

.footer-content {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 60px;
	align-items: center;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
}

.footer-left {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.contact-item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
}

.contact-item i {
	color: #4a90a4;
	font-size: 16px;
	width: 20px;
	text-align: center;
}

.contact-item div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.contact-item span,
.contact-item a {
	color: #666;
	text-decoration: none;
	font-size: 14px;
}

.contact-item small {
	color: #999;
	font-size: 12px;
}

.contact-item a:hover {
	color: #4a90a4;
}

.footer-center {
	text-align: center;
}

.footer-center img {
	width: 136px;
	height: auto;
}

.footer-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 15px;
}

/* Skype button removed */

.contact-us-button {
	background: transparent;
	color: #054772;
	border: 2px solid #054772;
	padding: 8px 12px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	display: block;
	width: 160px;
	transition: all 0.3s ease;
}

.contact-us-button:hover {
	background: #054772;
	color: white;
	transform: translateY(-1px);
}

.social-icons {
	display: flex;
	gap: 8px;
}

.social-icons a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 16px;
	transition: all 0.3s ease;
	background: rgba(41, 84, 144, 0.95);
	text-decoration: none;
}

.social-icons a:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.social-icons a[title="LinkedIn"]:hover {
	background: #0077b5;
}

.social-icons a[title="Flickr"]:hover {
	background: #ff0084;
}

.social-icons a[title="Instagram"]:hover {
	background: #e4405f;
}

/* Footer Bottom */
.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid rgba(74, 144, 164, 0.3);
	font-size: 14px;
	color: #666;
}

.footer-bottom-left {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.footer-bottom-left p {
	margin: 0;
	color: #4a90a4;
	font-weight: 500;
}

.la-design {
	font-size: 12px !important;
	color: #999 !important;
}

.la-design a {
	color: #4a90a4;
	text-decoration: none;
	font-weight: bold;
}

.la-design a:hover {
	color: #054772;
	text-decoration: underline;
}

.footer-bottom-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.brazilian-flag {
	width: 40px;
	height: auto;
}

.footer-bottom-right span {
	color: #4a90a4;
	font-weight: bold;
	font-size: 14px;
	text-transform: uppercase;
}

.contact-button {
	display: inline-block;
	background: #ff6b35;
	color: white;
	padding: 12px 30px;
	text-decoration: none;
	border-radius: 25px;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 20px;
	transition: all 0.3s ease;
}

.contact-button:hover {
	background: #e55a2b;
	transform: translateY(-2px);
}

.social-media {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

.social-media a {
	color: white;
	background: #295490;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.3s ease;
}

.social-media a:hover {
	background: #ff6b35;
	transform: translateY(-3px);
}

.footer-bottom {
	border-top: 1px solid #333;
	padding-top: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	color: #999;
}

.brazilian-company {
	display: flex;
	align-items: center;
	gap: 10px;
}

.brazilian-company i {
	color: #ff6b35;
}

/* Team Contact Information */
.team-email,
.team-phone {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #666;
	margin-bottom: 8px;
	font-family: 'Quattrocento Sans', sans-serif;
	line-height: 1.4;
	transition: color 0.3s ease;
}

.team-email::before {
	content: "\f0e0";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #4a90a4;
	font-size: 14px;
	width: 16px;
	text-align: center;
	flex-shrink: 0;
}

.team-phone::before {
	content: "\f095";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #4a90a4;
	font-size: 14px;
	width: 16px;
	text-align: center;
	flex-shrink: 0;
}

.team-email a,
.team-phone a {
	color: #666;
	text-decoration: none;
	transition: color 0.3s ease;
}

.team-email a:hover,
.team-phone a:hover {
	color: #295490;
}

.team-member:hover .team-email,
.team-member:hover .team-phone {
	color: #333;
}

/* ========================================
   SOCIAL SIDEBAR RESPONSIVE DESIGN
   ======================================== */

/* Large screens - full functionality */
@media (max-width: 1200px) {
	.social-sidebar {
		right: 15px;
	}
	
	.social-item {
		width: 45px;
		height: 45px;
		padding: 10px;
	}
	
	.social-item a {
		font-size: 1.2rem;
	}
}

/* Tablet landscape adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
	.social-sidebar {
		right: 10px;
	}
	
	.social-item {
		width: 42px;
		height: 42px;
		padding: 8px;
	}
	
	.social-item a {
		font-size: 1.1rem;
	}
}

@media (max-width: 1024px) and (orientation: landscape) {
	.social-sidebar {
		right: 5px;
	}
	
	.social-item {
		width: 40px;
		height: 40px;
		padding: 8px;
	}
	
	.social-item a {
		font-size: 1rem;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.social-item {
		border: 2px solid #000;
		background: #fff;
	}
	
	.social-item a {
		color: #000;
	}
	
	.social-item:hover {
		background: #000;
	}
	
	.social-item:hover a {
		color: #fff;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.social-sidebar .social-item {
		animation: none !important;
	}
	
	.social-sidebar .social-item.loaded {
		animation: none !important;
	}
	
	.social-item:hover {
		animation: none !important;
	}
	
	.social-item,
	.social-item a,
	.social-item::before {
		transition: none;
	}
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
	.social-item {
		background: rgba(0, 0, 0, 0.8);
		backdrop-filter: blur(10px);
		border-color: rgba(255, 255, 255, 0.2);
	}
	
	.social-item a {
		color: #fff;
	}
}

/* Print styles - hide social sidebar */
@media print {
	.social-sidebar {
		display: none !important;
	}
}

/* Enhanced mobile responsiveness */
@media (max-width: 480px) {
	.social-sidebar {
		display: none !important;
	}
}

/* Responsive Design */
@media (max-width: 768px) {
	.header {
		top: 0 !important;
		transition: none; /* prevent scroll animation on mobile */
		/* Header sempre no topo em mobile */
	}

	.nav-brand {
		position: static;
		transform: none;
	}
	.header.scrolled .nav-brand {
		top: auto;
		transform: none;
	}

	.nav-menu-left,
	.nav-menu-right {
		padding: 0;
		flex: none;
	}

	.mobile-menu-toggle {
		display: flex;
		position: relative;
		z-index: 1201; /* above open menu overlay */
	}

	body {
		padding-top: 70px !important;
		/* Padding fixo em mobile */
	}

	.nav-menu-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: rgba(41, 84, 144, 0.98);
		backdrop-filter: blur(10px);
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 40px;
		transform: translateX(-100%);
		transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 1100; /* above logo in mobile */
		opacity: 0;
	}

	.nav-menu-wrapper.active {
		transform: translateX(0);
		opacity: 1;
	}

	.nav-menu {
		flex-direction: column;
		gap: 20px;
		text-align: center;
	}

	.nav-menu-left,
	.nav-menu-right {
		margin: 0;
	}

	.nav-menu a {
		font-size: 16px;
		padding: 15px 20px;
		border-radius: 8px;
		min-width: 200px;
		justify-content: center;
		opacity: 0;
		transform: translateY(20px);
		transition: all 0.3s ease;
	}

	.nav-menu-wrapper.active .nav-menu a {
		opacity: 1;
		transform: translateY(0);
	}

	.nav-menu-wrapper.active .nav-menu li:nth-child(1) a {
		transition-delay: 0.1s;
	}

	.nav-menu-wrapper.active .nav-menu li:nth-child(2) a {
		transition-delay: 0.15s;
	}

	.nav-menu-wrapper.active .nav-menu li:nth-child(3) a {
		transition-delay: 0.2s;
	}

	.nav-menu-wrapper.active .nav-menu li:nth-child(4) a {
		transition-delay: 0.25s;
	}

	.nav-menu-wrapper.active .nav-menu li:nth-child(5) a {
		transition-delay: 0.3s;
	}

	.nav-menu-wrapper.active .nav-menu li:nth-child(6) a {
		transition-delay: 0.35s;
	}

	.nav-menu-wrapper.active .nav-menu li:nth-child(7) a {
		transition-delay: 0.4s;
	}

	.nav-menu-wrapper.active .nav-menu li:nth-child(8) a {
		transition-delay: 0.45s;
	}

	.dropdown-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: rgba(255, 255, 255, 0.1);
		margin-top: 10px;
		border-radius: 8px;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}

	.dropdown.active .dropdown-menu {
		max-height: 300px;
	}

	.dropdown-menu a {
		font-size: 14px;
		padding: 10px 20px;
		min-width: auto;
	}

	.main-logo {
		width: 120px;
	}

	.hero {
		height: 500px;
		margin-top: 70px !important;
		/* Margin fixo em mobile */
	}

	.hero-text h1 {
		font-size: 2.5rem;
	}

	.hero-text p {
		font-size: 1.2rem;
	}

	.cert-sidebar {
		display: none;
	}

	.social-sidebar {
		display: none !important;
	}

	.hero-internal {
		height: 300px;
	}

	.hero-internal .hero-text h1 {
		font-size: 2.5rem;
	}

	.internal-page-container {
		padding: 0 15px;
	}

	.site-main.internal-page .entry-content {
		padding: 30px;
	}

	.welcome-content {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.engineers {
		justify-content: center;
	}

	.services-grid {
		grid-template-columns: 1fr;
	}

	.certifications-grid {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}

	.footer-content {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 30px;
	}

	.footer-left,
	.footer-right {
		align-items: center;
	}

	.footer-right {
		align-items: center;
	}

	.footer-bottom {
		flex-direction: column;
		gap: 15px;
		text-align: center;
	}

	.footer-bottom-left {
		align-items: center;
	}

	.team-email,
	.team-phone {
		font-size: 13px;
		gap: 6px;
	}
	
	.team-email::before,
	.team-phone::before {
		font-size: 13px;
		width: 14px;
	}

	/* Prevent logo/padding bounce on scroll in mobile */
	.navbar {
		padding: 10px 0;
	}
	.header.scrolled .navbar {
		padding: 10px 0; /* keep constant to avoid jump */
	}
	/* Consistent logo size on small screens */
	.main-logo {
		width: 110px;
	}
	.header.scrolled .main-logo {
		width: 110px; /* avoid resize bounce on scroll */
	}

	/* Reduce hero size on mobile and remove extra offset */
	.hero {
		height: 360px;
		margin-top: 0 !important; /* body already padded for header */
	}
	/* Slightly smaller hero typography */
	.hero-text h1 {
		font-size: 2.4rem;
	}
	.hero-text p {
		font-size: 1.1rem;
	}
}

/* Tablet adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
	.nav-menu {
		gap: 20px;
	}

	.nav-menu a {
		font-size: 11px;
		padding: 6px 12px;
	}

	.main-logo {
		width: 120px;
	}
}

@media (max-width: 480px) {
	.hero {
		height: 320px;
		margin-top: 0 !important; /* remove extra offset */
	}

	.hero-text h1 {
		font-size: 2rem;
	}

	.hero-text p {
		font-size: 1rem;
	}

	.hero-internal {
		height: 250px;
	}

	.hero-internal .hero-text h1 {
		font-size: 1.8rem;
	}

	.internal-page-container {
		padding: 0 15px;
	}

	.site-main.internal-page .entry-content {
		padding: 20px;
	}

	.site-main.internal-page .entry-content h1 {
		font-size: 2rem;
	}

	.site-main.internal-page .entry-content h2 {
		font-size: 1.5rem;
	}

	.site-main.internal-page .comments-area,
	.site-main.internal-page .post-navigation {
		padding: 20px;
	}

	.engineers {
		flex-direction: column;
		align-items: center;
	}

	.follow-me {
		flex-direction: column;
		align-items: center;
		gap: 15px;
	}

	.nav-menu a {
		font-size: 14px;
		padding: 12px 15px;
	}

	.main-logo {
		width: 100px;
	}
	.header.scrolled .main-logo {
		width: 100px; /* keep constant on scroll */
	}

	.team-email,
	.team-phone {
		font-size: 12px;
		margin-bottom: 6px;
		gap: 5px;
	}
	
	.team-email::before,
	.team-phone::before {
		font-size: 12px;
		width: 12px;
	}
}/* Cache Buster - Mon Oct  6 20:52:37 CAT 2025 */

/* ========================================
   UNIVERSAL GRID STYLES - WordPress Compatible
   Works with any grid structure in WordPress
   ======================================== */

/* Universal Grid Layout - works with any container */
.content-grid,
.grid,
[class*="grid"] {
    display: grid;
    gap: 16px;
    margin: 30px 0;
}

.content-grid.grid-6-cols,
.grid.grid-6-cols,
.grid-6-cols {
    grid-template-columns: repeat(6, minmax(180px, 1fr));
    gap: 16px;
}

@media (min-width: 1200px) {
    .content-grid.grid-6-cols,
    .grid.grid-6-cols,
    .grid-6-cols {
        grid-template-columns: repeat(6, minmax(180px, 360px));
    }
}

/* Universal Grid Item Styles */
.grid-item,
.col,
[class*="grid-item"] {
    background: #fafafa !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
    transition: all 0.3s ease !important;
}

.grid-item:hover,
.col:hover,
[class*="grid-item"]:hover {
    background: #f0f9ff !important;
    border-color: #3498db !important;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* Universal Country/Title Styles */
.grid-item h2,
.grid-item h3,
.col h2,
.col h3,
[class*="grid-item"] h2,
[class*="grid-item"] h3 {
    font-size: 16px !important;
    margin: 0 0 10px 0 !important;
    color: #295490 !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid #e8e8e8 !important;
    padding-bottom: 4px !important;
}

.grid-item h2:not(:first-child),
.grid-item h3:not(:first-child),
.col h2:not(:first-child),
.col h3:not(:first-child),
[class*="grid-item"] h2:not(:first-child),
[class*="grid-item"] h3:not(:first-child) {
    margin-top: 20px !important;
    padding-top: 8px !important;
    border-top: 1px solid #f0f0f0 !important;
}

.grid-item:hover h2,
.grid-item:hover h3,
.col:hover h2,
.col:hover h3,
[class*="grid-item"]:hover h2,
[class*="grid-item"]:hover h3 {
    color: #007bbf !important;
    border-bottom-color: #3498db !important;
}

/* Universal List Styles */
.grid-item ul,
.col ul,
[class*="grid-item"] ul {
    list-style: disc !important;
    margin: 0 0 12px 0 !important;
    padding-left: 18px !important;
}

.grid-item ul:last-child,
.col ul:last-child,
[class*="grid-item"] ul:last-child {
    margin-bottom: 0 !important;
}

.grid-item li,
.col li,
[class*="grid-item"] li {
    margin: 4px 0 !important;
    line-height: 1.35 !important;
    font-size: 14px !important;
    color: #555 !important;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .content-grid.grid-6-cols,
    .grid.grid-6-cols,
    .grid-6-cols {
        grid-template-columns: repeat(3, minmax(160px, 1fr)) !important;
        gap: 14px !important;
    }
}

@media (max-width: 768px) {
    .content-grid,
    .grid,
    .content-grid.grid-6-cols,
    .grid.grid-6-cols,
    .grid-6-cols {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .grid-item,
    .col,
    [class*="grid-item"] {
        padding: 12px 14px !important;
    }
}

@media (max-width: 480px) {
    .content-grid,
    .grid,
    .content-grid.grid-6-cols,
    .grid.grid-6-cols,
    .grid-6-cols {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}



/* Enhanced minimalist port list design */
.portlist {
  --max-width: 1400px;
  --gap: 1.5rem;
  --primary-color: #295490;
  --accent-color: #ff6b35;
  --light-bg: #f8fafc;
  --card-bg: #ffffff;
  --border-color: #e2e8f0;
  --text-primary: #334155;
  --text-secondary: #64748b;
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  margin: 0 auto;
  max-width: var(--max-width);
  padding: 3rem 1.5rem 4rem;
  color: var(--text-primary);
  background: var(--light-bg);
  font-family: "Quattrocento Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
}

.continent {
  margin-bottom: 4rem;
  padding: 2rem;
  background: var(--card-bg);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.continent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
}

.continent:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.continent__title {
  font-size: 1.75rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin: 0 0 1.5rem 0;
  color: var(--primary-color);
  text-transform: uppercase;
  position: relative;
  padding-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.continent__title::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-color) 0%, transparent 100%);
  border-radius: 1px;
}

.continent__title::before {
  content: '🌍';
  font-size: 1.25rem;
  filter: grayscale(0.3);
}

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

@media (max-width: 1024px) {
  .continent__countries {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
  }
}

@media (max-width: 768px) {
  .continent__countries {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.country {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.country::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--primary-color);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s ease;
}

.country:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color);
}

.country:hover::before {
  transform: scaleY(1);
}

.country__title {
  font-size: 1.2rem;
  margin: 0 0 1rem 0;
  font-weight: 600;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border-color);
  transition: all 0.3s ease;
}

.country__title::before {
  content: '📍';
  font-size: 1rem;
  filter: grayscale(0.5);
}

.country:hover .country__title {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
}

.country__ports {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 1.5rem;
  column-fill: balance;
}

@media (max-width: 600px) {
  .country__ports {
    columns: 1;
  }
}

.country__ports li {
  break-inside: avoid;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  position: relative;
  padding-left: 1rem;
  transition: all 0.2s ease;
  border-radius: 4px;
  margin: 0.2rem 0;
}

.country__ports li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1;
  top: 0.35rem;
}

.country__ports li:hover {
  color: var(--text-primary);
  background: var(--light-bg);
  padding-left: 1.2rem;
  transform: translateX(4px);
}

.country__ports li:hover::before {
  color: var(--accent-color);
  transform: scale(1.2);
}

/* Enhanced responsive design */
@media (max-width: 768px) {
  .portlist {
    padding: 2rem 1rem 3rem;
    --gap: 1rem;
  }
  
  .continent {
    margin-bottom: 2.5rem;
    padding: 1.5rem;
  }
  
  .continent__title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .country {
    padding: 1.25rem;
  }
  
  .country__title {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .portlist {
    padding: 1.5rem 0.75rem 2rem;
  }
  
  .continent {
    margin-bottom: 2rem;
    padding: 1rem;
    border-radius: 12px;
  }
  
  .continent__title {
    font-size: 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .continent__title::after {
    width: 60px;
    flex: none;
  }
  
  .country {
    padding: 1rem;
  }
  
  .country__title {
    font-size: 1rem;
  }
  
  .country__ports li {
    font-size: 0.85rem;
    padding: 0.3rem 0;
  }
}

/* Loading animation */
.portlist {
  animation: fadeInUp 0.6s ease-out;
}

.continent {
  animation: slideInUp 0.8s ease-out backwards;
}

.continent:nth-child(1) { animation-delay: 0.1s; }
.continent:nth-child(2) { animation-delay: 0.2s; }
.continent:nth-child(3) { animation-delay: 0.3s; }
.continent:nth-child(4) { animation-delay: 0.4s; }
.continent:nth-child(5) { animation-delay: 0.5s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Optional table of contents enhancement */
.portlist--toc {
  position: sticky;
  top: 0;
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  padding: 1rem 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

/* Print styles */
@media print {
  .portlist {
    background: white;
    box-shadow: none;
  }
  
  .continent {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
    margin-bottom: 2rem;
  }
  
  .country {
    box-shadow: none;
    border: 1px solid #ddd;
    break-inside: avoid;
  }
}