/*-------------------- loder ---------------------*/

#loder{

    position: fixed;

    background: #051522;

    height: 100vh;

    width: 100%;

    display: grid;

    place-items: center;

    z-index: 9999;

}

.con-loder{

    position: relative;

    width: 200px;

    height: 200px;

}

.lo-sa{

    position: absolute;

    display: block;

    width: 40%;

    height: 40%;

    border-radius: 50%;

    animation: speed 2s infinite ease-in-out;

}
.net{
    text-decoration: none;

}
.one{

    background: var(--bg-color);

    animation-delay: 1.5s;

}

.two{

    background: var(--white-color);

    animation-delay: 1s;

}

.three{

    background: var(--bg-color);

    animation-delay: 0.5s;

}

.four{

    background: var(--white-color);

}

@keyframes speed{

    0%{

        transform: translate(0%);

        border-radius: 50%;

    }

    25%{

        transform: translate(150%) scale(0.5);

        border-radius: 0%;

    }

    50%{

        transform: translate(150%, 150%);

        border-radius: 50%;

    }

    75%{

        transform: translate(0, 150%) scale(0.5);

        border-radius: 0%;

    }

}

@media(max-width:600px){

    .con-loder{

        position: relative;

        width: 100px;

        height: 100px;

    }

}

/*------------------------------ loder ---------------------*/

#sticky.fixed{

    position: sticky;

    top: 0px;

    z-index: 1000;

    background-color: rgba(255, 255, 255, 0);

    margin: 0;

    height: 70px;
}

.head_address{

    display: flex;

    justify-content:center;
    margin-left: 12%;

}

.head_address .address{

    display: flex;

    align-items: center;

    padding: 0px 1%;

    margin: 1%;

    font-size: var(--fs-small);

    border-right: 2px solid var(--any-color);

}
.head_address .address:nth-child(4){
    border: none;
}
.head_address img{
    position: absolute;
    width: 115px;
    top: 0px;
    left: 61px;
    

}

.head_address .address i{

    margin-right: 16px;

    font-size: var(--fs-heading);

    font-weight: var(--fw-6);

    color: var(--bg-color);

    cursor: pointer;

    transition: var(--transition);

}

.head_address .address i:hover{

    color: var(--any-color);

}

.address .t_add{

   color: var(--bg-color);

   font-weight: var(--fw-6);

   cursor: pointer;

}

.address .t_add a{

   font-size: var(--fs-nav);

   font-weight: var(--fw-6);

   text-decoration: none;

   color: var(--any-color);

   transition: var(--transition);

}

.address .t_add a:hover{

    color: var(--bg-color);

}
.head_address .nav_icon_mobile{
    display: flex;
    align-items: center;
    color: var(--white-color);
    /* visibility: hidden; */
    display: none;
}
.head_address .nav_icon_mobile i{
    margin: 5px;
}
.address_m{
    
    padding: 0px 1%;
    margin: 1% 0%;
    font-size: var(--fs-nav);
  /* visibility: hidden; */
    display: none;
}
.nav_i_m{
    height: 100%;
    display: flex;
    align-items: center;
}
.nav_i_m a{
    text-decoration: none;
    color: var(--white-color);
}
.address_m .t_add_m{

   color: var(--white-color);

   font-weight: var(--fw-6);

   cursor: pointer;

}
.address_m i{
    color: var(--white-color);
    font-size: var(--fs-nav);
    margin: 5px;
}
.address_m .t_add_m a{

   font-size: var(--fs-nav);

   font-weight: var(--fw-6);

   text-decoration: none;

   color: var(--white-color);

   transition: var(--transition);

}

@media(max-width:1200px){
    .head_address img{
    width: 100px;
    left: 40px;
}
}
@media(max-width:1015px){

    .head_address{

        background-color: var(--bg-color);

        justify-content: space-between;
        margin-left: 0%;
        padding: 0px 2%;

    }

    .head_address .address{

        border: none;

        padding: 0px;
        margin: 5px;

        margin: 5px;
        display: none;

    }

    .head_address  img{

       display: none;

    }

    .address .t_add{

     display: none;

    }

    .head_address .address i{

    font-size: 16px;

    margin: 10px 2px;

    color: white;

   }

   .address h1{

    display: none;

   }
      .head_address .nav_icon_mobile{
    /* visibility: visible; */
    display: block;
}
.address_m{
    /* visibility: visible; */
    display: block;
}


}

