@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Source+Sans+Pro:wght@400;600&display=swap');


*{
    margin: 0;
    padding: 0;
}
:root {
  /* Main Headings
  1. Poppins Bold (Main Headings)
Desktop: 36px – 48px
Tablet: 28px – 36px
Mobile: 22px – 28px
Line Height: 1.2 – 1.3
2. Source Sans Pro SemiBold (Subheadings)
Desktop: 24px – 32px
Tablet: 20px – 26px
Mobile: 18px – 22px
Line Height: 1.3 – 1.4
3. Source Sans Pro Regular (Descriptions / Body Text)
Desktop: 16px – 20px
Tablet: 14px – 18px
Mobile: 12px – 16px
Line Height: 1.5 – 1.6

Favicon - MM Logo
 */
  --font-main: 'Poppins', sans-serif;
  --size-main-d: 2.25em; /* 36px */
  --size-main-d-lg: 3em; /* 48px */
  --size-main-t: 1.75em; /* 28px */
  --size-main-t-lg: 2.25em; /* 36px */
  --size-main-m: 1.375em; /* 22px */
  --size-main-m-lg: 1.75em; /* 28px */
  --line-main: 1.2;
  --line-main-lg: 1.3;

  /* Subheadings */
  --font-sub: 'Source Sans Pro', sans-serif;
  --size-sub-d: 1.5em; /* 24px */
  --size-sub-d-lg: 2em; /* 32px */
  --size-sub-t: 1.25em; /* 20px */
  --size-sub-t-lg: 1.625em; /* 26px */
  --size-sub-m: 1.125em; /* 18px */
  --size-sub-m-lg: 1.375em; /* 22px */
  --line-sub: 1.3;
  --line-sub-lg: 1.4;
  --font-weight-sub: 800;
  /* Body Text */
  --font-body: 'Source Sans Pro', sans-serif;
  --size-body-d: 1em; /* 16px */
  --size-body-d-lg: 1.25em; /* 20px */
  --size-body-t: 0.875em; /* 14px */
  --size-body-t-lg: 1.125em; /* 18px */
  --size-body-m: 0.75em; /* 12px */
  --size-body-m-lg: 1em; /* 16px */
  --line-body: 1.5;
  --line-body-lg: 1.6;
  --font-weight-body: 400;
}
  
body {
background-color: #E5E3DC;
} 
/* Styling for logo */
 

/* Carousel */

.hero-carousel {
  position: relative;
     height:100vh; /* Adjust height as needed */
  overflow: hidden;
  background-color: black;
}

.carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.carousel-slide.active {
  opacity: 1;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.57;
}

.caption {
  position: absolute;
  width: 40%;
 color: white;
  padding: 20px;
  text-align: left;
  top: 35%;
  left: 30%;
  transform: translate(-50%, 100%);  
  opacity: 0;
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  
}
 
.carousel-slide.active .caption {
  transform: translate(-50%, -50%);
  opacity: 1;
}

/* Dots Navigation */
.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.dot {
  width: 15px;
  height: 15px;
  margin: 5px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}

.dot.active {
  background-color: gold;
}


 
/* Carousel Section */
.carousel {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  
}

.carousel-container {
  position: relative;
  width: 300%;
  display: flex;
  transition: transform 0.5s ease;
    

}

.card {
    animation: slideIn 11s ease-in-out forwards; 
    animation-timeline: view();
    animation-range: entry 0;

}
 @keyframes slideIn {
  from {
    transform: translate(-180%, 100%);
    opacity: 0;
  }
  to {
    transform: translate(0%, 0%);
    opacity: 1;
  }
  
 }
.carousel-item {
  width: 100%;
  height: 100%;
}

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

.explore-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 10px 20px;
  font-size: 1em;
  border-radius: 5px;
}

.explore-btn a {
  text-decoration: none;
  color: #000000;
}

@media (max-width: 768px) {
   .caption {
    width: 80%;
    left: 50%;
    top: 35%;
   }
}
@media(min-width: 768px) and (max-width: 1024px) {
.caption {
  position: absolute;
  width: 40%;
 color: white;
  padding: 20px;
  text-align: left;
  top: 45%;
  left: 30%;
 
}
}
/* How We Work Section */
.how-we-work {
  background-color: #E5E3DC;
  text-align: center;
padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers vertically */
  align-items: center; /* Centers horizontally */
 
} 
.how-we-work h2 {
  font-size: 2em;
  color: #000000;
}
.marconi {
  max-width: 600px;
  width: 100%;
  margin-bottom: 40px;
}
 
 
@media screen and (max-width: 1150px) { 
  .how-we-work {
    padding: 100px 80px;
    margin: 120px 0px 80px;
    text-align: center;
  }
} 
 @media screen and (max-width: 450px) { 
  .how-we-work {
    padding: 10px 8px;
    margin: 120px 10px 80px 5px;
    text-align: center;
  }
}  
/* Our Business */
.our-business {
   padding-top: 82px;
padding-bottom: 100px;
 
 }
 
.our-business h1{
 text-align: center;
 
}
.our-business .serial {
  max-width: 600px; /* Optional: Prevents it from becoming too wide */
  margin: 0 auto; /* Centers it horizontally */
  padding: 1rem;
  text-align: center; /* Ensures text is centered inside */
}
/* Our Bussiness Card */
.card {
  border: none;
  border-radius: 110px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}
.col-md-6.col-lg-3.mt-custom {
  margin-top: 80px;
}
 
  .floating-img {
    width: 90%;
    align-self: center;
    margin-top: 4%;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(79, 61, 61, 0.2);
  } 
 
  .card-title {
    text-align: center ;
  }
  .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .row.g-5 {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem; /* keeps space between cards */
}
@media (max-width: 424px) {
  .row.g-5 {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem; /* keeps space between cards */
}
}
@media (min-width: 424px) and (max-width: 768px) {
  .row.g-5 {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem; 
}
}
.row.g-5 > div {
  display: flex;
  flex-direction: column;
  flex: 1 1 45%;  
}

.card {
  flex-grow: 1;           /* make card fill the height of the column */
  display: flex;
  flex-direction: column;
}
 

  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  }


   
.heroz {
   height: 100vh;
   color: #0A0A0A;
   background-color: #DBD8CC;
   padding-top: 4rem;
   display: flex;
   justify-content: center;
    align-items: center;
    text-align: center;
}
.hero-button {
  display: inline-flex;
  border-radius: 12px;
   background-color: #ffffff; 
  color: rgb(0, 0, 0);  
 border: 2px solid #0A0A0A;
 padding: 0.25em 0.5em;
 font-weight: 500;
 text-decoration: none;
 
}
.hero-title {
  
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 background-color: #cac9c6;
}
.hero-content {
  position: relative;
  z-index: 2;
}
 
@media screen and (max-width: 1150px) { 
  .hero-content {
  position: relative;
  z-index: 2;
  padding: 10px;
}
}