body {
    font-family: Arial, sans-serif;
  }
/* Ensure the nav links are white */
.navbar-dark .nav-link {
  color: #fff !important; /* Set the color to white */
  margin-right: 10px;
}
.navbar{
    z-index: 2;
}
/* Hover effect for the nav links */
.navbar-dark .nav-link:hover {
  color: #6fc9af !important; /* Slightly lighter on hover */
}

.btn-cta{
    background-color: #6fc9af
}
.btn-cta:hover{
    background-color: #2affc3
}
.hero-text{ 
    /* margin-left: 200px; */
    padding-left: 180px;
    padding-right: 80px;
}
.custom-img {
    height: 65%; /* If you want a fixed height */
    width: 65%;  /* Make it take full width */
    object-fit: contain;  /* Or use 'contain' depending on your needs */
}
.icon-bs{
    width: 100%;
    margin: 20px 10px;
    font-size: 3rem; /* Adjust size as needed */
    color: #000;
}

.icon-sm{
    font-size: 1.5rem; /* Adjust size as needed */
    color: #000;
}

.grid{
    padding: 0 100px;
    column-count: 3;
    columns: 300px;
}
.grid-item{
    display: inline-block;
}
.grid-item img{
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.1);
    width: 100%; 
    margin-bottom: 10px;
}

.shadow{
    border-radius: 10px;
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.1);
}

.floating-navbar {
    background-color: transparent;
    position: fixed;
    width: auto; /* Automatically adjust width */
    padding: 5px 20px; 
    margin: 20px 200px; /* Center it horizontally and add margin on top and bottom */
    border-radius: 15px; /* Curved corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
    max-width: 95%; /* Control the max width of the navbar */
}
.sm-txt * {
    font-size: small;
}

.heropage{
    background-color: aqua;
}