/* DEFAULTS */
html, body {
    background-color: #000; /* Set background color to black */
    width: 100%; /* Ensure full width */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    overflow-x: hidden; /* Prevent horizontal scroll */
    font-family: 'Bai Jamjuree', sans-serif;
}

/* Change color to white on hover for all hyperlinks */
a:hover {
  color: #ffffff; /* Changes color to white on hover */
}

/* NAVIGATION */

.nav-link-hover:hover {
    color: #ffc107 !important; /* Use the warning color */
}

/* Dropdown menu styling to match the navbar */
.navbar .dropdown-menu {
    background-color: #343a40; /* Same as navbar background */
    /* If you have a specific font family in use for the navbar, apply it here as well */
  }
  
  /* Dropdown item styling for text color and hover effects */
  .navbar .dropdown-menu .dropdown-item {
    color: #ffffff; /* White text for dropdown items */
    font-weight: normal; /* Match the font weight as per your preference, adjust if needed */
  }

  
  .navbar .dropdown-menu .dropdown-item:hover {
    background-color: #ffc107; /* Optional: Change background color on hover to match the "warning" theme */
    color: #343a40; /* Change text color on hover for better contrast, if needed */
  }

  .navbar-brand > span {
    display: block; /* Continue treating each span as a block-level element */
    margin: 0; /* Reset default margins */
    padding: 0; /* Reset default paddings */
  }
  
  /* Adjust the bottom margin of the first span */
  .navbar-brand > span:first-child {
    letter-spacing: 1.4px;
    margin-bottom: -5px; /* Pulls the "Technology" text closer to "8-Bit Hive" */
  }
  
  /* Optional: Adjust the top margin of the second span if needed */
  .navbar-brand > span:nth-child(2) {
    margin-top: -5px; /* Further adjustment if needed */
    letter-spacing: 1.4px; /* Keep your previous adjustments */
    font-size: 0.9em; /* Keep your previous adjustments */
  }
  
  

/* HERO */
.home {
    position: relative;
    background-image: url('../img/hero.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }
  
  .home::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8); /* Dark grey overlay */
    z-index: 1;
  }
  
  /* Ensure content is above the overlay */
  .home > .container-lg {
    position: relative;
    z-index: 2;
  }
  
  /* Optionally, if you want to ensure the image covers older browsers that don't support background-attachment: fixed */
  @supports not (background-attachment: fixed) {
    .home {
      background-attachment: scroll;
    }
  }

  /* ABOUT */
  .about {
    position: relative;
    background-image: url('../img/about_bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: 1;
  }
  
  .about::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9); /* Optional: Dark overlay to enhance text readability */
    z-index: -1;
  }
  
  .about-img {
    position: relative;
    display: inline-block;
    z-index: 2;
  }
  
  .about-img::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 40px); /* Adjust based on the size of your image */
    height: calc(100% + 40px);
    background-color: #ffc107; /* Bootstrap warning color for the halo */
    border-radius: 50%; /* Ensures the halo is perfectly round */
    z-index: -1;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.9); /* Adds shadow to the halo */
  }
  
  .about-img img {
    width: 100%; /* Adjust if necessary */
    border-radius: 50%; /* Ensures the image is circular */
    position: relative;
    z-index: 3; /* Ensures the image is above the halo */
  }

  .about-img-secondary img {
    max-width: 100%; /* Ensures the image does not exceed its container's width */
    height: auto; /* Maintains aspect ratio */
    /* Additional styling as needed, e.g., border-radius for roundness */
  }
  
  /* SERVICES */
  .service-image {
    display: inline-block;
    border: 7px solid #ffc107; /* Bootstrap 'danger' color */
    border-radius: 50%; /* Makes the border circular */
    overflow: hidden; /* Ensures the zoomed image does not extend beyond the border */
    line-height: 0; /* Removes any extra space inside the div */
  }
  
  .service-image .service-img {
    width: 100px; /* Adjust based on your preference */
    height: 100px; /* Adjust to keep the image circular */
    transition: transform 0.3s ease; /* Smooth transition for zoom effect */
    border-radius: 50%; /* Ensures the image itself is circular */
  }
  
  .service-image:hover .service-img {
    transform: scale(1.3); /* Slightly zooms in the image on hover */
  }
  
  .services {
    background-image: url('../img/services/services_bg.png'); /* Path to your background image */
    background-size: cover; /* Cover the entire section */
    background-position: center; /* Center the background image */
    background-attachment: fixed; /* Make the background static */
    position: relative; /* Establish a stacking context */
  }
  
  .services::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8); /* Optional: Dark overlay to enhance readability */
    z-index: 1;
  }
  
  /* Ensure the content is above the overlay */
  .services > .container-lg {
    position: relative;
    z-index: 2;
  }
  
  /* PRICING */
