@font-face{
    font-family:"B homa";
    src:url("../fonts/BHoma.ttf") format("woff"),
    url("../fonts/BHoma.ttf") format("opentype"),
    url("../fonts/BHoma.ttf") format("truetype");
}

$color: #000;
$color-bg: #000000;




[class*="fontawesome-"]:before {
  font-family: 'B homa', sans-serif,  ;
}
/*------------Alert Massage------------*/
/* پایه‌ی همه‌ی alert ها */
.alert {
  padding: 20px;
  margin: 15px 20px;
  border-radius: 5px;
  color: #fff;
  font-family: sans-serif;
  position: absolute;
    top: 40px;
            z-index: 1001;
}

/* رنگ‌ها برای انواع مختلف */
.alert-danger {
  background-color: #f44336; /* قرمز */
}

.alert-success {
  background-color: #4CAF50; /* سبز */
}

.alert-info {
  background-color: #2196F3; /* آبی */
}

.alert-warning {
  background-color: #ff9800; /* نارنجی */
}

/* دکمه بستن */
.alert .closebtn {
  margin-left: 15px;
  color: #fff;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.alert .closebtn:hover {
  color: black;
}


/* ---------- GENERAL ---------- */

* {
  box-sizing: inherit  
}

html {
  box-sizing: border-box;
  height: 100%;
}

body {
	background: $color-bg;
	color: $color;
  font: normal 14px/1.618em "B homa", sans-serif;
  line-height: 1.5;
  margin: 0;
  min-height: 100%;
}


.indexbody {
	background-color: #5f9ea0;
    background-size: 15% auto;
    vertical-align: bottom;
    position: fixed;
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
	font: normal 14px/1.618em "B homa", sans-serif;
	-webkit-font-smoothing: antialiased;
		background: $color-bg;
	color: $color;
	backdrop-filter:blur(1px);
}



/* ---------- ALIGN ---------- */

