@import url("reset.css");
@import url("layout.css");
@import url("variables.css");
@import url("typography.css");
/* DO NOT EDIT THESE IMPORTS
In order to keep our CSS as manageable as possible, we're starting with multiple separate stylesheets. They are all imported into style.css.

    Do not edit reset.css at all.
    You can minimally edit layout.css to match your specific column/row grid rules. Try to keep all basic structural rules here.
    Optionally, you can set colour variables in variables.css.
    Use typography.css stylesheet to set your general text styles.
    Use style.css for all general UI styles, or anything that you want to overwrite from other stylesheets, because it's loaded last. */

/* Use this stylesheet to add your UI details, and to overwrite layout details for specific instances. */

body {
	margin: 0;
	/* background-color: #f3f3f3; */
	background-color: #161519;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	flex: 1;
}
header {
	margin-bottom: 100px;
}

/* ------------------Style the header---------------- */

.main-header {
	list-style: none;
	display: flex;
	justify-content: center;
}
.logo {
	height: 50px;
	margin-right: 10px;
	border: 0;
	outline: none;
}

.main-header img {
	height: 50px;
	width: auto;
	cursor: pointer;
}
.header-container {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 40px;
	margin-bottom: 15%;
}
.header-points {
	list-style: none;

	display: flex;
	justify-content: center;
}

.header-points li {
	padding: 20px;
}
.header-points li a {
	text-decoration: none;
	list-style: none;
}
/* 'hamburger menu' */
.hamburger {
	display: none;
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
}
.close-btn-container {
	display: none;
	text-align: right;
	padding: 10px;
}
.close-btn {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: #f3f3f3;
}
.header-points.active .close-btn-container {
	display: block;
}
/* ----------Style the navigation----------- */
nav ul {
	list-style-type: none;
	padding: 0;
}

nav li {
	display: inline;
}

nav a {
	display: inline-block;
}
/* dropdown  */
.dropdown {
	position: relative;
}

.dropdown-content {
	display: none;
	position: absolute;

	min-width: 160px;
	z-index: 1;
}

.dropdown-content a {
	color: #f3f3f3;
	padding: 5px 10px;
	text-decoration: none;
	display: block;
	font-weight: bold;
	font-size: 13px;
}
.dropdown-content a:hover {
	color: #bc3439;
}
/* arrows for zoomed in images*/

/* .lightbox-prev,
.lightbox-next {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 18%;
	max-width: 160px;
	border: none;
	background: transparent;
	color: #f3f3f3;
	cursor: pointer;
	background-color: #bd3014;
	border-radius: 50%;
} */
.lightbox-prev {
	left: 0;
}

.lightbox-next {
	right: 0;
}

.lightbox-prev::before,
.lightbox-next::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 160ms ease;
}

.lightbox-prev::before {
	background: linear-gradient(90def, rgba(189, 48, 20, 0, 0.18), transparent);
}

.lightbox-prev::before {
	background: linear-gradient(270deg, rgba(189, 48, 20, 0, 0.18), transparent);
}

.lightbox-prev::before,
.lightbox-next:hover::before {
	opacity: 1;
}
/* LIGHTBOX OVERLAY */

/* LIGHTBOX ARROWS */
.lightbox-prev,
.lightbox-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background-color: #bc3439;
	color: #f3f3f3;
	cursor: pointer;
	z-index: 10001;
}

.lightbox-prev {
	left: 24px;
}

.lightbox-next {
	right: 24px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
	background-color: #f3f3f3;
	color: #bc3439;
}

/* LIGHTBOX CLOSE BUTTON */
.lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background-color: #bc3439;
	color: #f3f3f3;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	z-index: 10001;
}

.lightbox-close:hover {
	background-color: #f3f3f3;
	color: #bc3439;
}

/* hide screen-reader text but keep it accessible */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/* arrow glyph centered */
/* .lightbox-prev span,
.lightbox-next span {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 44px;
	opacity: 0.9;
} */

.lightbox-prev span {
	left: 16px;
}
.lightbox-next span {
	right: 16px;
}

.lightbox-close:hover {
	background: #bc3439;
	color: #f3f3f3;
}
.dropdown:hover .dropdown-content {
	display: block;
}

/* Lightbox arrows – match gallery arrows */
/* .lightbox .prev,
.lightbox .next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10001;
} */
.lightbox {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.9);
	padding: 0 20px;
	z-index: 9999;
}

.lightbox.is-open {
	display: flex;
}

.lightbox-img {
	display: block;
	margin: 0 auto;
	max-width: min(1100px, 90vw);
	max-height: 85vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 10px;
}
/* Positioning */
.lightbox .prev {
	left: 20px;
}
.lightbox .next {
	right: 20px;
}
.lightbox-img {
	display: block;
	margin: 0 auto; /* THIS is the key fix */
	max-width: min(1100px, 90vw);
	max-height: 88vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 10px;
}
/* Bigger when zoomed in */
.lightbox .prev,
.lightbox .next {
	width: 64px;
	height: 64px;
	font-size: 22px;
}

/* Positioning */
.lightbox-prev {
	left: 20px;
}
.lightbox-next {
	right: 20px;
}

/* Hover effect (desktop) */
.lightbox-prev:hover,
.lightbox-next:hover {
	background-color: #f3f3f3;
	color: #bc3439;
}

/* Active (tap feedback) */
.lightbox-nav:active {
	transform: translateY(-50%) scale(0.95);
}

/* hello section */
.centre-item {
	margin-top: -6rem;
}
.centre-item {
	padding-bottom: 6rem;
}

