/* ABOUT PAGE STYLES */

body.site{
background:#3d5a8a;
color:#fff;
font-family:'Poppins','Comfortaa',sans-serif;
margin:0;
}


/* HERO */

.about-hero{
background:#3d5a8a;
padding:60px 5% 30px;
display:flex;
flex-direction:column;
align-items:center;
overflow:hidden;
}

.about-title{
font-weight:900;
font-size:clamp(2rem,4vw,3rem);
text-align:center;
letter-spacing:.03em;
margin:0 0 20px;
z-index:5;
}


/* TABS */

.about-tabs{
display:flex;
gap:16px;
margin-bottom:24px;
flex-wrap:wrap;
justify-content:center;
z-index:5;
}

.tab-btn{
font-weight:700;
font-size:.9rem;
letter-spacing:.08em;
padding:12px 34px;
border-radius:10px;
border:none;
cursor:pointer;
transition:.2s;
}

.tab-love{background:#f28c28;color:#fff;}
.tab-work{background:#1fb144;color:#fff;}
.tab-core{background:#f4c32f;color:#3d5a8a;}

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

.tab-btn.is-active{
transform:scale(1.05);
box-shadow:0 6px 20px rgba(0,0,0,.25);
}


/* ORBIT */

.orbit-section{
position:relative;
width:100%;
max-width:720px;
height:600px;
margin:0 auto;
}

.orbit-ring-svg{
position:absolute;
width:600px;
height:600px;
left:50%;
top:52%;
transform:translate(-50%,-50%);
z-index:1;
}

.orbit-photo{
position:absolute;
top:52%;
left:50%;
transform:translate(-50%,-50%);
width:320px;
height:320px;
border-radius:50%;
background:#eee;
overflow:visible;
box-shadow:0 0 0 8px rgba(255,255,255,.15);
z-index:3;
}

.orbit-photo-img{
position:absolute;
left:50%;
transform:translateX(-50%);
display:none;
z-index:4;
}

.orbit-photo-img.is-active{
display:block;
}


/* PHOTO POSITIONS */

#orbit-photo-work{
max-width:320px;
bottom:-105px;
}

#orbit-photo-love{
max-width:260px;
bottom:-55px;
}

#orbit-photo-core{
max-width:260px;
bottom:-60px;
}


/* ICON ORBIT */

.orbit-icons{
position:absolute;
inset:0;
animation:orbit-spin 36s linear infinite;
z-index:4;
}

.orbit-icon{
position:absolute;
transform:translate(-50%,-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
}

.orbit-icon img{
width:52px;
height:52px;
object-fit:contain;
filter:drop-shadow(0 4px 10px rgba(0,0,0,.3));
}

.orbit-icon.is-wide img{
width:72px;
height:42px;
}

.orbit-icon-label{
background:#f28c28;
color:#fff;
font-size:.75rem;
font-weight:600;
padding:6px 14px;
border-radius:999px;
white-space:nowrap;
}

.orbit-icon.is-text-only{
gap:0;
}


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


/* TECH SKILLS */

.tech-skills-section{
background:#f4c32f;
padding:56px 5%;
text-align:center;
}

.tech-skills-section.hidden-section{
display:none;
}

.tech-skills-title{
font-weight:900;
font-size:clamp(1.1rem,2.5vw,1.6rem);
color:#3d5a8a;
letter-spacing:.08em;
margin-bottom:40px;
}

.tech-skills-grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:30px 46px;
max-width:900px;
margin:auto;
}

.tech-skill{
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
}

.tech-skill-icon{
width:70px;
height:70px;
object-fit:contain;
}

.tech-skill span{
font-size:.65rem;
font-weight:700;
letter-spacing:.08em;
color:#3d5a8a;
}


/* INFO CARD */

.info-card-section{
background:#3d5a8a;
padding:60px 5% 80px;
display:flex;
justify-content:center;
}

.info-card{
border-radius:16px;
padding:48px 40px;
max-width:600px;
width:100%;
text-align:center;
}

.hidden-card{
display:none;
}

.info-card h3{
font-weight:900;
font-size:1.6rem;
letter-spacing:.05em;
margin-bottom:20px;
}

.info-card p{
font-family:'Comfortaa';
line-height:1.8;
}


/* CARD COLORS */

.work-card{
background:#1fb144;
}

.love-card{
background:#f28c28;
}

.core-card{
background:#f4c32f;
color:#3d5a8a;
}

.core-card h3,
.core-card p{
color:#3d5a8a;
}


/* MOBILE */

@media(max-width:768px){

.orbit-section{
height:500px;
}

.orbit-ring-svg{
width:500px;
height:500px;
}

.orbit-photo{
width:230px;
height:230px;
}

.orbit-photo-img{
max-width:240px;
}

#orbit-photo-work{bottom:-80px;}
#orbit-photo-love{bottom:-40px;}
#orbit-photo-core{bottom:-42px;}

.orbit-icon img{
width:42px;
height:42px;
}

}