* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
  }
  body {
    background-color: #ffffff;
    opacity: 1;
    background-image: url("../images/background.png");
    background-repeat: no-repeat;
    width: 100%;
    /* background-size: contain; */
    background-size: cover;
    background-position: center;
    height: 410px;
  }
  .ist{
    font-size: 28px;
    font-style: bold;
     font-family: 'Roboto', sans-serif;
     font-weight: 700;
     color: #003963;
  }
  .second{
    margin-top: 12px;
    font-size: 20px;
    font-weight: 600;
    font-style: medium;
    font-family: 'Roboto', sans-serif;
    color: #003963;
  }
  .fifth{
    font-style: medium;
    font-family: 'Roboto', sans-serif;
    color: #003963;
    font-size: 20px;
    font-weight: 600;
  }
  .imgfwork {
    position: absolute;
    width: 140px;
    height: 59px;
    top: 23px;
    /* left: 95px; */
    left: 23px;
    z-index: 1;
  }
  .imgdwork{
    width: 468px;
    height: 468px;
    position: relative;
    border-radius: 308px;
    margin-top: -56px;
  }

  .middlework {
    color: #003963;
    font-family: "Noto Sans", system-ui;
    font-style: normal;
    opacity: 1;
  }
  
  .copy {
    position: absolute;
    left: 24px;
    color: #707070;
    font-size: 14px;
    opacity: 1;
    margin-top: 93px;
    /* margin-bottom: 4px; */
  }

  .d-flex{
    display: flex;
  }
#to_local_zone{
  visibility: hidden;
  display: none;
}
#to_gmt_zone{
  visibility: hidden;
  display: none;
}

.showIST{

  background-color: #4B4BC7;

  border-color: #4B4BC7;

  color: #FFFFFF;

  background-repeat: no-repeat;

  border-radius: 4px;

  width: 150px;

  height: 32px;

  margin-top: 6px;

 

}

.showGMT{

  background-color: #4B4BC7;

  border-color: #4B4BC7;

  color: #FFFFFF;

  background-repeat: no-repeat;

  border-radius: 4px;

  width: 150px;

  height: 32px;

  margin-top: 6px;

  

 

}
#to_local_date_time{
  color:#D61717;
}
  
  @media screen and (min-device-width: 300px) and (max-device-width: 450px) {
    .middlework {
      padding-left: 33px;
    }
  
  }

  @media only screen and (max-width: 450px) {
    .imgfwork {
      position: absolute;
      left: 130px;
    }
  }
  @media only screen and (max-width: 280px) {
    .imgfwork {
      position: absolute;
      left: 81px;
    }
  
    .middlework{
        margin-right: -60px;
    }
  }

  @media screen and (min-device-width: 240px) and (max-device-width: 280px) {
  
   .copy{
    margin-right: 79px;
   }
 }

  /* @media only screen and (max-width: 700px) {
    .third {
      display: grid;
    }
  } */
  @media only screen and (max-width: 630px){
    .fourth{
      display: flex;
      flex-direction: column;
    }
  }
  
  @media only screen and (max-width: 800px) {
    .middlework {
      text-align: center;
    }
    .ist{
      font-size: 22px;
      font-weight: 700;
      font-style: bold;
      font-family: 'Roboto', sans-serif;
    }
    .second{
      font-weight: 550;
      font-size: 18px;
    /* margin-top: 8px; */
      font-style: medium;
      font-family: 'Roboto', sans-serif;
     
    }
    .to_gmt_date_time{
      /* font: normal normal bold 18px/24px Roboto; */
      font-size: 18px !important;
      font-weight: bold  !important
    }
    .to_local_date_time{
      font-size: 18px !important;
      font-weight: bold  !important
    }
   
    .fifth{
      font-weight: 550;
      font-style: medium;
      font-family: 'Roboto', sans-serif;
      color: #003963;
      font-size: 18px;
     /* margin-top: 4px; */
     /* margin-left: 90px; */
      /* margin-right: 60px; */
      position: relative;
    }
   
   /* .showGMT{
    margin-top: 8px;
   }
   .showIST{
    margin-top: 8px;
   } */

  }
  @media only screen and (min-width: 1400px) {
    .middlework {
      margin-top: 61px;
    }
  }
  
  @media only screen and (min-width: 1688px) {
    .middlework {
      margin-top: 100px;
    }
    .copy{
      position: fixed;
      bottom: 23px;
  }
  }
  @media only screen and (min-width: 1912px) {
    .middlework {
      margin-top: 150px;
    }
  }
  @media only screen and (min-width: 2196px) {
    .middlework {
      margin-top: 220px;
    }
  }
  @media only screen and (min-width: 2636px) {
    .middlework {
      margin-top: 280px;
    }
  }

  @media only screen and (min-width: 3000px) {
    .middlework {
      margin-top: 400px;
    }
  }

  @media only screen and (max-width: 540px){
     .copy{
    margin-left: 61px;
      }
  }

  @media screen and (min-device-width: 520px) and (max-device-width: 540px) {
  
   .imgfwork {
        position: absolute;
        left: 177px;
   
  }
  .copy{
    margin-left: 110px;
  }
}
/* 
@media screen and (min-device-width: 768px) and (max-device-width: 820px) {
  
  
 .copy{
  margin-left: -38px;
 }
} */

/* 
  @media only screen and (max-width: 900px) {
  
    .copy {
        position: fixed;
        bottom: 4px;
        left: 71px;
      }
  } */
  
  @media only screen and (max-width: 1688px) {
    .copy{
      position: fixed;
      bottom: 23px;
  }
    }

    



/* SecondDesign */