@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
*{
    margin: 0;
    padding: 0;
}
html {
  overflow: scroll;
  overflow-x: hidden;
}
::-webkit-scrollbar {
  width: 0;  /* Remove scrollbar space */
  background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
  background: #FF0000;
}
body{
background: #f7f7f7;
background: linear-gradient(90deg, rgba(247, 247, 247, 1) 72%, rgba(255, 255, 255, 1) 100%);    background-repeat: no-repeat;
    background-size: auto;
    color: #363636;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    width: 100%;
    min-height: 100vh;
}
p{
    color:#363636;
}
.nav-bar{
    height: 27dvh;
    background: none;

}
.nav-links{
    position: absolute;
    right: 4em;
    top: 6em;
}
.nav-links a{
    text-decoration: none;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    color: #363636;
    margin: 0 15px 0 15px;
    font-size:1.2vw;
}
.nav-logo{
    margin-left: 2em;
}
.nav-logo img{
    width: 80px;
    height: 80px;
    filter: invert(1);
}

.footer{
    border-top: 2px solid rgb(219,219,219);
    background: none;
    color: rgb(219, 219, 219);
    font-family: 'Oswald', sans-serif;
    margin-top: 12vmin;
}

@media screen and (max-width: 600px) {
    .nav-links a{
        font-size:5vw;
        margin: 0 5px 0 5px;
    }
    .nav-links{
        right: 2em;
    }
    .nav-logo{
        margin-left: 1em;
    }
    .sect2{
        font-size: 12vmin;
    }
    .main{
        height: 50vh;
        width: 90%;
    }
    .sect1{
        width: 95%;
    }
    .sect3{
        width: 95%;
    }
 
  }


  @import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,700');

  @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
  

  
  *{transition: .5s;}
  

  
  .column{
    margin-top:3rem;
    padding-left:3rem;
    &:hover{
      padding-left:0;
      .card .txt{
        margin-left:1rem;
        h1, p{
          color:#363636;
          opacity:1;
        }
      }
      a{
        color: #363636;
        &:after{
        width: 10%;
        }
      }
    }
  }
  .card{
    border-radius: 0px;
    min-height:170px;
    margin: 0px 5px 0px 5px;
    padding: 1.7rem 1.2rem;
    border: none;
    border-radius: 0;
    color:#363636 ;
    letter-spacing: .05rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    /* box-shadow: 0 0 21px rgba(0,0,0,.27); */
    .txt{
      margin-left:-3rem;
      color: #363636;
      z-index: 1;
      h1{
        font-size:1.5rem;
        color: #363636;
        font-weight: 300;
        text-transform: uppercase;
      }
      p{
        font-size:.7rem;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        letter-spacing: 0rem;
        margin-top:33px;
        opacity:0;
        color: #363636;
      }
    }
    a{
      z-index:3;
      font-size: .7rem;
      color:#363636;
      margin-left:1rem;
      position:relative;
      bottom: -.5rem;
      text-transform: uppercase;
      &:after {
        content:"";
        display: inline-block;
        height: 0.5em;
        width: 0;
        margin-right: -100%;
        margin-left: 10px;
        border-top: 1px solid #363636;
        transition: .5s;
      }
    }
    .ico-card{
      position:absolute;
      top: 0;
      left:0;
      bottom:0;
      right: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    i{
      position: relative;
      right: -50%;
      top:60%;
      font-size: 12rem;
      line-height: 0;
      opacity: .2;
      color:#363636;
      z-index: 0;
     }
  }
.ico-card{
  /* background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(228, 228, 228, 0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(211, 211, 211, 0.4) 120%) #f7f7f7; */
 background-blend-mode: multiply,multiply;
 
}



  @media screen and (max-width: 995px) {
    .card{
      margin-top: 20px;
    }
    h1{
      margin-left: 40px;
    }
 
  }