@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Oswald|Roboto:400,700');
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

body{
	background: lightblue;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	line-height: 1.6;
}

.container{
	position: relative;
	width: 90%;
	text-align: justify;
	min-height: 1000px;
	background: #fff;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	box-shadow: 0 35px 55px rgba(0,0,0,0.1);
}
.world{
	color: #fff;
	padding: 5px 10px;
}

.container .left-side{
	position: relative;
	width: 80%;
	background: #003146;
	padding: 40px;
}
.profileText{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
}
.profileText .imgBox{
	position:relative;
	width:300px;
	height:300px;
	border-radius:50%;
	overflow:hidden;
}
.profileText .imgBox img{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.profileText h1{
	color: #fff;
	font-size: 2.5em;
	margin-top: 20px;
	text-transform: uppercase;
	text-align: center;
	font-weight: 600;
	line-height: 1.3em;
}

.profileText h2{
	color: #03a9f4;
	font-size: 1.2em;
	margin-top: 10px;
	text-align: center;
	font-weight: 400;
	line-height: 1.3em;
}

.profileText h2 span{
	font-size: 0.8em;
	font-weight: 200;
}
.contactInfo{
	padding-top:30px;
}
.title{
	color:#fff;
	text-transform:uppercase;
	font-weight:600;
	letter-spacing:1px;
	margin-bottom:15px;
}
.contactInfo ul{
	position:relative;
}
.contactInfo ul li{
	position: relative;
	list-style: none;
	margin: 10px 0;
	cursor: pointer;
}
.contactInfo ul li .icon{
	display: inline-block;
	width:30px;
	font-size:18px;
	color: #03a9f4;
}

.contactInfo ul li .destrezaCircle{
	display: inline-block;
	width: 30px;
	font-size: 18px;
	color: #10B8EA;
}
.contactInfo ul li .text{
	color:#fff;
	font-weight:200;
}
.contactInfo.education li{
	margin-bottom:15px;
}
.contactInfo.education h5{
	color: #03a9f4;
	font-weight: 500;
}
.contactInfo.education .destrezas{
	color: #fff;
	font-weight: 300;
	text-align: center;
	font-size: 0.9em;
	margin: 0;
	padding: 2px 0;
}

/* CRAZY SKILLS DESIGN! */

/* MODERN 3D FLIP CARDS FOR CLOUD SKILLS - FIXED VERSION */
.skills-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	margin: 20px 0;
}

.skill-card {
	width: 100%;
	height: 80px;
	position: relative;
	cursor: pointer;
	perspective: 1000px;
}

.card-inner {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.8s;
	transform: rotateY(0deg);
}

.skill-card:hover .card-inner {
	transform: rotateY(180deg);
}

.card-front, .card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	box-shadow: 0 8px 20px rgba(0,0,0,0.3);
	border: 2px solid transparent;
}

