/* CSS Document */

body {
  padding-top: 4.5rem;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
}
.content-wrapper {
  position: relative;
  z-index: 1;
}

/* ********* Home Section *********************** */
#home {
  /* Use the path to your image */
  background-image: url("../img/camera-1130731.jpg"); /* This is your FIRST parallax image */
  min-height: 100vh;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  /* UPDATED: Isolate this section's stacking context */
  position: relative;
  z-index: 0;

  /* For centering the content */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; 
}

/* NEW: Add a subtle overlay to the home section for text readability */
#home::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 50% black overlay */
  z-index: 1; /* Sits on top of the background but below content */
}

/* UPDATED: Ensure home content sits on top of the new overlay */
#home .container, #home .flipper-container {
  position: relative;
  z-index: 2;
}

#home h1 {
	color: floralwhite;
	font-size: 6rem;
	font-family: 'Manrope', sans-serif;
	font-weight: bold;
	margin-bottom: 4rem;
}
.flipper-container {
	perspective: 600px;
	height: 60px;
	font-size: 4rem;
	font-weight: bold;
	color: floralwhite;
	margin-bottom: 3rem;
}
#flipping-text {
	display: inline-block;
}
@keyframes flip-out {
	from { transform: rotateX(0deg); opacity: 1; }
	to   { transform: rotateX(-90deg); opacity: 0; }
}
@keyframes flip-in {
	from { transform: rotateX(90deg); opacity: 0; }
	to   { transform: rotateX(0deg); opacity: 1; }
}
.flipping {
	animation: flip-out 0.5s forwards, flip-in 0.5s 0.5s forwards;
}


.video-rounded {
  border-radius: 15px; /* Adjust the roundness as you like */
  overflow: hidden;    /* This is important! It clips the iframe's sharp corners. */
}

.home-content-text h2 {
  font-family: 'Manrope', sans-serif;
  font-size: 1.5rem;
  color: #fff; /* Sets font color to white */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Makes text pop on any background */
}

.home-content-text p {
    font-size: 1.1rem;
  color: #fff; /* Sets font color to white */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Makes text pop on any background */
}


/* *******************. About Section ********************************* */
.parallax-about-container {
  /* This is your SECOND parallax image */
  background-image: url("../img/ocean.jpg"); /* <<< ADD YOUR OTHER IMAGE URL HERE */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; /* Crucial for the overlay */
}

/* NEW: A single overlay for the entire container */
.parallax-about-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* This is the 80% opaque background you requested */
  background-color: rgba(0, 0, 0, 0.60);
  z-index: 1; /* Sits above the container's background */
}
#about {
  min-height: 60vh; 
  justify-content: center;
  align-items: flex-start;
  padding-top: 5vh;
  padding-bottom: 5vh;
  background-color: transparent; /* KEY: Make sections see-through */
  position: relative; /* Needed for z-index to work */
  z-index: 2; /* Place these sections ABOVE the parallax overlay */
}

/* ---------------- Fancy Scrolling Header variables (scoped to #about) ---------------- */
#about {
  --baseFontSize: clamp(16px, calc(20px + 16 * (100vw - 768px)/(1920 - 768)), 48px);
  --red: rgb(239 68 68);
  --orange: rgb(249 115 22);
  --yellow: rgb(234 179 8);
  --green: rgb(34 197 94);
  --blue: rgb(96 165 250);
  --indigo: rgb(99 102 241);
  --violet: rgb(139 92 246);
   --background: #000; 
  --foreground: #171717;
}

  display: flex;
  flex-direction: column; /* Force stacking */
}
/* Keep the two pieces (I can … | list) from stretching */
#about .headerContainer { gap: .5rem; }
#about .headerContainer > * { flex: 0 0 auto; }   /* <- critical */
#about .skillContainer { display: inline-block; position: relative; }
#about h2.iCan { display: inline-block; }

/* Full-height centered header container */
#about .headerContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 28svh; /* Use 100vh if Dreamweaver nags */
  flex-wrap: wrap;
}

