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

body{
  width: 100%;                                                                         
  margin: 0 auto;
}

.container{
    margin: 0 auto;
    max-width: 90%;
  }

  ul, li{
    margin: 0 auto;
    padding: 0;
    list-style: none;
  }

  a{
    text-align: center;
    font-weight: 500;
    font-size: 17px;
    color: #000;
    text-decoration: none;
  }

  a:hover{
    color: rgba(217,60,131);
  }

  /* header */
  .header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    box-shadow: 0px 1px 1px 0px rgb(122 122 122 / 50%);
    backdrop-filter: blur(5px);
    background: hsla(0,0%,100%,.5);
  }

  .header-wrapper{
    backdrop-filter: blur(5px);
    background: hsla(0,0%,100%,.5);
    padding-left: 40px;
    padding-right: 40px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* header-block1 */
  .header-blocks1{
    border: 0.1mm ridge rgba(0, 0, 0, 0.2);
  }

  .header-blocks1:hover{
    background: rgba(217,60,131);
    }

  .header-menu > li:hover ul{
    display: block;
  }

  .cateoryulk{
    backdrop-filter: blur(5px);
    width: 187px;
    transition: all 0.3s ease-out;
    visibility: hidden;
    display: block;
    opacity: 0;
    margin-top: 17px;
    right: 0;
  }

  .cateorylik{
    top: 0;
    width: 187px;
    height: 30px;
    text-align: center;
    position: relative;
    display: list-item;

}

  .cateorylik:hover .cateoryulk{
    transition: all 0.3s ease;
    visibility: visible;
    opacity: 1;
    display: block;
  }

  .cateoryli2{
    top: 0;
    position: relative;
    width: 187px;
  }

  .cateoryli2:hover{
    background-color: rgba(217,60,131);;
  }

  .cateoryulk > li:hover ul{
    width: 187px;
    display: block;
    box-shadow: 0 0 3px rgb(122 122 122 / 50%);
    top:0px;
    right: -187px;
  }

  .cateoryulk1{
    position: absolute;
    display: none;
  }

  .navtittles2{
    position: relative;
    text-align: center;
    display: block;
    width: 100%;
    height: 30px;
    top: 5px;
  }

  .navtittles2:hover{
    color: #fff;
  }
  /* header-blocks1 end*/

  /* header-block2 */
  .header-block2{
    margin-right: -187px;
  }

  .header-block-2{
    display: none;
  }
  /* header-block2 end */

  /* header-block3 */
  .header-btn{
    display: list-item;
    padding: 0;
    margin: 0;
  }

  .header-btn li:hover > ul{
    display: block;

  }

  .imgnav{
    display: none;
  }

  .cateoryli{
    display: block;
    padding-left: 15px;
    padding-right: 15px;
  }

  .cateoryul{
    border-radius: 5px;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cateoryli1{
    display: none;
    padding: 10px;
  }

  .tittle-hello{
    display: none;
  }

  .cateoryl{
    display: none;
  }

  /* header-block3 end */

  /* header-menu */
  .hm{
    overflow: hidden;
    position: absolute;
    top: 25%;
    left: 25%;
    border: 2px solid #000;
    width: 50%;
    padding: 80px 0;
    cursor: move;
    box-sizing: border-box;
  }

  .hm1{
    overflow: hidden;
    position: relative;
    top: 25%;
    left: 25%;
    border: 2px solid #000;
    width: 50%;
    padding: 80px 0;
    cursor: move;
    box-sizing: border-box;
  }

  .hm1:before {
    content: "";
    background:hsla(0,0%,100%,.5);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: absolute;
    width: 110%;
    height: 110%;
    top: -5%;
    left: -5%;
    z-index: 1;
    -webkit-filter: blur(10px);
    filter: blur(10px);
  }

  /* header end */

  /* intro */

  .intro{
    background: rgba(251, 251, 251, 0.7);
    z-index: 1;
    padding-top: 80px;
    height: 100%;
  }

  .navign{
    background: #fff;
  }

  @media screen and (min-width : 1000px) and (max-width : 1100px){

    .header-block2{
      display: none;
    }

    .header-block-2{
      display: block;
      margin-right: -171px;
    }

  }

  @media screen and (max-width : 1000px) {

    /* header-block3 */

    .cateoryul{
      width: 160px;
      margin-top: 15px;
      margin-top: 20px;
      right: 20px;

      position: absolute;
      display: block;
      transition: all 0.3s ease-out;
      visibility: hidden;
      overflow: scroll;

      opacity: 0;
      border-radius: 5px;
      box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.5);
      background: rgba(255, 255, 255);
    }

    .imgnav{
      display: block;
      align-items: center;
    }

    .header-btn:hover > .cateoryul{
      transition: all 0.3s ease;
      visibility: visible;
      opacity: 1;
      display: block;
    }

    /* header-block3 end */

    .tittle-hello{
      display: block;
      font-size: 60px;
      color:#fff;
      text-align: center;
      padding-top: 150px;
    }

    .navign{
      background: rgb(255, 255, 255, 0.9);
    }

    .intro{
      background-size: 100%;
      background-position: center center;
      background-attachment: fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      background-repeat:no-repeat;
      background-image: url(../assets/img/XXXL.jpeg);
      min-height: 100%;
      width: 100%;
      height: auto;
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
    }

    .header-block2{
      margin-right: -25px;
    }

    .cateorylik{
      backdrop-filter: blur(5px);
      display: none;
    }

    .cateoryli1{
      display: block;
      margin: 0;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 15px;
      padding-right: 15px;
    }

    .cateoryli{
      padding-top: 5px;
      padding-bottom: 5px;
    }

    .cateoryl{
      display: block;
  }


  }