/* @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Jost:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Iosevka+Charon+Mono:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Jost:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Iosevka+Charon+Mono:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Jost:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&family=SN+Pro:ital,wght@0,200..900;1,200..900&display=swap');


/* GLOBAL STYLING */

:root {
	--white: #fff;
	--black: #1c212b;
	--gray: #67708410;
	--purple: #7008e7;
	--yellow: #f3ca4d;
	--green: #00C950;
	--border-clr: #eaeaea;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	/* font-family: "Inter", sans-serif; */
	font-family: "Rubik", sans-serif;
}

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

section {
	margin: 0 0 15px 0;
	border-style: solid;
	border-width: 1px 0;
	border-color: var(--border-clr);
}

/* Document styling */
.main {
	height: auto;
	width: 100vw;
	max-width: 1070px;
	margin: 0 auto;
	padding: 0 20px;
}

.main_wrapper {
	border-style: solid;
	border-width: 0 1px 0 1px;
	border-color: var(--border-clr);
}

.hero-sec {
	border-top: none;
}

.hero-sec_banner {
	height: 17vw;
	/* Graphic desiging */
	background-image: url("https://themewagon.github.io/Typefolio/images/hero-sec/banner-bg-img.png");
	/* Programming */
	/* background-image: url("https://images.unsplash.com/photo-1517852058149-07c7a2e65cc6?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"); */
	/* LAPTOP */
	/* background-image: url("https://images.unsplash.com/photo-1531297484001-80022131f5a1?q=80&w=1120&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"); */
	/* Blue bg */
	/* background-image: url("https://media.istockphoto.com/id/1809039359/photo/polygonal-background-with-dots-and-lines-network-connection-structure-science-and-technology.webp?a=1&b=1&s=612x612&w=0&k=20&c=j1cNU3N3vBvv2em5l5O3yFdBtoBFPSsFU__2seGkwoc="); */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hero-sec_profile-wrapper {
	padding: 0 10vw 3vw 10vw;
}

.hero-sec_dp img {
	width: 120px;
	height: 120px;
	margin-top: -60px;
	border: solid 5px #fff;
	border-radius: 50%;
}

.hero-sec_name {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 1vw;
}

.name_name {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.name_name h1 {
	font-family: "Inter";
	font-size: 2rem;
	line-height: 2.4rem;
	font-weight: 400;
	text-transform: capitalize;
}

.name_name h4 {
	color: var(--purple);
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 400;
	text-decoration: capitalize;
}

.name_name p {
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 400;
	text-decoration: capitalize;
}

.name_name p::before {
	content: "";
	height: 15px;
	width: 15px;
	display: inline-block;
	background-image: url("assets/pin.png");
	background-size: cover;
	margin-right: 5px;
}

.name_cta {
	display: flex;
	gap: 8px;
}

.cta_social-handler a{
	width: 2rem;
	height: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border: solid 1px lightgray;
	border-radius: 50%;
	cursor: pointer;
}
.cta_social-handler a:hover {
	background-color: var(--gray);
}

.cta_social-handler img {
	width: 1rem;
}

.cta_button {
	padding: 10px 20px;
	background-color: var(--black);
	border-radius: 30px;
	cursor: pointer;
	color: #fff;
	margin: 0 0 0 8px;
}

.cta_button a {
	height: 100%;
	width: 100%;
	color: #fff;
	text-decoration: none;
}


/* ABOUT SERVICE SECTION */
.about-service-sec {
	background-image: url("assets/about-me-bg.svg");
	background-size: contain;
	background-repeat: no-repeat;
	padding: 5vw 10vw;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.about-service-sec_about-box {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.about-box_heading, 
.service-box_heading, 
.work-heading_text,
.experience-heading_text,
.edu-heading_text,
.heading-box_heading {
	font-size: 0.9rem;
	line-height: 1.5rem;
	letter-spacing: 0.1rem;
	font-weight: 500;
	text-transform: uppercase;
}

.about-box_content {
	font-size: 1.8rem;
}

.about-box_note {
	color: #677084;
	font-size: 1.1rem;
	line-height: 1.5rem;
	font-weight: 400;
}

.service-box_services {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin: 1rem 0 0 0;
}

.service-box_heading {
	letter-spacing: 0;
}

.services_service {
	padding: 0.5rem;
	border: solid 0.5px rgba(210, 210, 210, 0.513);
	border-radius: 0.6rem;
}


/* WORK SECTION */
.work-sec, 
.experience-sec,
.edu-sec {
	padding: 2.5vw 0 0 0;
}

.work-sec_work-heading, 
.experience-sec_experience-heading,
.edu-sec_edu-heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10vw 2vw 10vw;
	border-style: solid;
	border-width: 0 0 1px 0;
	border-color: var(--border-clr);
}

.work-heading_btn {
	padding: 0.8rem 2rem;
	background: none;
	border: solid 1px var(--border-clr);
	border-radius: 0.5rem;
	cursor: pointer;
}
.work-heading_btn:hover {
	background-color: var(--gray);
}

.work-sec_projects {
	display: flex;
	justify-content: center;
	border-style: solid;
	border-width: 0 1px 0 0;
	border-color: var(--border-clr);
}

.projects_project {
	padding: 2rem;
}

.projects_project_first {
	border-style: solid;
	border-width: 0 1px 0 0; 
	border-color: var(--border-clr);
}

.project-banner {
	width: 26rem;
	border: solid 1px var(--border-clr);
}

.project_heading {
	padding: 0.8rem 0.8rem 0 0.8rem;
	font-size: 1.2rem;
	font-weight: 500;
}

.project_myrole {
	padding: 0.5rem 0.8rem 0 0.8rem;
	color: rgba(84, 84, 84, 0.879);
	font-size: 1rem;
}

.experience-cards {
	padding: 3vw 10vw;
}

.experience-card_icon {
	width: 2rem;
}

.experience-card_head-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.8rem 0 0 0;
}

.head-box_heading {
	font-size: 1.2rem;
	line-height: 1.8rem;
	font-weight: 500;
}

.head-box_period {
	display: flex;
	align-items: center;
	padding: 0.6rem 1rem;
	border-style: solid;
	border-width: 1px;
	border-color: var(--border-clr);
	border-radius: 0.7rem;
}

.period_icon {
	margin: 0 0.5rem 0 0;
	width: 0.9rem;
	height: 0.5rem;
	background-color: #000;
	border-radius: 3rem;
}

.first-exp-card {
	padding: 0 0 2.5rem 0;
	border-bottom: dashed 1px rgba(211, 211, 211, 0.58);
}

.second-exp-card {
	padding: 2.5rem 0 0 0;
}

.experience-card_list {
	padding: 1rem 0 0 0;
	margin: 0 0 0 0.9rem;
	color: #677084;
	font-size: 1rem;
}

.experience-card_list li {
	margin-top: 0.5rem;
}

/* EDUCATION SECTION */
.edu-sec_details {
	position: relative;
	display: flex;
	flex-direction: column;
}

.details_detail {
	display: flex;
	justify-content: flex-start;
	gap: 15rem;
	padding: 4rem 10vw 0 10vw;
}

.last-detail-card {
	padding-bottom: 3rem;
}

.deg-details_name {
	padding: 0 0 0.7rem 0;
	font-size: 1rem;
	font-weight: 400;
}

.deg-details_institute {
	color: #677084;
}

.divider-line {
	height: 400px;
	border-left: solid 1px var(--border-clr);
	position: absolute;
	left: 43%;
}

.circle {
	height: 1.3rem;
	width: 1.3rem;
	border-radius: 50%;
	position: absolute;	
	left: 42.1%;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.2rem;
	border: solid 1px var(--border-clr);
}

.circle::before {
	content: "";
	height: 100%;
	width: 100%;
	background-color: #000;
	border-radius: 50%;
}


/* CERTIFICATE SECTION */
.certificate-sec {
	position: relative;
	padding: 5vw 10vw 3vw 10vw;
	display: flex;
	gap: 18rem;
}

.list_certificate {
	display: flex;
	align-items: center;
	color: #1c212b;
	font-size: 1.3rem;
	line-height: 1.8rem;
	font-weight: 500;
	margin: 0 0 2rem 0;
	cursor: pointer;
}
.list_certificate::before {
	content: url("https://themewagon.github.io/Typefolio/images/icon/tile-arrow-icon.svg");
	margin-right: 0.8rem;
	height: 1.7rem;
}
.list_certificate:hover {
	color: #000;
}
.list_certificate:hover::before {
	rotate: 42deg;
}

.certificate-sec_divider {
	border-left: solid 1px var(--border-clr);
	position: absolute;
	left: 43%;
	top: 0;
	height: 427px;
}

/* FOOTER SECTION */
.footer {
	position: relative;
	padding: 1vw 10vw 2vw 10vw;
	color: gray;
	font-weight: 300;
}












/* =========================
   TABLET (≤ 1024px)
========================= */
@media (max-width: 1024px) {

	.hero-sec_profile-wrapper {
		padding: 0 5vw 3vw 5vw;
	}

	.work-sec_projects {
		flex-direction: column;
	}

	.projects_project_first {
		border-right: none;
		border-bottom: 1px solid var(--border-clr);
	}

	.project-banner {
		width: 100%;
	}

	.details_detail {
		gap: 5rem;
	}

	.certificate-sec {
		gap: 8rem;
	}
}


/* =========================
   MOBILE (≤ 768px)
========================= */
@media (max-width: 768px) {

	/* HERO */
	.hero-sec_banner {
		height: 30vw;
	}

	.hero-sec_name {
		flex-direction: column;
		gap: 1rem;
	}

	.name_cta {
		flex-wrap: wrap;
	}

	/* ABOUT */
	.about-service-sec {
		padding: 5vw;
	}

	.about-box_content {
		font-size: 1.3rem;
	}

	/* WORK */
	.work-sec_work-heading,
	.experience-sec_experience-heading,
	.edu-sec_edu-heading {
		padding: 0 5vw 2vw 5vw;
	}

	.experience-cards {
		padding: 3vw 5vw;
	}

	/* EDUCATION (fix timeline layout) */
	.details_detail {
		flex-direction: column;
		gap: 0.5rem;
		padding: 2rem 5vw;
	}

	.divider-line,
	.circle {
		display: none;
	}

	/* CERTIFICATE */
	.certificate-sec {
		flex-direction: column;
		gap: 2rem;
		padding: 5vw;
	}

	.certificate-sec_divider {
		display: none;
	}

	/* FOOTER */
	.footer {
		padding: 2rem 5vw;
	}
}


/* =========================
   SMALL MOBILE (≤ 480px)
========================= */
@media (max-width: 480px) {

	/* HERO */
	.hero-sec_dp img {
		width: 90px;
		height: 90px;
		margin-top: -45px;
	}

	.name_name h1 {
		font-size: 1.4rem;
		line-height: 1.8rem;
	}

	.name_name h4,
	.name_name p {
		font-size: 0.9rem;
	}

	.cta_button {
		padding: 8px 14px;
		font-size: 0.8rem;
	}

	/* SERVICES */
	.services_service {
		font-size: 0.8rem;
	}

	/* PROJECT */
	.project_heading {
		font-size: 1rem;
	}

	.project_myrole {
		font-size: 0.9rem;
	}

	/* EXPERIENCE */
	.head-box_heading {
		font-size: 1rem;
	}

	.head-box_period {
		font-size: 0.8rem;
		padding: 0.4rem 0.6rem;
	}

	/* CERTIFICATES */
	.list_certificate {
		font-size: 1rem;
	}
}