@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@500;800;900&display=swap');

:root {
	--primary-clr: hsl(0, 0%, 0%);
	--secondary-clr: hsl(0, 0%, 11%);
	--other-clr: hsl(0, 0%, 61%);
	--tag-clr: hsl(0, 0%, 55%);
	--accent-clr: hsl(160, 100%, 70%);
	--accent-other-clr: hsl(166, 100%, 80%);
	--main-clr: hsl(0, 0%, 95%);
	--section-mt: 8rem;
	--transition: cubic-bezier(0.25, 0.32, 0.85, 0.58);
	--transition-clr: color 300ms var(--transition);
	font-size: 10px;

	/* style for scrollbar */
	scrollbar-width: thin;
	scrollbar-color: var(--other-clr) hsl(0, 0%, 73%);
	scrollbar-width: thin;
	scrollbar-gutter: stable;
}

/* style webkit browsers (chrome, edge) scrollbar */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background-color: hsl(0, 0%, 89%);
}

::-webkit-scrollbar-thumb {
	background-color: var(--other-clr);
}

::selection {
	background: var(--accent-clr);
	color: var(--primary-clr);
}

/* remove focus from all elements */
*:focus:not(:focus-visible) {
	outline: none;
}

/* adds focus style only on pressing tab key */
:focus-visible {
	outline: 2px dotted var(--accent-clr);
	outline-offset: 3px;
}

/***********************
	CSS RESET
*********************/
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Set core root defaults */
@media screen and (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Fira Sans', 'Segoe UI',
		'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
		'Helvetica Neue', sans-serif;
	font-size: clamp(1.4rem, 1vw, 1.6rem);
	line-height: 1.6;
	background: var(--primary-clr);
	color: var(--main-clr);
	min-height: 100vh;
	text-rendering: optimizeSpeed;
}

a {
	text-decoration: none;
	color: currentColor;
}

img,
picture {
	max-width: 100%;
	display: block;
}

input,
button,
textarea,
select {
	font: inherit;
	all: unset;
}

ul li {
	list-style: none;
}

h1,
h2,
h3 {
	line-height: 1.2;
	font-weight: 900;
}

/***********************
	ANIMATION UTILITIES
*********************/
.bounce-in-left {
	animation: bounce-in-left 1.1s both 0.3s;
}

.slide-in-top {
	animation: slide-in-top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.fade-in {
	animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) 0.5s both;
}