.align {
  /*align-items: center;*/
  vertical-align:top;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---------- GRID ---------- */

.grid
{
  	background: #FFFFFF;
	opacity: 1.75;
    margin-left: auto;
    margin-right: auto;
    max-width: 90%;
    width: 400px;
}
.grid-Welcome
{
  	background: #FFFFFF;
	opacity: 1.75;
    margin-left: auto;
    margin-right: auto;
    max-width: 90%;
    width: 450px;
}
.grid-NewUser
{
  	background: #FFFFFF;
	opacity: 1.75;
    margin-left: auto;
    margin-right: auto;
    max-width: 90%;
    width: 450px;
}
.grid-NewSenf
{
  	background: #FFFFFF;
	opacity: 1.75;
    margin-left: auto;
    margin-right: auto;
    max-width: 90%;
    width: 400px;
}

.ButDarkhastBut
{
                border-radius: 0 0 20px 20px; 
                width:100%; 
                z-index: -1;
}  
.ButtonLoginSabtenam
{
                 
                width:100%; 
} 
.BotEmkanat
{
    background-color:#b2dbf1;
    width:100px;
    height:100px;
    border-style: none;
    border-radius: 10px;
}
.ButtonLogin{ width:95%}
.TextBox1{width: 80%;}
.TextBox2{width: 80%;}
.ButtonLoginSabtenam{ width:10%;position: relative;width:80% ; border-radius:50px; border:10px solid red}
.ButSabternamTamin{ text-align: center;justify-content: center;border-radius:50px!important;}  
.ButtonLoginSabtenamFinal{ width:10%;position: relative;width:80% ; border-radius:50px;;background-color:#4CAF50!important;}
.ButtonLoginSabtenamFinal:disabled{ background-color:Silver!important }

    @media screen and (max-height: 700px) 
    {
        .grid 
        {
    	      background: #FFFFFF;
	          opacity: 1.75;
              margin-left: auto;
              margin-right: auto;
              max-width: 90%;
              width: 400px;
              height:280px;
        }  
        .grid-Welcome
        {
    	      background: #FFFFFF;
	          opacity: 1.75;
              margin-left: auto;
              margin-right: auto;
              max-width: 90%;
              width: 400px;
              height:240px;
        }   
        .grid-NewUser
        {
    	      background: #FFFFFF;
	          opacity: 1.75;
              margin-left: auto;
              margin-right: auto;
              max-width: 90%;
              width: 400px;
              height:280px;
        }                  
        .grid-NewSenf
        {
    	      background: #FFFFFF;
	          opacity: 1.75;
              margin-left: auto;
              margin-right: auto;
              max-width: 90%;
              width: 400px;
              height:290px;
                         /*   overflow-y: auto;*/
                          
        }         
        .dit-log
        {
            visibility:hidden;
        }  
        .dit-logDigiMITA
        {
            position: absolute;
            Top: 42px;
            left: 0px;
            visibility:hidden;
            height:0px;
            height:240px;
        }        
        .ButDarkhast
        {
            position: absolute;
            bottom: 42px;
            right: 20px;
            
        } 
        .ButDarkhastHelp
        {
            position: absolute;
            bottom: 0px;
            left: 30px;
            background-color: White;
            padding: 20px 0px 10px 0px;
            border-radius: 20px 20px 0px 0px;
            box-shadow: 0px 0px 50px #000000;
        }         
        .ButDarkhastBut
        {
                    position: fixed;
                    top: 40px;
                    right: 10px;
                     width:150px;
                     height:58px;
                     border-radius: 50px 50px 50px 50px;  
                     /*box-shadow: Black 0px 0px 10px;*/
                    display: inline-block;
                    /*width: 50%;*/
                    margin: 10px 10px 10px 0px;
                            z-index: -1;
                    
        }  
        .ButSabtername
        {
        position: absolute;
        bottom: 42px;
        left: 10px;
        width: 350px;
                    /* border-radius: 20px 20px 0px 0px;  
                     box-shadow: Black 0px 0px 10px;*/
                   

        }   
        .ButSabternamTamin
        {
        position: absolute;
        text-align: center;
        justify-content: center;
        bottom: 42px;
        left: 10px;
           border-radius:50px!important;
 

        }                  
        .ButtonLoginSabtenam{ width:10%;position: relative;width: 80px;height: 80px; ; border-radius:50px; border:10px solid red} 
        .ButtonLoginSabtenamFinal { width:10%;position: relative;width: 80px;height: 80px; border-radius:50px;} 
        .TaeedFinal        
        {
        position: fixed;
        text-align: center;
        justify-content: center;
        /* bottom: 98px; */
        /* left: 168px; */
        background-color: white;
        /* width: 100%; */
        border-radius: 0px 0px 20px 20px;
        padding: 5px 10px;
    }
            
        }                  
    }
@media screen and (max-width: 530px) and (max-height: 400px)
        {
            .grid-Welcome
            {
    	          background: #efefef;
	              opacity: 1.75;
                  margin-left: auto;
                  margin-right: auto;
                  max-width: 90%;
                  width: 400px;
                  height:150px;
            }     
            .grid-NewUser
            {
    	          background: #FFFFFF;
	              opacity: 1.75;
                  margin-left: auto;
                  margin-right: auto;
                  max-width: 90%;
                  width: 400px;
                  height:280px;
            }              
            .Login{    visibility: hidden;}     
            .divUserPass{    padding: 0px 0px 0px 62px;position: relative;right: 0px;top: -50px;height: 30px;}
            .ButtonLogin{ width:10%;position: relative;top: -71px;left: -110px;height: 57px;width: 73px;}
            .ButtonLoginSabtenam{ width:10%;position: relative;height: 80px;width: 80px; border-radius:50px;border-radius:50px;height: 80px;width: 80px }
            .ButtonLoginSabtenamFinal{ width:10%;position: relative;height: 80px;width: 80px; border-radius:50px;border-radius:50px;height: 80px;width: 80px; }     
            .TextBox1{width: 75%;margin: 0px 0px 0px 20px;}
            .TextBox2{width: 75%;margin: 0px 0px 0px 20px;}
            .PassUndo{margin: -55px 0px 0px 0px;}
            .ButDarkhastBut{visibility: hidden; }  
            .dit-logDigiMITA{background-color:Silver}  
        }  
  }
   
/* ---------- LOGIN ---------- */

#login h2 
{
    background: #0093ff;

    font-family: B Homa;
	border-radius: 20px 20px 0 0;
	color: #FFFFFF;
	font-size: 28px;
	padding: 20px 26px;
	margin: 0px;
}

#login h2 span[class*="fontawesome-"] {
	margin-right: 14px;
}

#login fieldset {
	background: #fff;
	border-radius: 0 0 20px 20px;
	padding: 20px 26px;
}

