@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!important;
}
 

/* Styling for logo */
  
/* AIR CSS */

/* How We Work Section */
.howwework img {
  width: 100%;
}


.intro-section {
  display: flex;
  flex-direction: row;
  justify-self: center;
     max-width: 1120px;
  justify-content: space-between;
  align-items: flex-end;
   margin: 60px 40px 20px 10px;
   gap: 30px;
}
.intro-section img {
  max-width: 150px;
   
}
.carousel-control-next-icon, .carousel-control-prev-icon {
  background-color: black;
  border-radius: 15px;
}
.how-we-work {
  text-align: center;
  padding: 0px 0px 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;
}
 
.how-we-work p {
  font-size: 1.2em;
  margin-top: 20px;
  color: #000000;
  text-align: justify;
}
@media screen and (max-width: 1150px) { 
  .how-we-work {
    padding: 100px 80px;
    margin: 120px 0px 80px;
    text-align: center;
  }
}  
.carousel-item img {
  width: 100%;
 
  object-fit: cover;
  border-radius: 10px;
}
 
.text-center {
  margin: 15px 0;
}
.our-project {
  padding: 5%;
   align-content: center;
}
.carousel-container {
  padding: 20px; /* Adds spacing between the carousels */
}

.carousel {
 
  border-radius: 12px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Improved box shadow */
  transition: transform 0.3s ease-in-out;
}

.carousel:hover {
  transform: translateY(-5px); /* Small hover effect */
}
 
.carousel p {
  margin-top: 10px;
  font-size: 14px;
  color: #555;

}
.carousel-item {
  background-color: #f8f9fa; /* Light gray */
  cursor: pointer;
  border-radius: 10px; /* Optional: Rounds corners */
}
.custom-modal-right {
 
  top: 10%;
 
}
 
@media (max-width: 768px) {
  .carousel-container {
    margin-bottom: 20px; /* Space between carousels on smaller screens */
  }
}
.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 {
  
}
 
.hero-content {
  position: relative;
  z-index: 2;
}
 
 
