:root {
    --darkgray: #212329;
    --white: #fff;
    --brightred: #f94230;
    --lighred:#f9433dcc;
  }
  * {
    list-style: none;
  }
  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Nunito", sans-serif;
    list-style: none;
    height: 100%;
    width: 100%;
    background-color: rgb(237, 240, 246);
  }
  html,
  body {
    overflow-x: hidden;
  }
  button {
    text-transform: uppercase;
  }
  button a{
      text-decoration:none!important;
      outline:none!important;
      color:#fff!important;
  }
  
  header {
    background: url("../bitsilver/images/new/banner-bg.png") center center/cover
      no-repeat;
    height: 100vh;
    max-width: 100%;
    color: var(--white);
    opacity: 1;
    width: auto;
    position: relative;
  }
  .nav-container {
    width: 100%;
  }
  .navbar {
    display: grid;
    grid-template-columns: 0.2fr auto 1fr;
    align-items: center;
    height: 80px;
    width: 90%;
    max-width: 1720px;
    margin: 0 auto;
  }
  #navbar-logo {
    justify-self: start;
    margin-left: 20px;
    cursor: pointer;
  }
  .nav-menu {
    display: grid;
    grid-template-columns: repeat(7, auto);
    list-style: none;
    text-align: center;
    width: 70%;
    justify-self: end;
  }
  .nav-links {
    text-decoration: none;
    color: var(--white);
  }
  .nav-links:hover {
    color: var(--brightred);
    transition: all 0.2s ease-out;
  }
  
  .nav-links-btn {
    
    padding: 6px 16px;
    border-radius: 4px;
     background: transparent linear-gradient(98deg, #41b8fd 0%, #18518e 100%) 0% 0%
      no-repeat padding-box;
  }
  .nav-links-btn:hover {
    color: var(--white);
    padding: 5px 15px;
    border-radius: 4px;
    transition: all 0.3s ease-out;
  }
  .menu-toggle .bar {
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
    background: var(--white);
  }
  
  header .row {
    display: flex;
  }
  header .row .column {
    flex: 50%;
  }
  
  header .row .column:nth-child(2) h1 {
    text-align: left;
    width: 380px;
    margin-top: 20%;
  }
  header .row .column:nth-child(2) ul{
    padding-inline-start: 0px;
  }
  header .row .column:nth-child(2) ul img{
      padding-right:0.5rem;
      padding-top:2px!important;
  }
  header .row .column:nth-child(2) button a{
      display:flex;
      flex-direction:row;
      text-align:center;
      justify-content:center;
      align-items:center;
  }
  header .row .column:nth-child(2) button a img{
      margin-right:1rem;
  }
  
  button {
    background: transparent linear-gradient(98deg, #41b8fd 0%, #18518e 100%) 0% 0%
      no-repeat padding-box;
    letter-spacing: 1.4px;
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 4px;
    outline: none;
    border: none;
    height: 48px;
    opacity: 1;
    text-transform: uppercase;
    margin-top: 2%;
    cursor: pointer;
    
  }
  button a #logo_inside_bttn{
      vertical-align:middle !important;
      padding-top:20px;
  }
  .form-group button{
      width:267px;
  }
 .brand_pics_div {
      text-align: center;
      padding: 3% 2%;
  }
  
  .brand_pics_div ul li {
    display: inline-block;
    width: 11.7%;
    margin: 0 1%;
  }
  .brand_pics_div ul li img{
    max-width: 100%;
    height: auto;
  }
  
  .timeless_container {
    background: url("../bitsilver/images/new/timeless_bg.png") center center/cover
      no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 80vh;
    z-index: 2;
    margin-left: 6vw;
  }
  .timeless_container div {
    flex: 50%;
  }
  .time_left {
    padding: 5% 2% 8% 12%;
    display: flex;
    flex-direction: column;
    text-align: start;
  }
  .time_left_down {
    text-align: justify;
    font-size:1.2em ;
    width: 70%;
    padding-bottom: 5%;
    margin-top: -10%;
    font-weight:bold;
  }
  
  .time_left_upper {
    font-size: 1.2em;
    font-weight:100;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding-top: 10%;
    opacity:0.5;
  }
  .time_right {
    margin-bottom: 5rem !important;
  }
  .time_right img {
    padding: 22% 2rem 4rem 2rem;
    width: 15rem;
    height: 15rem;
  }
  
  .third-section-header {
    margin-top: 27%;
    font-weight: bold;
    font-size: 1.23em;
  }
  .third-section-header h3 {
    width: 30%;
  }
.third-section-pic .images{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top:-3rem;
}

.third-section-pic .images img{
  width: 100%;
  height: 80%;
}
 .graph{
  padding-right: 2%;
}
  /*----------------benefits of silver coin style start-------------*/
  .benefits-container {
    background: url("../bitsilver/images/new/benefit_bg.png ") center center/cover
      no-repeat;
    opacity: 1;
    color: #fff;
    margin-bottom: 0%;
  }
  .benefits {
    margin-left: 10%;
    padding-top: 10rem;
    padding-bottom: 2rem;
    width: auto;
    height: auto;
  
  }
  .benefits .heading {
    margin-bottom: 66px;
  }
  .benefits .small-heading {
    width: 48%;
  }
  .content-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  }
  
  .content-container .contents {
    display: flex;
    margin: 16px 2px;
  }
  .content-container .contents div {
    display: flex;
    flex-direction: column;
    margin: 0 2%;
    line-height: 18px;
    width: 60%;
  }
  .content-container .contents div p {
    font-weight: bold;
    margin-top: 0px;
  }
  .img_benefits {
    height: 81px;
    width: 81px;
  }
  
    .tables{width: 80%;
  height: auto;
  }
 
  
  .text_para{
      margin-top:4%;
  }
  .text_para center small{
      text-align: justify;
      color: gray;
  }
  

  
  /*coin between challenge's to buying silver coin and Try it! Get a Free Silver Tokens style starts*/