#login fieldset p {
	color: #777;
	margin-bottom: 14px;
}

#login fieldset p:last-child {
	margin-bottom: 0;
}

#login fieldset input {
	border-radius: 3px;
}

#login fieldset input[type="email"], #login fieldset input[type="password"] {
	background: #eee;
	color: #777;
	padding: 4px 10px;
	width: 100%;
}

#login fieldset input[type="submit"] {
	background: #33cc77;
	color: #fff;
	display: block;
	margin: 0 auto;
	padding: 4px 0;
	width: 100px;
}

#login fieldset input[type="submit"]:hover {
	background: #28ad63;
}

.shodowbox
{
      border: 0px solid;
  padding: 0px;
  box-shadow: 0px 0px 50px #FFFFFF;
  border-radius: 20px 20px;
  
}
.shodowboxCircle
{
      border: 0px solid;
  padding: 0px;
  box-shadow: 0px 0px 30px #FFFFFF, 0px 0px 30px #FFFFFF, 0px 0px 30px #FFFFFF;
  border-radius: 20px 20px;
  
}
.shodowboxCircle1
{
    
    padding: 0px;
    box-shadow: 0px 0px 50px #b9b9b9;
    /* border-radius: 20px 20px; */
    border-radius: 10px; /*50%;*/
    width: 350px;
    background-color:f1f1f1;
    
    
  
}
.w3-animate-zoom {animation:animatezoom 1.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-fading{animation:fading 10s }@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:1}}
.w3-animate-fading1{animation:fading 15s }@keyframes fading{0%{opacity:0}50%{opacity:0.5}100%{opacity:1}}

.opacityi
{
    
}

