#czlogo {
    --cz-text-opacity: 1;
    color: rgba(var(--cz-primary-rgb), var(--cz-text-opacity)) !important;    
}

.navb {
    background-color: rgba(255, 255, 255, 0.8); /* White with 80% opacity */
    border: 1px solid #ccc; /* Optional border */
    z-index: 1000; /* Ensure it's on top */
}

.text-primary , .c-name{
    /* margin-right: 10px; */
    margin-left: 20px;
    /* margin-top: 10px; */
    font-size: 24px;
    font-weight: 600;
}

.navt {
    text-align: center;
    /* margin-top: 10px; */
    margin-left: 25px;
    font-weight: 500;
   }

.navt:hover {
    border-color: red; 
}

.button-1{
  border: 1px solid red;
  width: 20px;
  margin: 6px 6px;
  height: 20px;
  border-radius: 100%;
  background-color: black
}

.button-0{
    width: 35px;
    height: 35px;
    border: 1px solid;
    border-radius: 100%;
    margin: 30px;
    background-color: rgb(228, 228, 228);
}

#hero {
    margin-top: 150px;
}
.cards {
    position: relative; /* Needed to position elements inside the card */
    border-bottom: 1px solid transparent; /* Start with a transparent border */
    overflow: hidden; /* Prevents the image from overflowing */
    transition: border-color 0.3s ease; /* Smooth transition for border color */
}

.cards img {
    width: 100%;
    transition: transform 0.3s ease; /* Smooth zoom effect on image */
    border-radius: 15px;
}

.cards:hover img {
    transform: scale(1.05); /* Zoom effect on hover */
}

.card-infoo-1 {
    position: absolute; /* Position the card-infoo absolutely */
    top: 10%; /* Adjust as needed */
    left: 6%; /* Adjust as needed */
    transition: none; /* No scaling or movement on hover */
}

/* General button styles */
.card-infoo-1 button, .card-infoo-2 button, .card-infoo-3 button, .card-infoo-4 button {
    border: none;
    border-bottom: 1px solid transparent; 
    transition: border-color 0.3s ease; 
    background-color: transparent;
    padding: 5px 10px;
    cursor: pointer; 
}

.cards:hover .card-infoo-1 button {
    border-bottom: 1px solid #000; 
}

.cards:hover .card-infoo-2 button {
    border-bottom: 2px solid #000; 
}

.cards:hover .card-infoo-3 button {
    border-bottom: 2px solid #000; 
}

.cards:hover .card-infoo-4 button {
    border-bottom: 2px solid #000; 
}

.card-infoo-1 h3,
.card-infoo-1 p
{
    margin: 5px 0; 
}

.card-infoo-2 {
    position: absolute; /* Position the card-infoo absolutely */
    top: 20%; /* Adjust as needed */
    left: 8%; /* Adjust as needed */
    transition: none; /* No scaling or movement on hover */
}

.card-infoo-2 h3,
.card-infoo-2 p
{
    margin: 5px 0; /* Add some spacing between elements */
}

.card-infoo-3 {
    position: absolute; /* Position the card-infoo absolutely */
    top: 15%; /* Adjust as needed */
    left: 8%; /* Adjust as needed */
    transition: none; /* No scaling or movement on hover */
}

.card-infoo-3 h3,
.card-infoo-3 p
 {
    margin: 5px 0; /* Add some spacing between elements */
}

.card-infoo-4 {
    position: absolute; /* Position the card-infoo absolutely */
    top: 15%; /* Adjust as needed */
    left: 10%; /* Adjust as needed */
    transition: none; /* No scaling or movement on hover */
}

.card-infoo-4 h3,
.card-infoo-4 p
{
    margin: 5px 0; /* Add some spacing between elements */
}

#footer {
    background: linear-gradient(102deg, #dad4ec 0%, #f3e7e9 80.43%);
    border-radius: 20px;
    margin-top: 60px;
    padding: 50px;
}