.howthenew_silver_coin{
    margin:5rem 0px -5rem 20%;
    width: auto;
    }
  /*coin between challenge's to buying silver coin and Try it! Get a Free Silver Tokens style ends*/
  
  /*------Try it! Get a Free Silver Tokens starts-------*/
  .free_silver_div{
       margin-top:-2rem;
      height: 769px;
      background: transparent url('../bitsilver/images/new/free_silver_token-bg.png') center center/cover
      no-repeat;
      opacity: 1;
      color: white;
      }
      .free_silver_div h3{
          padding-top: 123px;
      }
      .free_silver_div div{
          text-align:justify;
          margin:0 auto;
          width:55%;
      }
   
      
  
      .invest_div{
          height: 600px;
          background: url('../bitsilver/images/new/new_silver_bg.png') center center/cover
          no-repeat;
          color: #fff;
          }
          .invest-content{
              display: flex;
              flex-direction: row;
              align-items: center;
              text-align: center;
              justify-content: center;
          }
          .invest-content div{
              flex: 50%;
              margin-top: 8%;
          }
          .invest-cont{
              text-align: initial;
          }
          .invest-cont p{
              text-align: justify;
              padding:0% 20% 0 0%;
          }
          
          
          
          /* center */
  .howthenew_silver_coin2{
    margin:-7rem 30rem 0rem 60%;
    width: auto;
    }

  
  /*---------------------how it works style start--------------------*/
  .how_it_works_div{
    height: 889px;
  background: transparent url('../bitsilver/images/new/how_the_new_silver.png') 0% 0% no-repeat padding-box;
  opacity: 1;
  }
  .how_it_works_div .how-content{
    display: flex;
    flex-direction: column;
  
  }
  .how_it_works_div .how-content .how-data{
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    padding: 2rem;
    background-color: #fff;
    border-radius: 20px;
    width: 60%;
  }
  .how_it_works_div .how-content .how-data img{
    height: 130px;
    width: 130px;
  }

  .how_it_works_div .how-content .how-data:nth-child(2){
    margin: 3rem auto;
  }
  .how-text{
    margin:0 0 0 3rem;
  }
  .how-text p{
    display: inline-block;
  }
  
  
   /* more about silver coin */
  .more_about_silvertop_coin{
    margin-bottom: -9rem;
    margin-left: 0%;
  }

  /*---------------------how it works style ends--------------------*/
  
  .more-about-silvercoin{
    padding-top:10rem;
  background: url('../bitsilver/images/new/moreaboutbg.png') center center/cover
  no-repeat;
  height: fit-content;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding-bottom: 5rem;
  }
  .more-about{
      padding-top: 1%;
  }
  .more-about-silvercoin p{
      justify-self: center;
      width: 50%;
      margin-left: 22%;
      margin-top: 2%;
      text-align: justify;
      text-align: center;
  }
  
  .form-control{
  padding: 1rem 4.1rem 1rem 1.5rem;
  border-radius: 10px;
  outline: none;
  border: 1px solid lightgray;
}
.form-control::placeholder{
  color: lightgray;
  font-size: 12px;
}
#socialm_copyright_div{
  display: flex;
  justify-content: space-between;
  margin: 0rem 5rem;
  padding:2rem 0;
  color: grey;
}
  
  @media screen and (max-width: 990px) {
      .third-section-pic .images img{
  width:100%;
  height: auto;
}
    .third-section-pic .images{
  display:flex;
  flex-direction:column;
}
.third-section-header {
    margin-top: 30%;
  }
.graph{
  padding-right: 0%;
}
    .nav-container {
      position: relative;
    }
    .nav-menu {
      display: grid;
      grid-template-columns: auto;
  
      margin: 0;
      width: 100%;
      position: absolute;
      top: 80px;
      left: -100%;
      opacity: 0;
      transition: all 0.5s ease;
    }
    #navbar-logo {
      margin-left: 20px;
    }
    .nav-menu.active {
      background: var(--darkgray);
      left: 0;
      opacity: 1;
      transition: all 0.3s ease;
    }
    .nav-links {
      text-align: center;
      line-height: 60px;
      width: 100%;
      display: table;
    }
    .nav-links:hover {
      background-color: var(--brightred);
      color: var(--white);
      transition: all 0.4s ease-out;
    }
    .navbar {
      width: 100%;
    }
    .nav-links-btn {
      border: none;
      padding: 0;
      border-radius: 0;
      background-color: var(--darkgray);
      color: var(--white);
      transition: all 0.4s ease-out;
    }
  
    .nav-links-btn:hover {
      border: none;
      padding: 0;
      border-radius: 0;
      background-color: var(--brightred);
      color: var(--white);
      transition: all 0.4s ease-out;
    }
    #mobile-menu {
      position: absolute;
      top: 20%;
      right: 5%;
      transform: translate(5%, 20%);
    }
    .menu-toggle .bar {
      display: block;
      cursor: pointer;
    }
  
    .menu-toggle .bar:hover {
      cursor: pointer;
    }
  
    #mobile-menu.is-active .bar:nth-child(2) {
      opacity: 0;
    }
    #mobile-menu.is-active .bar:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }
    #mobile-menu.is-active .bar:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }
       .how_it_works_div .how-content .how-data img{
      height:auto;
      width: auto;
    }
  }
  
  @media screen and (max-width: 760px) {
    header .row {
      display: flex;
    }
    header .row .column {
      flex: 100%;
    }
    header .row .column:nth-child(2) {
      text-align: left;
      width: 100%;
    }
    .timeless_container {
      display: flex;
      z-index: 2;
      width: 100%;
      position: inherit;
      top: 90vh;
      flex-direction: column;
      margin: 0;
      height: fit-content;
    }
    .timeless_container div {
      flex: 100%;
    }
    .time_left {
      padding: 5% 2% 0% 5%;
      display: flex;
      flex-direction: column;
      text-align: center;
    }
  
    .time_left_down {
      margin-top: 10% !important;
    }
    .time_left_upper {
      padding: 0;
    }
    .time_left_down {
      font-weight: 900;
      padding: 0;
      align-self: center;
      text-align: justify;
    }
    .time_right {
      text-align: center;
      margin-bottom: 7rem !important;
    }
    .time_right img {
      padding: 0%;
      align-self: center;
      width: 15rem;
      height: 16rem;
    }
  
    .third-section-header {
      margin-top: -18%;
    }
  
    .third-section-header h3 {
      width: 100%;
    }
    .benefits h1 {
      font-size: 2rem;
    }
    .benefits .small-heading {
      width: fit-content;
    }
    .invest-content{
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      justify-content: center;
  }
  .invest-cont{
      text-align: justify;
      text-align: center;
      align-items: center;
      align-self: center;
      justify-self:center;
      width: 100%;
  }
  .invest-cont p{
      text-align: center;
      justify-self:center;
      padding:0%
  }
  .more-about{
      padding-top: 10%;
  }
  .more-about-silvercoin p{
      justify-self: center;
      width: 100%;
      margin-left:0;
      margin-top: 2%;
      text-align: justify;
      text-align: center;
  }
  
  
  }
  /*------------------media query starts------------------------*/
  /*-----------------media query starts------------*/
  @media screen and (max-width:768px){
  
   
   /*-----------How the new silver standards works code start---------*/
  .how_it_works_div{
    height: fit-content;
  background: transparent url('../images/new/how_the_new_silver.png') 0% 0% no-repeat padding-box;
  opacity: 1;
  margin-bottom:2rem;
  }
  .how_it_works_div .how-content .how-data{
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 1rem;
    background-color: #fff;
    border-radius: 20px;
    width: 100%;
  }
  .how_it_works_div .how-content .how-data img{
    height:auto;
    width: auto;
  }


  .how_it_works_div .how-content .how-data:nth-child(2){
    margin: 5rem auto;
  }
  .how-text{
    margin:-1rem 0 0 1rem;
  }
  .how-text p{
    display: inline-block;
    margin: 0px;
    padding: 0px;
    width:90%;
  }
  .invest_div{
    height:fit-content;
    padding-bottom: 2rem;
  }
  /*-----------How the new silver standards works code ends---------*/
  #socialm_copyright_div{
  display: flex;
 flex-direction:column-reverse;
  margin:0;
  padding:1.5rem 0;
  align-items: center;
  justify-content: center;
}
  .third-section-pic .images{
    display: flex;
    flex-direction:column;
    align-items:center;
  }

  .third-section-pic .images img{
  width: 100%;
  height:auto;
}
  .graph{
  padding-right: 0%;
}
.free_silver_div div{
          width:80%;
      }
  
    }
  
  
  /*-----footer style start-----*/
  .footer{background-color: white!important;
    padding-top: 60px;
  }
  
  form{
    margin-top: 10px;
  }
  
  /*--------foote responsive style start-----------*/
  /* STYLES SPECIFIC TO FOOTER  */
  .footer {
    width: 100%;
    position: relative;
    height: auto;
    background-color: #070617;
  }
  .footer .col {
    width: 190px;
    height: auto;
    float: left;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 0px 20px 20px 20px;
  }
  .footer .col h1 {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 17px;
    padding: 20px 0px 5px 0px;
    color: black;
    font-weight: bolder;
  }
  .footer .col ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  .footer .col ul li {
    color: #999999;
    font-size: 14px;
    font-family: inherit;
    font-weight: bold;
    padding: 5px 0px 5px 0px;
    cursor: pointer;
    transition: .2s;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    text-transform: uppercase;
  }
  .social ul li {
    display: inline-block;
    padding-right: 5px !important;
  }
  
  .footer .col ul li:hover {
    color:black;
    transition: .1s;
    -webkit-transition: .1s;
    -moz-transition: .1s;
  }
  .clearfix {
    clear: both;
  }
  .col_right{
    float: right;
  }
  .col_right p{
      font-weight:bolder;
      width:20rem;
  }
  @media only screen and (min-width: 1280px) {
    .contain {
      width: 1200px;
      margin: 0 auto;
    }
  }
  @media only screen and (max-width: 1139px) {
    .contain .social {
      width: 1000px;
      display: block;
    }
    .social h1 {
      margin: 0px;
    }
  }
  @media only screen and (max-width: 950px) {
    .footer .col {
      width: 33%;
    }
    .footer .col h1 {
      font-size: 14px;
    }
    .footer .col ul li {
      font-size: 13px;
    }
  }
  @media only screen and (max-width: 500px) {
      header{
          height:80vh;
      }
      #navbar-logo {
          margin-left:-1px!important;
      }
      .footer .col {
        width: 50%;
      }
      .footer .col h1 {
        font-size: 14px;
      }
      .footer .col ul li {
        font-size: 13px;
      }
       .col_right{
       width: 100%;
    text-align: center;
  }
  .col_right p{
      margin:0 auto;
  }
  .time_left_down {
    text-align: left;}
      header .row .column:nth-child(2) ul,header .row .column:nth-child(2) button{
          margin-left:5%!important;
      }
       header .row .column:nth-child(2) ul li{
          line-height:30px;
          font-size:22px;
      }
      header .row .column:nth-child(2) button{
          font-size:18px;
      }
         .brand_pics_div {
          text-align: center;
      }
      .brand_pics_div ul{
          padding: 0 5%;
      }
      .brand_pics_div ul li{
          padding: 0 6%;
      }
      
   .invest_div .invest-content  .images{
          padding-left:10px !important;
          padding-right:10px !important;
      }
      
      .time_right{
          padding-bottom:20px !important;
      }
       .how_it_works_div .how-content .how-data img{
           width:7.4rem;
           height:9.4rem;
       }
       .how_it_works_div .how-content .how-data:nth-child(2) .how-text{
        margin-top:-5%;
  }
  .how_it_works_div .how-content .how-data:nth-child(2) .how-text p{
      margin-top:-5%;
  }
         .how_it_works_div .how-content .how-data:nth-child(3) .how-text{
        margin-top:-5%;
  }
  .how_it_works_div .how-content .how-data:nth-child(3) .how-text p{
      margin-top:-7%;
     
  }
    .invest_div{
    height:fit-content;
    padding-bottom: 5rem;
  }
  .howthenew_silver_coin2{
    margin:-6rem 10% 4rem 40%;
    width: 60%;
    }
     .more_about_silvertop_coin{
        margin-bottom: -9rem;
        margin-left: 0%;
      }
       #socialm_copyright_div{
  text-align: center;
  }
   #social_media_div{
    float:none;
    margin:0 auto;
  }
  .contain-data{
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
  }
  .tables{width: 100%;
  height: auto;
  }
  .content-container .contents div {
    width: 55%;
  }
  .content-container .contents div small{
    margin-top: -.5rem;
  }
  .free_silver_div div{
          width:95%;
          text-align:center;
      }
       .benefits {
    padding-top: 2rem;
    padding-bottom: 2rem;
    width: auto;
    height: auto;
    margin-left:5%;
       }
  }
  @media only screen and (max-width: 340px) {
    .footer .col {
      width: 100%;
    }
  }
  /*--------foote responsive style ends-----------*/


  
 
  
  
  
  /*----------coin at bottom of more about bitsilver style start--------*/
  .bottom_coin_moreabt{
  height:40px;
  width:40px;
  margin-top:-2rem;
  }
  /*----------coin at bottom of more about bitsilver style ends--------*/