.shodowtextbox
{
      border: 0px solid;
  padding: 10px;
  box-shadow: 0px 0px 10px #888888;
  
}
.FontNumberEnglish{font-family: Arial;}
.fontn{font-family: B Homa; }
.fontAlarm{font-family: B Homa; font-size:x-large}
.logtext
{
  opacity: 0.75;
 
 }
 
 .logfoter
 {
    padding: 4px 0;
 }
 
 .footer1, .footer .HeadBar .HeadBar1 {
  /*position: fixed;*/
  left: 0;
  right: 0;
  z-index: 99;
  text-align: center;
  background-color: darkcyan;
}
.footer3  { position: absolute;bottom: 50px;left:0px; direction:rtl; background-color: darkcyan; color:White;z-index: 99; }
.footer2  { position: absolute;Top: 50px; left:0px;  color: #fff;direction:rtl;  color:White;z-index: 99; font-family:B Titr; font-size:large ; font-weight:bold;padding:10px}
.footer1 { position: absolute;bottom: 0; background: black ;direction:rtl;  color:White;z-index: 100; left:0px; padding:15px }
.footer { position: absolute;bottom: 0px; background: darkcyan ;direction:rtl;  color:White;z-index: 99; left:0px; padding:20px }
.footer-Endpage { position: fixed;bottom: 0px; background: Black ;direction:rtl;  color:White; left:0px;padding:5px; z-index:50 }
.HeadBar  { position: fixed;Top: 0px; direction:rtl;  color:White;z-index: 99; left:0px;  padding: 10px;background-color: Black; text-align:right}
.HeadBar1  { position: fixed;Top: 0px; direction:rtl;  color:White;z-index: 99;text-align: left; right:100px;  text-align: right; padding: 10px;}
.BilbordCompany { position: absolute;bottom: 0; background: darkcyan; color: #fff;direction:rtl; background-color: darkcyan; color:White;z-index: 99; width:100% }
 
 /*------------------------------*/
 
 .floating-Top {
  width: 50px;
  height: 50px;
  background-color: #FFFFFF;
  color: #FFF;
  border-radius: 50%;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
  position: fixed;
  Top: 20px;
  Left: 20px;
  font-size: 24px;
  line-height: 56px;
  cursor: pointer;
  
}
 /*------------------------------*/
 
 .floating-Top {
  width: 50px;
  height: 50px;
  background-color: #FFFFFF;
  color: #FFF;
  border-radius: 50%;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
  position: fixed;
  Top: 20px;
  Left: 20px;
  font-size: 24px;
  line-height: 56px;
  cursor: pointer;
  
}

/*-----------------------------*/
.floating-button3 {

  color: #297dff;
  border-radius: 50%;
  text-align: center;
  /*box-shadow: 2px 2px 3px #FFFFFF;*/
  position: fixed;
  bottom: 100px;
  left: 50%;
  font-size: 24px;
  /*line-height: 113px;*/
  cursor: pointer;
}
.floating-button2 
{
  color: #297dff;
  width: 50px;
  height: 50px;
  /*background-color: #FFFFFF;*/
  border-radius: 50%;
  text-align: center;
  /*box-shadow: 2px 2px 3px #FFFFFF;*/
  position: fixed;
  bottom: 40px;
  left: 50%;
  font-size: 24px;
  line-height: 56px;
  cursor: pointer;
}
.floating-button {
  width: 50px;
  height: 50px;
  background-color: #FFFFFF;
  color: #FFF;
  border-radius: 50%;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 24px;
  line-height: 56px;
  cursor: pointer;
  
}
.floating-button:hover {
    transform: scale(1.2);
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}


    .flip-button {

      background-color: #FFFFFF;
      color: white;
      font-size: 18px;
      border: none;

      cursor: pointer;
      perspective: 1000px;
      transform-style: preserve-3d;
      animation: flipY 10s infinite;
      backface-visibility: visible;
    }

    @keyframes flipY {
      0%   { transform: rotateY(0deg); }
      50%  { transform: rotateY(180deg); }
      100% { transform: rotateY(360deg); }
    }



.floating-button-Right {
  width: 100px;
  height: 100px;
  background-color: #FFFFFF;
  color: #FFF;
  border-radius: 50%;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
  position: fixed;
  bottom: 20px;
  Left: 20px;
  font-size: 24px;
  line-height: 56px;
  cursor: pointer;
}


ace{
   
@font-face{
    font-family:"B homa";
    src:url("../fonts/BHoma.ttf") format("woff"),
    url("../fonts/BHoma.ttf") format("opentype"),
    url("../fonts/BHoma.ttf") format("truetype");
}
@font-face{    
    font-family:"B Traffic";
    src:url("../fonts/BTraffic.ttf") format("woff"),
    url("../fonts/BTraffic.ttf") format("opentype"),
    url("../fonts/BTraffic.ttf") format("truetype");    
}
@font-face{    
    font-family:"B Titr";
    src:url("../fonts/BTitrBd.ttf") format("woff"),
    url("../fonts/BTitrBd.ttf") format("opentype"),
    url("../fonts/BTitrBd.ttf") format("truetype");    
}
@font-face{
    font-family:"B jadid";
    src:url("../fonts/BJadidBd.ttf") format("woff"),
    url("../fonts/BJadidBd.ttf") format("opentype"),
    url("../fonts/BJadidBd.ttf") format("truetype");
}       
@font-face {
  font-family: "Wingdings";
  src: url("../fonts/wingdings.ttf") format("truetype");
}

.arrow {
  font-family: "Wingdings", sans-serif;
  font-size: 24px;
}

      
      
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
          width: 100%;

      /*font-family: sans-serif;*/
    }

    body, html {
      height: 100%;
      scroll-behavior: smooth;
    }

    .header {
      height: 100vh;
      background: cadetblue;
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 20px;
    }

    .header h1 {
      font-size: 3em;
      margin-bottom: 10px;
    }

    .header p {
      font-size: 1.2em;
    }

    .details {
      padding: 40px 20px;
      background-color: #f5f5f5;
    }

    .details h2 {
      margin-bottom: 20px;
      color: #333;
    }

    .details p {
      line-height: 1.8;
      color: #555;
    }

    @media screen and (max-width: 768px) {
      .header h1 {
        font-size: 2em;
      }

      .details {
        padding: 20px;
      }
    }
    
    .container {
      display: flex;
      gap: 20px;
    }

    .box1 {
      flex: 1;
      padding: 20px;
      background-color: darkorange;
      text-align: center;
    }
    .box2 {
      flex: 1;
      padding: 20px;
      background-color: cornflowerblue;
      text-align: center;
    }
    .box3 {
  background-color: white;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;

    }

    @media (max-width: 768px) {
      .container {
        flex-direction: column;
      }
    }

            
 der:none;display:inlin
.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-green,.w3-hover-green:hover{color:#000000!important;background-color:#4CAF50!important; font-weight:bold}
.w3-green-w,.w3-hover-green-w:hover{background-color:#4CAF50!important; font-weight:bold}
.w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
.w3-Blue,.w3-hover-Blue:hover{color:#FFFFFF!important;background-color:#0098ff!important}
.w3-LightBlue,.w3-hover-LightBlue:hover{color:#000!important;background-color:#c0f1f9!important}
.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
.w3-White,.w3-hover-White:hover{color:#000000!important;background-color:#FFFFFF!important}
.w3-font-Homa-small{direction:rtl;font-family: 'B Homa'; color: #000000; font-size:medium }
.w3-font-Homa-small-W{direction:rtl;font-family: 'B Homa'; color: #FFFFFF; font-size:medium }




        #image-container  
        {

            border-radius: 0%;  
            height: 50px; /* ارتفاع div */  
            overflow: hidden; /* پنهان کردن تصاویر خارج از div */  
            position: relative; /* موقعیت نسبی برای کنترل تصاویر */  
           
            width: 100%; /* که باعث می‌شود کانتینر به اندازه 70٪ عرض والد باشد */  
        } 

        .image {  
            width: 50px; /* عرض تصاویر */  
            height: 100%; /* ارتفاع تصاویر */  
            position: absolute; /* موقعیت مطلق برای حرکات */  
        }  
        .Center 
        {
            text-align:center;
            
            
        }
        
        

        .blink {  
            animation: blinkingText 1s infinite;  
        }  
        @keyframes blinkingText {  
            0% {opacity: 1;}  
            50% {opacity: 0;}  
            100% {opacity: 1;}  
        }  
       
@keyframes resize {  
    0% {  
        font-size: medium;  
    }  
    50% {  
        font-size: large;  
    }  
    100% {  
        font-size: medium;  
    }  
}  

.text-effect {  
    animation: resize 2s infinite; /* 2 ثانیه و بی‌نهایت بار تکرار می‌شود */  
}      

@keyframes lightning {  
    0%, 50%, 100% { text-shadow: 0 0 5px white; }  
    25%, 75% { text-shadow: 0 0 20px yellow, 0 0 30px red; }  
}  

.lightning-text {  
    animation: lightning 2s infinite;  
}    


@keyframes slide {  
  0% { transform: translateX(-100); }  
  50% { transform: translateX(10px); }  
  100% { transform: translateX(30); }  
}  

.moving-text {  
  display: inline-block;  
  animation: slide 2s infinite;  
} 

.w3-Header
{
    position:absolute;
    z-index:10000;
    top: 20px;
    text-align: left;
    left: 0px;
    top:20px;
    line-height: 0.5;
    width: 100%;
    background-color: #55bccd;
        color:White;
        height:40px;
    padding: 0px 0px 0px 10px;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
        
 } 
 
  .grid-layoutDIGIMITA  
{
    text-align:center;
    display: grid;
    
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);
    grid-auto-flow: dense;
    padding: 10px;
}  
.grid-layoutS 
{
    text-align:center;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-gap: 10px;
    grid-auto-rows: minmax(10px, auto);
    grid-auto-flow: dense;
    padding: 10px;
}
.grid-item {
    padding: 1rem;
    font-size: x-small; /*14px;*/
    font-weight: bold;
    text-transform: uppercase;
    color: #929796;
    background-color: background-image: radial-gradient(red 5%, yellow 15%, green 60%);
    border-radius: 5px;
    &:nth-child(odd) {
        background-color: #eee;
    }
}
 
 

  /* فلش پایین صفحه */
  .scroll-down {
    position: absolute;
    bottom: 20px;
    
    transform: translateX(-50%);
    font-size: 2em;
    
    cursor: pointer;
    animation: bounce 2s infinite;
    z-index: 1000;
  }

  @keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
  }



@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#LabelTextdigimita {
  animation: fadeIn 2s ease-out forwards;
}

#Button11 {
  animation: fadeIn 2s ease-out forwards;
}

#LinkButton4 {
  animation: fadeIn 2s ease-out forwards;
}

#LinkButton5 {
  animation: fadeIn 2s ease-out forwards;
}






@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(120px);
        backdrop-filter: blur(0);
    }
    to {
        opacity: 0.85;
        transform: translateY(0);
        backdrop-filter: blur(10px);
    }
}

.glass-slide-up {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    color: #fff;
    padding: 20px;
    opacity: 0; /* شروع از مخفی */
    animation: slideUp 0.8s ease-out forwards;
}