@media (max-width: 768px) {
	.centre-item {
		padding-bottom: 4rem;
	}
}

@media (max-width: 480px) {
	.centre-item {
		padding-bottom: 3rem;
	}
}
/* Lightbox overlay*/

/* .lightbox {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, 0.85);
	z-index: 9999;
} */
/*show state*/
/* .lightbox.is-open {
	display: flex;
} */
/* 
.lightbox-img {
	max-width: min(1100px, 95vw);
	max-height: 90vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 10px;
} */
/*close button*/
.lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background-color: #bc3439;
	color: #f3f3f3;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	z-index: 10002;
	pointer-events: auto;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/*make it obvious its clickable*/
.highlight,
.preview img {
	cursor: zoom-in;
}

/* ------------------Sections and pages------------------ */
/* Style any specific sections or pages here */
/*removes the highlight on the burger menu*/

/* Remove tap highlight color */
.hamburger,
.close-btn {
	-webkit-tap-highlight-color: transparent;
}

/* Remove default iOS button styling */
.hamburger,
.close-btn {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	outline: none;
}

/* Remove focus ring */
.hamburger:focus,
.close-btn:focus {
	outline: none;
	box-shadow: none;
}
/* project summary-main page */
#summary {
	margin-top: 200px;
	margin-bottom: 200px;
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 5%;
}
#section {
	margin-left: 5%;
}
.projectstitle {
	margin-left: 48px;
	/* padding-left: 30px; */
	margin-bottom: 30px;
}
.oneprojectpic img {
	object-fit: cover;
}
.project-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* grid-template-rows: repeat(2, auto); */
	gap: 20px;

	width: calc(100% - 120px);
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	/* padding: 0 20px;
	box-sizing: border-box; */
}
/* .project-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	margin: 40px auto;
} */
.project {
	/* padding: 15px;
	border-radius: 5px; */

	text-align: left;
}
.project img {
	background-color: #555;
}
.project h4,
.project h5,
.project p {
	margin-left: 0;
}
.project:hover h4,
.project:hover h5,
.project:hover p {
	color: #bc3439;
	transition: color 0.3s ease;
}
.project h4 {
	font-family: "ANKISH-V2", sans-serif !important;
}
/* .project img {
	width: 90%;
	height: 250px;
	border-radius: 5px;
	margin-bottom: 10px;
	object-fit: contain;
	background-color: #555;
	justify-content: center;
	
} */
.project img {
	width: 100%;
	height: 250px;
	display: block;
	object-fit: cover;
	border-radius: 5px;
	margin-bottom: 10px;
	background-color: transparent;
}
/* back to the top button */
#back-to-top {
	display: block;
	background-color: #f3f3f3;
	color: #000000;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	margin-top: 10px;
	margin: 20px auto;
	width: fit-content;
	/* margin-right: 10%; */
	/* margin-left: 35%; */
	margin-bottom: 4%;
	justify-content: center;
}

#back-to-top:hover {
	background-color: #bc3439;
	color: #f3f3f3;
}
#back-to-top i {
	margin-right: 8px;
}

.project-grid img {
	filter: grayscale(50%);
	transition: filter 0.5s ease;
}

.project-grid img:hover {
	filter: grayscale(0%);
}

/*Projets background section */

/* .gallery-bg {
	position: relative;
	background-image: url("images/Websitebackground@2x.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 120px 5% 120px;

	color: #f3f3f3;

	border-radius: 120px;
	overflow: hidden;
} */

/* .gallery-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	pointer-events: none;
} */

.gallery-bg > * {
	position: relative;
	z-index: 1;
}

.gallery-bg {
	filter: none;
}
.gallery-bg::before {
	background: rgba(0, 0, 0, 0.6);
}
.gallery-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rbga(255, 255, 255.03);
	mix-blend-mode: overlay;
	pointer-events: none;
}

/* Connect with me  */

.contactinfo {
	margin-left: 10%;
	margin-bottom: 10%;
}
#connect {
	/* margin-left: 0 auto;
	width: 100%;
	max-width: 1200px;
	
	margin: 0 auto;
	padding: 0 5%;
	box-sizing: border-box; */
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
}
.contactinfo {
	/* margin-left: 60px; */
	margin-bottom: 100px;
	/*padding-left: 20px;  Match the projects alignment */
	width: calc(100% - 120px);
}
.contactheader {
	font-size: 8rem;
	margin-left: 0;
	color: #bc3439;
	margin-top: 1rem;
	font-family: "ANKISH-V2", sans-serif !important;
}
/* social links-mainpage */
/* footer-mainpage */
.footerlinks {
	display: flex;
	justify-content: center;
	align-items: center; /* Vertical */
	flex-direction: column;
	text-align: center;
	gap: 20px;
	padding: 20px 0;
	max-width: 1200px;
}
.footerlinks ul {
	justify-content: center;
	list-style: none;
	text-decoration: none;
	display: flex;
	gap: 40px;
}
.footerlinks ul li {
	padding-right: 30px;
}
footer {
	justify-content: center;
	padding: 20px 0;
	margin-top: auto;
	display: inline-grid;
	width: 100%;
	height: 100px;
}
#back-to-top {
	font-family: "ANKISH-V2", sans-serif !important;
}
.social-links {
	margin-top: 1%;
}
.social-links a {
	margin-right: 2%;
}
.social-links i {
	padding-right: 10px;
}

/*illustration digital*/
.home-gallery-section {
	width: 100%;
	max-width: 1200px;
	margin: 100px auto 140px;
	padding: 0 5%;
}

