@import url(https://fonts.googleapis.com/css?family=Barlow);

/*!
 * Bootstrap v4.6.0 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
    --blue: #3490dc;
    --indigo: #6574cd;
    --purple: #9561e2;
    --pink: #f66d9b;
    --red: #e3342f;
    --orange: #f6993f;
    --yellow: #FEFF63;
    --green: #38c172;
    --teal: #4dc0b5;
    --cyan: #6cb2eb;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #3490dc;
    --secondary: #6c757d;
    --success: #38c172;
    --info: #6cb2eb;
    --warning: #FEFF63;
    --danger: #e3342f;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: "Barlow", sans-serif;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
    display: block;
}

body {
    margin: 0;
    font-family: "Barlow", sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.6;
    color: #212529;
    text-align: left;
    background-color: #f8fafc;
    padding-top: 105px;
}

.fixed-top-2 {
    margin-top: 56px;
}


.poppins-thin {
    font-family: "Barlow", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.poppins-extralight {
    font-family: "Barlow", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.poppins-light {
    font-family: "Barlow", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.poppins-regular {
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.poppins-medium {
    font-family: "Barlow", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.poppins-semibold {
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.poppins-bold {
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.poppins-extrabold {
    font-family: "Barlow", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.poppins-black {
    font-family: "Barlow", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.poppins-thin-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.poppins-extralight-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.poppins-light-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.poppins-regular-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.poppins-medium-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.poppins-semibold-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.poppins-bold-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.poppins-extrabold-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 800;
    font-style: italic;
}

.poppins-black-italic {
    font-family: "Barlow", sans-serif;
    font-weight: 900;
    font-style: italic;
}

.zoom {
    transition: transform .2s; /* Animation */
    padding: 50px;
    background-color: green;
    width: 200px;
    height: 200px;
    margin: 0 auto;
  }

  .zoom:hover {
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }

  .grid-box {
    display: flex;
    flex-direction: column;
  }

  .grid {
    /* border: 1px solid #fff; */
    overflow: hidden;
    transition: all .5s linear;
  }

  .grid:hover img {
    transform: scale(1.1);
    transition: all .5s linear;
  }


  .text-overlay {
    padding: 1px;
    backdrop-filter: blur(10px) brightness(90%);
  }

  .card-overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 1;
        visibility: none;
        transition: .5s ease;
        background-color: #393839;
  }


  .overlay{
    background: rgba(45, 43, 43, 5);
    background: -moz-linear-gradient(0deg, rgb(45, 43, 43) 0%, rgba(255, 255, 255, 0)200%);
    background: -webkit-linear-gradient(0deg, rgb(45, 43, 43) 0%, rgba(255, 255, 255, 0)200%);
    background: linear-gradient(0deg, rgb(45, 43, 43) 0%, rgba(255, 255, 255, 0)200%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=1);
    display: block;
    position: absolute;
    height: 30%;
    width: 100%;
    top: 70%;
    opacity: 0.7;
    z-index: -3;
  }