.card-front {
	background: linear-gradient(135deg, #2c3e50, #34495e);
	color: white;
	border-color: rgba(52, 152, 219, 0.5);
	transform: rotateY(0deg);
	z-index: 2;
}

.card-back {
	background: linear-gradient(135deg, #34495e, #2c3e50);
	color: white;
	transform: rotateY(180deg);
	border-color: rgba(52, 152, 219, 0.8);
}

.card-icon {
	font-size: 1.5em;
	margin-bottom: 5px;
	color: #3498db;
}

.card-title {
	font-size: 0.8em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.card-level {
	font-size: 0.75em;
	font-weight: 500;
	margin-bottom: 8px;
	color: #ecf0f1;
}

.card-progress {
	width: 80%;
	height: 4px;
	background: rgba(255,255,255,0.2);
	border-radius: 2px;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	border-radius: 2px;
	transition: width 0.8s ease;
	animation: fillProgress 1.5s ease-in-out;
}

@keyframes fillProgress {
	0% { width: 0%; }
	100% { width: var(--progress-width); }
}

/* Individual card styles with brand colors */
.aws-card .card-front { border-color: #FF9900; }
.aws-card .card-icon { color: #FF9900; }
.aws-progress { background: linear-gradient(90deg, #FF9900, #FFB84D); --progress-width: 85%; width: 85%; }

.azure-card .card-front { border-color: #0078D4; }
.azure-card .card-icon { color: #0078D4; }
.azure-progress { background: linear-gradient(90deg, #0078D4, #40E0D0); --progress-width: 85%; width: 85%; }

.docker-card .card-front { border-color: #2496ED; }
.docker-card .card-icon { color: #2496ED; }
.docker-progress { background: linear-gradient(90deg, #2496ED, #4FC3F7); --progress-width: 92%; width: 92%; }

.k8s-card .card-front { border-color: #326CE5; }
.k8s-card .card-icon { color: #326CE5; }
.k8s-progress { background: linear-gradient(90deg, #326CE5, #64B5F6); --progress-width: 80%; width: 80%; }

.terraform-card .card-front { border-color: #623CE4; }
.terraform-card .card-icon { color: #623CE4; }
.terraform-progress { background: linear-gradient(90deg, #623CE4, #9C27B0); --progress-width: 80%; width: 80%; }

.cicd-card .card-front { border-color: #28A745; }
.cicd-card .card-icon { color: #28A745; }
.cicd-progress { background: linear-gradient(90deg, #28A745, #66BB6A); --progress-width: 90%; width: 90%; }

.jira-card .card-front { border-color: #0052CC; }
.jira-card .card-icon { color: #0052CC; }
.jira-progress { background: linear-gradient(90deg, #0052CC, #2684FF); --progress-width: 82%; width: 82%; }

.gitlab-card .card-front { border-color: #FC6D26; }
.gitlab-card .card-icon { color: #FC6D26; }
.gitlab-progress { background: linear-gradient(90deg, #FC6D26, #FD8D52); --progress-width: 83%; width: 83%; }

.jenkins-card .card-front { border-color: #D33833; }
.jenkins-card .card-icon { color: #D33833; }
.jenkins-progress { background: linear-gradient(90deg, #D33833, #E65A56); --progress-width: 65%; width: 65%; }

/* Hover effects */
.skill-card:hover .card-front {
	box-shadow: 0 12px 30px rgba(52, 152, 219, 0.4);
}

.skill-card:hover .card-back {
	box-shadow: 0 12px 30px rgba(52, 152, 219, 0.6);
}

/* Cloud Skills - Floating Badge Cloud (LEGACY - keeping for fallback) */
.skills-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 15px 0;
	justify-content: center;
}

.skill-badge {
	background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
	color: white;
	padding: 8px 16px;
	border-radius: 25px;
	font-size: 0.8em;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
	border: 1px solid rgba(52, 152, 219, 0.3);
}

.skill-badge::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
	transition: left 0.5s ease;
}

.skill-badge:hover::before {
	left: 100%;
}

.skill-badge:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
	border-color: #3498db;
}

/* Professional badge colors - corporate palette */
.skill-badge.aws { background: linear-gradient(135deg, #34495e, #df751f); border-color: #e74c3c; }
.skill-badge.azure { background: linear-gradient(135deg, #2980b9, #1f4788); border-color: #3498db; }
.skill-badge.jira { background: linear-gradient(135deg, #7fb7dc, #2f67c1); border-color: #3498db; }
.skill-badge.api { background: linear-gradient(135deg, #de404d, #750918); border-color: #3498db; }
.skill-badge.docker { background: linear-gradient(135deg, #34495e, #2c3e50); border-color: #2980b9; }
.skill-badge.kubernetes { background: linear-gradient(135deg, #2c3e50, #1a252f); border-color: #3498db; }
.skill-badge.terraform { background: linear-gradient(135deg, #8e44ad, #6c3483); border-color: #9b59b6; }
.skill-badge.jenkins { background: linear-gradient(135deg, #1c0505, #ea1a2f); border-color: #131212; }
.skill-badge.ansible { background: linear-gradient(135deg, #c0392b, #922b21); border-color: #e74c3c; }
.skill-badge.gitlab { background: linear-gradient(135deg, #34495e, #50240b); border-color: #e67e22; }
.skill-badge.cicd { background: linear-gradient(135deg, #27ae60, #1e8449); border-color: #0e4a27; }

/* Security Skills - Hexagon Grid */
.skills-hexagon {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 20px 0;
	justify-items: center;
}

.hex-skill {
	width: 60px;
	height: 60px;
	position: relative;
	cursor: pointer;
	transition: all 0.3s ease;
}

.hex-skill::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
	clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
	transition: all 0.3s ease;
	border: 2px solid rgba(52, 152, 219, 0.3);
}

.hex-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 0.7em;
	font-weight: 600;
	text-align: center;
	z-index: 2;
}

.hex-skill:hover {
	transform: scale(1.1) rotate(5deg);
}

.hex-skill:hover::before {
	filter: brightness(1.2);
	box-shadow: 0 0 20px rgba(52, 152, 219, 0.6);
}

/* Professional hex colors - corporate security theme */
.hex-skill.linux::before { background: linear-gradient(135deg, #34495e, #2c3e50); border-color: #f39c12; }
.hex-skill.pentest::before { background: linear-gradient(135deg, #c0392b, #922b21); border-color: #e74c3c; }
.hex-skill.netsec::before { background: linear-gradient(135deg, #8e44ad, #6c3483); border-color: #9b59b6; }
.hex-skill.fiveg::before { background: linear-gradient(135deg, #2980b9, #1f4788); border-color: #3498db; }
.hex-skill.bash::before { background: linear-gradient(135deg, #27ae60, #1e8449); border-color: #2ecc71; }
.hex-skill.sonarqube::before { background: linear-gradient(135deg, #4E79A7, #F28B00); border-color: #4E79A7; }

/* Programming Skills - Orbital System */
.skills-orbit {
	position: relative;
	width: 180px;
	height: 180px;
	margin: 40px auto;
	text-align: center;
}

.orbit-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, #2c3e50, #34495e);
	border: 3px solid #3498db;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 700;
	font-size: 0.8em;
	z-index: 10;
	box-shadow: 0 0 20px rgba(52, 152, 219, 0.5);
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -50%) scale(1.1); }
}

.orbit-ring {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 2px dashed rgba(52, 152, 219, 0.4);
	animation: rotate 20s linear infinite;
}

@keyframes rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.orbit-skill {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 0.6em;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	transform-origin: 0 0;
	transform: translate(-50%, -50%) rotate(var(--angle)) translateX(90px) rotate(calc(-1 * var(--angle)));
}

.orbit-skill span {
	animation: counter-rotate 20s linear infinite reverse;
}

@keyframes counter-rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.orbit-skill:hover {
	transform: translate(-50%, -50%) rotate(var(--angle)) translateX(90px) rotate(calc(-1 * var(--angle))) scale(1.2);
	z-index: 5;
}

.orbit-skill:hover span {
	animation: counter-rotate 20s linear infinite reverse;
}

/* Professional orbital colors - sophisticated tech palette */
.orbit-skill.ml { background: linear-gradient(135deg, #e67e22, #d35400); }
.orbit-skill.tensorflow { background: linear-gradient(135deg, #34495e, #2c3e50); border: 2px solid #e67e22; }
.orbit-skill.data { background: linear-gradient(135deg, #2980b9, #1f4788); }
.orbit-skill.git { background: linear-gradient(135deg, #34495e, #2c3e50); border: 2px solid #e74c3c; }
.orbit-skill.java { background: linear-gradient(135deg, #ED8B00, #F89820); border: 2px solid #5382a1; }
.orbit-skill.deeplearning { background: linear-gradient(135deg, #8E24AA, #AB47BC); border: 2px solid #E91E63; }
.orbit-skill.mcp { background: linear-gradient(135deg, #c0392b, #922b21); }
.orbit-skill.c { background: linear-gradient(135deg, #cf5b4e, #3057b9); }
/* Enhanced Skills Section Styling */
.contactInfo.skills {
	padding-top: 30px;
}

.skill-category {
	margin-bottom: 25px;
	text-align: center;
}

.skill-category-title {
	color: #03a9f4;
	font-weight: 600;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 20px 0 15px 0;
	text-align: left;
	display: flex;
	align-items: center;
	gap: 8px;
}

.skill-category-title i {
	font-size: 1.2em;
	color: #28AFF1;
}

.skills-grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.skill-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.skill-name {
	color: #fff;
	font-size: 0.85em;
	font-weight: 400;
	letter-spacing: 0.3px;
}

.skill-bar {
	background: #195D7E;
	height: 6px;
	border-radius: 3px;
	overflow: hidden;
	position: relative;
}

.skill-progress {
	height: 100%;
	border-radius: 3px;
	position: relative;
	background: linear-gradient(90deg, #28AFF1, #03a9f4);
	transition: width 0.3s ease;
}

/* Individual skill levels with different colors */
.skill-progress.aws { width: 85%; background: linear-gradient(90deg, #FF9900, #FFB84D); }
.skill-progress.azure { width: 80%; background: linear-gradient(90deg, #0078D4, #40E0D0); }
.skill-progress.docker { width: 90%; background: linear-gradient(90deg, #2496ED, #4FC3F7); }
.skill-progress.kubernetes { width: 85%; background: linear-gradient(90deg, #326CE5, #64B5F6); }
.skill-progress.cicd { width: 88%; background: linear-gradient(90deg, #28A745, #66BB6A); }
.skill-progress.terraform { width: 75%; background: linear-gradient(90deg, #623CE4, #9C27B0); }

.skill-progress.linux { width: 92%; background: linear-gradient(90deg, #FCC624, #FFEB3B); }
.skill-progress.pentest { width: 85%; background: linear-gradient(90deg, #DC3545, #FF5722); }
.skill-progress.netsec { width: 88%; background: linear-gradient(90deg, #6F42C1, #BA68C8); }
.skill-progress.fiveg { width: 90%; background: linear-gradient(90deg, #E91E63, #F06292); }
.skill-progress.bash { width: 85%; background: linear-gradient(90deg, #4EAA25, #8BC34A); }
.skill-progress.sonarqube { width: 75%; background: linear-gradient(90deg, #4E79A7, #F28B00); }

.skill-progress.python { width: 92%; background: linear-gradient(90deg, #3776AB, #FFD43B); }
.skill-progress.ml { width: 85%; background: linear-gradient(90deg, #FF6F00, #FF8F00); }
.skill-progress.tensorflow { width: 78%; background: linear-gradient(90deg, #FF6F00, #FF9800); }
.skill-progress.data { width: 88%; background: linear-gradient(90deg, #1976D2, #42A5F5); }
.skill-progress.git { width: 90%; background: linear-gradient(90deg, #F05032, #FF7043); }
.skill-progress.java { width: 82%; background: linear-gradient(90deg, #ED8B00, #F89820); }
.skill-progress.deeplearning { width: 80%; background: linear-gradient(90deg, #8E24AA, #AB47BC); }

/* Hover effects for interactivity */
.skill-item:hover .skill-progress {
	transform: scaleY(1.2);
	transition: transform 0.2s ease;
}

.skill-item:hover .skill-name {
	color: #03a9f4;
	transition: color 0.2s ease;
}

/* Existing Skills Section Styling (keeping for compatibility) */

.contactInfo.education ul hr{
	border-color: #ffffff52;
	width: 40%;
	margin: 15px auto;
	border-width: 1px;
}
.contactInfo.language .percent{
	position:relative;
	width: 100%;
	height:6px;
	background: #195D7E;
	display:block;
	margin-top: 5px;
}
.contactInfo.language .percent .top{
	position: absolute;
	top:0;
	left:0;
	height:100%;
	background: #28AFF1;
}
.container .right-side{
	position: relative;
	margin-left:-100px;
	background: #fff;
	padding: 40px;
}
.about {
	margin-bottom: 50px;
}
.about:last-child{
	margin-bottom:0;
}
.about a{
	color: #2980b9;
	font-size: 14px;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-bottom 0.2s ease;
}

.about a:hover{
	color: #3498db;
	text-decoration: none;
	cursor: pointer;
	border-bottom: 1px solid #3498db;
}
.about ul li a{
	color: black;
	font-size:16px;
    text-decoration:underline; 
}
.about ul li a:hover{
	color: grey;
	font-size:16px;
    text-decoration:underline;
}
.title2{
	color: #003147;
	text-transform:uppercase;
	letter-spacing: 1px;
	margin-bottom: 10px;
	font-size: 1.5em;
	font-weight: bold;
}
.title3{
	color: #003147;
	font-size: 17;
	font-weight: bold;
}
p{
	color: #333;
}
.about .box{
	display:flex;
	flex-direction:row;
	margin:20px 0;
}
.about .box .year_company{
	min-width: 200px;
}
.about .box .year_company h5{
	text-transform: uppercase;
	color: #848c90;
	font-weight:600;
}
.about .box .year_company h6{
	color: #666d71;
	font-weight:300;
}
.about .box .text h4{
	text-transform: uppercase;
	color: #2a7da2;
}
.about.skills .box{
	position:relative;
	width:100%;
	display:grid;
	grid-template-columns:150px 1fr;
	justify-content: center;
	align-items: center;
}
.skills .box h4{
	text-transform: uppercase;
	color: #848c89;
	font-weight: 500;

}
.skills .box .percent{
	position:relative;
	width:100%;
	height:10px;
	background: #f0f0f0;
}
.skills .box .percent div{
	position:absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: #03a9f4;
}
.interest ul{
	display: grid;
	grid-template-columns: repeat(3,1fr);
}
.interest ul li{
	list-style: none;
	color: #333;
	font-weight:500;
	margin: 10px 0;
}
.interest ul li .fa{
	color: #03a9f4;
	font-size:18px;
	width:20px;
}

a {
    color: #fff;
    text-decoration: none;
}

a:hover {
    color:#fffa; 
    text-decoration:none; 
    cursor:pointer;  
}

.iconCircle{
	border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 7px;

    background: #fff;
    border: 2px solid black;
    color: black;
    text-align: center;
}



.timeline{
	margin-left: 20px;
	padding: 3em 2em 2em;
	position: relative;
	color: black;
	border-left: 2px solid black;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
 ul{
	list-style-type: circle;
}
 ul li{
	margin-left:18px;
}

.timeline:before{
		content: attr(date-is);
		position: absolute;
		left: 2em;
		top: 1em;
		display: block;
		font-family: 'Poppins', sans-serif;
		font-weight: 400;
		font-size: .785rem;
		background: white;
		padding: 2px 6px;
		border-radius: 4px;
		border: 1px solid rgba(0,0,0,0.2);
		white-space: nowrap;
		z-index: 1;
	}

.timeline:after {
		width: 10px;
		height: 10px;
		display: block;
		top: 1em;
		position: absolute;
		left: -7px;
		border-radius: 10px;
		content: '';
		border: 2px solid black;
		background: white;
	}

.timeline:last-child {
		border-image: linear-gradient(to bottom, black, white) 1;
	}


.lang-btn {
	background-color: transparent;
	border: none;
	cursor: pointer;
}

#language-selector .lang-btn::after {
    content: " |";
    margin-right: 10px;
    margin-left: 10px;
}

#language-selector .lang-btn:last-child::after {
    content: "";
}

#language-selector-wrapper{
	border: 2px solid black;
	height: 30px;
	border-radius: 10px 45px;
	display: inline-block;
	padding: 0 10px;
}
/* ATS-Friendly and Professional Enhancements */

/* Improve readability for ATS scanning */
h1, h2, h3, h4, h5, h6 {
	color: inherit;
	margin-bottom: 0.5em;
}

/* Professional spacing for work experience */
.timeline ul li {
	margin: 8px 0;
	line-height: 1.6;
}

/* Enhanced contrast for better readability */
.about p {
	color: #2c3e50;
	line-height: 1.7;
}

/* Ensure semantic elements have proper spacing */
section, article {
	margin-bottom: 1.5em;
}

/* Professional timeline styling */
.timeline h3 {
	margin-bottom: 0.5em;
	font-weight: 600;
}

/* Print-friendly styles for ATS compatibility */
@media print {
	body {
		background: white;
		color: black;
	}
	
	.container {
		box-shadow: none;
		width: 100%;
		grid-template-columns: 1fr;
	}
	
	.left-side {
		background: #f8f9fa !important;
		color: black !important;
	}
	
	.left-side * {
		color: black !important;
	}
	
	.iconCircle {
		display: none;
	}
	
	a {
		color: black !important;
		text-decoration: none !important;
	}
}

/* Existing CSS remains unchanged above this line */

/* === Responsive Enhancements === */

@media (max-width: 1000px) {
	.container {
		grid-template-columns: 1fr;
		margin: 20px;
	}
	.container .left-side, 
	.container .right-side {
		width: 100%;
		margin-left: 0;
	}
	.container .left-side {
		padding: 30px 20px;
	}
	.container .right-side {
		padding: 30px 20px;
	}
	.profileText .imgBox {
		width: 200px;
		height: 200px;
		margin: 0 auto;
	}
	.about .box {
		flex-direction: column;
	}
	.about .box .year_company {
		margin-bottom: 10px;
	}
	.interest ul {
		grid-template-columns: repeat(2,1fr);
	}
	
	/* Skills responsive adjustments */
	.skill-category-title {
		font-size: 0.9em;
	}
	
	/* Modern cards responsive */
	.skills-cards-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
	}
	.skill-card {
		height: 70px;
	}
	.card-icon {
		font-size: 1.3em;
		margin-bottom: 3px;
	}
	.card-title {
		font-size: 0.75em;
	}
	.card-level {
		font-size: 0.7em;
	}
	
	/* Cloud badges responsive */
	.skills-cloud {
		gap: 6px;
	}
	.skill-badge {
		padding: 6px 12px;
		font-size: 0.75em;
	}
	
	/* Hexagon responsive */
	.skills-hexagon {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
	.hex-skill {
		width: 50px;
		height: 50px;
	}
	.hex-content {
		font-size: 0.65em;
	}
	
	/* Orbit responsive */
	.skills-orbit {
		width: 150px;
		height: 150px;
		margin: 15px auto;
		text-align: center;
	}
	.orbit-center {
		width: 50px;
		height: 50px;
		font-size: 0.7em;
	}
	.orbit-skill {
		width: 30px;
		height: 30px;
		font-size: 0.55em;
		transform: translate(-50%, -50%) rotate(var(--angle)) translateX(75px) rotate(calc(-1 * var(--angle)));
	}
	.orbit-skill span {
		animation: counter-rotate 20s linear infinite reverse;
	}
	.orbit-skill:hover {
		transform: translate(-50%, -50%) rotate(var(--angle)) translateX(75px) rotate(calc(-1 * var(--angle))) scale(1.2);
	}
	.orbit-skill:hover span {
		animation: counter-rotate 20s linear infinite reverse;
	}
}

@media (max-width: 768px) {
	body {
		padding: 10px;
	}
	.profileText .imgBox {
		width: 150px;
		height: 150px;
	}
	.title2 {
		font-size: 1.2em;
	}
	.title3 {
		font-size: 1em;
	}
	p, .about a, .contactInfo ul li .text {
		font-size: 14px;
	}
	.contactInfo ul li .icon {
		font-size: 16px;
	}
	.contactInfo.language .percent {
		height: 5px;
	}
	.timeline {
		padding: 2em 1em 1em;
		margin-left: 15px;
		border-left: 2px solid black;
	}
	.timeline:before {
		font-size: 0.7rem;
		left: 1.5em;
		background: white;
		padding: 2px 6px;
		border-radius: 4px;
		border: 1px solid black;
	}
	.timeline:after {
		width: 8px;
		height: 8px;
		left: -5px;
		background: white;
		border: 2px solid black;
	}
	.timeline h3 {
		margin-top: 0.5em;
		font-size: 1em;
	}
	.timeline ul li {
		margin-left: 15px;
		font-size: 0.9em;
		line-height: 1.5;
	}
	
	/* Skills mobile adjustments */
	.skill-category-title {
		font-size: 0.85em;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	
	/* Cloud badges mobile */
	.skills-cloud {
		gap: 4px;
	}
	.skill-badge {
		padding: 4px 10px;
		font-size: 0.7em;
	}
	
	/* Hexagon mobile */
	.skills-hexagon {
		grid-template-columns: repeat(2, 1fr);
		gap: 6px;
	}
	.hex-skill {
		width: 40px;
		height: 40px;
	}
	.hex-content {
		font-size: 0.6em;
	}
	
	/* Orbit mobile */
	.skills-orbit {
		width: 160px;
		height: 160px;
		margin: 30px auto;
		text-align: center;
	}
	.orbit-center {
		width: 55px;
		height: 55px;
		font-size: 0.75em;
	}
	.orbit-skill {
		width: 32px;
		height: 32px;
		font-size: 0.55em;
		transform: translate(-50%, -50%) rotate(var(--angle)) translateX(80px) rotate(calc(-1 * var(--angle)));
	}
	.orbit-skill span {
		animation: counter-rotate 20s linear infinite reverse;
	}
	.orbit-skill:hover {
		transform: translate(-50%, -50%) rotate(var(--angle)) translateX(80px) rotate(calc(-1 * var(--angle))) scale(1.1);
	}
	.orbit-skill:hover span {
		animation: counter-rotate 20s linear infinite reverse;
	}
}

@media (max-width: 480px) {
	#language-selector-wrapper {
		width: 100%;
		height: auto;
		padding: 8px;
		text-align: center;
		border-radius: 8px;
		margin-bottom: 15px;
	}
	#language-selector {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 8px;
	}
	#language-selector .lang-btn {
		display: inline-block;
		margin: 0;
		padding: 4px 8px;
		font-size: 0.8em;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 4px;
		transition: background 0.3s ease;
	}
	#language-selector .lang-btn:hover {
		background: rgba(255, 255, 255, 0.2);
	}
	#language-selector .lang-btn::after {
		display: none;
	}
	.container .left-side, 
	.container .right-side {
		padding: 20px 10px;
	}
	.profileText .imgBox {
		width: 120px;
		height: 120px;
	}
	.about .box {
		flex-direction: column;
	}
	.about .box .year_company h5, 
	.about .box .year_company h6 {
		font-size: 12px;
	}
	.about .box .text h4 {
		font-size: 14px;
	}
	.interest ul {
		grid-template-columns: 1fr;
	}
	
	/* Modern cards ultra responsive */
	.skills-cards-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.skill-card {
		height: 60px;
	}
	.card-icon {
		font-size: 1.2em;
		margin-bottom: 2px;
	}
	.card-title {
		font-size: 0.7em;
	}
	.card-level {
		font-size: 0.65em;
	}
	.card-progress {
		height: 2px;
	}
	
	/* Orbital system responsive */
	.orbit {
		width: 80px;
		height: 80px;
	}
	.orbit-item {
		width: 18px;
		height: 18px;
		font-size: 0.7em;
	}
	
	/* Security skills responsive */
	.security-skills-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
	.security-skill {
		height: 35px;
		font-size: 0.7em;
	}
}

/* Extra small screens (very small phones) */
@media (max-width: 320px) {
	.container {
		margin: 10px 5px;
	}
	.container .left-side, 
	.container .right-side {
		padding: 15px 8px;
	}
	.profileText .imgBox {
		width: 100px;
		height: 100px;
	}
	.profileText h1 {
		font-size: 1.8em;
		line-height: 1.2;
	}
	.profileText h2 {
		font-size: 1em;
	}
	.timeline {
		padding: 1.5em 0.5em 1em;
		margin-left: 10px;
	}
	.timeline:before {
		font-size: 0.65rem;
		left: 1em;
		padding: 1px 4px;
	}
	.timeline:after {
		width: 6px;
		height: 6px;
		left: -4px;
	}
	.timeline h3 {
		font-size: 0.9em;
	}
	.timeline ul li {
		margin-left: 10px;
		font-size: 0.85em;
	}
	#language-selector-wrapper {
		padding: 6px;
	}
	#language-selector .lang-btn {
		padding: 3px 6px;
		font-size: 0.75em;
	}
}

/* End of responsive improvements */
.spacer {
    margin-bottom: 30px;
}

/* MODERN LANGUAGE BARS */
.modern-languages {
	margin: 20px 0;
}

.language-item {
	margin-bottom: 18px;
	background: rgba(255, 255, 255, 0.05);
	padding: 15px;
	border-radius: 12px;
	border: 1px solid rgba(52, 152, 219, 0.2);
	transition: all 0.3s ease;
}

.language-item:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(52, 152, 219, 0.4);
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.language-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.language-name {
	font-size: 0.9em;
	font-weight: 600;
	color: #fff;
}

.language-level {
	font-size: 0.75em;
	padding: 3px 8px;
	border-radius: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.language-level.native {
	background: linear-gradient(135deg, #27ae60, #2ecc71);
	color: white;
}

.language-level.advanced {
	background: linear-gradient(135deg, #3498db, #5dade2);
	color: white;
}

.language-level.basic {
	background: linear-gradient(135deg, #f39c12, #f7dc6f);
	color: #2c3e50;
}

.language-progress {
	display: flex;
	align-items: center;
	gap: 10px;
}

.progress-bar {
	flex: 1;
	height: 6px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}

.progress-fill {
	height: 100%;
	border-radius: 10px;
	transition: width 1.5s ease-in-out;
	position: relative;
	overflow: hidden;
}

/* Individual language colors */
.spanish-fill, .basque-fill {
	background: linear-gradient(90deg, #27ae60, #2ecc71);
	width: 100%;
}

.english-fill {
	background: linear-gradient(90deg, #3498db, #5dade2);
	width: 85%;
}

.german-fill {
	background: linear-gradient(90deg, #f39c12, #f7dc6f);
	width: 25%;
}

.norwegian-fill {
	background: linear-gradient(90deg, #e67e22, #f39c12);
	width: 30%;
}

.progress-fill::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
	animation: shimmer 2s infinite;
}

@keyframes shimmer {
	0% { left: -100%; }
	100% { left: 100%; }
}

.progress-dots {
	display: flex;
	gap: 4px;
}

.dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	transition: all 0.3s ease;
}

.dot.active {
	background: #3498db;
	box-shadow: 0 0 8px rgba(52, 152, 219, 0.6);
}