.home-scroll-gallery {
	width: 90%;
	margin: 0 auto;
	display: flex;
	gap: 24px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 50%;
	padding: 45px 50%;
	-webkit-overflow-scrolling: touch;
}
.illustration-thumb {
	flex: 0 0 190px;
	height: 250px;
	border: none;
	background: none;
	padding: 0;
	cursor: zoom-in;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	transition:
		transform 0.3s ease,
		opacity 0.3s ease;
	opacity: 0.55;
}

.illustration-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

.illustration-thumb.is-center {
	transform: scale(1.18);
	opacity: 1;
	z-index: 2;
}

.home-scroll-gallery::-webkit-scrollbar {
	height: 8px;
}

.home-scroll-gallery::-webkit-scrollbar-thumb {
	background: #bc3439;
	border-radius: 20px;
}

.home-scroll-gallery::-webkit-scrollbar-track {
	background: #2a292d;
}
.illustration-lightbox {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.92);
	z-index: 99999;
	padding: 20px;
}

.illustration-lightbox.is-open {
	display: flex;
}

.illustration-lightbox img {
	max-width: 92vw;
	max-height: 88vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 10px;
}

.illustration-lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background-color: #bc3439;
	color: #f3f3f3;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	z-index: 100000;
}
.home-scroll-gallery {
	scroll-padding-inline: 45%;
	padding: 40px 45%;
}

@media (max-width: 600px) {
	.home-scroll-gallery {
		width: 90%;
		gap: 14px;
		padding: 35px 0;
	}

	.illustration-thumb {
		flex: 0 0 135px;
		height: 190px;
	}

	.illustration-thumb.is-center {
		transform: scale(1.15);
	}
}
.illustrations-title2 {
	font-size: clamp(2rem, 6vw, 5rem);
	line-height: 0.95;
}
@media (max-width: 600px) {
	.illustrations-title2 {
		font-size: 2.5rem;
	}
}

@media (max-width: 430px) {
	.illustrations-title2 {
		font-size: 1rem;
	}
}

@media (max-width: 375px) {
	.illustrations-title2 {
		font-size: 1.7rem;
	}
}
/* Project 1 page */
/* Swiper Container */
.container {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}
.item {
	display: flex;
	gap: 40px;
	width: 100%;
}
.pic {
	width: 60%;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.content {
	display: flex;
	flex-direction: column;
	width: 40%;
	justify-content: center;
	margin-top: -25%;
}
.content .topic {
	font-size: 1.5rem;
	color: #f3f3f3;
	margin-bottom: 20px;
}
.content .des {
	font-size: 1rem;
	/* list-style: 1.6; */
	color: #f3f3f3;
}

.highlight {
	width: 100%;
	height: 600px;
	object-fit: contain;
	/* background-color: #000000; */
	background: transparent;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	border: 1px solid #000;
	display: block;
}
.preview {
	display: flex;
	gap: 35px;
	margin-top: 10px;

	justify-content: center;
}
/* .preview img {
	width: 100px;
	height: 150px;
	opacity: 0.5;
	transition: opactiy 0.4s ease;
	cursor: pointer;
	object-fit: contain;
	border-radius: 5px;
	background-color: #000000;
	border: 1px solid #000;
} */

.preview img {
	width: 100px;
	height: 150px;
	object-fit: cover; /* fills the box nicely */
	border-radius: 5px;
	background-color: transparent; /* remove black fill */
	border: none; /* remove border */
	opacity: 0.5;
	transition: opacity 0.4s ease;
	cursor: pointer;
}
.preview img.activepic {
	opacity: 1;
}
/* .button-container {
	width: 60%;
	margin: 20px auto 10%;
	/* max-width: 1200px; */

.button {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 10%;
	margin-left: 400px;
	padding-right: 30%;
	display: flex;
	justify-content: flex-end;
	gap: 20px;
}

@media only screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 3) {
	.container {
		flex-direction: column !important;
	}

	.content,
	.pic {
		width: 100% !important;
	}

	/* .button {
		left: 50% !important;
		transform: translateX(-50%) !important;
	} */
}
@media only screen and (max-device-width: 430px) and (-webkit-device-pixel-ratio: 3) {
	/* Override any Safari-specific quirks */
}
.button button {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #bc3439;
	border: none;
	color: #f3f3f3;
	cursor: pointer;
	margin: 0 10px;
	transition: background-color 0.3s ease;
}

.button button:hover {
	background-color: #f3f3f3;
	color: #bc3439;
}
.visually-hidden {
	overflow: hidden;
	display: none;
}
.footer-social a {
	margin-right: 20px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 1rem;
	color: #f3f3f3;
	text-decoration: none;
}
.footer-social a:hover {
	color: #bc3439;
}
.footer-social-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.footer-social {
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 25px;
	width: 100%;
	padding: 15px 0;
	/*order: 1;  Ensures social links come first */
}
.rrcmessage {
	font-size: 0.9rem;
	color: #f3f3f3;
	margin: 5px 0 15px 0;
	order: 2; /* Ensures copyright comes after social links */
	width: 100%;
	text-align: center;
}
.footerlinks {
	width: 100%;
	box-sizing: border-box;
}

.footer-social {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 10px;
}

.footer-social::-webkit-scrollbar {
	display: none; /* Hide scrollbar */
}
/* img.activepic {
	opacity: 1;
} */

.img {
	max-width: 100%;
	height: auto;
}
.illustrations-title {
	font-size: clamp(1.4rem, 4vw, 5rem);
	line-height: 1;
	white-space: nowrap;
}
/* //////////////----Responsive layout - Media queries--------//////////// */

