@font-face {
  font-family: 'Roboto';
  src: url('asset/fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Roboto';
  src: url('asset/fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: 'Poppins';
  src: url('asset/fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Poppins';
  src: url('asset/fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: 'Poppins';
  src: url('asset/fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

body {
  margin: 0;
  padding: 0;
}


.coming-soon { 
    background-image: url("asset/JRPAY_ws_background_new.svg"); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
}

.siteContent{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
}
.jr_pay_logo{
    padding-top: 3rem;
}

.jr_pay_logo_img {
    width: 380px;
    opacity: 1;
}


.headline{
    font-weight: 700;
    font-style: normal;
    font-size: 5.8rem;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: rgba(255, 255, 255, 1);
    font-family: 'Roboto', sans-serif;
    line-height: 1.2;
    padding-top: 5.2rem;
    margin: 0;
}

.subheadline{
    letter-spacing: 0%;
    vertical-align: middle;
    text-align: center;
    font-size: 2.8rem;
    font-style: normal;
    font-weight: 200;
    color: rgba(255, 255, 255, 1);
    font-family: 'Roboto', sans-serif;
    line-height: 1.3;
    padding-top: 1.8rem;
    margin: 0;
}

.jr_social{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 9rem;
}

.social_icons{
    display: flex;
    flex-direction: row;
    gap: 60px;
}
.icon{
    width: 42px;      
    height: 42px;
    background-color: white; 
    border-radius: 70%;     
    display: flex;
    justify-content: center;  
    align-items: center;
}

.icon img {
    width: 32px;   
    height: 32px;
}

.jr_follow_content{
    font-weight: 300;
    font-style: normal;
    font-size: 26px;
    text-align: center;
    padding-top: 16px;
    font-family: 'Poppins', sans-serif;
    color: rgba(255, 255, 255, 1);
}

.jr_ride_logo{
    padding: 4rem;
}
.jr_ride_logo_img{
    width: 300px;
    opacity: 1;
}


@media (max-width: 720px) {
  .siteContent {
    min-height: 100vh; 
    background-size: contain;
}

.coming-soon {
    background-image: url("asset/JRPAY_mobile_bg.svg");
    
}
.jr_pay_logo{
    padding-top: 7rem;
}

.jr_pay_logo_img {
    width: 200px;
    content: url("asset/JR_Pay_Logo_new.png");
}

.headline {
    font-size: 1.9rem;
    line-height: 1.2;
    padding-top: 7rem; 
}

.subheadline {
    padding-top: 1.8rem; 
    padding-left: 3rem;
    padding-right: 3rem;
    font-size: 1.3rem;
    }

.social_icons {
    gap: 22.4px; 
    padding-top: 20px; 
}

.icon {
    width: 40px;
    height: 40px;
}

.jr_follow_content {
    font-size: 1rem;
}

.jr_ride_logo_img {
    width: 175px;
}

.jr_ride_logo {
    margin-top: 7rem;
     padding: 0;  
     bottom: 10%; 
}
}