@import url("https://fonts.googleapis.com/css2?family=Andada+Pro:ital,wght@0,400;0,600;1,400;1,600&display=swap");
:root{
  --main:#ef2006;
  --black:#000;
  --white:#fff;
  --font_family: "Montserrat";
  --color-bg: #1f2641;
  --color-bg1: #2e3267;
  --color-bg2: #424890;
  --color-primary: #6c63ff;
  --color-success: #00bf8e;
  --color-warning: #f7c94b;
  --color-danger: #f75842;
  --container-width-lg: 80%;
  --container-width-md: 90%;
  --container-width-sm: 94%;

  --transition: all 400ms ease;
}
html,
      body {
        position: relative;
        height: 100%;
        /* overflow-x: hidden; */
        box-sizing: border-box;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
        font-family: 'Andada+Pro', Helvetica, Arial, sans-serif;
      }

      .swiper {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
        margin: 50px 0;
      }

      .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 300px;
        height: 300px;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 1024px;
      }
      .swiper-slide .number{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 50%);
        opacity: 0.5;
        text-shadow: 4px 4px 4px rgba(255,255,255,0.5),
        -5px 0 4px rgba(255,255,255,0.5);
        font-size: 6.25rem;
        font-weight: 900;
    }
    /* another one */
    .container{
      width: 100%;
      min-height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 50px 8%;
      margin-bottom: 50px;
    }
    .gallery{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 25px;
    }
    .gallery img{
      width: 100%;
    }
    /* third section of gallery */
    .selector-container{
      max-width: 1300px;
      margin:  auto;
  }
  .row{
      display: flex;
      flex-wrap: wrap;
  }
  .portfolio{
      padding: 100px 7px;
      width: 100%;
      /* margin-top: 50px; */
  }
  .section-title{
      flex: 0 0 100%;
      max-width: 100%;
      margin-bottom: 40px;
  }
  .section-title h1{
      display: inline-block;
      font-size: 35px;
      text-transform: uppercase;
      font-weight: 700;
      color: #000;
      margin: 0 0 5px;
      position: relative;
  }
  .text-center{
      text-align: center;
  }
  .section-title h1:before{
      content: "";
      left: 0;
      position: absolute;
      height: 2px;
      right: 32%;
      background: var(--color-warning);
      bottom: 0px;
  }
  .portfolio .section-title h1:before{
      left: 30%;
  }
  .portfolio .filter-buttons{
      flex: 0 0 100%;
      max-width: 100%;
      margin-bottom: 20px;
  }
  .portfolio .filter-buttons ul{
      list-style: none;
      text-align: center;
      padding: 0;
      
  }
  .portfolio .filter-buttons ul li{
      display: inline-block;
      padding: 12px 20px;
        margin: 0px 8px;
        letter-spacing: 1px;
        cursor: pointer;
        border-radius: 10px;
      background: var(--color-bg1);
      color: var(--white);
      text-align: center;       
      border-radius: 1rem;
      box-shadow: 10px 10px 10px -10px
      rgba(0, 0, 0, 0.4), inset 10px 10px 10px -10px
      rgba(0, 0, 0, 0.8);
       transition: all 1s ease-in-out;
  }
  .portfolio .filter-buttons ul li:hover{
      box-shadow: 10px 10px 10px -10px
          rgba(136, 18, 190, 0.7), inset 10px 10px 10px -10px
          rgba(12, 170, 64, 0.9);
  }
  .portfolio .filter-buttons ul li.active{
      background: #03a9f4;
        color: #fff;
  }
  .portfolio .portfolio-gallery{
      display: flex;
      flex-wrap: wrap;
      flex: 0 0 100%;
      max-width: 100%;
  }
  .portfolio .portfolio-gallery .item{
      flex: 0 0 20%;
      max-width: 20%;
      position: relative;
      padding: 8px;
  }
  
  .portfolio .portfolio-gallery .item .inner{
      position: relative;
  }
  .portfolio .portfolio-gallery .item img{
      width: 100%;
      display: block;
      height: 300px;
      object-fit: cover;
  }