/* .card-body img{
  
     height: 10rem;
    border-radius: 50%;
    vertical-align: middle;
    
} */

.navigation {
     background-color: rgba(9, 9, 9, 0.986);

}

.navbar-nav ul {
     color: #ffffff;
}

.menubtn {
     margin: 45px 0 30px 0;
     /* padding: 7px 25px; */
}

.menubtn button {
     padding: 7px 25px;
     border-radius: 25px;
}


.navbar-brand {
     color: white;
     font-family: cursive;
}


.btn-icon {
     cursor: pointer;
     font-weight: bold;
}





.container-menu {
     text-align: center;
     margin-left: 4rem;
     margin-right: 4rem;
     padding-top: 64px;
}

.container-menu h3 {
     font-family: cursive;

}

/* .colcard h-100 img{
     align-items: center;
    height: 215px;
    border-radius: 0 0 0 45px;
    margin: -1px;
    background: #f1f2f3;

  
} */

.carousel-item {
     height: 85vh;
     /* reduce height */
     min-height: 400px;
     font-family: cursive;
}

.carousel-item img {
     object-fit: cover;
     height: 100%;
     width: 100%;
}

.carousel-caption {
    bottom: 143px;
    text-align: left;
    left: 10%;}

.h-50 {
     height: 63% !important;
     background-color: #f1f2f3;
}

.card * {
  max-width: 100%;
  overflow: hidden;
}


.card-body {
     color: white;
     padding: 25px;
     background-color: #222831;
     border-radius: 0 0 0 45px;
}


.card-body h5 {
     font-weight: 600;
     font-size: 1.25rem;
     margin-top: 0;
     text-align: center;
}

.card-text p {
     font-size: 15px;
     text-align: left;
}

.about-section {
     background: #222831;
     color: #ffffff;
     padding: 90px 0;

}





/* ==========================
   MOBILE DEVICES (<768px)
   ========================== */
@media (max-width: 767px) {
    /* Navbar adjustments */
    .navbar .btn-icon {
        display: none; /* Hide extra buttons on small screens */
    }
    .navbar-brand {
        font-size: 18px;
    }
    .navbar-nav {
        text-align: center;
    }
    .navbar-nav .nav-item {
        padding: 5px 0;
    }

    /* Carousel text smaller */
    .carousel-caption {
        font-size: 14px;
        bottom: 10px;
    }

    /* Card adjustments */
    .card-body h5 {
        font-size: 16px;
    }
    .card-body p {
        font-size: 13px;
    }
    .card img {
        width: 150px;
    }

    /* Menu buttons smaller */
    .menubtn .btn {
        padding: 5px 10px;
        font-size: 12px;
    }

    /* Contact form inputs */
    form input, form textarea, form select {
        font-size: 14px;
    }
}

/* ==========================
   TABLETS (768px–991px)
   ========================== */
@media (min-width: 768px) and (max-width: 991px) {
    .navbar-brand {
        font-size: 20px;
    }
    .navbar .btn-icon {
        display: flex;
    }
    .carousel-caption {
        font-size: 16px;
        bottom: 15px;
    }
    .card img {
        width: 180px;
    }
    .menubtn .btn {
        padding: 7px 12px;
        font-size: 14px;
    }
}

/* ==========================
   LARGE SCREENS (≥992px)
   ========================== */
@media (min-width: 992px) {
    .carousel-caption {
        font-size: 20px;
    }
    .card img {
        width: 200px;
    }
    .menubtn .btn {
        padding: 10px 15px;
        font-size: 16px;
    }
}


/* ✅ ULTRA MOBILE RESPONSIVE FIX */
@media (max-width: 360px) {

  h3, h2 {
    font-size: 18px;
    text-align: center;
  }

  p {
    font-size: 13px;
  }

  .menubtn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .menubtn button {
    font-size: 12px;
    padding: 5px 10px;
  }

  .card {
    width: 100% !important;
  }

  .card-title {
    font-size: 14px;
    word-break: break-word;
  }

  .card-text {
    font-size: 12px;
    line-height: 1.3;
    word-break: break-word;
  }

  .card img {
    max-width: 120px !important;
  }

  .btn {
    font-size: 12px;
    padding: 6px 12px;
  }

  .carousel-caption h1 {
    font-size: 20px;
  }

  .carousel-caption p {
    font-size: 12px;
  }
}