a {
	text-decoration: none;
	padding: 15px;	
}

body {
	font-family: "Times New Roman", 'Lato', Times, serif;
	background-image: linear-gradient(45deg,  #e0bc00 0%, #687352 50%, #3b5998 100%);
}

hr {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	width: 75%;
	color: #707070;
}

h1 {
	font-size: 3rem;
	font-weight: bold;
	margin-top: 50px;
	display: flex;
	align-items: center;
	justify-content: center; /* Centers text between the lines */
	width: 100%;
	margin-bottom: 10px;
	padding: 30px;
}

h1::before,
h1::after {
  content: "";
  flex: 1;
  border-bottom: 2px solid gold; /* Line thickness and color */
  margin: 0 1rem;
}

h2 {
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 50px;
}

h3, h4 {
	font-weight: bold;
}

p {
	text-align: center;
	font-size: 1.3rem;
	font-weight: bold;
	color: white;
}

.above {
	margin-top: 30px;
}

.big-font {
	font-size: 1.7rem;
}

.big-word {
  font-size: 5rem;
  font-weight: bold;
  line-height: 1;
}

.bottom-container {
	padding: 50px 0 10px;
	text-align: center;	
}

.brand {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.btn-schedule {
	background-color: #fff;
	color: #E1AD01;
	padding: 10px 20px;
	border-radius: 4px;
	font-weight: bold;
	font-size: 1.5rem;
	transition: background-color 0.3s, transform 0.2s;
}

.btn-schedule:hover {
  background-color: #000435;
  color: #fff; /* Keeps text white on hover */
}

/* The Grid Container */

.central {
	text-align: center;
}

.ceo-words {
	color:#FFAE42;
	font-size: 1.5rem;
}

.column1 {
	text-align: center;
	width: 50%;
	padding: 10px;
}

.column2 {
	text-align: center;
	padding: 10px;
}

.column3 {
	text-align: center;
	width: 70%;
	padding: 10px;
}

.column4 {
	text-align: center;
	width: 50%;
	padding: 10px;
}

.column5 {
	text-align: left;
	width: 100%;
	padding: 10px;
	
}

.column6 {
	padding: 10px;
	text-align: center;
	margin-bottom: 100px;
}

.column7 {
	text-align: center;
	padding: 10px;
}

/* Fixes container collapse issue caused by floated elements */
.content-box {
  display: flow-root;
}

.content-info {
	padding-top: 50px;
}

.dark-color {
	color: #000080;
}

/* end of Fixes container collapse issue caused by floated elements */

.darker-yellow {
	color: #8B8000;
}

.floated-image {
  float: left;     	  /* Aligns image to the left */
  margin: 50px 70px 50px 200px; /* 70px - Creates a gap between the image and text, 50px - Prevents paragraph from sticking to bottom of image */
  max-width: 600px;       /* Limits image width */
  height: 400px;		  /* Maintains original aspect ratio */
  width: 500px;
  align-content: center;
  border-radius: 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}


.floated-image2 {
  float: left;     	  /* Aligns image to the left */
  margin: 50px 30px 50px 100px; /* 30px - Creates a gap between the image and text,  50px - Prevents paragraph from sticking to bottom of image */
  max-width: 600px;       /* Limits image width */
  height: 300px;		  /* Maintains original aspect ratio */
  width: 400px;
  align-content: center;
  border-radius: 30px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.grid-container {
	display: grid;
	min-height: 100vh;
	/* Ensures fr and vh units have room to expand */
	gap: 12px;
	padding: 8px;
	box-sizing: border-box;
	grid-template-columns: 1fr;
	grid-auto-rows: auto; /* Let rows size based on content */
	/* grid-template-rows: repeat(8, 1fr); */
	align-items: start; /* Prevent rows from stretching to fill height */
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.grid-image {
  grid-row: span 2; /* Makes the image span both the header and paragraph rows */
  width: 100%;
  height: auto;
  object-fit: cover;
}

.golden {
	color: #E1AD01;
	font-weight: bold;
}


.img-pix {
	border-radius: 8px;
	width: 100%;
	max-width: 700px;
	height: auto;
	aspect-ratio: 1 / 1;
	display: block;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
	
}

.img-pix2 {
	border-radius: 50%;	
	display: block;
	margin: 0 auto;
	height: 300px;
	/* place-items: center; */
	max-width: 100%;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.img-logo {
	border-radius: 50%;
	margin-top: 30px;
	margin-left: 30px;
	height: 120px;
	width: 120px;
	float: left;
}

.lefty {
	text-align: left;
}

.light-color {
	color: #FFFF00;
}

.menu {
  display: flex;
  list-style: none;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  font-size: 1.4rem;
  font-weight: bold;
}

.menu a {
  text-decoration: none;
  color: #E1AD01;
}

/* button on menu bar --> Schedule a consultation */

/* Transforming the link into a button */
.menu .nav-btn {
  background-color:#fff;
  color: #E1AD01;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;
  transition: background-color 0.3s, transform 0.2s;
}

/* Button interactive states */
.menu .nav-btn:hover {
  background-color: #000435;
  color: #fff; /* Keeps text white on hover */
}

.menu .nav-btn:active {
  transform: scale(0.95); /* Subtle click effect */
}

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 2rem;
}

.pricing {
	place-items: center;
	padding: 5%;
	position: relative;
}

.row-item1{
	position: relative;
	padding: 80px 20%; /* Use pixel/rem padding instead of percentage height bugs */
	box-sizing: border-box;
	text-align: center;
}

.row-item1::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	z-index: -1; /* Pushes the image behind the text content */
  
	/* Replace the URL below with your actual image path */
	background-image: url("/images/background3.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.row-item2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	height: minmax(0, 1fr);
	place-items: center;
}



.row-item3 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	height: minmax(0, 1fr);
	place-items: center;
	position: relative;
	padding: 160px 20%;
}

.row-item3::before {
	content: ""; /* Required for pseudo-elements to show */
	position: absolute;
	inset: 0; /* Covers the entire parent container */
	opacity: 0.3;
	z-index: -1; /* Pushes the image behind the text content */
	background-image: url("/images/background6.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.row-item4 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	height: minmax(0, 1fr);
	place-items: center;
}

.row-item5 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: start;
	height: minmax(0, fr); 
}


.row-item6{
	position: relative;
	padding: 80px 20%; /* Use pixel/rem padding instead of percentage height bugs */
	box-sizing: border-box;
	text-align: center;
}

.row-item6::before {
	content: ""; /* Required for pseudo-elements to show */
	position: absolute;
	inset: 0; /* Covers the entire parent container */
	opacity: 0.3;
	z-index: -1; /* Pushes the image behind the text content */
	background-image: url("/images/background10.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.row-item7 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	height: minmax(0, 1fr);
	place-items: center;
}


.row-item8 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
	height: minmax(0, 1fr);
	
}

.row-item8::before {
	content: ""; /* Required for pseudo-elements to show */
	position: absolute;
	inset: 0; /* Covers the entire parent container */
	opacity: 0.1;
	z-index: -1; /* Pushes the image behind the text content */
	background-image: url("/images/background20.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.row-item9{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.row-item10{
	position: relative;
	padding: 40px 20%; /* Use pixel/rem padding instead of percentage height bugs */
	box-sizing: border-box;
	text-align: center;
}

.row-item10::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	z-index: -1; /* Pushes the image behind the text content */
  
	/* Replace the URL below with your actual image path */
	background-image: url("/images/background3.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.row-one, .row-two {
  font-size: 2rem;
  line-height: 1.1;
}

.white-color {
	color: #fff;
}


/* Mobile Screen Adjustments */
@media only screen and (max-width: 768px) {

	.big-word {
		font-size: 3rem;
	}

	.brand {
		flex-direction: column;
		gap: 10px;
	}

	.btn-schedule {
		font-size: 1.3rem;
	}
  
  	.column1 {
    	width: 100%; /* take full width on mobile */
 	}

	.column4 {
		width: 100;		
		margin: 0 auto;
	}

	.column5 {
        padding: 5px;
    }

	.column6 {

		width: 100%;
		margin-bottom: 30px;
		text-align: center;
	}

	.content-info {
    	padding-top: 20px;
		margin: 0 auto;
		place-items: center;
  	}

	.floated-image {
    	float: none;
    	display: block;
    	margin: 20px auto;
   		width: 100%;
    	max-width: 100%;
    	height: auto;
  	}

	.floated-image2 {
		float: none;
		width: 100%;
		margin: 0 auto;
	} 

	.img-logo {
		float: none;
		margin: 20px auto 15px auto;
		display: block;
	}

	.img-pix2 {
        height: 250px;
        width: 250px;
    }

	.menu {
    	flex-direction: column;
    	align-items: center;
    	gap: 1rem;
    	font-size: 1.3rem;
 	}

	.navbar {
    	flex-direction: column;
    	padding: 1rem;
    	text-align: center;
  	}

	.row-one, .row-two {
		font-size: 1.5rem;
	}

	.row-item1 {
		padding: 20px 15px; /* Reduced vertical gap and safe horizontal margins */
		width: 100%;
	}

  	.row-item2 {
    	grid-template-columns: 1fr; /* stack into one column */
		width: 100%;
 	 }

	.row-item3 {
		grid-template-columns: 1fr;
		padding: 60px 5%;
		width: 100%;
	}

	.row-item4 {
		grid-template-columns: 1fr;
		width: 100%;
	}

	.row-item6 {
		width: 100%;
	}

	.row-item7 {
		grid-template-columns: 1fr;
	}

	.row-item8 {
		grid-template-columns: 1fr;
		width: 70%;	
	}

	.row-item9{
		grid-template-columns: 1fr;
	}
	
	.row-item10 {
		padding: 20px 15px; /* Reduces spacing for small screens */
	}
}

/* CAROUSEL */

/* 1. Setup the display window */
.carousel-container {
	width: 100%;
	max-width: 800px;
	height: 400px;
	margin: 0 auto;
	overflow: hidden; /* Hides the other 7 images */
	position: relative;
	border-radius: 8px;
}

/* 2. Chain all 8 images horizontally */
.carousel-slide {
	display: flex;
	width: 900%; /* 8 images * 100% width each */
	height: 100%;
	/* animation: automaticSlider 24s infinite ease-in-out; */
	/* Fixed the animation name syntax error and changed to linear for smoother snaps */
	animation: automaticSlider 27s infinite linear; 
	
}

/* 3. Force each image to occupy exactly 1 full viewport width */
.carousel-slide img {
	width: 11.111%; /* 100% total / 8 images */
	height: 100%;
	object-fit: contain; /* Prevents image distortion */
}

/* 4. Pause the rotation when a user hovers */
.carousel-container:hover .carousel-slide {
	animation-play-state: paused;
}

/* 5. Timeline timeline for 8 steps */
@keyframes automaticSlider {
	/*
	0%, 10% { transform: translateX(0); }
	12.5%, 22.5% { transform: translateX(-12.5%); }
	25%, 35% { transform: translateX(-25%); }
	37.5%, 47.5% { transform: translateX(-37.5%); }
	50%, 60% { transform: translateX(-50%); }
	62.5%, 72.5% { transform: translateX(-62.5%); }
	75%, 85% { transform: translateX(-75%); }
	87.5%, 97.5% { transform: translateX(-87.5%); }
	99.9% { transform: translateX(-100%); }
	/* Instantly jump back to start with no animation */
	/* 100% { transform: translateX(0); } */

	/*
		To create a pure CSS carousel with 8 images that loops infinitely and seamlessly, 
		you must duplicate the 1st image at the end as a 9th image. This hides the "snap back" 
		transition to the beginning.Here is the corrected and fully completed CSS code based on 
		your snippet, fixed for a 9-image total layout (8 original + 1 clone).
	*/


	/* Slide 1 */
	0%, 9% { transform: translateX(0); }
	
	/* Slide 2 */
	12.5%, 21.5% { transform: translateX(-11.111%); }
	
	/* Slide 3 */
	25%, 34% { transform: translateX(-22.222%); }
	
	/* Slide 4 */
	37.5%, 46.5% { transform: translateX(-33.333%); }
	
	/* Slide 5 */
	50%, 59% { transform: translateX(-44.444%); }
	
	/* Slide 6 */
	62.5%, 71.5% { transform: translateX(-55.555%); }
	
	/* Slide 7 */
	75%, 84% { transform: translateX(-66.666%); }
	
	/* Slide 8 */
	87.5%, 96.5% { transform: translateX(-77.777%); }
	
	/* Slide 9 (Clone of Slide 1) -> Quick transition to the end, then hard reset */
	100% { transform: translateX(-88.888%); }
}


/* CAROUSEL FOR SECOND CONTAINER --> This IS not alphabetized in order -- Study */

.carousel-container2 {
	position: relative;
	display: flex;
	width: 100%;
	max-width: 600px;
	overflow: hidden;
	margin: auto;
	align-items: center;
}
.carousel-track {
	display: flex;
	transition: transform 0.4s ease-in-out;
}

.carousel-track.no-transition {
  transition: none;
}

.slide-video {
	min-width: 100%;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 10px;
	/* Prevents cropping and shows the entire video frame */
}

.prev-btn, .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

/* To fix your JavaScript carousel so it loops from the last video back to the first video without scrolling backward 
across every slide, you must disable CSS transition during the instant jump, or rebuild the logic with a seamless infinite 
clone approach. */