.hero {
    padding: 60px 20px;
    text-align: center;
    background-color: rgba(16, 54, 16, 0.9);
    border-radius: 10px;
    margin-bottom: 40px;
}
.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}
.hero img {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
}
.features {
    margin-bottom: 40px;
}
.features h2 {
    margin-bottom: 20px;
}
.features p {
    font-size: 1.2rem;
}
.solution {
    padding: 40px 20px;
    background-color: rgba(16, 54, 16, 0.9);
    border-radius: 10px;
}
.solution h2 {
    margin-bottom: 30px;
}



 .header {
     
     padding: 20px;
 }
 .header .navbar-brand {
     color: #fff;
     font-size: 1.5rem;
     font-weight: bold;
 }
 .header .nav-link {
     color: #fff;
     font-size: 1rem;
 }

 .features {
     margin-bottom: 40px;
 }
 .features h2 {
     margin-bottom: 20px;
 }
 .features p {
     font-size: 1.2rem;
 }
 .solution {
     padding: 20px 20px;
     background-color:#0F2015;
     border-radius: 10px;
     border: 7px solid #d1d5db; 
     width: 80%;
     margin-bottom: 20px;
 }
.config_card_main {
 border-radius: 10px;
     border: 7px solid #d1d5db; 
     width: 80%;
}
 .solution .list-group-item {
     background-color: transparent;
     color: #fff;
     border: none;
 }

 .content {
flex: 1;
max-width: 600px;
padding-right: 20px;
}
.form-control::placeholder {
color: #A9A9A9; 
}
h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}

p {
font-size: 1rem;
margin-bottom: 20px;
}

/* .email-form {
display: flex;
gap: 10px;
} */

.email-form input {
padding: 10px;
border: none;
border-radius: 5px;
width: 250px;
}

.email-form button {
padding: 10px;
background-color: #4CAF50;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
}

.email-form button:hover {
background-color: #45a049;
}

.image {
flex: 1;
max-width: 500px;
margin-top: 20px;
}


.questions {
flex: 1 100%;
margin-top: 40px;
}

.questions h2 {
font-size: 1.8rem;
margin-bottom: 20px;
}

.questions ul {
font-size: 1rem;
list-style-type: none; 
padding-left: 0; 
font-family: 'Roboto'; 
color: #dfdfdf;
}

.questions li {
margin-bottom: 10px;
display: flex;
align-items: center;
position: relative; 
}

.questions li::before {
content: "\2022"; 
color: #4CAF50; 
font-size: 1.5rem; 
margin-right: 10px; 
position: absolute;
left: -20px; 
}



.section_image {
position: relative;
}
.section_image img{
width: 92%; height: 67%;
object-fit: contain; 

}
.top img{
position: absolute;  
top: 57px;
right: 8px;
}

.main {
justify-content:center;
align-items:center;
gap:186px;
}
.content p{
color: #dfdfdf; 
font-family: Poppins;
font-weight: 300;
font-size: 16px;

}
.content_h1 {
font-size: 45px;
font-weight: 700;
line-height: 82px;
font-family: Roboto;
}
.content_h2 {
font-family: Roboto;
}
.card_part p {
border-bottom: 2px solid #dfdfdf; 
width: 100%; 
padding-bottom: 10px; 
margin: 10px 0; 
box-sizing: border-box; 
}
.heading p{
font-size: 40px;
margin-top: 40px;
text-align: center;
font-weight: 400;
}
.configurator .conf p{
font-size: 40px;
margin-top: 7px;
font-weight: 400;
font-family: 'Roboto';
}
.sec_configurator  {

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.config_card_main {
     display: flex;
     background-color: #F5F5F5;
     border: 1px solid #ccc;
     border-radius: 8px;
     width: 80%;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     overflow: hidden;
 }
 .config_form {
     background-color:#D9D9D9;
     padding: 40px 20px;
     width: 50%;
 }
 
 .config_form h2 {
     font-size: 18px;
     margin-bottom: 16px;
 }
 


.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
}

.grid-item {
    position: relative;
    text-align: center;
}

.grid-item img {
    width: 80%; /* Smaller image size */
    height: auto;
    margin: 0 auto; /* Centers the image horizontally */
    border-radius: 8px;
  
}

.grid-item p {
    position: absolute;
    bottom: -65px;
    left: 16%;
    transform: translateX(-50%);
    font-size: 16px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px;
    border-radius: 5px;
}

@media (max-width: 768px) {
    .image-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .image-grid {
        grid-template-columns: 1fr;
    }
}