@import url('https://fonts.googleapis.com/css?family=Raleway:400,600');

body{
      background-image: url("background.jpg");
      background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     height: 100%;
}


header {
    text-align: center;
    margin-top: 60px;
}

body .contact-details {
   text-align:center;
   font-family: 'Raleway', sans-serif;
    margin-top: 10%;
    border: 0px solid #797979;
    border-radius: 10px;
    background: #00000073;
    background-clip: border-box; 
    width: 560px;
    margin-left: 15%;
    padding-top: 30px;
    padding-bottom: 30px;
   
}
.contact-details h2 {
    color: #ffffff;
    font-size: 36px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 60px;
}
.contact-details p{
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
    line-height: 48px;
}
.contact-details a{
    color: #ffffff;
}
.contact-details a:hover
{
     color: #ffffff;
}



/* ******************* Media Query ******************* */
/* Large desktops and laptops */
@media (min-width: 1200px){
  
}
/*  ipad pro Portrait tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
body .contact-details{
    margin-left:7% ;
}
}

/* ipad Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
body .contact-details {
    width: 490px;
    margin-left: 0%;
   }  

}

/* Landscape iphones 6 and portrait tablets */
@media (max-width: 767px) {
  
}
/* Landscape iphones 5 and portrait tablets */
@media (max-width: 640px) {
  
}

/* Landscape phones and smaller */
@media (max-width: 480px){
.contact-details h2{
    font-size:24px;
}
.contact-details p {
    color: #ffffff;
    font-size: 20px;
    line-height: 40px;
}
body .contact-details{
    margin-left: 8%;
    width: 323px;
}
}
@media (max-width: 375px) {
   body .contact-details{
    margin-left: 3%;
    width: 323px;
} 
}

@media (max-width: 360px){
body .contact-details {
    margin-left: 2%;
}
}
@media (max-width: 320px) {
body .contact-details {
    margin-left: 0%;
    width: 296px;
}   
}