/* CSS Variables */
:root {
  /* Colors */
  --primary-color: #eb9104 !important;
  --newbutton-color: #eb9104 !important;
}


/* FONTS */
.nav-link, .hero-title, .hero-description, .hero-buttons, .section-title, .section-subtitle, .portfolio-filters, .portfolio-card, .about, .skills, .contact, .social-links, .footer-content, .bottom-nav{
	font-family: 'Raleway', sans-serif !important;
}


/* NAV COLOR */
.navbar{
	background:#dbfed4 !important;
}

.nav-container {
  margin-bottom:var(--space-1) !important;
  height:116px !important;
}

/* HERO */
.hero-title {
  font-weight: 500 !important;
}

/* CARDS */
.card-1 {
  background: url(../img_NEW/HTML_280.png) !important;
  border:2px solid #eb9104 !important;
}

.card-2 {
  background: url(../img_NEW/CSS_240.png) !important;
  border:2px solid #eb9104 !important;
  right: 120px !important;
}

.card-3 {
  background: url(../img_NEW/JS_200.png) !important;
  border:2px solid #eb9104 !important;
}

/* PORTFOLIO */
.filter-btn {
  padding: var(--space-1) var(--space-6) !important;
  background: var(---page-background) !important;
  border: 2px solid var(--primary-color) !important;
  border-radius: var(--radius-full);
  color: var(--primary-color) !important;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-weight: 500;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--primary-color) !important;
  border-color: var(--primary-color);
  color: var(--white) !important;
  transform: translateY(-2px);
}

/* PORTFOLIO IMAGE */
.portfolio-image img {
  border:4px solid var(--primary-color) !important;
  border-radius: var(--radius-xl);
}

/* PORTFOLIO IMAGE OVERLAY */
.portfolio-overlay {
  background: linear-gradient(135deg, rgba(235, 145, 4, 0.9), rgba(235, 145, 4, 0.9)) !important;
}

.view-project {
  padding: var(--space-2) var(--space-4);
  background: rgba(219, 254, 212, 1.0) !important;
  border: 1px solid rgba(219, 254, 212, 1.0) !important;
  border-radius: var(--radius-lg);
  color: var(--newbutton-color) !important;
  cursor: pointer;
  transition: all var(--transition-fast);
  backdrop-filter: blur(10px);
}

/* MODAL IMAGES */
#modalImage{
	height:100% !important;
}

.modal {
  backdrop-filter: blur(0px) !important;
  background-color: rgba(0, 0, 0, 0.9) !important;
}

/* ABOUT */
.image-container {
  box-shadow: none !important;
}

.image-container::before {
  background: linear-gradient(135deg, rgba(219, 254, 212, 0.1), rgba(219, 254, 2212, 0.1)) !important;
}

.skill-item:hover {
  transform: translateY(-4px) !important;
}

.skill-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--primary-color) !important;
  border-radius: var(--radius-lg);
  transition: transform var(--transition-slow) !important;
}

.skill-info h4 {
  color: var(--white) !important;
}

.skill-info p {
  color: var(--white) !important;
}

.contactcolor{
	color:var(--gray-900) !important;
}

.contactcolor:hover{
	color:var(--primary-color) !important;
}

/* FOOTER */
.footer {
  background:#dbfed4 !important;;
  color: var(--gray-400);
  padding: var(--space-12) 0;
  text-align: center;
}

.footer-content p {
  margin-bottom: var(--space-2);
}

.footer-content p:last-child {
  margin-bottom: 0;
}

/* BOTTOM NAV */
.bottom-nav{
	border-top:2px solid #eb9104 !important;
}

/* MEDIA QUERIES */
@media (max-width: 1024px) {
	.hero{
		padding-top:var(--space-6) !important;
	}
}

@media (max-width: 768px) {
	.hero{
		padding-top:var(--space-34) !important;
	}
}

@media (max-width: 480px) {
	.hero{
		padding-top:var(--space-30) !important;
	}
}