/* Base resets + theme colors */
:root {
	--bg: #0a0e12;		 /* background colour */
	--text: #e8ecef;     /* main text colour */
	--muted: #9aa4ad;    /* lighter grey for subtext */
	--gold: #d8b45a;     /* accent colour */
	--green: #2be592;    /* accent colour */
}

* {
	box-sizing: border-box; /* makes padding & borders behave predictably */
}

body {
	margin: 0;
	font-family: Inter, Arial, sans-serif;
	background: var(--bg);
	color: var(--text);
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--text);
	text-decoration: none;
	font-weight: bold;
	font-size: 1.2rem;
}

/* =========================
   HEADER
========================= */
.site-header {
	width: 100%;
	text-align: center;
	padding: 40px 20px 20px;
	background: transparent;
}

/* Main Noctyra title – refined “old kingdom” feel */
.brand-title {
  font-family: "Cinzel Decorative", "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(3rem, 6vw, 5.5rem);
  letter-spacing: 0.12em;
  margin: 0;
  text-transform: uppercase;

  /* Gold gradient */
  background: linear-gradient(180deg, #ffd98e 0%, #d8b45a 35%, #b78f37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* Subtle glow / depth */
text-shadow:
	0 2px 0 rgba(0,0,0,0.45),
    0 10px 25px rgba(0,0,0,0.8);

background-size: 300% 300%;
animation: goldShimmer 4s linear infinite;
}

/* Golden underline flourish under NOCTYRA */
.brand-title::after {
    content: "";
    display: block;
    width: clamp(140px, 30vw, 320px);
    height: 4px;
    margin: 12px auto 0;
    border-radius: 999px;

    background: linear-gradient(
        90deg,
        rgba(216,180,90,0) 0%,
        #d8b45a 40%,
        #ffd98e 60%,
        rgba(216,180,90,0) 100%
    );

    opacity: 0.75;
}

  .site-header img {
    max-width: 90px;
  }

.site-header {
    padding-bottom: 30px;
}

section { 
	padding: 100px 0;
}

/* Hero section */
.hero {
	position: relative;
	overflow: hidden;
	min-height: 100vh;        /* full screen height */
	display: flex;
	align-items: center;      /* vertical center */
	justify-content: center;  /* horizontal center */
	text-align: center;
	padding: 0;               /* remove extra padding */
}

.hero {
    min-height: 70vh;
}

.hero h1 {
	font-size: clamp(2rem, 1rem + 4vw, 3rem); /* scales with screen size */
	margin: 0 0 20px;
	font-weight: 800;
}

.hero h1 span {
	color: var(--green); /* highlight part of the headline*/
}

.hero p {
	font-size: 1.2rem;
	color: var(--muted);
	margin: 0 0 30px;
}

/* Buttons inside hero */
.hero-buttons {
	display: flex;
	justify-content: center;
	gap: 20px
}

.hero-buttons a {
	padding: 12px 24px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	border: 2px solid var(--green); /* Outlined Style */
	transition: background 0.2s, color 0.2s;
	color: var(--green); /* force the text to always be green */
}



.hero-buttons a:first-child:hover {
	background: var(--green);
	color: #000;
}

.hero-buttons a:last-child:hover {
	background: var(--green);
	color: #000;
}

.hero-heading {
	position: relative;
	overflow: hidden; /* stops the image spilling outside the frame */
}

.hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('../assets/Noctyra_Logo2.png') no-repeat center center;
	background-size: contain;  /* keeps aspect ratio, fills hero */
	opacity: 0.25;
	pointer-events: none;
	z-index: 1;
}

.hero .container {
	position: relative;
	z-index: 2; /* ensures text is above the logo */
}

/* Services section */
#services {
	padding: 80px 0;
	text-align: center;
}

#services h2 {
	font-size: 2rem;
	margin-bottom: 10px;
}

#services p {
	color:var(--muted);
	margin-bottom: 40px;
}

/* Grid for service cards */
.services-grid {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;          /* cards wrap on smaller screens */
	margin-top: 20px;
}

