body {
  background-color: #0c0c0c;
  font-family: inter;
  overflow: hidden;
}

.main_container{
  position: relative;
  z-index: 1000;
}

/* -------------------- Content -------------------- */
.content_body {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;

  padding-top: 80px;

}

.content_container {
  width: calc(100% - 160px);
  height: calc(100vh - 115px);
  /* background-color: aqua; */

  margin-top: 20px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;

  

}

.content_container a{
  color: unset;
  text-decoration: unset;
}



.container_for_search_form{
    position: relative;
    z-index: 5000;

    
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}

.search_title_container{
    width: 300px;
    height: 80px;

    background-image: url(../images/search_title.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

}


.search_input_container{

    
    width: 630px;
    height: 50px;


    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;


    background: rgba(255, 255, 255, 0.05);
   
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);

    border: 0;
    border-radius: 8px;

    position: relative;
    z-index: 100;
    

}

.search_input_container::before{
    /* background-color: red; */

    content: "";
    position: absolute;
    inset: 0; /* کل کادر */
    border-radius: inherit; /* گوشه‌ها مثل خود box */
    padding: 1px; /* ضخامت border */
    background: linear-gradient(-100deg,#fff1, #fff2);
    
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0); 

    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; 
            mask-composite: exclude;
    z-index: 9; /* پشت متن قرار بگیره */
}

.search_input_container input{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: unset;

    color: #fff;
    font-family: inter;
    font-size: 16px;

    padding-left: 15px;
    padding-right: 15px;
    
    position: relative;
    z-index: 1000000;
}

.search_form_container{
    margin-top: 20px;
}


.search_form_container form{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;


}
.search_form_container button{
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: unset;
    cursor: pointer;


    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;


    background: rgba(255, 255, 255, 0.05);
   
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);

    border: 0;
    border-radius: 8px;

    position: relative;
    z-index: 100;


    margin-left: 10px;
    
}

.search_icon_container{
    width: 18px;
    height: 18px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    background-image: url(../icons/search.svg);
}


.search_form_container button::before{
    /* background-color: red; */

    content: "";
    position: absolute;
    inset: 0; /* کل کادر */
    border-radius: inherit; /* گوشه‌ها مثل خود box */
    padding: 1px; /* ضخامت border */
    background: linear-gradient(-100deg,#fff1, #fff2);
    
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0); 

    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; 
            mask-composite: exclude;
    z-index: 9; /* پشت متن قرار بگیره */
}












@keyframes wiggle {
  0% {
    transform: translateX(0) translateY(0) rotate(0);
  }
  12% {
    transform: translateX(calc(var(--wiggle-distance) * -0.6)) translateY(calc(var(--wiggle-vertical) * -0.5)) rotate(calc(var(--wiggle-rotate) * -0.6));
  }
  25% {
    transform: translateX(calc(var(--wiggle-distance) * 0.9)) translateY(calc(var(--wiggle-vertical) * 0.3)) rotate(calc(var(--wiggle-rotate) * 0.5));
  }
  45% {
    transform: translateX(calc(var(--wiggle-distance) * -0.45)) translateY(calc(var(--wiggle-vertical) * -0.2)) rotate(calc(var(--wiggle-rotate) * -0.35));
  }
  65% {
    transform: translateX(calc(var(--wiggle-distance) * 0.3)) translateY(calc(var(--wiggle-vertical) * 0.15)) rotate(calc(var(--wiggle-rotate) * 0.25));
  }
  85% {
    transform: translateX(calc(var(--wiggle-distance) * -0.15)) translateY(calc(var(--wiggle-vertical) * -0.05)) rotate(calc(var(--wiggle-rotate) * -0.12));
  }
  100% {
    transform: translateX(0) translateY(0) rotate(0);
  }
}

*{
    --wiggle-distance: 200px;     /* شدت جابجایی افقی */
    --wiggle-vertical: 20px;     /* کمی جابجایی عمودی برای طبیعی‌تر شدن */
    --wiggle-rotate: 1deg;      /* چرخش کم */
    --wiggle-duration: 60000ms;  /* مدت زمان یک سیکل */
    --wiggle-ease: ease /* منحنی نرمی */
}



.content_container::before{
    content: "";
    position: absolute;
    z-index: 4;
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle,#01D3F110, #FF9D0002);

    border-radius: 50%;

    filter: blur(200px);

    left: -200px;
    top: -300px;

    will-change: transform;
    animation: wiggle var(--wiggle-duration) var(--wiggle-ease) infinite;
}


.content_container::after{
    content: "";
    position: absolute;
    z-index: 4;
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle, #B50C0010, #F99B4E10);

    border-radius: 50%;

    filter: blur(100px);

    top: 200px;
    left: 200px;

    will-change: transform;
    animation: wiggle var(--wiggle-duration) var(--wiggle-ease) infinite;

    animation-delay: 10s;
}



body::after{
    content: "";
    position: absolute;
    z-index: 4;
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle, #FF9D0010, #FF9D0005);
    

    border-radius: 50%;

    filter: blur(100px);

    top: -200px;
    right: 200px;


    will-change: transform;
    animation: wiggle var(--wiggle-duration) var(--wiggle-ease) infinite;

    animation-delay: 20s;
}




/* ---------- responsive ---------- */

@media screen and (max-width: 1366px) {
  .navbar_container {
    width: calc(100% - 48px);
  }

  .content_container {
    width: calc(100% - 48px);
  }
}

@media screen and (max-width: 992px) {
  .navbar_container {
    width: calc(100% - 48px);
  }
  .content_container {
    width: 100%;
    /* height: unset; */
    position: absolute;
    top: 0;
    margin-top: 0;
    /* background-color: blue; */
    /* flex-flow: column-reverse; */
  }

  .pricture_container {
    width: 100%;
    height: 800px;
    border-radius: 10px;
    row-gap: 5px;
  }

  .desc_body {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .navbar_container {
    width: calc(100% - 48px);
    z-index: 10;
    margin-top: 15px;
    border-radius: 8px;
    padding: 4px;
    height: 35px;
    position: fixed;
  }

  .content_container {
    width: 100%;
    /* height: unset; */
    position: absolute;
    top: 0;
    margin-top: 0;
    /* background-color: blue; */
    /* flex-flow: column-reverse; */
  }

  .pricture_container {
    width: 100%;
    height: 500px;
    border-radius: 10px;
    row-gap: 5px;
  }

  .desc_body {
    width: 100%;
  }
  .more_container,
  .logo_container {
    width: 42px;
    height: 42px;
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(6px);
    border-radius: 10px;
  }

  .more_icon {
    width: 27px;
    height: 19px;
  }

  .person_picture {
    width: 100%;
    height: 100%;
  }

  .pricture_class {
    object-fit: cover;
    object-position: center;
    object-position: top center;

    width: 100%;
    height: 100%;
  }

  .search_title_container {
  width: 249px;
  height: 49px;
  }
  
  .search_input_container{
    width: 280px;
  }
}