::-webkit-scrollbar{
    width: 0.5rem;
}
::-webkit-scrollbar-track{
    background-color: #ecf6ffe7;

}
::-webkit-scrollbar-thumb{
    background-color: #6d7fef88;
    border-radius: 10px;
    

}
.line2{
    margin: auto;
    margin-bottom: 0px;
    width: 85%;
    height: 1px;
    background-image: linear-gradient(90deg,#e2080800,#160a0af2,#160a0af2,#160a0af2,#e2080800 );
}
.line{
    margin: auto;
    margin-bottom: 0px;
    width: 85%;
    height: 1px;
    background-image: linear-gradient(90deg,#e2080800,#160a0af2,#160a0af2,#160a0af2,#e2080800 );
}

/* fallback */
@font-face {
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(/resources/notosansarabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
  }
  @font-face {
    font-family: 'farsi';
    font-style: normal;
    src: url(/resources/Tanha-FD.woff2) format('woff2');
  }
  @font-face {
    font-family: 'iran';
    font-style: normal;
    src: url(/resources/Parastoo-FD.woff2) format('woff2');
  }
 .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }
.hide{
    display: none;
}
.show{
    display: block;
  }
.gray_login{
    
    width: 100%;
    height: 100%;
    background-color: #453f3fa7;
    text-align: center;
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    animation-duration: 0.3s;
}
.gray {
    display: none;
    width: 100%;
    height: 100%;
    background-color: #453f3fa7;
    text-align: center;
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    animation-duration: 0.3s;
}
html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #f1f1f1;
    
}
a {
    color: #f1ebeb;
    text-decoration: none;
}
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background-color: #21202000;
    font-family: "Noto Sans Arabic", sans-serif;
}

