html { scroll-behavior: smooth; 
    overflow-x: hidden; /* Stops horizontal shifting */}				/* smooth scrolling */

/* ----------------------- body styles -------------------------*/
body {
	min-height: 100vh;							/* full viewport */
	margin: 0px;								/* reset margin */
	padding: 0px;								/* reset padding */
	box-sizing: border-box;						/* set to border boxes */
	font-family: Impact;			            /* set font for webpage */
    overflow-x: hidden; /* Stops horizontal shifting */
	
	/* variables for color palette */
  --bright-yellow: #ffde11;
  --black: #000000;
  --white: #ffffff;  
}

/* ------------ generic, repeated styles/classes ------------- */

.custom-heading {
  color: var(--black);
}

.section {
	background-color: var(--white);
	color: var(--black);
}

.service-icon {
    font-size: 2.5em;
    color: var(--bright-yellow);
    
}

/* inner icon color */
.service-icon .fa-stack-1x {
  color: var(--black); 
}

/* -------------------- navbar styles ----------------------- */


/* Ensure the header sticks at the top */
.position-fixed {
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
}

.custom-navbar {
  background-color: var(--white);
  box-shadow: 0 2px 4px 0px rgba(0,0,0,0.50);
}

.navbar-toggler-icon {
    width: 20px;  /* Adjust width */
    height: 20px; /* Adjust height */
}

.navbar-brand img {
  height: 75px;
  margin-left: 10px; /* Space between logo and text */
  margin-right: 10px; /* Space between logo and text */
}

/* Customize the navbar menu items */
.navbar-nav .nav-link {
  font-size: 18px;
  font-weight: 600;
  color: var(--black);
  text-transform: uppercase;
  padding-left: 15px;
  padding-right: 15px;
  transition: color 0.3s ease; /* Smooth hover effect */
}

/* Optional: change color of menu items on hover */
.navbar-nav .nav-link:hover {
  text-decoration: underline;
}

/* Ensure the menu is aligned to the right */
.collapse.navbar-collapse {
  display: flex;
  justify-content: flex-end; /* Align items to the right */
}

#brand-name {
    font-size: 16px;
}

#brand-name:hover {
  text-decoration: underline;
}

/* Make sure the navbar is responsive */
.navbar-toggler {
  border: none;
}

.title-text {
  color: var(--white);
  text-shadow: 1px 1px 1px var(--black);
}


.btn.custom-btn {
	border: 2px solid var(--white);
	background-color: var(--black);
	color: var(--white);
	box-shadow: 1px 1px 2px var(--white);
    padding: 15px 20px 15px 20px;
}

.btn.custom-btn:hover {
	border-color: var(--black);
	background-color: var(--bright-yellow);
	color: var(--black);
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* logo */
#background-image > img {
  height: 200px;
  width: 250px;
  aspect-ratio: 16/9;
  margin-bottom: 15px;
}

/* background */
#background-image {
	background-image: url("../images/background-image-mobile.png");  /* insert image */
	background-size: cover;							  			     /* make image cover full width of container */
	background-repeat: no-repeat;								     /* don't repeat it */
	background-position: center;					  			     /* center */
}



/* -------------------- Carousel Styles ----------------------- */

.carousel-item img {
    object-fit: cover;  /* Ensures the image covers the space without distorting */
    height: 400px;  /* Adjust the height to your preference */
    width: 100%;    /* Ensures it takes up the full width */
    margin: auto; /* Center the image */
    object-fit: contain; /* Prevents cropping */

  }


#carousel-title {
    margin-top: 25px;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
  background-color: var(--black);  /* Change the icon color to white */
}


/* -------------------- Contact & Footer ----------------------- */

.mail-phone-icons {
  font-size: 2.5em;
  color: var(--black);
}

footer {
  background-color: var(--black);
}

.footer-text {
  color: var(--white);
}

.flag-icon {
  font-size: 2.5em;
  color: var(--white);
  
}

.facebook-icon {
  font-size: 2.5em;
  color: var(--white);
  
}

/* inner icon color */
.facebook-icon .fa-stack-1x {
color: var(--black); 
}

@media (min-width: 768px) {
	#background-image {background-image: url("../images/background-image-tablet-desktop.png");} /* tablet image size */
	#contact textarea {height: 190px;}
    #brand-name {font-size: 18px;} 															/* custom sizing for tablet and up */
	
}

@media (min-width: 992px) {
	#background-image {background-image: url("../images/background-image-desktop.png");} 		/* desktop image size */
	
}