/* FONTS */
@font-face {
  font-family: 'Ghibli';
  src: url('../fonts/Eyad Al-Samman - Ghibli.otf') format('opentype');
  font-weight: normal;
}

@font-face {
  font-family: 'Ghibli';
  src: url('../fonts/Eyad Al-Samman - Ghibli-Bold.otf') format('opentype');
  font-weight: bold;
}

/* SMOOTH SCROLL */
html {
  scroll-behavior: smooth;
}

/* BODY */
body {
  margin: 0;
  font-family: 'Ghibli', 'Times New Roman', Times, serif;
  cursor: none !important;
  background-color: #fef6e4;
  color: white;
  overflow-x: hidden;
}
* {
  cursor: none !important;
}

/* PARAGRAPHS (FIXED) */
p {
  position: static;
  margin: 0 0 10px 0;
  line-height: 1.6;
}



.main-content {
  margin: 0;
  padding: 0;
}

/* Nav Bar */
.header {
  position: sticky;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--nav-background-color,rgba(10,20,35,0.85));
  backdrop-filter: blur(10px);
  padding: 15px 20px;
  margin-bottom: -50px;
  z-index: 1000;
  overflow: hidden;
  transition: background-color 0.8s ease;
}


/* NAV */
.nav {
  display: flex;
  list-style: none;
  gap: 25px;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 2;
}
.nav-link {
  text-decoration: none;
  color: var(--nav-text-color,#ffffff);
  font-weight: bold;
  position: relative;
  display: inline-block;
  transition: color 0.8s ease;
}
.nav-link::after,
.nav-link::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--nav-accent-color,#929894);
  left: 0;
  transform: scaleX(0);
  transition: transform 0.4s ease-out,background-color 0.8s ease;
}
.nav-link::after {
  bottom: -5px;
  transform-origin: right;
}
.nav-link::before {
  top: -5px;
  transform-origin: left;
}
.nav-link:hover::after,
.nav-link:hover::before {
  transform: scaleX(1);
}

/* SECTIONS */
section {
  min-height: 80vh;        
  padding: 80px 20px;      
  display: flex;
  justify-content: center;

}

/* BACKGROUNDS */

#home {
  flex-direction: column;
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  padding-top: 100px;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    #e8757d 0%,
    #ed8a72 30%,
    #f2a06b 60%,
    #f5bd72 100%
  );
}

#home .home-content {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 50%;
  margin: 0 auto;
  z-index: 100;
}
.home-text {
  max-width: 800px;
  background: rgba(252, 252, 252, 0.1);
  padding: 25px 35px;
  border-radius: 15px;
}

.home-text {
  max-width: 800px;
  background: rgba(252, 252, 252, 0.1);
  padding: 25px 35px;
  border-radius: 15px;
}

.home-text h1 {
  font-size: 4rem;
  margin-bottom: 20px;
  -webkit-text-stroke: 2px rgb(254, 253, 253);
}

.home-text p {
  font-size: 2rem;
  margin-bottom: 30px;
  -webkit-text-stroke: 0.7px rgb(231, 223, 223);
}

.view-work {
  display: inline-block;
  font-size: 1.3rem;
  text-decoration: none;
  color: white;
  background: #1d3341;
  padding: 12px 25px;
  border-radius: 8px;
  -webkit-text-stroke: 0.5px black;
  transition: 0.3s;
}

.view-work:hover {
  background: #263b4a;

}

#about {
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  box-sizing: border-box;
  background: linear-gradient(to bottom,#0b1628,#18323a);
}

#home h1,
#about h1 {
  margin: 0 0 10px 0;
  position: static;
}

#home p,
#about p,
#projects p {
  position: static;
  max-width: 600px;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

#projects {
  flex-direction: column;
  align-items: center;
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 80px 20px;
  background: linear-gradient(to bottom,#030a12,#18323a);
}

#contact {
  flex-direction: column;
  min-height: auto;     
  padding: 60px 20px;   
  justify-content: flex-start;
}

/* ABOUT CONTENT */
.about-content {
  position: relative;
  width: 100%;
  height: 55vh;
  z-index: 2;
}
.about-text {
  position: absolute;
  left: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 575px;
  z-index: 4;
}

.about-description {
  max-width: 700px;
  background: rgba(11, 22, 40, 0.45);
  padding: 25px 35px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(5px);
}

.custom-cursor {
  position: fixed;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff1a8;
  box-shadow: 0 0 6px #fff1a8,0 0 15px #f5bd72,0 0 30px rgba(245,189,114,0.7);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: background 0.4s ease,box-shadow 0.4s ease;
}
.custom-cursor.home-cursor {
  background: #fff1a8;
  box-shadow: 0 0 6px #fff1a8,0 0 15px #ffd85a,0 0 30px rgba(255,216,90,0.7);
}
.custom-cursor.about-cursor {
  background: #bde7ff;
  box-shadow: 0 0 6px #bde7ff,0 0 15px #72c9dc,0 0 30px rgba(114,201,220,0.7);
}
.custom-cursor.projects-cursor {
  background: #e7c6ff;
  box-shadow: 0 0 6px #e7c6ff,0 0 15px #9b72dc,0 0 30px rgba(155,114,220,0.7);
}
.custom-cursor.contact-cursor {
  background: #b8f5c8;
  box-shadow: 0 0 6px #b8f5c8,0 0 15px #62c982,0 0 30px rgba(98,201,130,0.7);
}
.custom-cursor.calcifer-cursor {
  background: #8fe8ff;
  box-shadow: 0 0 6px #8fe8ff,0 0 15px #52cce8,0 0 30px rgba(82,204,232,0.7);
}

/* Hover Cursor */
.custom-cursor.home-cursor.hover {
  background: #8f72ff;
  box-shadow: 0 0 6px #8f72ff,0 0 15px #7655e8,0 0 30px rgba(118,85,232,0.7);
}
.custom-cursor.about-cursor.hover {
  background: #ffb56b;
  box-shadow: 0 0 6px #ffb56b,0 0 15px #e89045,0 0 30px rgba(232,144,69,0.7);
}
.custom-cursor.projects-cursor.hover {
  background: #dce7e3;
  box-shadow: 0 0 6px #dce7e3,0 0 15px #aebdc2,0 0 30px rgba(174,189,194,0.7);
}
.custom-cursor.contact-cursor.hover {
  background: #f5a8c0;
  box-shadow: 0 0 6px #f5a8c0,0 0 15px #df7fa1,0 0 30px rgba(223,127,161,0.7);
}
.custom-cursor.calcifer-cursor.hover {
  background: #8f72ff;
  box-shadow: 0 0 6px #8f72ff,0 0 15px #7655e8,0 0 30px rgba(118,85,232,0.7);
}