.sideMenu{
    box-shadow: -10px 10px 16px -6px rgba(0,0,0,0.5);
    text-align: right;
    line-height: 2rem;
    animation-duration: 0.3s;
    padding: 20px;
    padding-left: 30px;
    position: fixed;
    color: #ffffff;
    height:100%;
    width: 300px;
    overflow-y: visible;
    top: 0px;
    right: 0;
    display: none;
    background:  linear-gradient(135deg,#01aaaf,#016699 );
    z-index: 1;

}
.main_menu{
    margin-top: 50px;
}
.sideMenu i{
    color: #1d1c1c;
    float: right;
    padding-left: 10px;
    padding-right: 5px;
    margin-top: 6px;
    display: block;
    
}
.sideMenu a{
    
    display: block;
    
    
}
.sideMenu li{
    margin-top: 8px;
    margin-bottom: 8px;
   
    animation: hoverback 0.7s cubic-bezier(0.075, 0.82, 0.165, 1) 0s 1 normal forwards;   
 }
.sideMenu a{
    animation: hoverback 0.7s cubic-bezier(0.075, 0.82, 0.165, 1) 0s 1 normal forwards;
}
.sideMenu a:hover{
    
    animation: hover 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s 1 normal forwards;
    
 }
 @keyframes hover {
    from {
        padding-right: 0px;
       
    }
  
    to {
        padding-right: 20px;
        
    }
  }
  @keyframes hoverback {
    from {
        padding-right: 20px;
        
    }
  
    to {
        padding-right: 0px;
      
    }
  }
.scrolled{
    animation-name: slide_in_down;
    animation-duration: 0.5s;
    top:-52px;
}
.unscrolled{
    animation-name: slide_in_up;
    animation-duration: 0.5s;
    top:0px;
}
@keyframes slide_in_up {
    from {
        top: -52px;
    }
  
    to {
        top: 0px;
    }
  }
@keyframes slide_in_down {
    from {
        top: 0px;
    }
  
    to {
        top: -52px;
    }
  }
.header_div{
    background:  linear-gradient(5deg,#228dea,#3674d2,#0e95cf );
    width: 100%;
    height: 53px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #3d87c8;
    border-radius: 0 0 10px 10px;
    box-shadow: 0px 10px 16px -6px rgba(0,0,0,0.5);
    position: fixed;
    z-index: 3;
    left: 0;
    right: 0;
    
}
.login_header {
    user-select:none;
    align-items: center ;
    line-height: 1.0;
    margin: 5px;
    margin-left: 2%;
    text-align: left;
    padding: 0;
    justify-content: space-between;
    position: relative;
    display: flex;
    width: 120px;
    float: left;
}
.login_text{
    color: beige;
    padding: 1px;
    font-size: 15px;
}
.loginlogo{
    width: 35px;
    display: flex;
    justify-content: center;
    margin  : auto;
}
.header_center {
    width: 200px;
    display: block;
    
    align-items: center;
    justify-content: center;
}
.logo_img{
    margin-top: 10px;  
    max-width: 300px;
    width: 100%;  
    mix-blend-mode: multiply;
    filter: contrast(1);
}
.sideMenuButton{
    display: table-cell;
    float: right;
    margin-right: 1%;
    padding-right: 10px;
    padding-left: 0;
    cursor: pointer;
    user-select:none;
}
.navbtn{
    margin-top: 18%;
    font-size: 2rem;
}
.close_btn{
    
    font-size: 20px; 
    color:rgb(142, 9, 9);
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 48%;
    cursor: pointer;
}
.login_page_popup{
    max-width: 300px;
    width: 80%;
    height:250px;
    
    justify-content: center;
    align-items: center;
    background:  linear-gradient(120deg,#2a88d9,#468aef,#0e95cf );
    background-color: #9ca8b4;
    border-radius: 10px;
    box-shadow: 0px 10px 16px -6px rgba(0,0,0,0.5);
    position: fixed;
    top:80px;
    left: 50%;
    transform: translate(-50%, 0);
    
    
    
}
.login_page_popup p{
    float: right;
    margin:10px;
    padding-top: 15px;
    height: 20px;
    width: auto;
    line-height: 1px;
    font-size: 18px;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.login_page_popup input[type=number]{
    background-color: #e6f9de;
    border-radius: 5px;
    border-style: none;
    margin:10px;
    padding-left: 10px;
    height: 35px;
    width: 90%;
    font-size: 1rem;
    color: #000000;
    font-family: "Noto Sans Arabic", sans-serif;
}
.login_page_popup input[type=button]{
    background-color: #1b9100;
    border-radius: 5px;
    border-style: none;
    margin:10px;
    padding: auto;
    height: 39px;
    width: 90%;
    max-width: 280px;
    font-size: 1rem;
    color: #ffffff;
    font-family: "Noto Sans Arabic", sans-serif;
    box-shadow: 0px 10px 16px -6px rgba(0,0,0.5,0.5);

}
.login_page_popup i{
}
.whatsapp_button_icon {
    background-color: #2c9714;
    
    position: fixed;
    bottom: 25px;
    left: 25px;
    border-radius: 100px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    box-shadow: 3px 3px 11px -1px rgba(0,0,0,0.14);
    -webkit-box-shadow: 3px 3px 11px -1px rgba(0,0,0,0.14);
    -moz-box-shadow: 3px 3px 11px -1px rgba(0,0,0,0.14);
    display: flex;
    text-align: center;
    align-items: center;
    z-index:99;
}
.whatsapp_button_icon:hover {
    background-color: #31c72f;
    
    position: fixed;
    bottom: 20px;
    left: 20px;
    border-radius: 100px;
    width: 70px;
    height: 70px;
    cursor: pointer;
    box-shadow: 5px 5px 11px -2px rgba(0,0,0,0.94);
    -webkit-box-shadow: 3px 3px 11px -1px rgba(0,0,0,0.14);
    -moz-box-shadow: 3px 3px 11px -1px rgba(0,0,0,0.14);
    display: flex;
    text-align: center;
    align-items: center;
    z-index:99;
}
.whatsapp_button_icon2 {
    background-color: #35c2258f;
    position: fixed;
    bottom: 15px;
    left: 15px;
    border-radius: 100px;
    width: 80px;
    height: 80px;
    cursor: pointer;
    box-shadow: 3px 3px 11px -1px rgba(0,0,0,0.24);
    -webkit-box-shadow: 3px 3px 11px -1px rgba(0,0,0,0.24);
    -moz-box-shadow: 3px 3px 11px -1px rgba(0,0,0,0.24);
    display: flex;
    text-align: center;
    align-items: center;
    z-index:99;
    
}
.whatsapp_button_icon3 {
    
    position: fixed;
    bottom: 15px;
    left: 15px;
   
    border: 3px solid #41fd443b;
   
    border-radius: 100px;
    width: 80px;
    height: 80px;
    cursor: pointer;
    
    display: flex;
    text-align: center;
    align-items: center;
    z-index:99;
}
.whatsapp_button_icon a{
    font-size: 30px;
    margin: auto;
   
    color: #ffffff;
   
   
}

@media (max-width: 400px){
    .loginlogo{
        display: none; 
    }
    .login_header {
        align-items: center ;
        line-height: 1.0;
        margin-left: 5px;
        text-align: left;
        padding: 0;
        justify-content: center;
        position: relative;
        display: flex;
        width:80px;
        float: left;
        margin: 5px;
        display:block;
    }
    .login_text{
        color: beige;
        padding: 2px;
        margin: auto;
        width: 60px;
        
    }
}
@media (min-width: 1200px){
    @keyframes slide_in_up {
        from {
            top: 0;
        }
      
        to {
            top: 0px;
        }
    }
    @keyframes slide_in_down {
        from {
            top: 0px;
        }
        
        to {
            top: 0;
        }
    }
    .header_div{
        top: 0px;
    }
    .gray {
        background-color:  #ffffff00;
        
    }
}

.mainContent{
    text-align: right;
    background:  linear-gradient(180deg,#f6f6f8,#f8f9faee,#ffffff );
    width: 100% ;
    padding: 10px;
    padding-top: 0rem;

}

.buttonProducts{
    background:  linear-gradient(160deg,#1b65a6,#092754,#08195c );
    border-radius: 40px;
    height: 10px;
    padding: 10px; 
    color: #FFC400;
    text-align: right;
    font-weight: 900;
    font-size: 15px;
    box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.1);
   
}
.buttonProducts:hover {
    background:  linear-gradient(170deg,#0c4f8a,#2d558d,#0c1c5a );
   
    box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.1);
   
        
}

.onMainphto{
    text-shadow:  0px 2x 2px 2px rgba(0,0,0,0.9);
    background: linear-gradient(90deg,#ffffff0b,#ffffff74,#ffffffac,#e3e9f65b,#ffffff10);
    font-weight: bold;
    font-size: 30px;
    width: auto;
    padding: 0px;
    margin: auto;
}
.heading1{
    color: #011b53;
    font-weight: bold;
    font-size: 55px;
    width: fit-content  ;
    margin: auto;
    padding: 10px;
    line-height: 50px;
}
.heading2{
    color: #041c3f;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    padding: 10px;
    width: fit-content;
    margin: auto;
}
.heading3{
    color: #03142d;
    line-height: 1.8rem;
    font-size: 20px;
    text-align: center;
    padding: 10px;
    width: fit-content;
    margin: auto;
   
}
.heading4{
    color: #03142d;
    line-height: 1.5rem;
    font-size: 18px;
    text-align: center;
    padding: 2px;
    margin: 5px;
    width: fit-content;
    margin: auto;
   
}
.brand{
    color: #070217;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    padding: 5px;
    width: fit-content;
    margin: auto;
    color: #1b1a46;
    background: #ffffff03;
    text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC, 2px 3px 1px #EEEEEE, 4px 3px 1px #CCCCCC, 3px 4px 1px #EEEEEE, 5px 4px 1px #CCCCCC, 4px 5px 1px #EEEEEE, 6px 5px 1px #CCCCCC, 5px 6px 1px #EEEEEE, 7px 6px 1px #CCCCCC;
}
.brand2{
    color: #110642;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    padding: 5px;
    width: fit-content;
    margin: auto;
}

.box{
    margin: 5px auto;
    border-radius: 30px;
    box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.8),0px 0px 38px 0px rgba(0,0,0,0.1);
    height: 160px;
    width: 160px;
    justify-content: center;
    text-align: center ;
    background-color: #ffffffbd;
}
.imageProducts{
    background-position: center;
    background-size: cover;
    width: 100%;
   
    text-align: center;
    /*background-repeat:no-repeat;*/
    height: 50%; /*CHANGE TO THE HEIGHT OF YOUR BANNER*/
    max-height: 550px;
    min-height: 350px;
    background-image: url("/images/Alpin\ aluminum.png");
   
}

.ProductsGrid{
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit,minmax(170px,1fr));
}

.mag_div{
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
}
.mag{
    display: block;
    box-shadow:  0px 2px 8px 0px rgba(89, 0, 255, 0.5);
    border-radius: 7px;
    background-color: #dbf4ef50;
    width: 300px;
    height: 260px;
    margin: auto;
    padding: auto;
    padding-bottom: 50px;
    justify-content: center;
    text-align: center ;
}
.space_bottom{
    padding: 8px 18px;
    margin-top: 15px;
    font-size: 15px;
}
.mag img{
    border-radius: 7px 7px 0px 0px;
    width: 100%;  
    height: 150px;
}
.mag_img2{
    border-radius: 7px 7px 0px 0px;
      
    max-height: 100%;
    width: auto;
    
}
.title{
    margin-bottom: 15px;
}
footer{
    background:  linear-gradient(225deg,#3790a9,#255aaf );
    background-color: #4e79df;
    width: 100%;
    padding: 10px;
    border-radius:11px 11px 0 0 ;
    box-shadow: 0px 10px 16px 6px rgba(0,0,0,0.5);
    
    
}
.footer_div{
    padding-top: 10px;
    margin-bottom: 30px;
    margin-top: 10px;
}
.footer_info{
   
}
.grid_footer{
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2,1fr);
    grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
}

.card{
    margin: auto;
}
.social li{
    display: inline-block;
    padding-right: 1rem;
    box-sizing: border-box;
    text-align: right;
    list-style-type:none;
    font-size: 28px;
}
.social{
    padding: 10px;
    border-radius: 5px;
    background-color: #a1b8ff;
    text-align: right;
    justify-content: center;
    display: inline-block;
    width: 90%;
}
.social ul{
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    display: block;
    list-style-type: disc;
}
.social .aparat{
    
    padding-bottom: 0px;
    height: 40px;
    justify-content: center;
    align-items: center;
    
}
.social img{
    width: 40px;
    height: 40px;
    padding: 0px;
}
.fa-facebook-square{
    color: #2196F3;
}
.fa-paper-plane{
    color: #03A9F4;
}
.fa-twitter-square{
    color: #03A9F4;
}
.fa-rss-square{
    color: #FF5722;
}
.fa-instagram{
    color : #E91E63;
}
.footer_bottom{
    justify-content: center;
    margin: 0px 10%;
    text-align: right;
}
.footer_info{
    text-align: right;
    color: #ffffff;
    width: 90%;
    min-width: 230px;
    max-width: 260px;
}
.footer_info p{
    line-height: 5px;
    padding: 10px 0px;
    color: #ffffffdb;
    font-size: 1rem;
}
.footer_info .head{
    line-height: 5px;
    padding: 20px 5px;
    color: #f2eded;
    font-size: 20px;
    font-weight: 900;
}
.footer_info i{
    float: left;
    text-align: left;
    line-height: 5px;
    padding: 0px 20px;
    color: #ffffffdb;
    font-size: 20px;
    font-weight: 300;
}
.footer_nav p{
   
    color: #fffffff2;
    font-weight: bold;
}
.footer_nav a{
   display: block;
   height: 1.8rem;
}
.footer_nav{
    text-align: right;
    padding: 10px;
    text-align: right;
    color: #ffffff;
    width: 90%;
    min-width: 230px;
    max-width: 260px;
}
.main_menu span ,p{
    color: #000000;
    font-size: 20px;
 }
.main_menu li{    
        box-sizing: border-box;
        text-align: right;
        list-style-type:none;
        font-size: 28px;
    }

.footer_trust{
    display: flex;
    margin: 10px;
    justify-content: center;
    position: relative;
    text-align: center;
    color: white;
    z-index: 0;
}
.footer_trust img{
    width: 140px;
    height: 140px;
    padding: 0px;
    margin: 0px;
    opacity: 0.9;
    filter: blur(2px);
   
}
.onfooter_trust {
    color: #001b5e;
    position: absolute;
    bottom: 40px;
    left: auto;
  }    
.footer_bottom{
    text-align: center;
    font-size: 12px;
}

.main_title{
    color: #ffffff;
    text-shadow: 2px 2px #000000e6;
    background: linear-gradient(95deg,#2018ff00,#195bf4,#3369e7,#5383f1,#527de200);
    font-weight: bold;
    font-size: 30px;
    width: auto;
    height: 150px;
    text-align: center;
    justify-content: center;
    padding-top: 5%;
    margin: auto;
    border-radius: 30px;
    margin: 20px auto;
}
.page_img{
    width: 90%;
    max-width: 500px;
    height: inherit;
    margin: 30px;
    border-radius: 20px;
}
.apin_al_img{
    background-image: url("/images/alpin\ photo\ \(5\).jpg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position-y: 40%;
    background-blend-mode: lighten;
}
.apin_al_img2{
    background-image: url("/images/alpin\ شمش\ آلپین.jpg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position-y: 40%;
    background-blend-mode: lighten;
}