/* =================================================
   CLEANED & OPTIMIZED CSS
================================================= */
/* 
   Only duplicates merged safely.
   Cascade order preserved so design remains identical.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&family=Lato:wght@300;400;700&display=swap');

:root {
	/* Primary Palette */
	--primary-color: #f48fb1;
	--secondary-color: #81d4fa;
	--highlight-color: #f7c873;
	--glow-color: rgba(244, 143, 177, .6);

	/* Backgrounds */
	--bg-dark: #0b0b0c;
	--bg-light: #121212;
	--bg-card: #151515;
	--border-color: #333;

	/* Text */
	--text-color: #e2e2e2;
	--text-muted: #ccc;
	--accent: #f7c873;

	/* Typography */
	--font-main: 'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
	--font-alt: 'Cormorant Garamond', serif;
	--font-sans: 'Lato', sans-serif;

	/* Spacing */
	--spacing-xs: .5rem;
	--spacing-sm: 1rem;
	--spacing-md: 1.5rem;
	--spacing-lg: 2rem;
	--spacing-xl: 3rem;

	/* Transitions */
	--transition-base: 300ms ease-in-out;
	--transition-hover: 200ms ease-out;

	/* Shadows */
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);
	--shadow-md: 0 5px 15px rgba(0, 0, 0, .5);
	--shadow-lg: 0 0 20px var(--highlight-color);

	/* Radius */
	--radius-sm: .5rem;
	--radius-md: 1rem;
	--radius-lg: 1.5rem;
}


/* =================================================
   GLOBAL RESET
================================================= */

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

html {
	scroll-behavior: smooth;
}

body {
	background: var(--bg-dark);
	color: var(--text-color);
	font-family: var(--font-main);
	line-height: 1.6;
}

/* smoother rendering */
* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* =================================================
   TYPOGRAPHY
================================================= */

h1, h2, h3, h4, h5, h6 {
	color: var(--accent);
	font-family: var(--font-alt);
}

p {
	color: var(--text-color);
	line-height: 1.6;
}

a {
	color: var(--accent);
	text-decoration: none;
	transition: color var(--transition-base);
}

a:hover {
	color: var(--highlight-color);
	opacity: .9;
}


/* =================================================
   IMAGES
================================================= */

img {
	max-width: 100%;
	height: auto;
	display: block;
}


/* =================================================
   BUTTONS
================================================= */

button,
a[role="button"],
.btn {
	cursor: pointer;
	user-select: none;
}

.btn-outline {
	border: 2px solid var(--accent);
	color: var(--accent);
	background: transparent;
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--radius-sm);
	transition: all var(--transition-base);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	font-weight: 600;
	letter-spacing: .5px;
}

.btn-outline:hover {
	background: var(--accent);
	color: #111;
	box-shadow: var(--shadow-sm);
}

.btn {
	padding: 12px 50px;
	font-size: 12px;
	font-weight: 400;
	transition: all 0.5s;
	letter-spacing: 2px;
	color: #111;
	background-color: var(--accent);
	box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.2);
	border-radius: 2px;
	min-width: 140px;
	text-transform: uppercase;
}

.btn:hover {
	color: #111;
	background-color: #e5b45f;
	box-shadow: 0px 4px 8px rgba(247, 200, 115, 0.3);
}


/* =================================================
   SHARED COMPONENTS
================================================= */

.section {
	padding: 5rem 1rem;
	overflow: hidden;
}

.section {
    padding: 100px 0;
    position: relative;
    /* background-color: var(--bg-light); */
}

.section-head {
	text-align: center;
	margin-bottom: 3rem;
}

.section-head span {
	display: block;
	font-size: 1rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--accent);
}

.section-head h2 {
	font-size: 2.5rem;
	margin-top: .5rem;
}

.section-light {
    background: var(--bg-light);
}

.section-dark {
    background: var(--bg-dark) !important;
}


/* =================================================
   CARD SYSTEM
================================================= */

.card,
.project-card,
.inside-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
	will-change: transform;
}

.card:hover,
.project-card:hover,
.inside-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lg);
	border-color: var(--highlight-color);
}


/* =================================================
   NAVBAR
================================================= */

.navbar-custom {
	background: var(--bg-light);
	border-bottom: 1px solid var(--border-color);
}

.navbar-brand {
	font-family: var(--font-alt);
	color: var(--accent);
	font-size: 1.5rem;
}

.nav-link {
	color: var(--text-color);
	margin: 0 .5rem;
	transition: color .25s ease;
}

.nav-link:hover,
.nav-link.active {
	color: var(--accent);
}


/* hamburger */

.ham {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform 400ms;
	user-select: none;
}

.hamRotate.active { transform: rotate(45deg); }
.hamRotate180.active { transform: rotate(180deg); }

.line {
	fill: none;
	transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
	stroke: var(--text-color);
	stroke-width: 2.5;
	stroke-linecap: round;
}

