@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 {
  
} 
 

/* How We Work Section */
.how-we-work {
  text-align: center;
  padding: 60px;
  
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;  
} 
.marconi {
  max-width: 600px;
  width: 100%;
  margin-bottom: 40px;
}
 
.how-we-work p {
  font-size: 1.2em;
  margin-top: 20px;
  color: #000000;
}
@media screen and (max-width: 1150px) { 
  .how-we-work {
    padding: 20px 40px;
    margin: 124px 0px 40px;
    text-align: center;
  }
}  @media screen and (min-width: 1150px) { 
  .how-we-work {
    padding: 20px 40px;
    margin: 124px 0px 40px;
    text-align: center;
  }
}  
/* faq */
 
@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(100px) scale(0.9);
  }
  100%  {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}
@keyframes fade  {
  0% {
    opacity: 0;
    transform: translateY(-5px) scale(0.9);
  }
  100%  {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}
/* Timeline Section */
 .timeline-section {
            font-family: Arial, sans-serif;
            max-width: 800px;
            box-sizing: content-box !important;   
            margin: 0 auto;
            padding: 20px;
        }
        
        .timeline-section h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }
        
        .timeline-container {
            display: flex;
            flex-direction: column;
            gap: 15px;
          
        }
        
 @keyframes slideIn {
  from {
    transform: translate(-180%, 100%);
    opacity: 0;
  }
  to {
    transform: translate(0%, 0%);
    opacity: 1;
  }
}
.timeline-box:nth-child(1) { animation-delay: 0s; }
.timeline-box:nth-child(2) { animation-delay: 0.3s; }
.timeline-box:nth-child(3) { animation-delay: 0.6s; }
.timeline-box:nth-child(4) { animation-delay: 0.9s; }
        .timeline-box {
            border: 1px solid #000000;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            padding: 20px;
            opacity:  0;
            transition: transform 0.3s ease;
            animation: slideIn 1s ease-in-out forwards;
        }
        .timeline-box:hover {
          background-color: #000000;
          box-shadow: 0 2px 5px rgba(0,0,0,0.1);
          padding: 20px;  color: white;
            
      }
      .timeline-box:hover .timeline-event {
        background-color: #000000;  
      
    }
        .timeline-event {
            
            padding: 15px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: content-box;
         
        }
        
      
     
  
        .timeline-event i {
            transition: transform 0.3s ease;
        }
        
        .timeline-answer {
            padding: 0;
            max-height: 0;
            overflow: hidden;
            box-sizing: content-box !important;   
            transition: max-height 1.4s ease-out , padding 0.1s ease;  
        }
        
        .timeline-box.active  {
          background-color: #0e0e0e;
          box-shadow: 0 2px 5px rgba(0,0,0,0.1);
          padding: 20px;  color: white;
      }
      .timeline-box:active .timeline-event {
        background-color: #000000;  
      
    }
         
        .timeline-box.active .timeline-answer {
          max-height: 450px; 
          padding: 15px;
          transition: max-height 0.8s ease-in, padding 1s ease; 
      }
        .timeline-box.active .timeline-event i {
            transform: rotate(540deg);
        }

/* value */
.mv-section {
  margin-top: 4rem;
  font-family: sans-serif;
  padding: 2rem;
  
} 
.statexvalue{
  display: flex;
 
}
@media screen and (min-width: 768px) { 
.both,
.features {
  width: 50%;
  box-sizing: border-box;
  padding: 20px; /* optional */
 
}.text-content:nth-of-type(1) {
  align-self: flex-start;
}
.text-content:nth-of-type(2) {
  align-self: flex-end;
}
.text-content   {
 
  align-items: center;
  align-self: center;
   
  padding:  0 40px;
}
 }
.value-description {
text-align: center;
font-size: 1rem;
}
.both {
 display: flex;
 
 flex-direction: column;
 justify-content: space-evenly;
}
@media screen and (max-width: 760px) { 
  .statexvalue {
    flex-direction: column;
  }
  .both {
    display: flex;
    
    flex-direction: column;
    padding: 30px;
   }
   
        .timeline-box.active .timeline-answer {
          max-height: 1650px; 
          padding: 15px;
          transition: max-height 0.8s ease-in, padding 1s ease; 
      }
}
.belief {
  
  margin: 0px 0px 24px 0px;
  text-align: center;
}
 @keyframes zoomInOut {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
.text-content   {
 
  align-items: center;
  align-self: center;
    
}
.text-content.vision-box {
 
}
 
.text-content img {
  margin-top: 10px;
  width: 80px; animation: zoomInOut 1s ease-in-out infinite;
}
 
.text-content  p {
 width: 300px;
}
.text-content h2 {
  padding: 10px;
  margin-bottom: 0rem;
  margin-top: 1rem;
}
 
  
  
 
  /* Feature Card Styling */
  .values-grid {
    padding: 4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  justify-content: center;
}
  
   .value-card {
  background: white;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.highlight {
  color: #d4b126;
}
.features {
  text-align: center;
  font-size: 4rem;
}
    @media screen and (min-width: 1000px)  {
  .container.text-center.my-5 {
  height: 80vh;               
  display: flex;
  flex-direction: column;      
  justify-content: center;      
  align-items: center;         
  gap: 2rem;                   
}

.row.mt-4 {
  width: 100%;                /* Take full width of container */
  display: flex;              /* Use flexbox to control layout */
  justify-content: center;    /* Center the columns horizontally */
 
   
}
  
    }

     
        /* TEam */
        .project-img {
          width: 100%;
 
          object-fit: cover;
          cursor: pointer;
          border-radius: 10px;
      }
       /* Force smaller max width on very small screens */
@media screen and (max-width: 300px) {
 
  .project-img {
 
    width: 80%;
 
  }
 
}


      .modal-body img {
        width: 100%;
      }
      .modal-title {
        padding: 0px 20px;
      }
      .modal.right .modal-dialog {
        position: fixed;
        right: 0;
        top: 64px;
        bottom: 0;
        margin: 0;
        max-width: 400px;   
        height: 100vh;
    }

    .modal.right .modal-content {
        height: 100vh;
        overflow-y: auto;
        border-radius: 0;
    }
     .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; /* Classic blue */
  color: rgb(0, 0, 0); /* Text stands out */
 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;
}