@charset "utf-8";
/* CSS Document */

	:root {
		--primary-color: #0C3E8A;
		--secondary-color: #1e4089;
		--accent-color: #b01105 /*#f8c300*/;
		--text-color: #333;
		--light-bg: #f5f5f5;
	}
	
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Arial', sans-serif;
	}
	
	body {
		color: var(--text-color);
		line-height: 1.6;	
	}
	
	/*header {
		background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.3)), url('../img/opala/opala-luziania-go.webp');
		background-size: cover;
		background-position: center;
		color: white;
		text-align: center;
		padding: 10px 20px;
		background-repeat: no-repeat;
	}*/
	
	header {
		background-size: cover;
		background-position: center;
		color: white;
		text-align: center;
		padding: 10px 20px;
		background-repeat: no-repeat;
		position: relative;
		overflow: hidden;
	}
	
	.header-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
		opacity: 0;
		transition: opacity 1.5s ease-in-out;
		z-index: -1;	
	}
	
	.header-bg.active {
		opacity: 1;
	}
	
	.header-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3));
		z-index: -1;
	}		
	
	.header-content {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px;
		text-align: left;
	}
	
	.profile-circle {
		width: 160px;
		height: 160px;
		border-radius: 50%;
		object-fit: cover;
		border: 2px solid var(--accent-color);
		box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	} 
	.profile-square {
		width: 160px;
		height: 160px;
		border-radius: 10px; /* Define cantos arredondados */
		object-fit: cover;
		/*border: 2px solid var(--accent-color);*/
		box-shadow: 0 2px 10px rgba(0,0,0,0.2);
		padding: 5px 5px 5px 5px;
	}
	.logo {
		font-size: 2.5rem;
		margin-bottom: 0;
		color: var(--accent-color);
	}
	
	.logo span {
		color: white;
	}
	
	nav {
		/*background-color: var(--primary-color);
		padding: 15px 0;
		position: sticky;
		top: 0;
		z-index: 100;*/
		background-color: var(--primary-color);
		padding: 15px 20px;
		position: sticky;
		top: 0;
		z-index: 100;
		display: flex;
		/*justify-content: space-between;*/
		align-items: center;
		justify-content: center;
	}
	.nav-list {
		display: flex;
		list-style: none;
		transition: all 0.3s ease;
	}
	
	.nav-list li {
		margin: 0 10px;
	}
	
	.nav-list li a {
		color: white;
		text-decoration: none;
		font-weight: bold;
		transition: color 0.3s;
		padding: 5px 10px;
	}
	
	.nav-list li a:hover {
		color: var(--accent-color);
	}    
	
	.menu-toggle {
		display: none;
		cursor: pointer;
		flex-direction: column;
		justify-content: space-between;
		height: 21px;
	}
	
	.menu-toggle .bar {
		display: block;
		width: 25px;
		height: 3px;
		background-color: white;
		transition: all 0.3s ease;
	}		
	
	nav ul {
		display: flex;
		justify-content: center;
		list-style: none;
	}
	
	nav ul li {
		margin: 0 10px;
	}
	
	nav ul li a {
		color: white;
		text-decoration: none;
		font-weight: bold;
		transition: color 0.3s;
	}
	
	nav ul li a:hover {
		color: var(--accent-color);
	}
	
	.container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 40px 20px;
	}
	
	h1, h2, h3 {
		margin-bottom: 20px;
		color: var(--primary-color);
	}
	
	.btn {
		display: inline-block;
		background-color: var(--secondary-color);
		color: white;
		padding: 10px 20px;
		border-radius: 5px;
		text-decoration: none;
		margin-top: 20px;
		transition: background-color 0.3s;
	}
	
	.btn:hover {
		background-color: #000;
	}
	
	.about {
		background-color: var(--light-bg);
	}
	
	.specs {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 30px;
		margin-top: 30px;
	}
	
	.spec-card {
		background-color: white;
		padding: 20px;
		border-radius: 5px;
		box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	}
	
	.gallery {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 20px;
		margin-top: 30px;
	}
	
	.gallery img {
		width: 100%;
		height: 250px;
		object-fit: cover;
		border-radius: 5px;
		transition: transform 0.3s;
		cursor: pointer;
	}
	
	.gallery img:hover {
		transform: scale(1.05);
	}

	.video-container {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.video-item {
		display: flex;
		align-items: center;
		gap: 20px;
	}	
	.video-item video {
		width: 60%;
		max-width: 600px;
		border-radius: 8px;
	}
	.video-description {
		width: 40%;
		max-width: 400px;
	}
	
	.video-description h3 {
		margin: 0;
		font-size: 1.2em;
		color: #333;
	}
	
	.video-description p {
		margin-top: 5px;
		font-size: 1em;
		color: #666;
	}

	.video-container video {
		width: 100%;
		max-width: 600px;
	}

	.tabs {
		display: flex;
		cursor: pointer;
	}
	.tab {
		padding: 10px 20px;
		border: 1px solid #ccc;
		border-bottom: none;
		background: #f4f4f4;
	}
	.tab.active {
		background: white;
		font-weight: bold;
	}
	.tab-content {
		display: none;
		border: 1px solid #ccc;
		padding: 15px;
	}
	.tab-content.active {
		display: block;
	}	

	/* Lightbox Styles */
	.lightbox {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.9);
		z-index: 1000;
		justify-content: center;

		align-items: center;
	}
	
	.lightbox.active {
		display: flex;
	}
	

	.lightbox-content {
		position: relative;
		max-width: 90%;
		max-height: 90%;
	}
	
	.lightbox-img {
		max-width: 100%;
		max-height: 80vh;
		display: block;
		margin: 0 auto;
	}
	
	.lightbox-close {
		position: absolute;
		top: -40px;
		right: 0;
		color: white;
		font-size: 2rem;
		cursor: pointer;
	}
	
	.lightbox-nav {
		position: absolute;
		top: 50%;
		width: 100%;
		display: flex;
		justify-content: space-between;
		transform: translateY(-50%);
	}
	
	.lightbox-prev, .lightbox-next {
		color: white;
		font-size: 3rem;
		cursor: pointer;
		padding: 0 20px;
		user-select: none;
	}
	
	.lightbox-prev {
		left: 0;
	}
	
	.lightbox-next {
		right: 0;
	}
	
	.lightbox-caption {
		color: white;
		text-align: center;
		margin-top: 15px;
		font-size: 1.2rem;
	}

	.contact-form {
		max-width: 600px;
		margin: 0 auto;
	}
	
	.form-group {
		margin-bottom: 20px;
	}
	
	.form-group label {
		display: block;
		margin-bottom: 5px;
		font-weight: bold;
	}
	
	.form-group input,
	.form-group textarea {
		width: 100%;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
	}
	
	footer {
		background-color: var(--primary-color);
		color: white;
		text-align: center;
		padding: 20px 0;
		margin-top: 40px;
	}
	
	/*@media (max-width: 768px) {
		nav ul {
			flex-direction: column;
			align-items: center;
		}
		
		nav ul li {
			margin: 2px 0;
		}
		
		.logo {
			font-size: 2rem;
		}
		
		.lightbox-prev, .lightbox-next {
			font-size: 2rem;
		}
	}*/


	@media (max-width: 768px) {
		.menu-toggle {
			display: flex;
		}
		
		.nav-list {
			position: absolute;
			top: 60px;
			left: 0;
			width: 100%;
			background-color: var(--primary-color);
			flex-direction: column;
			align-items: center;
			padding: 20px 0;
			transform: translateY(-150%);
			opacity: 0;
		}
		
		.nav-list.active {
			transform: translateY(0);
			opacity: 1;
		}
		
		.nav-list li {
			margin: 10px 0;
		}
		
		.menu-toggle.active .bar:nth-child(1) {
			transform: translateY(9px) rotate(45deg);
		}
		
		.menu-toggle.active .bar:nth-child(2) {
			opacity: 0;
		}
		
		.menu-toggle.active .bar:nth-child(3) {
			transform: translateY(-9px) rotate(-45deg);
		}
	}

	/* RESPONSIVIDADE */
	@media screen and (max-width: 768px) {
		.video-item {
			flex-direction: column;
			align-items: center;
			text-align: center;
		}
	
		.video-item video {
			width: 100%;
		}
	
		.video-description {
			width: 100%;
			max-width: none;
		}
	}

	.header-wrapper {
		/*flex-direction: column;
		text-align: center;
		gap: 15px;*/
	display: flex;
	align-items: center;
	padding: 20px;
	margin-left: 50px; /* Ajuste conforme necessário */
	gap: 30px;		
	}
	
	.header-content {
		text-align: center;
	}
	
	.profile-pic {
	   /* margin-bottom: 15px;
		width: 80px;
		height: 80px;*/
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--accent-color);
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);		
	}		
		

    #backToTop {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 50%;
        font-size: 24px;
        cursor: pointer;
        display: none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    #backToTop:hover {
        background-color: #0056b3;
    }