h2.iCan {
  margin: 0;
  text-align: right;
  font-size: calc(1.5 * var(--baseFontSize));
  font-weight: 700;
  background-image: linear-gradient(to bottom,
            var(--red) 0%, var(--red) calc(3.3 * var(--baseFontSize)),
            var(--orange) calc(3.3 * var(--baseFontSize)), var(--orange) calc(6.6 * var(--baseFontSize)),
            var(--yellow) calc(6.6 * var(--baseFontSize)), var(--yellow) calc(9.9 * var(--baseFontSize)),
            var(--green) calc(9.9 * var(--baseFontSize)), var(--green) calc(13.2 * var(--baseFontSize)),
            var(--blue) calc(13.2 * var(--baseFontSize)), var(--blue) calc(16.5 * var(--baseFontSize)),
            var(--indigo) calc(16.5 * var(--baseFontSize)), var(--indigo) calc(19.8 * var(--baseFontSize)),
            var(--violet) calc(19.8 * var(--baseFontSize)), var(--violet) calc(23.1 * var(--baseFontSize)));
  background-size: 100% calc(23.1 * var(--baseFontSize));
  background-position-y: calc(23.1 * var(--baseFontSize));
  transition: background-position-y .25s ease-in-out;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.skillContainer {
  position: relative;
}

.skillList {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  scroll-snap-type: y mandatory;
  font-size: calc(2 * var(--baseFontSize));
  max-height: calc(3.3 * var(--baseFontSize));
  margin: 0;
  padding: calc(3.3 * var(--baseFontSize)) 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.skillList > li {
  scroll-snap-align: center;
}
.skillList > li:nth-child(1) { color: var(--red); }
.skillList > li:nth-child(2) { color: var(--orange); }
.skillList > li:nth-child(3) { color: var(--yellow); }
.skillList > li:nth-child(4) { color: var(--green); }
.skillList > li:nth-child(5) { color: var(--blue); }
.skillList > li:nth-child(6) { color: var(--indigo); }
.skillList > li:nth-child(7) { color: var(--violet); }

.skillMask {
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.2) 0%,     /* light shadow at bottom */
    transparent 33%,
    transparent 66%,
    rgba(0,0,0,0.2) 100%    /* light shadow at top */
  );
}


/* Cards layout */
.cards-container {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2rem 1rem;
  z-index: 1;
}

.about-card {
  width: 320px;
  background-color: #1e1e1e;
  border-radius: 15px;
  overflow: hidden;
  text-align: center;
}

.card-image-wrapper {
  background-image: radial-gradient(circle farthest-corner at 80% 0%, #a78aff, #1f2329 50%);
  padding: 20px;
}

.about-card img {
  max-width: 100%;
  height: auto;
  padding: 0.2rem;
  border-radius: 15px;
}

.card-content {
  padding: 1.5rem;
}

.card-content h2 {
  color: #fff;
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
}

.card-content p {
  color: #eee;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}


/* ********************* Services Section ********************* */
.parallax-services-container {
  /* This is your SECOND parallax image */
  background-image: url("../img/campfire.png"); /* <<< ADD YOUR OTHER IMAGE URL HERE */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; /* Crucial for the overlay */
}

/* NEW: A single overlay for the entire container */
.parallax-services-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* This is the 80% opaque background you requested */
  background-color: rgba(0, 0, 0, 0.60);
  z-index: 1; /* Sits above the container's background */
}
#services {
  min-height: 100vh;
  flex-direction: column;
  padding: 5rem 0;
  background-color: transparent; /* KEY: Make sections see-through */
  position: relative; /* Needed for z-index to work */
  z-index: 2; /* Place these sections ABOVE the parallax overlay */
}
  


/* The main card container */
.service-card {
  display: flex;
  flex-direction: row; /* Puts image and text side-by-side */
  background-color: #ffebcf;
  border-radius: 8px;
  overflow: hidden; /* Ensures the image respects the border-radius */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* Container for the image */
.card-image {
  flex: 0 0 45%; /* Image takes up 45% of the card's width */
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Prevents image from being stretched or distorted */
}

/* Container for the text content */
.card-text {
  padding: 2.5rem;
  display: flex;             /* ✨ Make this a flex container */
  flex-direction: column;    /* ✨ Stack the content vertically */
  justify-content: center;   /* ✨ Center content on the vertical axis */
}

.card-text h2 {
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Style for the nav pills */
.nav-pills .nav-link {
  color:cornflowerblue;
  font-size: 2rem;
}

.nav-pills .nav-link.active {
  background-color: #0d6efd; /* Bootstrap primary blue */
  font-weight: 600;
  font-weight: bold;
  
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .service-card {
    flex-direction: column; /* Stacks image on top of text */
  }
}
/* Container for the video */
.card-video {
  flex: 0 0 45%; /* Video takes up 45% of the card's width */
}

/* The video element itself */
.card-video video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This is key: it makes the video cover the area without distortion */
}

/* Service Container for the photo gallery */
.simple-gallery {
  width: 100%;
  max-width: 1200px; /* Constrains the gallery width on large screens */
  margin: 0 auto; /* Centers the gallery container */
  padding: 2rem 1rem;
}

/* Styling for EACH row of images */
.gallery-row {
  display: flex;         /* Lays out images in a row */
  flex-wrap: wrap;       /* This is key: allows images to wrap onto the next line on small screens */
  justify-content: center; /* Centers the images in the row */
  gap: 1.5rem;           /* Creates consistent space between all images */
  margin-bottom: 1.5rem;   /* Space between the two rows */
}

/* Styling for EACH image card */
/* The card that holds the image */
.gallery-card {
  overflow: hidden; /* This is crucial for the zoom effect */
  border-radius: 0.5rem; /* Optional: adds rounded corners */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow */
  cursor: pointer;
}

/* Style the image itself */
.gallery-card img {
  width: 100%;
  height: 250px; /* Gives all cards a uniform height */
  object-fit: cover; /* Ensures the image covers the area without distortion */
  transition: transform 0.4s ease-in-out; /* This creates the smooth animation */
}

/* The magic: zoom the image on hover */
.gallery-card:hover img {
  transform: scale(1.1); /* Makes the image 10% larger */
}
/* ******************* Contact Section ****************************** */
/* Parallax Background Effect */
.parallax-section {
	/* The image used */
	background-image: url("../img/Los_Angeles.jpg");

	/* Set a specific height */
	min-height: 100vh;

	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	/* Add padding to center content */
	padding-top: 5rem;
	padding-bottom: 5rem;

	/* Add a semi-transparent overlay */
	position: relative;
}

.parallax-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 1;
}

