body, html {
    height: 100%;
    font-family: "Inconsolata", sans-serif;
  }
  
  .bgimg {
    background-position: center;
    background-size: cover;
    background-image: url("images/pyr.jpg");
    min-height: 75%;
  }
  
  .menu {
    display: none;
  }

  body {
    background-color: black;
    color: white;
  }
  .w3-sand, .w3-light-grey, .w3-white, .w3-panel, .w3-card {
    background-color: black !important;
    color: white !important;
  }
  .w3-text-grey {
    color: #ccc !important;
  }
  .w3-tag, .w3-button {
    color: white !important;
    background-color: #000000 !important;
  }
  input, textarea {
    background-color: #222 !important;
    color: white !important;
    border-color: #555 !important;
  }
  a {
    color: #00bcd4 !important; /* Optional: Give links a nice contrast */
  }


  .w3-container {
    display: flex;
    justify-content: space-evenly; /* Distribute space evenly between cards */
    flex-wrap: wrap; /* Allow cards to wrap on smaller screens */
    gap: 20px; /* Space between the cards */
}

.w3-card-4 {
    width: 30%; /* Adjust width to fit the cards side by side */
    margin-bottom: 20px; /* Add bottom margin for spacing between rows */
}

/* Optional: Add some responsiveness */
@media (max-width: 768px) {
    .w3-card-4 {
        width: 45%; /* Reduce width on smaller screens */
    }
}

@media (max-width: 480px) {
    .w3-card-4 {
        width: 100%; /* Make cards full width on very small screens */
    }
}



/* Button Link Styling */
.button-link {
  text-decoration: none; /* Removes underline */
  display: block; /* Makes the entire section clickable */
  color: inherit; /* Keeps the text color as is */
}

.button-link:hover {
  background-color: #45a049; /* Darken the background on hover */
  opacity: 0.8; /* Slightly fade the text on hover */
}



.card-container {
  position: relative;
  overflow: hidden;
  
  border-radius: 10px; /* Optional: Rounded corners */
  transition: border 0.3s ease; /* Smooth border transition */
}

.card-container .scroll-up-text {
  position: absolute;
  bottom: -17px; /* Text stays above the border initially */
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: #373937;
  color: white;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: bottom 0.3s ease; /* Smooth movement of the text */
}

/* "Click for more info" text initially hidden */
.card-container .more-info {
  position: absolute;
  bottom: -40px; /* Position hidden below the card */
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #4CAF50;
  cursor: pointer;
  opacity: 0; /* Initially hidden */
  transition: bottom 0.3s ease, opacity 0.3s ease;
}

/* Hover effect to reveal the border and show "Click for more info" */
.card-container:hover {
  border-color: #4CAF50; /* Show the border color on hover */
}

.card-container:hover .scroll-up-text {
  bottom: 60px; /* Move the original text up */
}

.card-container:hover .more-info {
  bottom: 20px; /* Bring the "Click for more info" text inside the border */
  opacity: 1; /* Make it visible */
}


/* Ensure the reference container has space between the elements */
#references .w3-content {
  display: flex;
  justify-content: space-between;
  gap: 40px; /* Increase the gap for more space */
}

/* Add margin to individual testimonials if needed */
.w3-panel {
  flex: 1;
  min-width: 300px;
  margin: 0 10px; /* Adjust margin to create space */
}



html {
  scroll-behavior: smooth;
}


.responsive-title {
  font-size: clamp(2rem, 8vw, 6rem);
  line-height: 1.2;
  font-family: 'Inconsolata', monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
}

.glow-text {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6),
               0 0 20px rgba(138, 43, 226, 0.5),
               0 0 30px rgba(75, 0, 130, 0.4);
}


footer i:hover {
  color: #b19cd9 !important;
  transform: scale(1.15);
  transition: all 0.3s ease-in-out;
}

footer a:hover {
  text-decoration: none;
}

footer h2 {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}

footer .w3-button:hover {
  background-color: #222 !important;
  border-color: #666 !important;
}


footer {
    font-family: 'Inconsolata', monospace;
}


html {
    scroll-behavior: smooth; /* Enables smooth scrolling */
  }


  /* Default padding for the grid */
  .w3-row-padding {
    padding: 8px;
}

/* When padding is toggled off */
.no-padding .w3-row-padding {
    padding: 0;
}

/* Additional CSS for the grid padding */
.gallery-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* Space between images horizontally and vertically */
    justify-content: space-between; /* Ensures that the columns stay next to each other */
}

.gallery-container .w3-third {
    flex: 1 1 calc(33.33% - 16px); /* Make each column take up 1/3 of the container, with gap included */
    box-sizing: border-box;
}

.gallery-container img {
    width: 100%;
    margin-bottom: 16px; /* Add margin to bottom to space images vertically */
}

.gallery-container.w3-row-padding {
    gap: 24px; /* Larger space when row padding is applied */
}



.border-image {
    border: 5px solid #fff; /* White border with a width of 5px */
    border-radius: 10px; /* Rounded corners */
}

/* Optional: Add shadow for better visual effect */
.border-image-shadow {
    border: 5px solid #fff;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); /* Soft glow around image */
}


 /* Additional CSS for borders around specific images and text */
 .border-container {
    border: 5px solid #fff; /* White border with a width of 5px */
    border-radius: 10px; /* Rounded corners */
    padding: 16px; /* Add padding inside the border */
    margin-bottom: 16px; /* Add space below the container */
}

/* Optional: Add shadow for better visual effect */
.border-container-shadow {
    border: 5px solid #fff;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); /* Soft glow around container */
    padding: 16px;
    margin-bottom: 16px;
}


footer i:hover {
    color: #b19cd9 !important;
    transform: scale(1.15);
    transition: all 0.3s ease-in-out;
  }
  
  footer a:hover {
    text-decoration: none;
  }
  
  footer h2 {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
  }
  
  footer .w3-button:hover {
    background-color: #222 !important;
    border-color: #666 !important;
  }



  
  .bgimg {
    background-position: center;
    background-size: cover;
    background-image: url("images/pyr.jpg");
    min-height: 75%;
  }
  


  .w3-row-padding {
    background-color: rgb(15, 14, 14);
  }
  .w3-row-padding > .w3-third {
    padding: 0 8px; /* keep padding, just ensure it's red in between */
  }