.service-card {
	background: #111;
	padding: 20px;
	border-radius: 15px;
	flex: 1 1 280px;          /* each card shrinks/grows */
	max-width: 320px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.service-card:hover {
	box-shadow: 0 0 20px rgba(0, 255, 128, 0.7);
	transform: translateY(-5px);
	border-color: rgba(0, 255, 128, 0.8);
}

/* Service Details Popup */
.service-details {
	margin: 60px auto;
	padding: 5vw;             /* scales with screen width */
	width: 90%;               /* fits within section */
	max-width: 1200px;        /* cap on huge screens */
	min-height: 40vh;         /* 40% of screen height */
	background: #0d0d0d;
	border-radius: 20px;
	box-shadow: 0 0 40px rgba(0, 255, 128, 0.4);
	display: none;
	text-align: center;
}

.service-details.active {
	display: block;
	animation: fadeIn 0.4s ease-in-out;
}

.service-details h3 {
	font-size: 2rem;
	margin-bottom: 15px;
}

.service-details p {
	font-size: 1.1rem;
	line-height: 1.6;
	margin-bottom: 20px;
}

/* Gallery inside popup */
.gallery {
	margin-top: 20px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.service-details img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	margin: 20px 0;
}

.gallery-btn {
	background: #111;
	color: white;
	border: 1px solid #0f0;
	padding: 10px 15px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 18px;
	transition: all 0.3s ease;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.gallery-btn:first-of-type { left: 10px; }
.gallery-btn:last-of-type { right: 10px; }

.gallery-btn:hover {
	background: #0f0;
	color: black;
}

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

/* Phones */
@media (max-width: 600px) {
  .service-card {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .service-details {
    padding: 20px;
    min-height: auto;
  }

  .service-details h3 { font-size: 1.5rem; }
  .service-details p { font-size: 1rem; }
}

/* Tablets */
@media (min-width: 601px) and (max-width: 1024px) {
  .service-card {
    flex: 1 1 45%;  /* two per row */
  }

  .service-details {
    padding: 30px;
  }
}


#services {
	margin-bottom: 15px; /* space between services and contact us sections */
}

.gallery {
	margin-top: 15px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.gallery img {
	max-width: 100%;
	max-height: 400px;
	border-radius: 8px;
}

.gallery-btn {
	background: rgba(0, 0, 0, 0.6);
	border: none;
	color: #fff;
	font-size: 24px;
	padding: 10px;
	cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.gallery-btn:first-of-type {
	left: 10px;
}

.gallery-btn:last-of-type {
	right: 10px;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes goldShimmer {
    0% {
        background-position: 0% 50%;
        filter: brightness(1);
    }
    40% {
        filter: brightness(1.15);
    }
    50% {
        background-position: 100% 50%;
        filter: brightness(1.3);
    }
    60% {
        filter: brightness(1.15);
    }
    100% {
        background-position: 0% 50%;
        filter: brightness(1);
    }
}


/* Service Card Pop Up Section */
.service-popup img {
	max-width: 80%;
	height: auto;
	border-radius: 10px;
	margin: 20px 0;
}

.gallery-btn {
	background: #111;
	color: white;
	border: 1px solid #0f0;
	padding: 10px 15px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 18px;
	transition: all 0.3s ease;
}

.gallery-btn:hover {
	background: #0f0;
	color: black;
}

/* Contact Section */
#contact-form {
	padding: 80px 0;
	text-align: center;
}

#contact-form h2 {
	font-size:2rem;
	margin-bottom: 10px;
}

#contact-form p {
	color: var(-muted);
	margin-bottom: 40px;
}

/* Form Container */
.contact-form {
	max-width: 600px;
	margin: 0 auto;
	flex-direction: column;
	gap: 20px;
	background: rgba(255, 255, 255, 0.03);
	padding: 30px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	text-align: left;
}

/* Each row */
.form-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 20px /* extra space between rows */
}

/* Labels */
.form-row label {
	font-weight: 600;
	font-size: 1rem;
	color: var(--muted);
}

/* Inputs & textarea */
.contact-form input,
.contact-form textarea {
	width: 100%; /* makes inputs stretch full width */
	padding: 14px 16px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(0, 0, 0, 0.4);
	color:var(--text);
	font-size: 1rem;
	font-family: inherit; /*ensures textarea matches input */
	outline: none;
	transition: border-color 0.2s, background 0.2s;
}

/* On focus (typing) */
.contact-form input:focus,
.contact-form textarea:focus {
	border-color: var(--green);
	background: rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 8px rgba(43, 229, 146, 0.6); /*green glow*/
}

/* Submit button */
.btn-submit {
	display: block;
	margin: 0 auto; /* centers the button */
	padding: 14px;
	border-radius: 8px;
	border: 2px solid var(--green);
	background: transparent;
	color: var(--green);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

/* Hover = filled green */
.btn-submit:hover {
	background: var(--green);
	color: #000;
}

	
	
	
	
/* Footer */
.site-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 20px;
	text-align: center;
	color: var(--muted);
	font-size: 0.9rem;
	margin-top: 60px; /* space above footer */
}

.site-footer p {
	margin: 0;
}