/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: "Fira Code", monospace;
}

.line {
	height: stretch;
  	border-left: 2px solid black;
}

html{
scroll-behavior:smooth;
}

body{
background:#F8F9FA;
color:black;
overflow-x:hidden;
}

.text span{
	font-weight:600;
}
/* HEADER */

header{

position:fixed;
top:0;
width:100%;

display:flex;
justify-content:space-between;
align-items:center;

padding:1em;
z-index:1000;

}

.nav{
    display:flex;
    align-items:center;
    gap:10px;
    position:relative;
}

.menu-toggle{
    display:none;
    font-size:1.5rem;
    background:none;
    border:none;
    cursor:pointer;
}

.social-links{
    display:flex;
    gap:10px;
}


/* HERO */

.hero{

min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
overflow:hidden;

}

.hero-bg-text{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	line-height: 20vw;
    font-size: 25vw;
	font-weight:900;
	color:rgba(0,0,0,0.08); /* transparent effect */
	white-space:nowrap;
	z-index:-1;
	pointer-events:none;
}

.parallax{

position:absolute;
width:120%;
height:120%;

background-image:url("assets/BG.png");
background-repeat:repeat;
background-position:center;

z-index:-1;

transform:translateY(0);


}

.hero-content{

opacity:0;
transform:translateY(60px);
transition:1s;

}

.hero-content img{
	width: 50%;
}

.hero-content.visible{
opacity:1;
transform:translateY(0);
}

.hero h1{
font-family:'Montserrat',sans-serif;
font-size:6em;
font-weight: 900;
}
.hero h2{
font-family:'Montserrat',sans-serif;
font-size:5em;
font-weight: 900;
}

.subtitle{
font-size:1.5em;
opacity:.9;
}

/* SECTIONS */

.section{
min-height:100vh;
position:sticky;
top:0;
display:flex;
align-items:center;
justify-content:center;
padding:120px 10%;
transition:transform .6s ease;
transform-origin:center top;
}

.bg1{
	background:#F8F9FA;
	z-index: 1;
}
.bg2{
	background:#E9ECEF;
	z-index: 2;
}
.bg3{
	background:#DEE2E6;
	z-index: 3;
}
.bg4{
	background:#CED4DA;
	z-index: 4;
}
.bg5{
	background:#C0C6CB;
	z-index: 5;
}
.bg6{
	background:#B6BEC5;
	z-index: 6;
}
.bg7{
	background:#ACB7C0;
	z-index: 7;
}

/* SPLIT */

.split{

display:flex;
align-items:center;
max-width:1200px;
opacity:0;
transform:translateY(60px);
transition:1s;

}

.split.visible{
opacity:1;
transform:translateY(0);
gap: 2em;
}

.split.reverse{
flex-direction:row-reverse;
}

.split img{

width:100%;
border-radius:20px;

}

.text{
width:50%;
}

.text h2{
font-size:3em;
margin-bottom:20px;
}

.text p{
font-size:1em;
line-height:1.6;
margin-bottom: 0.5em;
}

/* GLASS BUTTON */

.glass-btn{
display: inline-flex;
align-items: center;
vertical-align: middle;
padding: 0.5em 0.5em;
border-radius:24px;
border:1px solid rgba(255,255,255,0.4);
background:rgba(255,255,255,0.25);
backdrop-filter: blur(10px);
box-shadow:
0 4px 6px rgba(0,0,0,0.08),
inset 0 1px 2px rgba(255,255,255,0.6);
color:#111;
font-weight:500;
cursor:pointer;
transition:
transform .1s ease,
box-shadow .2s ease,
background .25s ease;
}

.glass-btn{
padding: 0.5em 1em;
}

.glass-btn-round{
padding: 0.5em 0.5em;
}

.glass-btn-round img {
	width: 1.5em;
}

.glass-btn::before{
content:"";
position:absolute;
}

.glass-btn:hover{
transform:translateY(1px);
background:rgba(255,255,255,0.35);
box-shadow: 0 4px 6px rgba(0,0,0,0.15),
inset 0 1px 2px rgba(255,255,255,0.8);
}

.glass-btn:active{
transform:translateY(3px) scale(0.98);
box-shadow:
inset 0 3px 6px rgba(0,0,0,0.2);
}



/*-------------------------------PROJECT ------------------------------*/
.project-title{
	display:flex;
	grid-template-columns: 1fr 1fr;
	align-items:center;
	justify-content:space-between;
	padding:5em 10% 0 10%;
	position:relative;
	font-size: 2em;
}

