*{
  margin: 0;
  padding: 0;
}

.all{
  position: relative;
  height: 330vh;
}



.all::before{
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0.5;
  background-image: url('assets/background.jpeg');
  background-size:cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: top;
  background-color: black;
}


.title{
  position:relative;
  font-size: 38px;
  text-align: center;
  padding-top: 100px;
  font-family: 'Merriweather Sans', sans-serif;
  text-shadow: 0px 2px 2px rgba(39, 39, 39, 1);
  color:#272727;
}


.logo{
position:absolute;
align-self: flex-start;
padding-top: 20px;
display: flex;

}


.container-logo{
  position: relative;
  flex-basis: 100%;
  max-width: 80%;
  max-height: 20%;
  margin: 60px 200px 0px 200px;
  display:flex;
  background-color: rgb(243, 243, 243);
  height: 10%;
  border-radius: 10px 10px 0px 0px;
  display: flex;
  order:1;
  flex-direction: row;
  justify-content: center;

}


.container-box{
  position:relative;
   max-width: 80%;
  margin: 0px 200px 0px 200px;
  display:flex;
  font-family: 'Merriweather Sans', sans-serif;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  background-color: rgb(243, 243, 243);
  border-radius: 0px 0px 10px 10px;
  box-shadow: rgba(69, 69, 69, 0.06) 0px 4px 8px 0px;
  align-items:flex-start;
  order:2;
}




.container-left{
  opacity: 1 !important;
  position: relative;
  flex-basis: 50%;
  padding: 40px 40px 40px 80px;
  min-height: 400px;
  background: rgba(227, 230, 235, 0.712);
  border-radius: 0px 0px 0px 10px;
  order: 3;
  box-shadow: rgba(99, 99, 99, 0.254) 0px 4px 8px 0px;
  line-height: 25px;

}

.container-right{
  opacity: 1 !important;
  position: relative;
  flex-basis: 50%;
  padding: 40px 40px 40px 80px;
  min-height: 400px;
  background: #272727;
  color: rgb(216, 216, 216);
  border-radius: 0px 0px 10px 0px;
  order:3;
  box-shadow: rgba(99, 99, 99, 0.254) 0px 4px 8px 0px;
  line-height: 25px;


}

.contact-details {
  display: flex;
  justify-items: start;
  align-items: center;
}

#phone1 {
  color: black
}

#phone2 {
  text-decoration: none;
}

.text-white {
  color: rgb(216, 216, 216);
}


.email1{
  text-decoration:none;
  color: black;
}

.email2{
  text-decoration:none;
}

a {
  padding-left:15px;
  text-decoration: none;
  color: black;

 }
 .address {
  display: table-cell;
  vertical-align: top;
 }



@media screen and (max-width:361px) {
  .all{
    font-size: 14px;
  }
  .title{
    font-size: 22px;
    text-align: center;
  }
  .container-logo{
    width: 90%;
    height: 2.5%;
    margin-left: 10%;
  }
  .container-box{
    flex-direction: column;
    height: auto;
    width: 90%;
    margin-left: 10%;
   }

  .container-left{
    padding-left: 40px;
    padding-right: 10px;
    width: 83%;
  }

  .container-right{
    padding-left: 40px;
    padding-right: 10px;
    width: 83%;
    border-radius: 0px 0px 10px 10px;
  }
 }



@media screen and (min-width:362px) and (max-width:389px) {
  .all{
    font-size: 14px;
  }
  .title{
    padding-left: 10px;
    font-size: 22px;
    text-align: center;
  }
  .container-logo{
    width: 90%;
    height: 2.5%;
    margin-left: 10%;
  }
  .container-box{
    flex-direction: column;
    height: auto;
    width: 90%;
    margin-left: 10%;
   }

  .container-left{
    width: 83%;
    padding-left: 40px;
    padding-right: 10px;
  }

  .container-right{
    width: 83%;
    padding-left: 40px;
    padding-right: 10px;
    border-radius: 0px 0px 10px 10px;
  }
 }


  @media screen and (min-width:390px) and (max-width:409px) {

  .title{
    font-size: 24px;
   text-align: center;
    }
  .container-logo{
    width: 90%;
    height: 2%;
    margin-left: 10%;
   }
  .container-box{
     flex-direction: column;
     height: auto;
     width: 90%;
     margin-left: 10%;
   }

  .container-left{
    padding-left: 50px;
     width: 71%;
  }

  .container-right{
    padding-left: 50px;
    width: 71%;
     border-radius: 0px 0px 10px 10px;
   }
  }


  @media screen and (min-width:409px) and (max-width:799px) {
    .all{
      height: 230vh;
    }
    .title{
      font-size: 28px;
      margin-left: 40px;
      margin-right: 40px;
    }
    .container-box{
      flex-direction: column;
     }
    .container-logo{
      width: 90%;
      height: 4%;
      margin-left: 10%;
    }
    .container-box{
      height: auto;
      width: 90%;
      margin-left: 10%;
    }
    .container-right{
      border-radius: 0px 0px 10px 10px;
    }
   }


  @media screen and (min-width:800px) {
    .all{
      height: 130vh;
    }
    .title{
      font-size: 28px;
    }
    .container-logo{
      width: 90%;
      height: 6%;
      margin-left: 10%;
    }
    .container-box{
      height: auto;
      width: 90%;
      margin-left: 10%;
    }
    .container-left{
      height: 730px;
    }
    .container-right{
      height: 730px;
    }
   }



 @media screen and (min-width: 1000px) and (max-width: 1190px) {
  .all{
    height: 110vh;
  }
  .container-logo{
    width: 90%;
    height: 7%;
  }
  .container-box{
    height: auto;
    width: 90%;
  }
  .container-left{
    height: 600px;
  }
  .container-right{
    height: 600px;
  }
 }

 @media screen and (min-width:1200px){
  .all{
    height: 100vh;
  }
  .container-logo{
    width: 90%;
    height: 7%;
  }
  .container-box{
    height: auto;
    width: 90%;
  }
  .container-right{
    height: 460px;
    padding-right: 5px;
    padding-left: 5%;
  }
  .container-left{
    height: 460px;
    padding-right: 5px;
    padding-left: 5%;
  }
 }


 @media screen and (min-width: 1300px) {
  .all{
    height: 100vh;
  }
  .container-logo{
    width: 90%;
    height: 7%;
  }
  .container-box{
    height: auto;
    width: 90%;
  }
  .container-right{
    height: 430px;
    padding-right: 5px;
    padding-left: 5%;
  }
  .container-left{
    height: 430px;
    padding-right: 5px;
    padding-left: 5%;
  }
 }