.ham1 .top { stroke-dasharray: 40 139; }
.ham1 .bottom { stroke-dasharray: 40 180; }
.ham1.active .top { stroke-dashoffset: -98px; }
.ham1.active .bottom { stroke-dashoffset: -138px; }

.nav-wrapper .navbar-toggler {
	position: absolute;
	left: 100%;
	z-index: 20;
	top: 0;
	padding: 0;
	display: none;
}


/* =================================================
   HOME SECTION
================================================= */

.section-home {
	position: relative;
	height: 100vh;
	background: var(--bg-dark);
	color: var(--text-color);
	background-image: url("../images/banner.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.section-home .overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
}

.overlay-wrap {
	position: relative;
	z-index: 2;
}

.overlay-wrap span {
	font-size: 1rem;
	letter-spacing: 2px;
	color: var(--accent);
}

.overlay-wrap h1 {
	font-size: 3rem;
	margin: 1rem 0;
}

.overlay-wrap h4 {
	font-size: 1.2rem;
	font-weight: 300;
	color: var(--text-muted);
}


/* banner shapes */

.creative-1 {
	clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}

.banner-clip-2-svg,
.banner-clip-4-wave,
.banner-clip-5-wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 11;
}


/* =================================================
   ABOUT
================================================= */

.section-about {
	margin: 0 auto;
	max-width: calc(1140px - 30px);
	background: #1e1e1e;
	margin-top: -200px;
	z-index: 100;
	position: relative;
	width: 95%;
	opacity: 0;
	visibility: hidden;
	border-radius: 5px;
	transition: 0.5s;
	transform: translateY(20px);
	padding: 0 !important;
	max-width: 950px;
}

.section-about.in {
	opacity: 1;
	visibility: visible;
	transform: translateY(0px);
}

.section-about-wrap {
	max-width: 1000px;
	margin: auto;
	padding: 50px;
	background-color: #1e1e1e;
	border-radius: 5px;
}

.about-desc-content hr {
	background: var(--accent);
	height: 2px;
	border: none;
	margin: 1.5rem 0;
}

.about-avatar img {
	height: 160px;
	width: 160px;
	border: 2px outset #2b9131;
	padding: 10px;
}



.about-desc-social li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	color: var(--accent);
	transition: all var(--transition-base);
}

.about-desc-social li a:hover {
	border-color: var(--accent);
	transform: translateY(-3px) scale(1.08);
	box-shadow: 0 0 10px rgba(247, 200, 115, .4);
}

.about-desc-social i {
	font-size: 1.4rem;
}

.img-thumbnail {
	border-radius: 1rem;
}


.section-about img {
    height: 300px;
    margin: 0 auto;
    width: 300px;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}


/* =================================================
   PRELOADER
================================================= */

.preloader {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	background-color: var(--bg-dark);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999999;
}

.preloader.loaded {
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease-in-out;
}


/* =================================================
   FINAL POLISH
================================================= */

.page-wrapper {
	width: 100%;
	overflow-x: hidden;
	position: relative;
}

.container {
	max-width: 1400px !important;
	padding-left: clamp(1rem, 3vw, 2rem) !important;
	padding-right: clamp(1rem, 3vw, 2rem) !important;
}


/* =================================================
   RESPONSIVE
================================================= */

h1 { font-size: clamp(1.5rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.25rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 3vw, 1.8rem); }
h4 { font-size: clamp(1rem, 2.5vw, 1.5rem); }
p  { font-size: clamp(.95rem, 1.5vw, 1.1rem); }

@media (max-width: 480px) {
	.section { padding: 2rem 1rem; }
	.section-home { height: 80vh; }
	.overlay-wrap h1 { font-size: 1.75rem; }
	.overlay-wrap h4 { font-size: .9rem; }
}

@media (min-width: 481px) and (max-width: 768px) {
	.section { padding: 3rem 1.5rem; }
}

@media (min-width: 769px) and (max-width: 1024px) {
	.section { padding: 4rem 2rem; }
}

@media (min-width: 1025px) {
	.section { padding: 5rem 2rem; }
}

@media (max-width: 991px) {
	.section { padding: 80px 0; }
	.container { max-width: 100%; }

	.page-content-wrap {
		margin-left: 0% !important;
		width: 100% !important;
		margin-top: -50px;
		position: relative;
		z-index: 1;
	}

	.page-wrapper {
		width: 100%;
		margin-left: 0%;
		overflow: hidden;
	}

	.nav-wrapper .navbar-toggler { display: block; }

	.navbar-nav {
		padding-top: 10px;
		margin-top: 10px;
	}

	.list-items-container .list-item { width: 50%; }
}

@media (max-width: 768px) {
	.contact-details--panel { margin-bottom: 30px; }
	.contact-form { margin-top: 30px !important; }
	.portfolio-item--img img { height: 350px; }
	.list-items-container .list-item { width: 100%; }
	.about-avatar img { height: 130px; width: 130px; }
}


/* Selection */

::selection,
::-moz-selection {
	background: rgba(247, 200, 115, 0.3);
}

::-webkit-scrollbar {
	display: none;
}