.project-title button {
	gap: 0.5em;
	padding: 0.5em 1em;
    border-radius: 100em;
    font-size: 0.5em;
}
.project-title img {
	width: 20px;
}

.project-meta {
	display:flex;
	align-items:center;
	justify-content:left;
	padding:0 10%;
	position:relative;
	font-size: 1em;
	gap: 2em;
}

.project-info1{
	display:flex;
	align-items:center;
	justify-content:center;
	padding: 4em 10%;
	position:relative;
	min-height: 75vh;
}
.project-img{
	width: 75%;
	text-align: right;
}
.sub-project-img {
	width: 50%;
}


.banner {
	width: 100vw;
}

.banner img {
	width: inherit;
}


.project-navigation {
	display:grid;
	justify-items:center;
	justify-content: space-between;
	grid-auto-flow: column;
	align-content: center;
	margin: 4em;
}

.project-navigation img {
	width: 4em;
    border-radius: 1.5em;
}

/*-------------------------------ABOUT ME ------------------------------*/

.aboutme{
	display: flex;
    text-align: left;
    padding: 5em 10% 0 10%;
    align-items: center;
    max-width: 1200px;
    gap: 2em;
}

.profile h1{
	text-align: left;
	padding: 0 10% 0 10%;
	max-width: 1200px;
}
.profile img {
	border-radius: 100em;
	width: 100%;
}

.companies{
    display: flex;
    justify-content: space-evenly;
    padding: 120px 10%;
    position: relative;
    width: 100vw;
    min-height: 50vh;
}
.companies .split {
	align-items: flex-start;
	gap: 15em;
}

.companies .text {
	font-size: 1em;
    line-height: 0;
    margin-bottom: 0em;
}

.companies-size {
	width: 100%;
}


.project-xp {
	padding: 120px 10%;
    position: relative;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-flow: column;
    align-items: top;
    justify-items: left;
    background: #E9ECEF;
    gap: 2em;
}



/* ------------------------------------------------------------ RESPONSIVE ------------------------------------------------------------*/

@media(max-width:1024px){

.sub-project-img {
	width: 100%;
}

.split{
flex-direction:column;
}
.companies .split {
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: 15em;
}

.split.reverse{
flex-direction:column;
}

.split img,
.text{
width:100%;
}

.hero h1{
font-size:5em;
}
.hero h2 {
	font-size: 4.1em;
}

header{
gap:10px;
}


}

.menu-toggle{
	display:none;
}

.header {
	padding: 1em 3em 1em 1em;
}


/* ------------------------------------------------------------ RESPONSIVE ------------------------------------------------------------*/
@media(max-width:425px){

.project-info1{
	padding: 4em 10%;
}

body{
overflow-x:visible;
}

body h1 {
	font-size: 1.5em;
}

body h2 {
	font-size: 1.1em;
}

body p {
	font-size: 0.95em;
}

.profile {
	margin: 0em 0 4em 0;
}

.profile h1 {
	opacity: 0;
}

.hero h1 {
	font-size: 2em;
}
.hero h2 {
	font-size: 1.65em;
}
.subtitle {
	font-size: 0.75em;
}
.text h2{
font-size:2em;
}

.text p{
font-size:0.95em;
}
.menu-toggle{
    display:block;
}

.social-links{
    display:none;
    flex-direction:column;
    position:absolute;
    top:50px;
    left:10%;
    transform: translateX(-50%);
    background:rgba(255 255 255 / 50%);
    backdrop-filter:blur(10px);
    padding:10px;
    border-radius:12px;
    opacity:0;
    transform:translate(-50%, -10px);
    transition:0.25s ease;
}

.social-links.active{
    display:flex;
    opacity:1;
    transform:translate(-50%,0);
}



.project-title {
	
	flex-direction: column;
    align-items: flex-start;
    font-size: 1.5em;
}
.project-title img {
	width: 10px;
}

.project-meta {
	flex-direction: column;
    align-items: flex-start;
    margin: 2em 0;
    gap: 0.5em;
}

.project-meta h2{
	font-size: 1em;
}

.line {
	height: 0em;
}

.aboutme{
	flex-direction: column-reverse;
}

.companies {
	flex-direction: column;
}
.companies .split {
	flex-direction: column;
	width: 100%;
	gap: 5em;
}

.project-xp {
    
    grid-template-columns: 1fr;
    grid-auto-flow: row;
}


.project-navigation {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        display: grid;
        grid-auto-flow: row;
        justify-content: center;
        align-content: center;
 }

.project-navigation img {
	width: 3.5em;
}
}