@media(max-width:650px){

    .add-main{

        display: none;

    }
    .head_address .address{
   display: none;
}

}

/* -------------------- nav-bar ------------------ */

#sticky{

    position: relative;

    display: flex;

    background-color: var(--bg-color);

    align-items: center;

    justify-content: center;

    margin-top: 34px;

    flex-wrap: wrap;

    height: 45px;

}

#sticky .main{
    font-family: var(--heading-font);

    background-color: var(--dbg-color);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    margin: 0;

    padding: 1% 0%;

    border-radius: 30px;

    width: 80%;

    position: absolute;

    top: -35px;
    right: 35px;
    box-shadow:0 -4px 7px 0px #9d9d9dad;

}
.main1{
    box-shadow: 0 4px 7px 0px #ebebeb91 !important;
    top: 0px !important;
    right: unset !important;
    transition: var(--transition);
}
.main .nav_icon{

    margin: 0px 2% 0px 10%;

}

.main .nav_icon i{

    margin: 3px;

    color: var(--white-color);

    font-size: var(--f-size);

    transition: var(--transition);

    cursor: pointer;

}

.main .nav_icon i:hover{

    color: rgb(190, 190, 190);

}


.main .appon{
    /* width: 20%; */
      background-color: #07CCEC;

    font-weight: var(--fw-6);
    border-radius: 20px;
    box-shadow: 2px 2px 5px #363636;
    padding: 8px;
    color: var(--white-color);
    font-size: var(--fs-nav);
       z-index: 50;
       position: relative;
       overflow: hidden;
}
.main .appon::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1000;
    left: -100%;
    top: 0%;
      background-color: #16a5b8;
    transition: var(--transition);
    z-index: -50;
}
.main .appon:hover:before{
left: 0%;
}
.main .appon a{
    text-decoration: none;
    color: var(--white-color);
}


#sticky .main .home_i{

    font-size: var(--fs-nav);

    color: var(--white-color);

    transition: 1s;

}

#sticky .main .home_i:hover{

    color: #757575;

    transition: 1s;

}

#sticky .main .main_li{

    list-style: none;

    padding: 0px 15px;

    font-size: var(--fs-small);

    color: #575656;

    font-weight: var(--fw-6);

    position: relative;

    cursor: pointer;

    border-right: 1px solid rgb(185, 185, 185);

    font-family: var(--heading-font);

}
#sticky .main #last_li{
     border-right: none;
}

#sticky .main .main_li .link_border{

    text-decoration: none;

    color: var(--white-color);

    padding-bottom: 43%;

    transition: 1s;

    font-size: var(--fs-nav);

    font-weight: var(--fw-6);

}

#sticky .main .main_li .link_border:hover{

    color: rgb(206, 206, 206);

    transition: 1s;

}

#sticky .main .main_li .link_border::before{

    content: '';

    position: absolute;

    bottom: -5px;

    left: 0px;

    width: 0%;

    height: 2.5px;

    background-color: var(--primary-color);

    transition: .5s;

}

#sticky .main .main_li .link_border:hover::before{

    width: 100%;

}

#sticky .main .main_li i{

    color: var(--white-color);

    padding-left: 7px;

    padding-bottom: 5px;

    margin-left: 5px;

    transition: .5s;

    transform: rotate(-90deg);

}

#sticky .main .main_li:hover i{

    transform: rotate(0deg);

}

#sticky .main .main_li .sub{

    border-top: 2px solid rgb(114 114 114);

    background-color: var(--white-color);

    box-shadow: 0px 3px 10px 0px rgba(100, 100, 100, 0.5);

    width: 12vw;

    padding: 1%;

    position: absolute;

    display: none;

    transition: 1s;

    z-index: 1200;

    font-weight: 100;

}

