body {
  background: url("download.jpg") center/cover;
}
.custom-indigo,
.offcanvas-body {
  background-color: indigo; /* or use #4B0082 for a hex value */
  border-bottom: 2px solid rgb(211, 182, 233);
}

.offcanvas-header {
  background-color: rgb(211, 182, 233);
  color: indigo;
}

.nav-item ul {
  background-color: rgb(211, 182, 233);
}
.dropdown-menu a {
  color: indigo;
}
#about p{
  color: rgb(27, 22, 31);
  font-size: larger;
}
form .btn {
  background-color: rgb(38, 4, 63);
  background: #0077cc;
  color: rgb(229, 223, 233);
  border: 1px solid indigo;
}
form .btn:hover {
  background-color: rgb(75, 9, 122);
  border: 1px solid rgb(38, 4, 63);
}

.container-fluid {
  color: rgb(211, 182, 233);
}

.slider {
  width: 90%;
  height: 500px;
  margin: 100px auto;
  overflow: hidden;
  position: relative;
  display: flex;
}
.slides {
  width: 600vw;
  height: 100%;
  display: flex;
  animation: slide 30s infinite;
}
.slides img {
  width: 100vw;
  /* height: 100%; */
  /* object-fit: contain; */
  object-fit: cover;
  height: 100%;
  object-fit: cover;
}
.slider:hover {
  border: 7px solid indigo;
  border-radius: 10px;
}
@keyframes slide {
  0%,
  10% {
    transform: translateX(0);
  }
  15%,
  25% {
    transform: translateX(-100vw);
  }
  30%,
  40% {
    transform: translateX(-200vw);
  }
  45%,
  55% {
    transform: translateX(-300vw);
  }
  60%,
  70% {
    transform: translateX(-400vw);
  }
  75%,
  85% {
    transform: translateX(-500vw);
  }
  90%,
  100% {
    transform: translateX(0);
  }
}

section {
  padding: 60px 20px;
  max-width: 1000px;
  margin: auto;
}
section h2 {
  margin-bottom: 20px;
  color: rgb(248, 238, 248);
}
#about {
  color: rgb(229, 223, 233);
}
.services {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.card {
  background-color: rgb(211, 182, 233);
  padding: 20px;
  border-radius: 8px;
  width: 300px;
  box-shadow: 0 0 10px rgb(211, 182, 233);
}
.card:hover {
  background-color: indigo;
  color: rgb(229, 223, 233);
  cursor: pointer;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-form input,
.contact-form textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: vertical;
}

/* --- Buttons --- */
#about button,
.contact-form button {
  background: #0077cc;
  color: #fff;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#about button {
  margin-top: 20px;
}

#about button:hover {
  background: #005fa3;
  transform: translateY(-2px);
}

/* --- Footer --- */
footer {
  background: #222;
  color: #fff;
  text-align: center;
  padding: 9px;
}

/* MOBILE */

@media (max-width: 576px) {
  .slider {
    height: 220px;
    margin-top: 90px;
  }
}

/* media query */
@media (max-width: 576px) {

  /* Navbar brand smaller */
  .navbar-brand {
    font-size: 16px;
  }

  /* Offcanvas full width on mobile */
  .offcanvas {
    width: 100% !important;
  }

  /* Nav links spacing */
  .offcanvas-body .nav-link {
    font-size: 18px;
    padding: 10px 0;
  }

  /* Search form full width */
  .offcanvas-body form {
    flex-direction: column;
    gap: 10px;
  }

  .offcanvas-body form input,
  .offcanvas-body form button {
    width: 100%;
  }
}

/* @media(max-width: 768px) {
    .nav-links{
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        background-color: #333;
        width: 100%;
        padding: 20px;
    }
    #menu-toggle:checked + .menu-icon+.nav-links{
    display: flex;
    }
    .nav-links li{
        margin-bottom: 20px;
    }
    .menu-icon{
        display: block;
    }
} */