body {margin: 0;padding: 0;height: 100vh;background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
      url("../images/banner-1.jpg") no-repeat center;background-size: cover;background-color: #ccc;background-size: 100% 100%;background-repeat: no-repeat;justify-content: center;align-items: center;}
img{margin-top: -4rem;}
header {display: block;text-align: center;line-height: 0.5em;margin: 20px;}

h3 {margin: 0;padding: 0;position: absolute;top: 45%;left: 50%;transform: translate(-50%,-50%);color: #fff;font-family: Times New Roman, serif;font-size: 6.5vw !important;}

h3:before {content: attr(data-text);position: absolute;top: 0;left: 0;transform-origin: bottom;transform: rotateX(180deg);line-height: 1.14em;background: linear-gradient(0deg, #000000 0, transparent 70%);-webkit-background-clip: text;-webkit-text-color: transparent;opacity: 0.1;}

.right-content{font-size: 2vw;background: linear-gradient(#d7d4d4, #ada7ad, #b9c50c, #e6e6e7);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}

p{color: #fff;text-align: center;font-family: Roboto, sans-serif;letter-spacing: 2px;margin-top: 12rem;line-height: 1.5;}
h5 a{font-size: 1.5rem;}
.m-t-4{margin-top: 8rem;}
.mail:hover{text-decoration: none;color:#fff;font-size: 18px;}
.mail{text-decoration: none;color:#fff;font-size: 18px;}
h1{font-size: 2rem !important;}
h2{ font-size: 1.4rem !important;}
@media only screen and (max-width: 767px) {
    .logo{order:2;}
    .mail{order:1;margin-bottom: 1rem;}
    img{margin-top: -4rem;}
    body {height: 105vh;background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),url("../images/mobile-banner.jpg") no-repeat center;background-size: cover;background-repeat: no-repeat;justify-content: center;align-items: center;overflow-x: hidden;} 
    .right-content{font-size: 2vw;background: linear-gradient(#d7d4d4, #ada7ad, #b9c50c, #e6e6e7);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}

    header {display: block;text-align: center;line-height: 0.5em;margin: 15px;}

    h3 {position: absolute;top: 41%;
        left: 56%;transform: translate(-50%,-50%);
        color: #fff;font-family: Times New Roman, serif;font-size: 12.5vw !important;width: 100%;}

    h3:before {content: attr(data-text);position: absolute;top: 0;left: 0;transform-origin: bottom;transform: rotateX(180deg);line-height: 1.14em;background: linear-gradient(0deg, #000000 0, transparent 70%);-webkit-background-clip: text;-webkit-text-color: transparent;opacity: 0.1;}

    p {color: #fff;text-align: center;font-family: Roboto, sans-serif;letter-spacing: 2px;margin-top: 7rem;line-height: 1.5;}
    h5 a{font-size: 1.8rem;}
    h1, h2, h5{margin: 0.5rem;}
    .m-t-4 {
        margin-top: 4rem;
    }
    h1{font-size: 1.8rem !important;}
   h2{ font-size: 1.4rem !important;}
 
}
