* {
    margin:0px;
    padding:0px;
}

.body{
    background-color:var(--cream);
}

:root {
    --green: #173F35;
    --orange: #C85A28;
    --cream: #F5F1E8;
    --text: #171717;

    --padding-section:30px;
    --big-Gap:20px;
    --small-gap:10px;
    --tiny-gap:5px;

    --intro-width: 300px;
    --intro-max-width:350px;

    --flex-width:100px;
    --max-width:250px;
}

.white-line{
    border-bottom: 1px solid var(--cream);
    width:40px;
}

.black-line{
    border-bottom: 1px solid var(--text);
    width:40px;
}

.intro-line{
    display:flex;
    align-items:center;
    gap:var(--big-Gap);
}

.main-card .material-symbols-outlined {
    font-size:3rem;
    font-variation-settings:
        "FILL" 0,
        "wght" 200,
        "GRAD" 0,
        "opsz" 24;
}


p{
    font-family: 'Montserrat', sans-serif;
    line-height:1.5;
    font-size:1rem;
}

h1{
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size:90px;
    line-height:1;
}

h2{
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size:44px;
    line-height:1;
}

h3 {
    font-family: 'Montserrat', sans-serif;
    font-size:1.7rem;
}

.accent{
    color:var(--orange);
}

.btn1{
    background-color:var(--orange);
    border:1px solid var(--orange);
    padding-top:10px;
    padding-bottom:10px;
    padding-right:20px;
    padding-left:20px;
    color:var(--cream);
    border-radius:5px;
}

.header{
    display:grid;
    grid-template-columns:repeat(12,1fr);
}

.nav{
    grid-column:2/12;
    display:flex;
}

.logo{
    padding-top:10px;
    padding-bottom:10px;
    margin-right:auto;
}

.menu{
    display:flex;
    align-items:center;
    gap:var(--big-Gap);
    text-decoration: none; list-style-type: none;
}

.hero{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    background-image:url("images/hero.jpg");
    background-size:cover;
    background-repeat: no-repeat;
    padding-top:var(--padding-section);
    padding-bottom:var(--padding-section);
    background-position: bottom left;
}

.hero-content{
    grid-column:2/7;
    display:flex;
    flex-direction:column;
    gap:var(--big-Gap);
}

.hero-cards{
    display:flex;
    align-items:center;
    gap:var(--small-gap);
    flex: 0 0 180px;
}

.hero-card{
    display:flex;
    flex-wrap:wrap;
    width:100%;
    gap:10px;

}

.hero-cards-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
}

.hero-cards
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.included .material-symbols-outlined{
    font-size:3rem;
    font-variation-settings:
        'FILL' 0,
        'wght' 200,
        'GRAD' 0,
        'opsz' 24
}


.included{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    background-color:var(--text);
    color: var(--cream);
    padding-top:var(--padding-section);
    padding-bottom:var(--padding-section);
}

.included-container{
    grid-column:2/12;
    display:flex;
    flex-wrap:wrap;
    gap:50px;
}

.included-intro{
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1 1 var(--intro-width);
    max-width:var(--intro-max-width);
    margin-right:auto;
}

.included-grid {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    flex:1 1 400px;
}

.included-card {
    display:flex;
    flex-direction:column;
    flex:1 1 var(--flex-width);
    max-width:var(--max-width);
    gap:var(--small-gap);
}

.examples{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    padding-top:var(--padding-section);
    padding-bottom:var(--padding-section);
}

.examples-container{
    grid-column:2/12;
    display:flex;
    flex-wrap:wrap;
    gap:50px;
}

.examples-intro{
    display:flex;
    flex-direction:column;
    gap:10px;

    max-width:var(--intro-max-width);
}

.examples-grid {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    flex:1 1 400px;
}

.examples-card {
    display:flex;
    flex-direction:column;
    flex:1 1 var(--flex-width);
    max-width:var(--max-width);
    gap:var(--small-gap);


}

.examples-images{
    aspect-ratio: 6 / 7;

}

.examples-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;

}




.clients .material-symbols-outlined{
    font-size:3rem;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}


.clients{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    background-color: #EFE9DD;
}

.clients-container{
    grid-column:2/12;
    display:flex;
    flex-wrap:wrap;
    gap:50px;
}

.clients-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 var(--intro-width);
    max-width: var(--intro-max-width);
    color: var(--text);
    padding-top: 30px;
    padding-bottom: 30px;
}

.clients-cards{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    flex:1 1 400px;    
    padding-top:20px;
    padding-bottom:20px;
}

.clients-card{
    display:flex;
    flex-direction:column;
    flex:1 1 var(--flex-width);
    max-width:250px;
    gap:10px;
}

.clients-cards-number{
    display:flex;
    justify-content:center;
    align-items:center;
    width: 48px;
    height:48px;
    color:var(--orange);

}















.process{
    display:grid;
    grid-template-columns:repeat(12,1fr);
}

.process-container{
    grid-column:2/12;
    display:flex;
    flex-wrap:wrap;
    gap:50px;


}

.process-content {
    position: relative;
    background-color: var(--orange);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 var(--intro-width);
    max-width: var(--intro-max-width);
    color: var(--cream);
    padding-top: 30px;
    padding-bottom: 30px;
}

.process-content::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 100vw;
    background-color: var(--orange);
}


.process-cards{
    display:flex;
    gap:20px;
    background-color:var(--cream);
    flex-wrap:wrap;
    flex:1 1 400px;    
    padding-top:20px;
    padding-bottom:20px;
}

.process-card{
    display:flex;
    flex-direction:column;
    flex:1 1 var(--flex-width);
    max-width:var(--max-width);
    gap:10px;
}

.process-cards-number{
    display:flex;
    justify-content:center;
    align-items:center;
    width: 48px;
    height:48px;
    background-color:var(--orange);
    color:var(--cream);
    border-radius:50%;
}




.footer{
    padding-top:var(--padding-section);
    padding-bottom:var(--padding-section);
    background-image:url("images/footer.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    display:grid;
    grid-template-columns:repeat(12,1fr);
}

.footer-container{
    grid-column:2/12;
    display:flex;
    flex-wrap:wrap;
}

.footer-content{
    color:var(--cream);
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1 1 350px;
    max-width:450px;
    margin-right:auto;
}


@media (max-width:768px) {

    .hero-content{
        grid-column:2/12;
    }

    .header .nav .menu{
        display:none;
    }
    h1{font-size:4rem;}
        h2{
        font-size:2.5rem;
    }
}


@media (min-width: 1550px) {


    .hero-content{
        grid-column:3/7;
    }
    .nav{
        grid-column:3/11;
    }

    .examples-container{
        grid-column:3/11;
        display:flex;
        flex-wrap:wrap;

    }

    .included-container{
        grid-column:3/11;
        display:flex;
    
    }
    .clients-container{
        grid-column:3/11;
    }

    .process-container{
        grid-column:3/11;
    }
    .footer-container{
        grid-column:3/11;
    }
}