/* You can edit the rules inside of these media queries, but you can also edit the breakpoints to work for your own content and design. */
@media (max-width: 768px) {
	.illustrations-title {
		font-size: 2.2rem;
		white-space: nowrap;
	}
}

@media (max-width: 480px) {
	.illustrations-title {
		font-size: 1.7rem;
	}
}

@media (max-width: 375px) {
	.illustrations-title {
		font-size: 1.45rem;
	}
}
@media (max-width: 768px) {
	.project-grid img,
	.project-grid img:hover {
		filter: none !important;
	}
}
@media (min-width: 376px) and (max-width: 599px) {
	/* Keep the original layout for screens between 376px and 599px */
	.container {
		flex-direction: row;
	}
	.item {
		flex-direction: row;
	}
	.content {
		order: initial;
		width: 40%;
	}
	.pic {
		order: initial;
		width: 60%;
	}
	.button {
		order: initial;
	}
}

@media (max-width: 435px) {
	/*projects page*/
	.header-container {
		margin-top: 20px;
		margin-bottom: 10%;
	}
	.des p {
		font-size: 5px;
	}
	.logo {
		height: 40px;
	}
	.hamburger {
		font-size: 20px;
		margin-left: 15px;
		margin-top: 15px;
		color: #f3f3f3;
	}
	.header-points {
		top: 60px;
	}
	/*summary page*/
	.project-grid {
		grid-template-columns: 1fr !important;
		gap: 30px;
		width: 90%;
		margin: 30px auto 0 auto;
	}
	.inner-wrapper h1 {
		font-size: 5rem !important;
	}
	.project {
		margin-bottom: 30px;
		text-align: center;
	}
	.project img {
		width: 100% !important;
		height: 200px !important;
		margin-bottom: 15px;
	}
	.projectstitle {
		font-size: 3.2rem !important;
		margin-left: 5%;
		margin-bottom: 40px !important;
	}

	#summary h4 {
		font-size: 3rem !important;
		margin-top: 30px;
	}

	#summary h3 {
		font-size: 2.5rem;
	}

	#summary h5 {
		font-size: 1.3rem !important;
	}

	#summary p {
		font-size: 0.9rem !important;
		line-height: 1.5;
	}

	/* project page*/

	.container {
		/* padding: 20px 15px; */
		padding: 15px !important;
		flex-direction: column !important;
	}
	.projectnum {
		font-size: 2rem !important;
	}
	.name p {
		font-size: 1.3rem !important;
		margin-bottom: 10px !important;
	}

	.topic p {
		font-size: 1rem !important;
	}
	.des p {
		font-size: 0.9rem !important;
	}
	.highlight {
		height: 200px !important;
	}
	.preview {
		justify-content: center !important;
		margin-top: 15px !important;
		gap: 10px !important;
	}
	.preview img {
		width: 50px !important;
		height: 75px !important;
	}
	.button {
		margin-left: 0;
		gap: 10px;
	}
	.button button {
		width: 40px !important;
		height: 40px !important;
	}
	/*about me page*/
	/* .inner-wrapper2 h1 {
		font-size: 3.2rem !important;
		margin-top: 100px !important;
	} */
	.about-page,
	.inner-wrapper2 h1 {
		font-size: 3rem !important;
		margin-top: 100px !important;
	}
	.inner-wrapper2 p {
		font-size: 1rem;
		width: 90%;
		line-height: 1.6;
	}
	/* Home page adjustments */
	#summary h4 {
		font-size: 3.5rem;
	}

	#summary h3 {
		font-size: 3rem;
	}

	.project img {
		width: 80%;
	}

	.contactinfo {
		margin-left: 10% !important;
		margin-bottom: 60px !important;
		margin-top: 80px !important;
	}
	.contactmessage {
		width: 90% !important;
		font-size: 0.8rem !important;
	}
	.email,
	.social-links a {
		font-size: 0.7rem !important;
	}
	.social-links a {
		display: flex;
	}
	.contactheader {
		font-size: 3rem !important;
	}

	/* Footer adjustments */
	.footer-social a {
		font-size: 0.8rem;
		gap: 3px;
	}
	#back-to-top {
		padding: 8px 15px;
		font-size: 0.9rem;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.rrcmessage {
		font-size: 0.7rem;
	}

	body {
		font-size: 14px;
	}

	/* Header tweaks */
	.header-points li {
		padding: 8px;
	}
	.header-container {
		margin-top: 20px;
		margin-bottom: 10%;
	}

	/* Project grid adjustments */
	.project-grid {
		gap: 10px;
	}

	.project img {
		margin-bottom: 30px;
	}

	/* Contact section */
	.contactmessage {
		width: 85%;
		font-size: 1.2rem;
	}

	.email,
	.social-links a {
		font-size: 1rem;
	}
	.contactinfo {
		margin-left: 10%;
		margin-bottom: 120px;
		margin-top: 100px;
	}

	.contactheader {
		font-size: 2.8rem !important;
	}

	.contactmessage {
		font-size: 1.2rem;
		width: 90%;
	}

	.email,
	.social-links a {
		font-size: 1rem;
	}

	.social-links {
		/* flex-direction: column; */
		gap: 10px;
	}

	/* Footer social links */
	.footer-social {
		gap: 15px;
		padding: 5px 0;
	}

	/* Back to top button */
	#back-to-top {
		padding: 8px 15px;
		font-size: 0.9rem;
	}

	/*type*/
	body {
		font-size: 16px;
	}

	h1 {
		font-size: 2.8rem;
	}

	h2 {
		font-size: 2.2rem;
	}

	h3 {
		font-size: 1.8rem;
	}

	h4 {
		font-size: 1.4rem;
	}

	p {
		font-size: 1rem;
		line-height: 1.5;
	}

	/* Header adjustments */
	.logo {
		height: 40px;
	}

	/* Footer adjustments */
	.footer-social a {
		font-size: 0.8rem;
	}

	.rrcmessage {
		font-size: 0.7rem;
	}
	/* project page*/
	.container {
		flex-direction: column;
		padding: 15px;
	}

	.item {
		/* display: flex; */
		align-items: center !important;
		flex-direction: column !important;
		gap: 20px !important;
	}

	/* Move content above the image */
	.content {
		width: 100% !important;
		order: 1 !important; /* This moves it above the pic div */
		margin-top: 0 !important;
		margin-bottom: 20px !important;
	}
	.content,
	.pic,
	.button {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.pic {
		width: 100% !important;
		order: 2 !important;
		/* display: flex;
		flex-direction: column; */
	}

	/* Adjust text sizes for better mobile readability */
	.projectnum {
		font-size: 1.8rem !important;
		margin-bottom: 5px !important;
	}

	.name p {
		font-size: 1.2rem !important;
		margin-bottom: 3px !important;
	}

	.topic p {
		font-size: 1.1rem !important;
		margin-bottom: 5px !important;
	}

	.des p {
		font-size: 0.9rem !important;
		line-height: 1.5 !important;
	}

	/* Adjust image sizes */
	.highlight {
		height: 200px !important;
		width: 100% !important;
	}

	.preview img {
		width: 50px !important;
		height: 75px !important;
	}

	/* Center the navigation buttons */
	.button {
		margin-left: 0;
		justify-content: center;
		gap: 15px;
		order: 3 !important;
		margin: 20px 0 20px 0 !important;
	}

	.button button {
		width: 40px;
		height: 40px;
	}
}
@media (max-width: 600px) {
	/* anything you only want applied at mobile sizes can go here */
	/* header section */
	.header-container {
		flex-direction: column;
		align-items: flex-start;
		padding: 10px;
		position: relative;
	}
	.main-header {
		width: 100%;
		justify-content: space-between;
	}
	.hamburger {
		display: block !important;
		margin-left: 20px;
		margin-top: 20px;
		color: #f3f3f3;
	}
	.close-btn {
		color: #f3f3f3;
	}
	.header-points {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 70px;
		left: 0;
		width: 100%;
		background-color: #3c3c3c;
	}
	.header-points a {
		color: #f3f3f3;
	}
	.header-points.active {
		display: flex;
	}
	.header-points a:hover {
		color: #bc3439;
	}
	.close-btn:hover {
		color: #bc3439;
	}
	.hamburger:hover {
		color: #bc3439;
	}
	.header-points li {
		padding: 10px;
		text-align: left;
	}
	.header-points li {
		padding: 10px;
		text-align: center;
	}
	.dropdown {
		position: relative;
		width: 100%;
		text-align: center;
	}
	.dropdown-content {
		position: static;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(-10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	.dropdown.active .dropdown-content {
		display: block;
	}
	.close-btn-container {
		display: none;
		text-align: right;
		padding: 10px;
	}
	.close-btn {
		background: none;
		border: none;
		font-size: 24px;
		color: #f3f3f3;
		cursor: pointer;
	}
	.header-points.active .close-btn-container {
		display: block;
	}

	/*home page contact me*/

	.contactheader h4 {
		font-size: 1rem;
	}
	/* projects page */
	.container {
		/* flex-direction: column;
		line-height: 20px;
		gap: -20px;
		margin-left: -9px; */
		padding: 30px 20px;
		max-width: 100%;
		flex-direction: column !important;
		padding: 15px !important;
	}
	.projectnum {
		font-size: 2.5rem;
		font-weight: bold;
		margin-bottom: 10px;

		text-align: left;
	}
	.name p {
		font-size: 20px !important;
		margin-bottom: 10px;
		font-weight: bold;
	}
	.topic p {
		/* margin-bottom: 10px; */
		font-size: 16px !important;
		font-weight: bold;
	}
	.des p {
		width: 100%;
		font-size: 13px !important;
		line-height: 1.6;
	}
	.item {
		display: flex;
		gap: 30px;
		align-items: center;
		flex-direction: column;
	}
	.content {
		width: 100%;
		margin-top: -50px;
		margin-left: 0;
		padding: 0;

		text-align: left;
	}
	.pic {
		width: 90%;
		margin-top: 0;
	}
	.content h3 {
		margin-left: 0;
	}
	.projectnum,
	.name p,
	.topic p,
	.des p {
		margin-left: 0;
		margin-right: 0;
	}
	.highlight {
		height: 300px;
		width: 100%;
		object-fit: contain;
		margin-bottom: 20px;
	}
	.preview {
		flex-wrap: wrap;
		display: flex;
		justify-content: center;
		gap: 10px;
	}
	.preview img {
		width: 60px;
		height: 90px;
		object-fit: cover;
	}
	.preview img:hover {
		opacity: 0.8;
	}
	.preview img.activepic {
		opacity: 1;
	}
	.topic p {
		font-size: 1.5rem !important;
	}

	.des p {
		font-size: 0.8rem;
	}
	.button {
		/* margin: 30px auto 0 auto; */
		display: flex;

		justify-content: center;
		padding-right: 0;
	}
	.button button {
		width: 50px;
		height: 50px;
		cursor: pointer;
	}
	.content h3,
	content .topic,
	.content .des {
		margin-left: 0;
		width: 100%;
	}
	.logo {
		height: 100px;
		width: 80px;
		margin-top: 20px;
		display: flex;
	}
	.logo img {
		margin-top: 30px;
	}
	/* hero section */
	.inner-wrapper {
		text-align: center;
	}
	.inner-wrapper2 h1 {
		margin-top: 80px !important;
	}
	.inner-wrapper h1 {
		font-size: 7rem;
		margin-top: 50%;
	}
	.inner-wrapper p {
		font-size: 1rem;
		width: 250px;
		margin-bottom: 25%;
	}

	/* projects/summary/main page section */

	#summary {
		margin-top: 100px;
		padding: 0 5%;
		margin-bottom: 80px;
	}
	.projectstitle {
		margin-left: 5%;
		font-size: 3rem;
		margin-bottom: 20px;
	}
	#summary h4 {
		font-size: 3.5rem;
		margin-top: 50px;
	}
	#summary h3 {
		text-align: center;

		font-size: 4rem;
		margin-left: -10px;
	}
	#summary h5 {
		font-weight: bold;
		font-size: 15px;
	}
	#summary p {
		font-size: 0.8rem;
	}
	.project-grid {
		grid-template-columns: repeat(1, 1fr);
		gap: 2px;
		margin-top: -50px;
	}
	.project-grid a {
		margin-bottom: -20px;
	}
	.project {
		text-align: center;
		margin-bottom: -20px;
		margin-right: 10px;
	}
	.project h4,
	.project h5,
	.project p {
		margin-left: 0;
	}
	.project img {
		width: 70%;
		height: auto;
		justify-content: center;
		display: inline;
		margin-bottom: 50px;
		gap: 20px;
	}
	.contactinfo {
		margin-left: 20%;
		text-align: left;
		margin-bottom: 100px;
		margin-top: 200px;
	}
	.contactheader {
		font-size: 3.4rem !important;
	}

	.contactmessage {
		width: 90%;
		justify-content: center;
		margin-left: 0;
		margin-bottom: 2px;
		margin-top: 50px;
		font-size: 1rem;
	}
	.connect {
		margin-top: 10%;
	}
	.contactheader {
		font-size: 5rem;
		margin-bottom: 10px;
		margin-left: 1px;
	}
	.email {
		font-size: 0.9rem;
	}
	.social-links {
		justify-content: left;
		display: flex;
	}
	.social-links a {
		font-size: 0.9rem;
	}
	/*footer sectiom*/
	footer {
		padding: 20px 0;
		margin-top: 40px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.footerlinks {
		display: flex;
		flex-direction: column;
		align-items: center;
		max-width: 100%;
		width: 100%;
		gap: 15px;
		padding: 0 20px;
	}
	.footer-social a {
		font-size: 0.9rem;
		margin-right: 0;
		display: flex;
		align-items: center;
		gap: 5px;
	}
	.footerlinks p {
		margin-left: -1.5rem;
		text-align: center;
		font-size: 0.8rem;
		margin-bottom: 10px;
	}
	.footerlinks ul {
		flex-direction: column;
	}
	.footer-social {
		display: flex;
		justify-content: center;
		flex-wrap: nowrap;
		gap: 20px;

		width: 100%;
		overflow-x: auto;
		padding: 10px 0;
		-webkit-overflow-scrolling: touch;
	}

	.footer-social a {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		font-size: 0.9rem;
		white-space: nowrap;
	}

	.rrcmessage {
		font-size: 0.8rem;
		margin: 15px 0 10px 0;
		width: 100%;
		text-align: center;
		order: 2;
	}
	/* back to the top */
	#back-to-top {
		margin-left: auto;
		margin-right: auto;
		justify-content: center;
		display: flex;
	}

	/* about section */

	.inner-wrapper2 {
		font-size: 8px;
		justify-content: center;
		text-align: center;
		margin-top: 50px;
	}

	.about-page,
	.inner-wrapper2 h1 {
		font-size: 5rem !important;
		margin-top: 120px !important;
	}
	/* .inner-wrapper2 h1 {
		font-size: 5rem !important;
	} */
	.inner-wrapper2 p {
		width: 80%;
		font-size: 12px;
		text-align: left;
	}
}
@media (min-width: 634px) {
	.inner-wrapper2 h1 {
		font-size: 7rem;
	}
	.inner-wrapper2 p {
		width: 91%;
	}
	#back-to-top {
		text-align: center;
	}
}