#sticky .main .main_li .sub a{

    text-decoration: none;

}

#sticky .main .main_li .sub a .sub_li{

    padding: 3% 7%;

    list-style: none;

    transition: 1s;

    border-bottom: 1px solid #26469c45;

}

#sticky .main .main_li .sub a .sub_li{

    line-height: 35px;

    color: #454545;

    text-decoration: none;

    transition: .5s;

    font-size: 13px;

    text-transform: uppercase;

}

#sticky .main .main_li:hover .sub{

    display: block;

    top: 45px;

    left: -12px;

    transition: 1s;

}

#sticky .main .main_li .sub a .sub_li:hover{

    background-color: rgba(0, 0, 0, 0.1); 

}

#sticky .main .main_li .sub a .sub_li:hover {

    padding-left: 5%;

    transition: .5s;

}

#sticky .main .main_li .sub a .sub_li :hover::before{

    width: 0%;

}
.appon_m{
    padding: 5px 12px;
    background-color: var(--bg-color);
    color: var(--white-color);
    font-size: var(--fs-small);
    font-weight: var(--fw-6);
    border-radius: 20px;
    box-shadow: 2px 2px 5px #36363685;
    cursor: pointer;
}
.appon_m a{
    text-decoration: none;
    color: var(--white-color);
}
#sticky_mobile{

    display: none; 

 }

 .hamburger{

    display: none;

    cursor: pointer;

 }

 .hamburger .bar{

    display: block;

    width: 25px;

    height: 3px;

    margin: 3px auto;

    -webkit-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

    background-color: rgb(0, 0, 0);

 }

 .sub_mobile{

    display:none;

  }

  .main_mobile{

    position: absolute;

    z-index: 1222;

    width: 100%;

  }

 @media(max-width:1290px){

    .main .nav_icon{

    /* display: none; */

    }

    .main .appon{

        margin-left: 10px;

    }

  }
 @media(max-width:1015px){

    #frist_page header .head_address{

        flex-wrap: wrap;

    }

    #sticky{

        display: none;

     }

    #sticky_mobile{

       display: block;

   }

    .hamburger{

        display: block;

        margin-right: 4%;

     }

     .hamburger.active .bar:nth-child(2){

        opacity: 0;

     }

     .hamburger.active .bar:nth-child(1){

        transform: translateY(8px)rotate(45deg);

     }

     .hamburger.active .bar:nth-child(3){

        transform: translateY(-4px) rotate(-45deg);

     }

     .logo_mobile{

        display: flex;

        justify-content: space-between;

        align-items: center;

        margin: 1%;

    }

     .logo_mobile a{

        width: 85%;
                margin: 0px 10px;

     }
.space{
    display: flex;
    justify-content: end;
    align-items: center;
}
     .logo_mobile img{

        width: 60px;
        margin-left: 5%;

     }

    #sticky_mobile .main_mobile{

        background-color: #103530de;

        box-shadow: 3px 3px 10px 0px rgba(40, 40, 40, 0.5);

    }

    #sticky_mobile ul{

        padding-left: 0rem;

    }

    .main_li_mobile{

        margin: 1% 4%;

        padding: 3% 0px;

        border-bottom: 1px solid var(--white-color);

        color: var(--white-color);

        list-style: none;

    }

    .main_li_mobile:last-child{

        border-bottom: none;

    }

    .main_li_mobile .link_border{

        color: white;

        text-decoration: none;

        padding-right: 50%;

    }

    .main_li_mobile i{

        padding: 2%;

    }

    .main_li_mobile .sub_mobile{

       background-color: #e9e9e9;

    }

    .sub_mobile a{

        text-decoration: none;

        color: rgb(82, 82, 82);

    }

    .sub_mobile a:hover{

        color: var(--bac-clr);

    }

    .sub_mobile .sub_li{

        padding: 3% 0px;

        margin: 1% 2%;

        border-bottom: 1px solid black;

        text-transform: uppercase;

    }

 }