*{
    box-sizing: border-box;
}
html,body {
    margin: 0;
    padding: 0;
    background-color: #BCBCBC;
    max-width: 100%;
}
.roboto-condensed-title {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
}
.lora-text2 {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
}

@media (max-width : 768px) {
    section.navbar {
        position: fixed;
        width: 100%;
        height:13%;
        background-color: #476F6F;
        color: white;
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }  
        li {
            float: left;
        }
        li a {
            display: block;
            text-align: center;
            padding: none;
            text-decoration: none;
            color  :white;
        }
    }
    section.content2 {
        background-color: #BCBCBC;
    }
    section.content1 {
        background-color: #E5E5E5;
    }
    .titletop {
        font-family: "Roboto Condensed", sans-serif;
        font-size: 24px;
        margin-left: 55px;
        margin-top: 9px;
    }
    .thcouple {
        font-family:"Lora", serif ;
        font-size: 15px;
        margin-left: -165px;
        margin-top: 40px;
    }
    .ccf {
        font-family:"Lora", serif ;
        font-size: 15px;
        margin-left: 40px;
        margin-top: 18px;
    }
    .when, .ami, .contact {
        font-size: 0px;
    }
    .icon {
        width: 45px; 
        margin-left: 70px;
        margin-top: -15px;
    }
    
    div#title {
        font-family:"Roboto Condensed", sans-serif;
        font-size: 20px !important;
        text-align: center;
        color : #335757; 
    }
    div#title3 {
        font-family:"Roboto Condensed", sans-serif;
        font-size: 20px !important;
        margin-left: 17%;
        color : #335757; 
    }
    div#title2 {
        font-family:"Roboto Condensed", sans-serif;
        font-size: 15px !important;
        text-align: center;
        color : #428C8B;
    }
    div#price {
        text-align: left;
        font-style: italic ;
    }
    div#navbar_fix {
        width: 100%;
        height:80px;
        background-color: #E5E5E5;
    }
    div#intro {
        height: 1310%;
        background-color: #E5E5E5;
        font-family:"Lora", serif;
        font-size: 20px;
    }
    div#text {
        margin-top: 10%;
        margin-left: 5%;
        margin-right: 5%;
        font-family:"Lora", serif;
    }
    div#imga {
        margin-top: 5%;
        margin-left: 5%;
        margin-bottom: 10%;
    }
    div#grey {
        height: 30%;
        background-color: #E5E5E5;
    }
    div#who {
        height:2500%;
        background-color:  #BCBCBC ;
        font-family:"Lora", serif;
    }
    div#who2 {
        margin-top: 5%;
        margin-left: none;
        margin-right: 10%;
        font-family:"Lora", serif;
        font-size: 17px; 
        img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top : 2%; 
        }
    }
    ul {
        list-style-type: none;
    }
    div#child, 
    div#old,
    div#couple,
    div#family {
        background-color: #E5E5E5;
        padding: 10px;
        margin: 0 0 1em 0;
        text-align: left;
        font-family:"Lora", serif;
        width: 95%;
    }
    div#about {
        height:1300%;
        background-color:#E5E5E5;
        font-family:"Lora", serif;
        font-size: 21px;
    }
    div#dn {
        font-family:"Lora", serif;
        font-size: 17px;
    }
    .container1 {
        padding: 20px;
        margin: 0 0 3em 0;
        margin-left: 5%;
        text-align: left;
        font-family:"Lora", serif;
        width: 90%;
        border: solid;
        border-color: black;
        border-width: thin;
    }
    .container2 {
        padding: 20px;
        margin: 0 0 2em 0;
        margin-left: 5%;
        text-align: left;
        font-family:"Lora", serif;
        width: 90%;
        border: solid;
        border-color: black;
        border-width: thin;
    }
    div#clients {
        background-color: #BCBCBC;
        height: 1170%;
        margin-top: 10%;
    }     
    .containclients1, .containclients2, .containclients3, .containclients4 {
        padding: 10px;
        margin: 0 0 1em 0;
        text-align: center;
        font-family:"Lora", serif;
        margin-left: auto;
        margin-right: auto;
        width: 95%;
    }
    .jamr {
        font-family:"Roboto Condensed", sans-serif;
        font-size: 20px;
    }
    .orange3, .orange {
        width : 60px; 
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
    
    }
    .name {
        font-family: "Roboto Condensed", sans-serif;
        font-size: 20px;
    }
    section.footer {
        height: 250px;
        background-color: #476F6F;
        font-family:"Lora", serif;
        text-align: center;
        color : white;
    }

}