/*SMALL TABLET SCREENS--------------------------------------*/
@media (max-width: 768px) {
	/* header section or drop downs as well */
	.dropdown {
		position: relative;
		width: 100%;
		display: inline-block;
	}
	.dropdown-content {
		display: none;
		position: absolute;
		/* width: 100%; */
		/* left: 0;
		top: 100%; */
		z-index: 1;
		width: auto;
	}
	.inner-wrapper {
		padding-top: 150px;
	}
	.header-points li {
		position: relative;
	}
	.dropdown.active .dropdown-content {
		display: block;
		animation: fadeIn 0.3s ease;
	}
	.dropdown-content a:hover {
		color: #bc3439;
	}
	.header-points.active .dropdown-content {
		position: relative;
		left: 0;
		top: 0;
	}
	.dropdown-content a {
		font-size: 12px;
	}

	.back-to-top {
		margin-bottom: 2%;
		justify-content: center;
		display: flex;
	}
	.footerlinks {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20px 0;
		gap: 15px;
	}

	#back-to-top {
		margin: 20px auto;
		display: block;
		width: fit-content;
		padding: 10px 25px;
	}

	.footer-social {
		display: flex;
		justify-content: center;
		gap: 20px;
		flex-wrap: wrap;
	}
	.footerlinks p {
		text-align: center;
		margin: 10px 0;
	}
	.projectstitle {
		margin-left: 5%;
	}
	.project-grid {
		grid-template-columns: repeat(3, 1fr);
		/* gap: 20px;
		display: grid;
		grid-template-rows: repeat(2, auto);
		margin: 40px auto;
		max-width: 900px;
		padding: 0 20px; */
		width: 90%;
	}

	#summary,
	#connect {
		padding: 0 5%;
	}
	.project {
		display: flex;
		flex-direction: column;
		text-align: left;
		padding: 0;
	}
	.project-grid {
		grid-auto-flow: row dense;
	}
	.project img {
		width: 100%;
		height: 180px;
		object-fit: cover;
		margin-bottom: 12px;
		align-self: flex-start;
	}
	.project-text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	/* #summary h4 {
		font-size: 3.5rem;
	} */
	.project h4 {
		font-size: 3.5rem;
		margin: 4px 0 1px 0;
		width: 100%;
	}
	.project h5 {
		font-size: 1.2rem;

		font-weight: bold;
	}
	/* About me section*/
	.inner-wrapper2 {
		margin-bottom: 150px;
	}
	.inner-wrapper2 h1 {
		text-align: center;
		margin-top: 200px;
		font-size: 7rem;
		margin-bottom: 20px;
	}
	.paragraph1 {
		/* width: 82%; */
		margin-bottom: 100px;
	}

	.project p {
		font-size: 0.95rem;
		margin: 0;
		margin-bottom: 5px;
	}
	.project h4,
	.project h5,
	.project p {
		margin: 8px 0;
	}

	.footerlinks {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px 0;
		gap: 15px;
	}
	#back-to-top {
		margin: 20px auto;
		display: block;
		width: fit-content;
		padding: 10px 25px;
	}
	#summary h3 {
		text-align: left;
		margin-left: 20px;
		font-size: 6rem;
		margin-bottom: 20px;
	}

	/*front page contact me*/

	.contactinfo {
		margin-left: 5%;
	}
	.contactmessage h4 {
		font-size: 1rem;
	}
	.contactheader {
		font-size: 6rem;
	}
	#email h4 {
		font-size: 0.95rem;
	}
	.social-links h4 {
		font-size: 0.95rem;
	}
	/* project page layout */

	.container {
		padding: 40px 30px;
		max-width: 900px;
		margin: 0 auto;
	}
	.item {
		display: flex;
		flex-direction: row;
		gap: 40px;
		align-items: flex-start;
	}
	/*content section - left side*/
	.content {
		width: 40%;
		/* position: sticky; */
		/* margin-top: 0; */
		padding: 0;
	}

	.projectnum,
	.name p,
	.topic p,
	.des p {
		margin-left: 0;
		margin-right: 0;
	}
	.item {
		display: flex;
		flex-direction: row;
		gap: 40px;
		align-items: flex-start;
	}
	.projectnum {
		font-size: 5rem !important;
		font-weight: bold;
		margin-bottom: 12px;
		line-height: 1;
	}
	.name p {
		font-size: 1.5rem !important;
		font-weight: bold;
	}
	.topic p {
		font-size: 1.2rem !important;
		/* margin-bottom: 10px; */
	}
	.des p {
		font-size: 0.8rem !important;
		line-height: 1.6;
	}
	.pic {
		width: 60%;
		margin-top: 0;
	}
	.highlight {
		width: 100%;
		height: 400px;
		object-fit: contain;
		margin-bottom: 25px;
	}
	.preview {
		display: flex;
		gap: 15px;
		flex-wrap: wrap;
	}
	.preview img {
		width: 70px;
		height: 100px;
		object-fit: cover;
		cursor: pointer;
	}
	.preview img:hover {
		opacity: 0.8;
	}
	.preview img.activepic {
		opacity: 1;
		border: 2px #3c3c3c;
	}
	.button {
		margin-left: 40%;
		padding-right: 0;
	}
	.button {
		display: flex;
		justify-content: center;
		gap: 20px;
		margin-top: 30px;

		padding-right: 0;
	}
}

