@media (max-width: 768px) {
  /* mobile styles go here */
}

img {
  max-width: 100%;
  height: auto;
}
body {
  overflow-x: hidden;
}

.container {
  width: 100%;
}
img {
  max-width: 100%;
  height: auto;
}
img {
  max-width: 100%;
  height: auto;
}

.container {
  width: 100%;
}
.container {
  width: 100%;
  max-width: 1200px;   /* Optional */
  margin: 0 auto;
}

img {
  max-width: 100%;
  height: auto;
}
.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1;
  min-width: 250px;
}
.services {
  display: flex;
  flex-wrap: wrap;
}

.service-box {
  flex: 1 1 300px;
}
/* <meta name="viewport" content="width=device-width, initial-scale=1"> */


/* Carousel image height adjustment for mobile view */
@media (max-width: 640px) {
  #carousel-slides img {
    height: 300px !important;
    display: block;
    /* object-fit: cover; */
  }
  .desktop-carousel{
    display: none !important;
  }
  
}
.mobile-carousel{
    display: none;
  }
@import url(https://fonts.bunny.net/css?family=abel:400);

/* Enable custom property animation for angle */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
  background-color: #1298f784;
}

/* Cards demo styles (plain CSS converted from nested syntax) */
.cards {
  width: min(100% - 10rem, 1200px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 3rem;
}
.card {
  --animation-duration: 8s;
  --border-width: 5px;
  --glow-offset: -20px;
  --border-radius: 0px;
  position: relative;
  border: solid var(--border-width) #0000;
  border-radius: var(--border-radius);
  background-image: url("https://images.unsplash.com/photo-1481819613568-3701cbc70156?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDQ2NTU3MTR8&ixlib=rb-4.0.3&q=85");
  background-attachment: fixed;
  background-size: cover;
  background-position: top center;
  min-height: 280px;
}

@media (min-width: 600px) {
  .card { min-height: 350px; }
}

.card:nth-child(1) { --moon-clr: rgb(1,1,1); }
.card:nth-child(2) { --moon-clr: rgb(166,95,0); }
.card:nth-child(3) { --moon-clr: rgb(159,7,18); }
.card:nth-child(4) { --moon-clr: rgb(0,89,138); }

.card > div {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;

  padding: 1rem;
}

.card > div::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--moon-clr), #0000);
  opacity: 0.5;
  z-index: -1;
}

.card h2 { margin: 0; font-size: 1.4rem; text-shadow: 1px 1px var(--moon-clr); }
.card p { text-shadow: 0 0 2px black; font-size: 0.9rem; line-height: 1.4; }


.card a:hover { width: 100%; }

.card::before {
  content: "";
  position: absolute;
  inset: calc(var(--border-width) * -1);
  border: inherit;
  border-radius: inherit;
  background: conic-gradient(from var(--angle), var(--moon-clr) 40%, transparent, var(--moon-clr) 60%) border-box;
  mask: conic-gradient(yellow 0 0) subtract, conic-gradient(yellow 0 0) padding-box;
  opacity: 0.75;
  z-index: 1;
  animation: neon-rotate var(--animation-duration) linear infinite;
}

.card::after {
  content: "";
  position: absolute;
  inset: var(--glow-offset);
  z-index: -2;
  background: conic-gradient(from var(--angle), var(--moon-clr), transparent, var(--moon-clr));
  border-radius: 15px;
  filter: blur(12px);
  opacity: 0.75;
  animation: neon-rotate var(--animation-duration) linear infinite;
}

@keyframes neon-rotate {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}

/* general styling */
* { box-sizing: border-box; }
:root {
  --bg-dark: rgb(2, 6, 24);
  --bg-light: rgb(229, 229, 229);
  --txt-light: rgb(10, 10, 10);
  --txt-dark: rgb(245, 245, 245);
}
.mm {
  background-color: var(--bg-dark);
  background-image: radial-gradient(#FEA500,#f7bf72);
  color: var(--txt-dark);
  min-height: 90svh;
  margin: 0;
  padding: 1rem;
  font-size: 1rem;
  font-family: "Abel", sans-serif;
  line-height: 1.5;
  display: grid;
  place-items: center;
  gap: 2rem;
}

/* Responsive Carousel Styles */
.responsive-carousel {
  height: 60vh; /* Mobile default */
}

.responsive-video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.responsive-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.carousel-control {
  transition: all 0.3s ease;
}

.carousel-control:hover {
  transform: translateY(-50%) scale(1.1);
}

/* Tablet breakpoint */
@media (min-width: 768px) {
  .responsive-carousel {
    height: 80vh;
    
  }
}

/* Desktop breakpoint */
@media (min-width: 1024px) {
  .responsive-carousel {
    height: 100vh;
  }
}

/* Large desktop breakpoint */
@media (min-width: 1440px) {
  .responsive-carousel {
    height: 110vh;
  }
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
  /* .responsive-carousel {
    height: 100vh;
  } */
}

/* Mobile portrait optimization */
@media (max-width: 480px) {
  .responsive-carousel {
    height: 100vh;
  }
  
  .carousel-control {
    opacity: 0.7;
  }
}

/* Mobile landscape optimization */
@media (max-width: 768px) and (orientation: landscape) {
  .responsive-carousel {
    height: 100vh;
  }
}