/* PRICING */
.pricing {
    position: relative;
    background-image: url('../img/pricing_bg.png'); /* Update with your actual image path */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }
  
.list-unstyled li {
  color: white;
}

.pricing-card p {
  color: white;
}

  .pricing::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8); /* Dark grey overlay for text readability */
    z-index: 1;
  }
  
  /* Ensure content in the pricing section is above the overlay */
  .pricing > .container-lg {
    position: relative;
    z-index: 2;
  }
  
  
  .pricing-card {
    position: relative;
    overflow: hidden; /* Ensure the overlay doesn't exceed the card's bounds */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    background-image: linear-gradient(to right top, black, grey, #8f875c, grey, black);
    border: none;
  }
  
  .card-content {
    position: relative; /* Ensures content is above the overlay */
    z-index: 2; /* Higher than the overlay */
  }
  
  .card-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right bottom, #111, #777, #8f875c, #777, #111); /* Your hover gradient */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.5s ease; /* Smooth transition for the overlay */
    z-index: 1; /* Below the content but above the card's background */
  }
  
  .pricing-card:hover .card-hover-overlay {
    opacity: 1; /* Reveals the overlay on hover */
  }
  

  .pricing-card .card-header {
    background-color: #343a40;
    color: #ffc107;
  }
  
  .pricing-card .card-body {
    padding: 20px;
  }
  
  .pricing-card ul {
    padding-left: 0;
    list-style: none;
  }
  
  .pricing-card ul li {
    margin-bottom: 10px;
    text-align: left;
  }
  
  .pricing-card a.btn {
    margin-top: 20px;
  }

  .pricing-card span {
    color: #ffc107;
  }

  

  .btn-warning:hover {
    background-color: #e0a800; /* Lighter or different color */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
/* PORTFOLIO */

.portfolio {
  position: relative;
  background-image: url('../img/portfolio/portfolio_bg.jpg'); /* Path to your image */
  background-size: cover; /* Cover the entire section */
  background-position: center; /* Center the background image */
  background-attachment: fixed; /* Optional: Creates a parallax-like effect */
}

/* Dark Overlay on Portfolio Section */
.portfolio::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8); /* Adjust the overlay opacity as needed */
  z-index: 1;
}

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

