.viewport{
    display: none;
}
.responsive_nav{
    display: none;
}
@media only screen and (max-width: 720px){
    .viewport{
        display: flex;
    }
    .top_nav{
        display: none;
    }
    .top_nav *{
        overflow-x: hidden;
        display: none;
    }
    .main_nav *{
        overflow-x: hidden;
        display: none;
    }
    .responsive_nav{
        position: sticky;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: auto;
        overflow-x: hidden;
        top: 0px;
        z-index: 9999998;
    }
    .top_responsive_nav{
        width: 85%;
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content:center;
        padding-bottom: 0.7rem;
        margin-top: 0.5rem;
    }
    .top_responsive_nav_left_side{
        display: flex;
        align-items: center;
    }
    .bottom_responsive_nav{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 0.5rem;
        border-bottom: solid 1.5px rgba(103, 103, 103, 0.112);
    }
    .searching_box{
        width:12rem;
        display: flex;
        flex-flow: row;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
        border-radius: 0.4rem;
    }
    .fa-magnifying-glass{
        margin-left: 0.5rem;
        color: rgba(0, 0, 0, 0.618);
    }
    .login_singnin{
        margin-top: 0.6rem;
        background-color: rgba(255, 255, 255, 0);
        padding: 0rem;
        display: flex;
        align-items: center;
        margin-right: 0.4rem;
        line-height: 1rem;
        flex-wrap: nowrap;
        flex-direction: column;
    }
    .login_singnin span{
        margin-right: 0.4rem;
        font-weight: 900;
        color: rgb(81, 81, 81);
        font-size: 0.7rem;
    }
    .shoping_basket {
        background-color: rgba(255, 255, 255, 0);
        padding: 0;
    }
    .connect_us_container{
        display: flex;
        flex-flow: column;
        margin-top:0rem;
    }
    .connect_atena_form_header{
        color: #ff0000;
    }
    .connect_us_right_side_header_sub_desc{
        text-align: center;
        font-size: 0.8rem;
        line-height: 1.5rem;
    }
    .connect_info_form{
        margin-top: 2rem;
    }
    .rows_input{
        display: flex;
        flex-flow: column;
    }
    .connect_us_container_right_side{
        width:100%;
    }
    .connect_us_container_left_side{
        width:100%;
        margin: 0rem;
    }
    .form_main_img{
        display: none;
    }
    .connectus_footer{
        display: none;
    }
    .input_items{
        width: 95%;
    }
    .colums_input{
        margin-top: 0rem;
    }
    .input_items{
        margin-top: 0.5rem;
    }
    .input_label{
        font-size: 0.8rem;
        margin-right: 0.8rem;
    }
    .sending_form_btn{
        width: 70%;
        padding: 0.5rem;
        z-index: 99;
        position:relative;
        margin: 1rem;
        margin-right: 15%;
    }
    .connect_us_ways_container{
        margin-top: 5rem;
    }
    .left_form_icon{
        transform: none;
    }
    .top_responsive_nav_right_side{
        display: flex;
        flex-flow: row wrap;
        transform: translateY(-3px);
        align-items: center;
    }
    .navigation_up_text_container a{
        white-space: nowrap;
    }
}
/* ---- Start: New CSS for Google AI Shadow Effect ---- */
/* تمام کدهای @keyframes و کلاس‌های .brand- قبلی را حذف کنید */

/* کی‌فریم‌های جدید برای سایه متحرک Google AI */
@keyframes google-ai-shadow-pulse {
  0% {
    box-shadow: 0 4px 6px rgba(66, 133, 244, 0.4); /* آبی */
  }
  15% {
    box-shadow: 0 4px 8px rgba(0, 255, 85, 0.747); /* بازگشت به آبی */
  }
  25% {
    box-shadow: 0 4px 7px rgba(255, 21, 0, 0.45); /* قرمز */
  }
  50% {
    box-shadow: 0 4px 6px rgba(0, 255, 132, 0.4); /* سبز */
  }
  75% {
    box-shadow: 0 4px 7px rgb(244, 203, 0); /* زرد */
  }
  85% {
    box-shadow: 0 4px 7px rgb(244, 0, 0); /* زرد */
  }
  100% {
    box-shadow: 0 4px 6px rgba(66, 133, 244, 0.4); /* آبی */
  }
  
}

/* کلاس جدید برای اعمال سایه متحرک */
.google-ai-shadow {
  /* اعمال انیمیشن سایه */
  animation: google-ai-shadow-pulse 10s ease-in-out infinite;
  /* اضافه کردن یک transition برای smooth شدن hover و scale */
  transition: all 0.3s ease-in-out; 
}

/* ---- End: New CSS for Google AI Shadow Effect ---- */