/* Basic reset */
/* ------------ Colors paleltte    ------------
#153448 dark blue
#3C5B6F lighter than dark blue
#948979 brown
#DFD0B8 beige */

/* Another paleltte 
#0D1B2A  darkest blue
#1B263B darker blue navvy
#415A77 lighter
#778DA9
#E0E1DD very light like white

*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* font-family: Arial, sans-serif; */
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Slab', serif;
}
/* Section One Box Shadow */
.responsive-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0;
    padding: 20px;
    background-color: #dae5f6;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.box {
    flex: 1 1 45%;
    margin: 10px;
    padding: 20px;
    background-color: white;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.box img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
    border-radius: 4px;
}

.box h2 {
    color:#3C5B6F;
    font-size: 1.5em;
    margin-bottom: 10px;
}

.box p {
    font-size: 1em;
}

/* Section One: Background Image with Title */
.hero {
    background-image: url('images/hero-bg.jpg');
    background-size: cover;
    background-position:right 35% bottom 70%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}

.hero-content h1 {
    font-size: 3em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Section Three: Centered Heading and Paragraph */
.center-content {
    padding: 40px 20px;
    text-align: center;
}

.center-content h1 {
    font-size: 2em;
    margin-bottom: 20px;
}

.center-content p {
    max-width: 900px;
    margin: 0 10px;
    font-size: 1.2em;
    padding: 40px;
}
/* how it works */
.info{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  padding: 20px;
}
#how-it-works p{
    padding-top: 10px;
    font-size: 1.2em;
} 
#how-it-works{
    max-width: 800px;
    margin: 0 auto;
    /* padding: 10px 20px; */
    background-color: #3C5B6F;
    /* color:antiquewhite; */
    color:#DFD0B8;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* building-real-projects */
/* More things to know section */
#building-project-h1{
    margin-bottom: 30px;
    font-size: 2em;
    color: #3C5B6F; 
}
.value-item {
    display: flex;
    align-items: center;
    justify-content:center;
    margin: 20px 0;
    padding: 10px;
}

.value-item img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin-right: 20px;
    padding: 2px;
}

.value-item p {
    max-width: 600px;
    text-align: left;
    margin: 0;
   
}

.highlightText{
    color:rgb(99, 145, 242)
}

/* Responsive Design */
@media (max-width: 768px) {
    .box {
        flex: 1 1 100%;
        max-width: 100%;
    }
}
@media (max-width: 1024px) {
    .card {
        min-width: 200px;
    }
}

@media (max-width: 768px) {
    .card {
        min-width: 100%;
        margin: 10px 0;
    }
}
@media (max-width: 768px) {
.building-real-projects{
  padding: 10px;
    }
}
/* Added This */
@media (max-width: 768px) {
    .value-item {
        flex-direction: column;
        text-align: center;
    }

    .value-item img {
        margin: 0 0 20px 0;
    }

    .value-item p {
        margin: 0;
    }

    .value-item.reverse {
        flex-direction: column;
    }

    .value-item.reverse img {
        margin: 0 0 20px 0;
    }
}
/* Added Responsive Design */
@media (max-width: 768px) {
    .value-item, .value-item.reverse {
        flex-direction: column;
    }
    .value-item.reverse img {
        /* margin-bottom: 15px; */
    }
    .value-item.reverse {
        flex-direction: column-reverse;
    }
}