/* Enhance overall card appearance */
.portfolio .card {
  background-color: rgba(52, 58, 64, 0.8); /* Semi-transparent background */
  color: #fff;
  overflow: hidden;
  padding: 5px;
  transition: transform 0.3s ease, background-color 0.3s ease;
  border: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Hover effect for cards */
.portfolio .card:hover {
  transform: scale(1.01);
  background-image: linear-gradient(to right, black, #8f875c, grey);
}

/* Adjustments for images */
.portfolio .card .card-img-top {
  width: calc(100% - 10px);
  height: auto;
  margin: 5px;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

/* Enhance button appearance and interaction */
.portfolio .card .btn-warning {
  color: #343a40;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.portfolio .card .btn-warning:hover {
  background-color: #ffcc00;
  color: #ffffff;
  transform: translateY(-2px);
}

.portfolio .card-body {
  padding: 15px;
}


/* FOOTER */
.footer {
  background-color: #343a40; /* Dark footer background */
  color: #ffc107; /* Bootstrap warning color for text */
}

.footer a.text-warning {
  color: #ffc107; /* Ensures icons use the Bootstrap warning color */
  font-size: 1.25rem; /* Increase icon size */
}

.footer a.text-warning:hover {
  color: white; /* Slightly darker shade for hover effect */
}

.footer p {
  color: #ffffff; /* White color for text */
}

/* 404 */

.error-container {
  text-align: center;
  padding: 40px;
}
.error-code {
  color: #ffc107;
  font-size: 5em;
}
.error-message {
  color: #f8f9fa;
  font-size: 2em;
}
.error-detail {
  color: #ced4da;
  font-size: 1.2em;
}
a {
  color: #ffc107;
}


/* CONTACT */ 
form#contact-form {
  background-color: #343a40; /* Dark grey background */
  padding: 20px;
  border-radius: 8px;
  color: #ffc107; /* Warning color for text */
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border-radius: 5px;
  border: 1px solid #ddd;
  box-sizing: border-box; /* Makes sure padding does not affect overall width */
}

button[type="submit"] {
  background-color: #ffc107; /* Warning color */
  color: #343a40; /* Dark grey for text */
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

button[type="submit"]:hover {
  opacity: 0.9;
}

.contact {
  background: url('../img/contact/contact_original.jpg') no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  background-color: #343a40; /* Dark grey background, similar to your theme */
  color: #ffffff; /* White text color */
  padding: 40px 0; /* Ample padding for visual space */
  text-align: center; /* Center the content */
}

.contact::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.9); /* Dark overlay for text contrast */
  z-index: 2; /* Ensure this is below the actual content */
}

.contact .container, .contact .container-lg, .contact .row, .contact form, .contact .col {
  position: relative;
  z-index: 3; /* Ensure content is above the overlay */
}


/* TESTIMONIALS */
.testimonials {
  background: url('../img/testimonial/feeback_bg.png') no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  background-color: #343a40; /* Dark grey background, similar to your theme */
  color: #ffffff; /* White text color */
  padding: 40px 0; /* Ample padding for visual space */
  text-align: center; /* Center the content */
}

.testimonials::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8); /* Dark overlay for text contrast */
  z-index: 1;
}

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

.testimonials h2 {
  color: #ffc107; /* Warning color for heading */
  margin-bottom: 20px; /* Space between heading and paragraph */
}

.testimonials p {
  margin-bottom: 20px; /* Space between paragraph and icon */
  font-size: 18px; /* Slightly larger font size for visibility */
}

.testimonials i {
  font-size: 24px; /* Larger icon size */
  animation: pulse 2s infinite; /* Add a subtle pulse animation */
}

/* Pulse animation for the clock icon */
@keyframes pulse {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.1);
  }
  100% {
      transform: scale(1);
  }
}

/* Testimonial Carousel */
/* Enhanced Testimonial Carousel Styles */

#testimonialCarousel {
  position: relative; /* Ensures z-index is applied correctly */
  z-index: 3; /* Higher than the background/overlay */
}

#testimonialCarousel .carousel-inner {
  display: flex;
  justify-content: center; /* Center the items horizontally */
  align-items: center; /* Center the items vertically */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Optional: Adds a subtle shadow to text for better readability */
}

#testimonialCarousel .carousel-item {
  color: #fff; /* Ensures text color is white for better contrast */
  min-height: 200px; /* Minimum height to accommodate content */
  max-width: 80%; /* Limiting max width for better readability */
  margin: 0 auto; /* Center the carousel item */
}

#testimonialCarousel .blockquote {
  padding: 0.5rem 1.5rem; /* Padding for the blockquote */
  font-size: 1.2rem; /* Slightly larger font for readability */
  position: relative;
  background-color: rgba(52, 58, 64, 0.85); /* Semi-transparent dark background */
  border-radius: 5px; /* Optional: adds rounded corners */
}

#testimonialCarousel .blockquote-footer {
  color: #ffc107; /* Color to match the theme's warning color for citation */
  font-size: 1rem; /* Appropriately size the footer text */
  margin-top: 0.5rem; /* Space between the quote and its citation */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1); /* Invert the icons to white for better visibility */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #testimonialCarousel .carousel-item {
    max-width: 90%; /* Allows more width on smaller screens for better layout */
  }
}


@media (max-width: 992px) { /* Adjusts for Bootstrap's large (lg) breakpoint or your specific needs */
  .custom-quote-button {
    margin-right: 20px; /* Adjust the margin as needed */
  }
}