@media (min-width : 768px) {
    section.navbar {
        position: fixed;
        width: 100%;
        height:16%;
        background-color: #476F6F;
        color: white;
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }  
        li {
            float: left;
        }
        li a {
            display: block;
            text-align: center;
            padding: none;
            text-decoration: none;
            color  :white;
        }
    }
    section.content1,
    section.content2 {
        background-color: #BCBCBC;
    }
    .titletop {
        font-family: "Roboto Condensed", sans-serif;
        font-size: 30px;
        margin-left: 350px;
        margin-top: 15px;
    }
    .thcouple {
        font-family:"Lora", serif ;
        font-size: 15px;
        margin-top: 52px;
        margin-left: -210px;
    }
    .ccf {
        font-family:"Lora", serif ;
        font-size: 15px;
        margin-top: 68px;
        margin-left: -210px;
    }
    .when {
        font-family:"Lora", serif ;
        font-size: 18px;
        margin-top: 35px;
        margin-left: 420px;
    }
    .ami {
        font-family:"Lora", serif ;
        font-size: 18px;
        margin-top: 35px;
        margin-left: 30px;
    }
    .contact {
        font-family:"Lora", serif ;
        font-size: 18px;
        margin-top: 35px;
        margin-left: 30px;
    }
    div#title,
    div#title3 {
        font-family:"Roboto Condensed", sans-serif;
        font-size: 30px !important;
        text-align: center;
        color : #335757; 
    }
    div#title2 {
        font-family:"Roboto Condensed", sans-serif;
        font-size: 20px !important;
        text-align: center;
        color : #428C8B;
    }
    div#price {
        text-align: left;
        font-style: italic ;
    }
    div#navbar_fix {
        width: 100%;
        height:90px;
        background-color: #E5E5E5;
    }
    div#intro {
        height: 750px;
        background-color: #E5E5E5;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
        font-family:"Lora", serif;
        font-size: 20px;
    }
    div#text {
        margin-top: 15%;
        margin-left: 30%;
        font-family:"Lora", serif;
    }
    div#who {
        height:800px;
        background-color:  #BCBCBC ;
        font-family:"Lora", serif;
    }
    div#who2 {
        column-width: 10em;
        display: flex;
        column-gap: 2em;
        margin-top: 5%;
        margin-left: 5%;
        margin-right: 5%;
        font-family:"Lora", serif;
        font-size: 17px; 
        img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top : 2%; 
        }
    }
    .who2>* {
        margin: 0 10px;
        flex: 1;
    }
    ul {
        list-style-type: none;
    }
    div#imga {
        margin-top: 0%!important;
        margin-left: 20%!important;
    }
    div#child, 
    div#old,
    div#couple,
    div#family {
        background-color: #E5E5E5;
        padding: 10px;
        margin: 0 0 1em 0;
        text-align: left;
        font-family:"Lora", serif;
        width: 25%;
    }
    div#about {
        height:850px;
        background-color:#E5E5E5;
        font-family:"Lora", serif;
        font-size: 21px;
        margin-top: 5%;
    }
    div#dn {
        column-width: 10em;
        display: flex;
        column-gap: 2em;
        margin-top: 5%;
        margin-left: 5%;
        margin-right: 5%;
        font-family:"Lora", serif;
        font-size: 17px;
    }
    .container1 {
        padding: 20px;
        margin: 0 0 2em 0;
        margin-left: 18%;
        text-align: left;
        font-family:"Lora", serif;
        width: 30%;
        border: solid;
        border-color: black;
        border-width: thin;
    }
    .container2 {
        padding: 20px;
        margin: 0 0 2em 0;
        text-align: left;
        font-family:"Lora", serif;
        width: 30%;
        border: solid;
        border-color: black;
        border-width: thin;
    }
    div#clients {
        background-color: #BCBCBC;
        width: 950px;
        column-width: 100em;
        display: flex;
        column-gap: 4em;
        margin-left: 20%;
        margin-top: 1%;
    }     
    .clients>* {
        margin: 0 10px;
        flex: 1;
    }
    .containclients1, .containclients2, .containclients3, .containclients4 {
        padding: 10px;
        margin: 0 0 1em 0;
        text-align: center;
        font-family:"Lora", serif;
        width: 25%;
    }
    .jamr {
        font-family:"Roboto Condensed", sans-serif;
        font-size: 20px;
    }
    .icon {
        width: 0px;
    }
    .orange {
        width : 80px; 
        margin-left: auto;
        margin-right: auto;
        margin-top: 22%;
    
    }
    .orange3 {
        width : 80px; 
        margin-left: auto;
        margin-right: auto;
        margin-top: 10%;
    
    }
    .name {
        font-family: "Roboto Condensed", sans-serif;
        font-size: 20px;
    }
    section.footer {
        height: 250px;
        background-color: #476F6F;
        font-family:"Lora", serif;
        text-align: center;
        color : white;
    }
}