*::-webkit-scrollbar {
    width: 10px;
  }
  *::-webkit-scrollbar-track {
    background: #0059ff40;
  }
    
  *::-webkit-scrollbar-thumb {
    background-color: #002962;
    border-right: none;
    border-left: none;
  }
  
  @supports ( -moz-appearance:none ){
    * {
      scrollbar-width: thin;
      scrollbar-color: #002962 #0059ff40;
    }
  }
  
  
  * {
      box-sizing: border-box;
    }
    
    /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 700px) {
      .row {   
        flex-direction: column;
      }
      .main {
        padding: 20px;
        margin: auto;
        width: 100%;
      }
      .side {
        padding: 20px;
        margin: auto;
        width: 100%;
      }
    }
  
    @media screen and (min-width: 700px) {
      .main {
        margin-right: auto;
        padding-left: 20px;
        padding-right: 40px;
        padding-top: 20px;
        padding-bottom: 20px;
      }
      .side {
        margin-left: auto;
        padding-left: 40px;
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
      }
    }
  
    /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
      .navbar a:not(:first-child) {display: none;}
      .navbar a.icon {
        position: absolute;
        right: 0;
        top: 0;
        display: block;
      }
    }
    @media screen and (max-width: 600px) {
      .navbar.responsive {position: fixed;}
      .navbar.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
      }
      .navbar.responsive a {
        float: none;
        display: block;
        text-align: center;
      }
      .navbar a.navcenter {
        float: none;
        display: block;
        text-align: center;
      }
    }
    @media screen and (min-width: 600px) {
      .navbar a.right {
        float: right;
      }
      .navbar a.left {
        float: left;
      }
      .navbar a.navcenter {
        float: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    
    @keyframes opacity {
      from {opacity: 0;}
      to {opacity: 1;}
    }
    
    @keyframes bgtransition {
      from {background-color: rgba(0, 0, 0, 1);}
      to {background-color: rgba(0, 0, 0, 0.5);}
    }
    
    
  
    body {
      font-family: Arial, Helvetica, sans-serif;
      margin: 0;
      background-color: #000000;
    }
    
    .activated {
      background-color: #004d96;
    }
  
    .bg {
      background-color: #000000;
      background-image: url("./images/test.webp");
      width: 100%;
      height: 100vh;
      top: 0;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: fixed;
      z-index: -2;
    }
    .bg3 {
      background-color: #003278;
      background-image: url("/images/resurrection-concept-crucifixion-jesus-christ-cross-sunset.jpg");
      width: 100%;
      height: 100vh;
      top: 0;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: fixed;
      z-index: -2;
    }
    .bg2 {
      background-color: rgba(0, 0, 0, 1);
      width: 100%;
      height: 100vh;
      top: 0;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: fixed;
      z-index: -1;
      animation-name: bgtransition;
      animation-duration: 1s;
      animation-delay: 0s;
      animation-fill-mode: both;
    }
    
    .background {
      background-color: #000000;
      width: 100%;
      height: 100vh;
      top: 0;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
    }
    
    .description {
      background-color:rgba(0, 0, 0, 0.5);
      overflow: hidden;
      width: 100%;
      height: 200px;
      top: 0;
      background-position: center;
    }
  
    @media screen and (max-width: 1000px) {
      .foot {   
        flex-direction: column;
      }
      .footer1 {
        margin: auto;
      }
      .footer3 {
        margin: auto;
      }
    }
  
    @media screen and (min-width: 1000px) {
      .footer1 {   
        float: right;
      }
      .foot2 {
        max-width: 300px;
      }
      .footer3 {
        width:100%;
        float:left;
      }
      .textfoot {
        padding-bottom: 20px;
      }
    }
  
    .foot {
      display: -ms-flexbox; /* IE10 */
      display: flex;
      -ms-flex-wrap: wrap; /* IE10 */
      flex-wrap: wrap;
    }
    .foot1 {
      -ms-flex: 33%; /* IE10 */
      flex: 33%;
      padding: 20px;
    }
    .foot2 {
      -ms-flex: 34%; /* IE10 */
      flex: 34%;
      padding: 20px;
    }
    .foot3 {
      -ms-flex: 33%; /* IE10 */
      flex: 33%;
      padding: 20px;
    }
    .footer1 {
      max-width: 300px;
    }
    .footer2 {
      max-width: 300px;
      margin: auto;
    }
    .footer3 {
      max-width: 300px;
    }
    .texthead {
      font-family: "Poppins", sans-serif;
      font-weight: 700;
      text-align: left;
      position: relative;
      color: rgb(192, 192, 192);
      
    }
    .textfoot {
      text-align: left;
      position: relative;
      color: rgb(160, 160, 160);
    }
    .textfoot a{
      color: rgb(160, 160, 160);
      text-decoration: none;
    }
    .textfoot a:hover{
      text-decoration: underline;
    }
  
    .box {
      display: flex;
      flex-flow: column;
      min-height: 100vh;
    }
  
    .filler {
      background-color:rgba(0, 0, 0, 0.5);
      overflow: hidden;
      flex: 1 1 auto;
      width: 100%;
      top: 0;
      background-position: center;
    }
    .filler2 {
      background-color:rgba(0, 0, 0, 0.5);
      overflow: hidden;
      height: 100px;
      width: 100%;
      top: 0;
      background-position: center;
    }
  
    hr.footer {
      border: 2px solid rgb(0, 153, 255);
      border-radius: 2px;
    }
    p.first {
      margin-bottom: 0;
    }
    p.next {
      margin: 0;
    }
  
    .cover {
      font-family: "Poppins", sans-serif;
      font-weight: 700;
      background-color:rgba(0, 0, 0, 0);
      overflow: hidden;
      width: 100%;
      height: 35vh;
      top: 0;
      background-position: center;
    }
    
    .bumper {
      background-color:rgba(0, 0, 0, 0.5);
      overflow: hidden;
      width: 100%;
      height: 10vh;
      top: 0;
      background-position: center;
    }
    
    .image {
      background-image: url("./images/final_Nexint_banner.webp");
      background-color: #000000;
      height: 100vh;
      text-align: center;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0;
      position: relative;
      animation-name: opacity;
      animation-duration: 1s;
      animation-delay: 0s;
      animation-fill-mode: both;
    }
    
    .text {
      padding: 80px;
      text-align: center;
      position: absolute;
      top: 75%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      animation-name: opacity;
      animation-duration: 1s;
      animation-delay: 1s;
      animation-fill-mode: both;
      text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
    }
    
    .textcenter {
      padding: 70px;
      text-align: center;
      position: relative;
      color: white;
    }
    .textcentered {
      text-align: center;
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
    }
    
    /* Increase the font size of the h1 element */
    .text h1 {
      font-size: 40px;
    }
    
    /* Column container */
    .row {  
      display: -ms-flexbox; /* IE10 */
      display: flex;
      -ms-flex-wrap: wrap; /* IE10 */
      flex-wrap: wrap;
      background-color:rgba(0, 0, 0, 0.5);
    }
    
    /* Create two unequal columns that sits next to each other */
    /* Sidebar/left column */
    .side {
      -ms-flex: 50%; /* IE10 */
      flex: 50%;
      max-width: 600px;
    }
    
    /* Main column */
    .main {   
      -ms-flex: 50%; /* IE10 */
      flex: 50%;
      max-width: 600px;
    }
    
    .centered {   
      -ms-flex: 50%; /* IE10 */
      flex: 50%;
      padding: 20px;
      margin-left: auto;
      margin-right: auto;
      max-width: 750px;
    }
    
    .aboutme {
      background-color: #002962;
      width: 100%;
      padding: 20px;
      overflow: auto;
      color: white;
      text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    }
    
    .active, .titlebars:hover {
      background-color: #0043c070;
      color: black;
    }
    .titlebars.active {
      border-radius: 20px 20px 0px 0px;
    }
    
    .bottom {
      background-color:rgba(0, 0, 0, 0.5);
      padding: 0px;
      color: rgba(255, 255, 255, 0.25);
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      text-align: center;
    }
    .bottom a{
      color: rgba(255, 255, 255, 0.25);
      text-decoration: none;
    }
    .bottom a:hover{
      text-decoration: underline;
    }
  
    .content {
      padding: 0 18px;
      max-height: 0;
      overflow: auto;
      transition: max-height 0.2s ease-in-out;
      background-color: #00296280;
      color: white;
      border-radius: 0px 0px 20px 20px;
    }
  
    @supports ( -moz-appearance:none ){
      .content{
        scrollbar-width: none;
      }
    }
  
    .content::-webkit-scrollbar {
      width: 10px;
    }
    .content::-webkit-scrollbar-track {
      background: transparent;
    }
      
    .content::-webkit-scrollbar-thumb {
      background-color: #002962;
      border-right: none;
      border-left: none;
    }
  
    .content::-webkit-scrollbar-track-piece:end {
      background: transparent;
      margin-bottom: 20px;
  }
  
    .content::-webkit-scrollbar-track-piece:start {
      background: transparent;
  }
  
    .content a {
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      float: center;
      display: block;
      color: white;
      text-align: center;
      padding: 14px 20px;
      text-decoration: none;
      box-shadow: inset 0 0 0 0 #ffffff;
      -webkit-transition: ease-out 0.2s;
      -moz-transition: ease-out 0.2s;
      transition: ease-out 0.2s;
      border-radius: 15px 15px 15px 15px;
    }
  
    .content a:hover {
      background-color: #0059ff40;
      box-shadow: inset 0 100% 0 0 #0059ff40;
      color: black;
    }
  
    .content button {
      margin-left: auto;
      margin-right: auto;
      background-color: #00296200;
      color: white;
      text-align: center;
      padding: 14px 14px;
      text-decoration: none;
      box-shadow: inset 0 0 0 0 #ffffff;
      -webkit-transition: ease-out 0.2s;
      -moz-transition: ease-out 0.2s;
      transition: ease-out 0.2s;
      border-radius: 15px 15px 15px 15px;
      border: none;
    }
  
    .content button:hover {
      background-color: #0059ff40;
      box-shadow: inset 0 100% 0 0 #0059ff40;
      color: black;
    }
    
    .titlebars {
      text-align: center;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      background-color: #00308940;
      color: white;
      border: none;
      outline: none;
      box-shadow: inset 0 0 0 0 #0059ff40;
      -webkit-transition: ease-out 0.2s;
      -moz-transition: ease-out 0.2s;
      transition: ease-out 0.2s;
      border-radius: 20px 20px 20px 20px;
    }
  
    /* Style the top navigation bar */
    .navbar {
      display: none;
      overflow: hidden;
      background-color: #333;
      position: fixed; /* Set the navbar to fixed position */
      top: 0; /* Position the navbar at the top of the page */
      width: 100%; /* Full width */
      z-index: 1;
    }
    
    
    /* Style the navigation bar links */
    .navbar a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 20px;
      text-decoration: none;
      box-shadow: inset 0 0 0 0 #ffffff;
      -webkit-transition: ease-out 0.2s;
      -moz-transition: ease-out 0.2s;
      transition: ease-out 0.2s;
    }
  
    .navbar .icon {
      display: none;
    }
    
    /* Right-aligned link */
    
    
    /* Change color on hover */
    .navbar a:hover {
      background-color: #ddd;
      box-shadow: inset 0 100% 0 0 #ffffff;
      color: black;
    }
    
    .desctext {
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      font-size: 1rem;
      text-align: left;
      margin-left: 7px;
      margin-top: 15px;
      margin-right: 5px;
      line-break: auto;
      line-height: 22px;
      color: white;
      text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.75);
    }
  
    .desctext2 {
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      font-size: 1rem;
      text-align: left;
      margin-left: 7px;
      margin-top: 15px;
      margin-right: 5px;
      line-break: auto;
      line-height: 22px;
      text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.75);
    }
  
    .tooltip {
      position: relative;
      display: flex;
    }
    
    .tooltip .tooltiptext {
      visibility: hidden;
      width: 140px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      bottom: 150%;
      left: 50%;
      margin-left: -75px;
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    .tooltip .tooltiptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
    }
    
    .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
    }