/* Ensure content is above the overlay */
.container {
	position: relative;
	z-index: 2;
}

/* Card and Form Styling */
.contact-card, .contact-form-card {
	background-color: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border: none;
	border-radius: 1rem;
	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

/* Map Styling */
#map {
	width: 100%;
	height: 400px; /* Adjust height as needed */
	border-radius: 0 1rem 1rem 0;
}

/* Responsive map height */
@media (max-width: 768px) {
	#map {
		height: 300px;
		border-radius: 0 0 1rem 1rem;
	}
}

.contact-info h3 {
	font-weight: 700;
	color: #333;
}

.contact-info p {
	color: #555;
}
/* *******************.  Footer ****************** */

/* Main footer styling */
.footer-container {
    background-color: #21150a; /* Really dark brown */
    color: #f0f0f0; /* Off-white for text */
    padding: 3rem 2rem;
    position: relative; /* Needed for the pseudo-element's positioning */
    overflow: hidden; /* Keeps the blurry circle contained */
}

/* Flex container for the logo and text */
.footer-content {
    display: flex;
    align-items: center; /* Vertically aligns logo and text */
    gap: 2rem; /* Space between logo and text */
    position: relative; /* Ensures content is layered on top of the background effect */
    z-index: 2;
}

/* Logo styling */
.footer-logo {
    max-height: 60px; /* Adjust size as needed */
    width: auto;
}

/* Container for the text and the blurry circles' anchor */
.footer-text {
    position: relative; /* Acts as the positioning context for the circles */
}

/* --- The Blurry Circles --- */

/* Common styles for BOTH blurred circles */
.footer-text::before,
.footer-text::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    /* Center the circles behind the text block */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* 🟣 The larger, bottom circle (BRIGHTER PURPLE) */
.footer-text::before {
    /* UPDATED: Brighter color and higher opacity for more pop */
    background-color: rgba(160, 32, 240, 0.5); 
    width: 400px;
    height: 400px;
    filter: blur(90px);
    z-index: -2; /* Layer it behind the orange circle */
}

/* 🟠 The smaller, top circle (20% LARGER) */
.footer-text::after {
    background: radial-gradient(
        circle,
        rgba(255, 170, 85, 0.7) 25%, /* Opaque orange in the center */
        transparent 80%             /* Fades to transparent toward the edge */
    );
    /* UPDATED: Increased size by 20% from 250px to 300px */
    width: 300px;
    height: 300px;
    filter: blur(70px);
    z-index: -1; /* Layer it on top of the purple, but behind the text */
}

/* Removing default margins from heading and paragraph */
.footer-text h2,
.footer-text p {
    margin: 0;
    padding: 0.25rem 0;
}
/* ***************** Frequently Asked Questions Card ********************* */

.faq-card {
	display: flex;
	flex-wrap: wrap; /* Allows items to wrap on smaller screens */
	background-color: #ffffff;
	border-radius: 15px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	max-width: 900px;
	width: 100%;
	justify-content: center;
    align-items: center;
	overflow: hidden; /* Ensures the border-radius is respected by children */
}

/* Image container on the left */
.faq-image-container {
	flex: 1; /* Takes up available space */
	min-width: 400px; /* Prevents the image from getting too small */
	background-color: #e0e0e0; /* Fallback color */
	
}

.faq-image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Ensures the image covers the container without distortion */
	display: block;
}

/* Content container on the right */
.faq-content-container {
	flex: 2; /* Takes up twice the space of the image */
	padding: 30px;
}

.faq-content-container h2 {
	margin-top: 0;
	font-size: 28px;
	color: #333;
}

/* The expanding row for each question */
.faq-item {
	border: 1px solid #dcdcdc;
	border-radius: 8px; /* Rounded corners for the expanding row */
	margin-bottom: 15px;
	transition: all 0.3s ease;
}

/* The question part that is always visible */
.faq-question {
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	padding: 15px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none; /* Removes the default marker from the summary element */
}

/* Creates the '+' icon */
.faq-question::after {
	content: '+';
	font-size: 24px;
	font-weight: bold;
	color: #007bff;
	transition: transform 0.3s ease;
}

/* Styles for when the item is expanded */
.faq-item[open] {
	border-color: #007bff; /* Highlight border on open */
}

/* Changes the '+' to a '-' when the item is expanded */
.faq-item[open] .faq-question::after {
	transform: rotate(45deg);
}

/* The answer content */
.faq-answer {
	padding: 0 20px 15px 20px;
	color: #555;
	line-height: 1.6;
	font-size: 15px;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
	.faq-card {
		flex-direction: column;
	}
	.faq-content-container {
		padding: 20px;
	}
}