@keyframes bounce-in-left {
	0% {
		transform: translateX(-600px);
		animation-timing-function: ease-in;
		opacity: 0;
	}
	38% {
		transform: translateX(0);
		animation-timing-function: ease-out;
		opacity: 1;
	}
	55% {
		transform: translateX(-68px);
		animation-timing-function: ease-in;
	}
	72% {
		transform: translateX(0);
		animation-timing-function: ease-out;
	}
	81% {
		transform: translateX(-28px);
		animation-timing-function: ease-in;
	}
	90% {
		transform: translateX(0);
		animation-timing-function: ease-out;
	}
	95% {
		transform: translateX(-8px);
		animation-timing-function: ease-in;
	}
	100% {
		transform: translateX(0);
		animation-timing-function: ease-out;
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes slide-in-top {
	0% {
		transform: translateY(-1000px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

/*******************
		UTILITIES
*************************/
.container {
	max-width: 1200px;
	margin-inline: auto;
	padding: 0 1rem;
}

.subtitle {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: clamp(1.2rem, 1vw, 1.35rem);
	color: var(--accent-clr);
}

.title {
	font-size: clamp(3.2rem, 3vw, 6rem);
}

.info {
	max-width: 500px;
	font-size: 1.35rem;
	padding-block-start: 1.3rem;
	color: var(--other-clr);
}

.btn {
	padding: 0.8rem 3rem;
	margin-block-start: 2rem;
	color: var(--main-clr);
	border-radius: 0.2rem;
	cursor: pointer;
}

.btn:active {
	transform: scale(0.98);
}

.hover-effect::after {
	position: absolute;
	content: '';
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1.5px;
	background: var(--accent-clr);

	transform: scaleX(0);
	transform-origin: left;
	transition: all 300ms ease-in-out;
}

.hover-effect:hover::after {
	transform-origin: right;
	transform: scaleX(1);
}

small {
	color: var(--other-clr);
}

/* link to skip to content for accesibility (keyboard users) */
.skip-to-content {
	position: absolute;
	background: var(--accent-clr);
	color: var(--secondary-clr);
	padding: 0.75rem 1rem;
	left: 1.5rem;
	top: 0;
	border-radius: 0 0 0.5rem 0.5rem;
	font-size: 1.4rem;
	transform: translateY(-200%);
	transition: all 350ms ease-in;
}

.skip-to-content:focus {
	transform: translateY(0);
}

/*******************
		HEADER
*************************/
.nav {
	width: 100%;
	padding: 0 1rem;
}

.nav .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 2rem;
	background: var(--secondary-clr);
	margin-block-start: 1.15rem;
	border-radius: 0.5rem;
	font-size: 1.4rem;
}

.nav-logo h3 {
	font-weight: 800;
}

.logo {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.hamburger {
	display: none;
}

.nav-list {
	display: flex;
	align-items: center;
	gap: 5rem;
}

.nav-links {
	position: relative;
	transition: var(--transition-clr);
}

.nav-links:hover {
	color: var(--accent-clr);
}

.social-nav {
	display: flex;
	align-items: center;
	gap: 2.5rem;
}

.social-nav a {
	line-height: 0;
	width: 33px;
	height: 33px;
	border-radius: 50%;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 300ms cubic-bezier(0.25, 0.32, 0.85, 0.58);
}

.social-nav a:hover {
	background: var(--accent-other-clr);
	color: var(--secondary-clr);
}

/*******************
		HERO SECTION
*************************/
.hero {
	padding: 0 1rem;
}

.hero .container {
	margin-block-start: var(--section-mt);
	display: grid;
	place-items: center;
	gap: 5rem;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.hero-intro {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.name {
	font-size: clamp(4rem, 5vw, 6rem);
}

.intro {
	color: var(--other-clr);
}

.hero img {
	max-width: 375px;
}

.hero .code {
	filter: drop-shadow(0 0 0.75rem var(--secondary-clr));
}

.hero-btn-container {
	margin-block-start: 5rem;
	display: flex;
	/* align-items: center; */
}

.hire-btn {
	text-transform: uppercase;
	letter-spacing: 1px;
	display: inline-block;
	border: 1px solid var(--accent-clr);
	color: var(--accent-clr);
	transition: all 300ms cubic-bezier(0.25, 0.32, 0.85, 0.58);
	z-index: 1;
	position: relative;
	font-size: inherit;
	overflow: hidden;
}

.hire-btn::before {
	content: '';
	z-index: -1;
	position: absolute;
	top: 100%;
	right: 100%;
	width: 2rem;
	height: 1em;
	border-radius: 50%;
	background-color: var(--accent-clr);
	transform-origin: center;
	transform: translate3d(50%, -50%, 0) scale3d(0, 0, 0);
	transition: transform 0.45s ease-in-out;
}

.hire-btn:hover {
	cursor: pointer;
	color: hsl(0, 0%, 9%);
	border: 0;
}

.hire-btn:hover::before {
	transform: translate3d(50%, -50%, 0) scale3d(15, 15, 15);
}

.download-link {
	color: var(--other-clr);
	transition: color 0.45s ease-in-out;
}

.download-link:hover {
	color: #fff;
}

.download-link:focus {
	outline: none;
}

/*******************
		ABOUT SECTION
*************************/
.about-me {
	margin-block-start: var(--section-mt);
	background: var(--secondary-clr);
	padding: var(--section-mt) 1rem;
}

.about-me .container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	place-items: center;
	gap: 8rem;
	position: relative;
}

.about-me img {
	align-self: end;
	justify-self: end;
	width: 425px;
	box-shadow: 0px 0px 2.2px rgba(0, 0, 0, 0.006),
		0px 0px 5.3px rgba(0, 0, 0, 0.008), 0px 0px 10px rgba(0, 0, 0, 0.01),
		0px 0px 17.9px rgba(0, 0, 0, 0.012), 0px 0px 33.4px rgba(0, 0, 0, 0.014),
		0px 0px 80px rgba(0, 0, 0, 0.02);
	/* filter: brightness(0.8); */
}

.about {
	padding-block-start: 1.25rem;
}

.about p {
	padding-block-start: 2rem;
	line-height: 1.8;
}

/*******************
		MY SKILLS SECTION
*************************/
.my-skills {
	margin-block-start: var(--section-mt);
	padding: 4rem 1rem;
}

#skills {
    padding-top: 130px; /* Adjust this value based on your header height */
   
}

.my-skills ul {
	padding-block-start: 5rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 3.2rem 1rem;
}

/*******************
		PROJECTS SECTION
*************************/
.projects-section {
	margin-block-start: var(--section-mt);
	padding: 4rem 1rem;
}

.projects {
	padding-block-start: 5rem;
	display: flex;
	flex-direction: column;
	gap: 12rem;
}

.project {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	place-items: center;
	gap: 5rem;
}

.project-img {
	transition: opactiy 300ms ease-in-out;
	position: relative;
	display: inline-block;
	height: 100%;
}

.project-img:hover {
	opacity: 0.9;
}

.project:nth-child(even) a {
	order: 2;
}
.project:nth-child(even) div {
	order: 1;
}

.project h3 {
	font-size: clamp(2rem, 3vw, 4rem);
	font-weight: 500;
	letter-spacing: 5px;
	color: var(--other-clr);
}

.project h2 {
	padding-block-start: clamp(1.5rem, 2vw, 3rem);
	font-size: clamp(2.5rem, 3vw, 4rem);
}

.project p {
	padding-block-start: 1.5rem;
	max-width: 500px;
}

.tech-stack,
.project-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem;
	padding-block-start: 2rem;
}

.project-links {
	column-gap: 5rem;
	padding-block-start: 3.2rem;
}

.tech-stack li {
	padding: 0.2rem 0.5rem;
	background: var(--tag-clr);
	border-radius: 2px;
	color: var(--primary-clr);
	font-size: clamp(1.15rem, 1vw, 1.3rem);
}

.project-links a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	position: relative;
	transition: var(--transition-clr);
}

.project-links a:hover {
	color: var(--accent-clr);
}

/* other noteworthy projects */
.other-noteworthy-project {
	margin-block-start: 15rem;
}

.other-noteworthy-project h3 {
	text-align: center;
	font-size: 3rem;
}

.other-projects {
	padding-block-start: calc(var(--section-mt) / 2);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 4rem;
	max-width: 1000px;
	margin: 0 auto;
}

.other-projects a {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
	background: var(--secondary-clr);
	border-radius: 0.3rem;
	overflow: hidden;
	font-size: 1.45rem;
	box-shadow: 0px 0px 2.2px rgba(0, 0, 0, 0.011),
		0px 0px 5.3px rgba(0, 0, 0, 0.016), 0px 0px 10px rgba(0, 0, 0, 0.02),
		0px 0px 17.9px rgba(0, 0, 0, 0.024), 0px 0px 33.4px rgba(0, 0, 0, 0.029),
		0px 0px 80px rgba(0, 0, 0, 0.04);
	transition: background 300ms ease-in-out;
}

.other-projects a:hover {
	background: transparent;
	box-shadow: 0px 0px 1px var(--other-clr);
}

.other-projects a img {
	object-fit: cover;
	height: 300px;
}

.other-projects div {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
}

.other-projects h4 {
	font-size: clamp(1.5rem, 2vw, 2rem);
}

.other-projects ul {
	display: flex;
	align-items: center;
	gap: 1rem;
	color: var(--accent-clr);
	font-size: clamp(1.15rem, 1vw, 1.3rem);
}

.other-projects p {
	font-size: clamp(1.15rem, 1vw, 1.3rem);
}

/*******************
		CONTACT SECTION
*************************/
.contact {
	margin-block-start: var(--section-mt);
	padding: 4rem 1rem;
}

.mail-link {
	display: flex;
	margin-block-start: var(--section-mt);
	width: max-content;
	transition: var(--transition-clr);
	position: relative;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.mail-link:hover {
	color: var(--accent-clr);
	text-decoration: none;
}

/*******************
		FOOTER
*************************/
.footer {
	margin-block-start: var(--section-mt);
	padding: 0 1rem;
}

.footer .container {
	margin-block-start: var(--section-mt);
	font-size: 1.35rem;
	padding: 2rem 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.footer em {
	color: var(--other-clr);
}

.footer div {
	display: flex;
	align-items: center;
	gap: 5rem;
}

.footer ul {
	display: flex;
	align-items: center;
	gap: 2rem;
}

.footer a {
	letter-spacing: 1px;
	transition: var(--transition-clr);
	position: relative;
}

.footer a:hover {
	color: var(--accent-clr);
}

.top {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	font-size: 1.15rem;
}

.scroll {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	align-items: flex-end;
}

/* responsiveness */
@media screen and (max-width: 50em) {
	body::after {
		position: absolute;
		content: '';
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: var(--secondary-clr);
		transform: translateY(-100%);
	}

	body.open::after {
		transition: transform 300ms ease-in-out;
		transform: translateY(0);
	}

	.skip-to-content {
		display: none;
	}

	.nav {
		position: relative;
		z-index: 1;
	}

	.nav-list,
	.social-nav {
		transition: opacity 300ms ease-in-out;
	}

	.nav-list {
		flex-direction: column;
		position: absolute;
		top: 250px;
		left: 50%;
		transform: translate(-50%);
		height: 100vh;
		opacity: 0;
		pointer-events: none;
	}

	.social-nav {
		opacity: 0;
		pointer-events: none;
		position: absolute;
		top: 175px;
		left: 50%;
		transform: translateX(-50%);
	}

	.nav-list.open,
	.social-nav.open {
		opacity: 1;
		pointer-events: all;
	}

	.hero-btn-container {
		justify-content: center;
	}

	/* hamburger menu */
	.hamburger {
		width: 25px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		cursor: pointer;
		transition: transform 330ms ease-out;
	}

	.hamburger.open {
		transform: rotate(-45deg);
	}

	.line-menu {
		background: hsl(0, 0%, 100%);
		width: 100%;
		height: 1.5px;
	}

	.line-menu:not(:first-child) {
		margin-block-start: 0.75rem;
	}

	.line-menu.half {
		width: 50%;
	}

	.line-menu.start {
		transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
		transform-origin: right;
	}

	.open .line-menu.start {
		transform: rotate(-90deg) translateX(3px);
	}

	.line-menu.end {
		align-self: flex-end;
		transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
		transform-origin: left;
	}

	.open .line-menu.end {
		transform: rotate(-90deg) translateX(-3px);
	}

	.hero .container {
		height: 60vh;
		text-align: center;
		position: relative;
	}

	.hero img {
		display: none;
	}

	.my-skills ul {
		grid-template-columns: repeat(2, 1fr);
	}

	.project:nth-child(even) img {
		order: 1;
	}
	.project:nth-child(even) div {
		order: 2;
	}

	.other-projects {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.other-projects ul {
		justify-content: center;
	}

	.footer .container {
		justify-content: center;
		gap: 3rem;
	}

	.mail-link {
		justify-content: center;
	}
}



#about p {
    font-size: 16px;
    line-height: 1.6;
}

.experience-container{
	margin-block-start: var(--section-mt);
	padding: 4rem 1rem;
}

/* Experience Section Layout */
.experience{
	
	margin-top:30px;
    display: flex;
	margin-left:10%;
}

.company-list {
    width: 400px;
    padding-right: 30px;
}

.company-list ul {
    list-style: none;
    padding: 0;
}

.role-name{
	margin-bottom:10px;
}


.date{
	margin-bottom:5px;
}


/* .company-list ul li {
    margin-bottom: 10px;
} */

.company-list button {
    
    color: white;
    border: none;
    padding: 20px 20px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-size: 16px;
	border-left: 4px solid #2f3640;
} 

 .company-list button:hover {
    background-color: #333;
} 



/* Active button styling */
.company-list button.active {
	background-color: #444;
    color: #fff; /* White text for the active button */
    font-weight: bold;
	border-left: 4px solid var(--accent-clr);
}
/* Right side with dynamic details */
.company-details {
	margin-left:50px;
    width: 70%;
}

.technologies{
	font-size:small;
	color:var(--accent-clr);
}

.experience-entry {
    display: none;
}

.experience-entry.active {
    display: block;
}


.experience-entry ul {
    list-style-type: none; /* Remove default list bullets */
    padding: 0; /* Remove default padding */
}

.experience-entry ul li {
    position: relative;
    margin-bottom: 15px; /* Space between list items */
    padding-left: 20px; /* Space to account for custom bullet */
}

.experience-entry ul li:before {
    content: "•"; /* Use a bullet-like symbol */
    position: absolute;
    left: 0;
    color: #90ee90; /* Same green color as the border for the bullet */
    font-size: 18px; /* Slightly larger bullet */
    line-height: 1.5;
}

.hidden {
    display: none;
}

/* Media Queries */
@media only screen and (max-width: 600px) {
    .experience-container {
        flex-direction: column;
    }

    .company-list, .company-details {
        width: 100%;
    }
}


#certifications {
    background-color: #1e1e1e; /* Dark background */
    color: #fff; /* White text */
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Arial, sans-serif;
}

.certification-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.certification-card {
    background-color: #1f3349; /* Blue background */
    padding: 20px;
    border-radius: 10px;
    width: 40%;
}

.certification-card img {
    width: 100px; /* Adjust logo size */
    margin-bottom: 10px;
}

.certification-card h2 {
    font-size: 24px;
    margin: 10px 0;
}

.certification-card p {
    font-size: 14px;
    color: #ccc; /* Lighter text color */
    margin: 5px 0;
}

.certification-details p {
    margin: 10px 0;
    font-size: 14px;
}

.certification-details a {
    color: #f89c1c; /* AWS orange */
    text-decoration: none;
}

.certification-text {
    text-align: right;
    width: 50%;
}

.certification-text h3 {
    color: #888; /* Lighter gray for title */
    letter-spacing: 2px;
}

.certification-text h1 {
    font-size: 36px;
    margin: 10px 0;
}

.certification-text p {
    font-size: 16px;
}

.pdf-container {
    position: relative;
    width: 48%;
    padding-bottom: 41%; /* Adjust aspect ratio as needed */
}

.pdf-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


#achievements{
	margin-bottom: 100px;
}