/* Local SEO */
.local-hero {
  position: relative;
  background-image: url('../img/hero.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.local-hero h2,h3 {
  color: #ffc107;
}

.local-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8); /* Dark grey overlay */
  z-index: 0;
}

.local-hero .container-lg {
  position: relative;
  z-index: 1; /* Ensures content is above the overlay */
}

.map-container {
  text-align: center; /* Center the map container */
  position: relative;
  background-image: url('../img/map.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.map-container::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8); /* Dark grey overlay */
  z-index: 1; /* Overlay z-index is set to 1 */
}

/* Correctly set the z-index of content within .map-container to be above the overlay */
.map-container iframe, .map-container .container {
  position: relative;
  z-index: 2; /* Ensures content is above the overlay */
}




.map-container iframe {
  width: 600px; /* Set the width */
  height: 450px; /* Set the height */
  border: 0;
  margin: 0 auto; /* Center the iframe */
}

@media (max-width: 600px) {
  .map-container iframe {
    width: 100%; /* Make it responsive */
    height: auto; /* Adjust the height automatically */
  }
}

.hero-logo {
  max-width: 300px; /* Adjust the size of the logo */
  height: auto; /* Maintain aspect ratio */
  margin-bottom: 20px; /* Add some space below the logo */
}

@media (max-width: 768px) {
  .hero-logo {
    max-width: 150px; /* Slightly smaller logo for smaller devices */
    margin-bottom: 10px; /* Less space below the logo on smaller devices */
  }
}


/* Centering text in the accordion header and body */
.accordion-button, .accordion-body {
  text-align: center;
}

/* Customizing accordion button with arrows on both sides */
.accordion-button::before, .accordion-button::after {
  font-family: "Font Awesome 5 Free"; /* Adjust based on the Font Awesome version you have */
  font-weight: 900;
  content: "\f078"; /* FontAwesome arrow down */
  color: #ffc107; /* Your theme's yellow color */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.accordion-button::after {
  content: "\f077"; /* FontAwesome arrow up */
  right: 20px; /* Adjust spacing based on your design */
}

.accordion-button::before {
  left: 20px;
}

.accordion-button:not(.collapsed)::after {
  display: none; /* Hide the up arrow when accordion is collapsed */
}

/* Correcting styles when accordion button is focused or not collapsed */
.accordion-button:not(.collapsed) {
  color: #ffc107; /* Maintain the yellow color for text */
  background-color: rgba(52, 58, 64, 0.9); /* Maintain the dark theme background */
}
.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5); /* Focus shadow in theme color, adjust if necessary */
  z-index: 3; /* Ensures the focus ring is above adjacent elements */
}



/* Ensures arrows and text color change on hover */
.accordion-button:hover::before, .accordion-button:hover::after, .accordion-button:hover {
  color: #fff; /* Hover color for arrows and text */
}

/* Accordion header styling */
.accordion-button {
  background-color: rgba(52, 58, 64, 0.9); /* Your dark theme background */
  color: #ffc107; /* Your theme's yellow color for text */
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow for depth */
}

/* Centering accordion header text */
.accordion-button {
  justify-content: center; /* Center button content */
  text-align: center;
}


.accordion-button.collapsed {
  color: #ffc107; /* Color of text and arrow when collapsed */
}

.accordion-body {
  background-color: rgba(52, 58, 64, 0.9);
  color: #ffc107;
}

/* Portfolio */
.project-hero img {
  max-width: 60%; /* Adjust this value to control the image size */
  margin: 0 auto; /* Ensures the image is centered */
}

/* BLOG */
/* BLOG FORM SECTION START */
.blog-admin-login {
  padding-top: 100px; /* Adjust this value based on the height of your navbar */
}

:root {
  --navbar-height: 70px; /* Default height of the navbar */
}

@media (max-width: 768px) {
  :root {
    --navbar-height: 60px; /* Smaller navbar for smaller devices */
  }
}

.blog-admin-login {
  padding-top: calc(var(--navbar-height) + 30px); /* 30px additional space */
}

/* BLOG FORM SECTION START */
.blog-admin-login {
  margin-top: 100px; /* Same as padding, adjust based on navbar height */
}