@media (max-width: 1080px) {
	/* .paragraph1 {
		width: 80%;
	} */

	/*copy*/
	.dropdown {
		position: relative;
		width: 100%;
		display: inline-block;
	}
	.dropdown-content {
		display: none;
		position: absolute;
		/* width: 100%; */
		/* left: 0;
		top: 100%; */
		z-index: 1;
		width: auto;
	}

	.header-points li {
		position: relative;
	}
	.dropdown.active .dropdown-content {
		display: block;
		animation: fadeIn 0.3s ease;
	}
	.dropdown-content a:hover {
		color: #bc3439;
	}
	.header-points.active .dropdown-content {
		position: relative;
		left: 0;
		top: 0;
	}
	.dropdown-content a {
		font-size: 12px;
	}

	.back-to-top {
		margin-bottom: 2%;
		justify-content: center;
		display: flex;
	}
	.footerlinks {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20px 0;
		gap: 15px;
	}

	#back-to-top {
		margin: 20px auto;
		display: block;
		width: fit-content;
		padding: 10px 25px;
	}

	.footer-social {
		display: flex;
		justify-content: center;
		gap: 20px;
		flex-wrap: wrap;
	}
	.footerlinks p {
		text-align: center;
		margin: 10px 0;
	}
	/* .projectstitle {
		margin-left: 5%;
	} */
	.project-grid {
		grid-template-columns: repeat(3, 1fr);
		/* gap: 20px;
		display: grid;
		grid-template-rows: repeat(2, auto);
		margin: 40px auto;
		max-width: 900px;
		padding: 0 20px; */
		width: 90%;
	}
	.inner-wrapper {
		padding-top: 150px;
	}
	#summary,
	#connect {
		padding: 0 5%;
	}
	.project {
		display: flex;
		flex-direction: column;
		text-align: left;
		padding: 0;
	}
	.project-grid {
		grid-auto-flow: row dense;
	}
	.project img {
		width: 100%;
		height: 180px;
		object-fit: cover;
		margin-bottom: 12px;
		align-self: flex-start;
	}
	.project-text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.project h4 {
		font-size: 5rem;
		margin: 4px 0 1px 0;
		width: 100%;
	}
	.project h5 {
		font-size: 1.2rem;

		font-weight: bold;
	}
	/* About me section*/
	.inner-wrapper2 {
		margin-bottom: 150px;
	}
	.inner-wrapper2 h1 {
		text-align: center;
		margin-top: 200px;
		font-size: 7rem;
		margin-bottom: 20px;
	}
	.paragraph1 {
		/* width: 82%; */
		margin-bottom: 100px;
	}

	.project p {
		font-size: 0.95rem;
		margin: 0;
		margin-bottom: 5px;
	}
	.project h4,
	.project h5,
	.project p {
		margin: 8px 0;
	}

	.footerlinks {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px 0;
		gap: 15px;
	}
	#back-to-top {
		margin: 20px auto;
		display: block;
		width: fit-content;
		padding: 10px 25px;
	}
	#summary h3 {
		text-align: left;
		/* margin-left: 20px; */
		font-size: 5rem;
		/* margin-bottom: 20px; */
	}

	/*front page contact me*/

	.contactinfo {
		margin-left: 5%;
	}
	.contactmessage h4 {
		font-size: 1rem;
	}
	.contactheader {
		font-size: 6rem;
	}
	#email h4 {
		font-size: 0.95rem;
	}
	.social-links h4 {
		font-size: 0.95rem;
	}
	/* project page layout */
	@media (max-width: 768px) {
		.lightbox-prev,
		.lightbox-next,
		.lightbox-close {
			-webkit-tap-highlight-color: transparent;
			-webkit-touch-callout: none;
			outline: none;
			box-shadow: none;
		}

		.lightbox-prev:hover,
		.lightbox-next:hover,
		.lightbox-close:hover {
			background-color: #bc3439;
			color: #f3f3f3;
		}

		.lightbox-prev:focus,
		.lightbox-next:focus,
		.lightbox-close:focus,
		.lightbox-prev:active,
		.lightbox-next:active,
		.lightbox-close:active {
			background-color: #bc3439;
			color: #f3f3f3;
			outline: none;
			box-shadow: none;
		}
	}
	.container {
		padding: 40px 30px;
		max-width: 900px;
		margin: 0 auto;
	}
	.item {
		display: flex;
		flex-direction: row;
		gap: 40px;
		align-items: flex-start;
	}
	/*content section - left side*/
	.content {
		width: 40%;
		/* position: sticky; */
		margin-top: 0;
		padding: 0;
	}

	.projectnum,
	.name p,
	.topic p,
	.des p {
		margin-left: 0;
		margin-right: 0;
	}
	.item {
		display: flex;
		flex-direction: row;
		gap: 40px;
		align-items: flex-start;
	}
	.projectnum {
		font-size: 7rem;
		font-weight: bold;
		margin-bottom: 12px;
		line-height: 1;
	}
	.name p {
		font-size: 1.7rem;
		font-weight: bold;
	}
	.topic p {
		font-size: 1.4rem;
		/* margin-bottom: 5px; */
	}
	.des p {
		font-size: 0.9rem;
		line-height: 1.3;
	}
	.pic {
		width: 60%;
		margin-top: 0;
	}
	.highlight {
		width: 100%;
		height: 400px;
		object-fit: contain;
		margin-bottom: 25px;
	}
	.preview {
		display: flex;
		gap: 15px;
		flex-wrap: wrap;
	}
	.preview img {
		width: 70px;
		height: 100px;
		object-fit: cover;
		cursor: pointer;
	}
	.preview img:hover {
		opacity: 0.8;
	}
	.preview img.activepic {
		opacity: 1;
		border: 2px #3c3c3c;
	}
	.button {
		padding-right: 0;
	}
	.button {
		display: flex;
		justify-content: center;
		gap: 20px;
		margin-top: 30px;

		padding-right: 0;
	}
}

@media (max-width: 600px) {
	/* Move lightbox layout to vertical */
	.lightbox {
		flex-direction: column;
		justify-content: center;
	}

	/* Image stays centered */
	/* .lightbox-img {
		max-width: 95vw;
		max-height: 70vh;
		margin-bottom: 20px;
	} */
	@media (max-width: 600px) {
		.lightbox {
			flex-direction: column;
			justify-content: center;
			padding: 0 24px;
			box-sizing: border-box;
		}

		.lightbox-img {
			display: block;
			width: 100%;
			max-width: calc(100vw - 48px);
			max-height: 70vh;
			margin: 0 auto 20px;
			object-fit: contain;
		}

		.lightbox-prev,
		.lightbox-next {
			position: static;
			transform: none;
		}

		.lightbox-controls {
			display: flex;
			justify-content: center;
			gap: 20px;
			margin-top: 10px;
		}
	}
	/* Move arrows BELOW image */
	.lightbox-prev,
	.lightbox-next {
		position: static; /* remove absolute positioning */
		transform: none;
	}

	/* Wrap arrows in a row */
	.lightbox-controls {
		display: flex;
		justify-content: center;
		gap: 20px;
		margin-top: 10px;
	}
}