/* html */
html {
  scroll-behavior: smooth;
}

/* scroll bar */
/* width */
::-webkit-scrollbar {
  width: 14px;
}

/* Track */
::-webkit-scrollbar-track {
  border: 3px solid #E8E8E8;
  border-radius: 20px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: gray;
  border: 3px solid #E8E8E8;
  border-radius: 20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #5D5D5D;
}


/* Body Color */
body {
    background: linear-gradient(-45deg, #ee7752, #4e4991, #23a6d5, #23d5ab);
	background-repeat: no-repeat;
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


/* nav */	
nav{
    background: #33006f;
    background: linear-gradient(153deg, rgba(114,14,158,1) 0%, rgba(75,0,130,1) 47%, rgba(51,0,111,1) 100%);
    padding:5px;
	width:500px;
	height: 28px;
	box-shadow: 2px 2px 6px;
    border-top-left-radius:12px;
    border-top-right-radius:12px;
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px;
	border-attachment: fixed;
	border: 2px solid white;
}
	
nav a{
    color: #FFFFFF;
    padding:5px;
    text-decoration:none;
    transition:0.3s;
    }
	
.border-nav {
	color: #FEBE10;
    font-family: GN;
	font-size: 20px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}

/* font Hilan */
@font-face {
font-family: Hilan;
 font-style: bold;
 font-weight: bold;
 src: url('fonts/hil/Hilan.ttf');
}


/* font GN*/
@font-face {
font-family: GN;
 font-style: normal;
 font-weight: normal;
 src: url('fonts/GN/GENUINE.ttf');
}

/* font Iransansx*/
@font-face {
font-family: IRANSansX;
 font-style: normal;
 font-weight: normal;
 src: url('fonts/IRANSansX.ttf');
}


/* text box 1*/
.box-1{
    font-family: GN;
    font-size: 20px;
    width:480px;
    height:300px;
    text-align: left;
    background: rgb(255,236,208);
    background: linear-gradient(45deg, rgba(255,236,208,1) 0%, rgba(255,210,145,1) 49%, rgba(255,179,65,1) 100%);
    padding: 15px 13px;
    box-sizing: border-box;
	border: 2px solid #6d5e83;
    border-top-left-radius:12px;
    border-top-right-radius:12px;
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px;
}

/* text box 2*/
.box-2 {
    font-family: IRANSansX;
	direction: rtl;
    font-size: 17px;
    width: 460px;
    height:100px;
    text-align: right;
    background: #ecf7c8;
	Color: #014c94;
    padding:15px 10px;
    box-sizing: border-box;
	border: 2px solid #e14e4e;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
}

/* text box 3*/
.box-3{
    font-family: IRANSansX;
	direction: rtl;
    font-size: 18px;
    width: 460px;
    height:240px;
    text-align: right;
    background: #c7e4ff;
	Color: #014c94;
    padding:15px 10px;
    box-sizing: border-box;
	border: 2px solid #e14e4e;
    border-top-left-radius:5px;
    border-top-right-radius:20px;
    border-bottom-left-radius:20px;
    border-bottom-right-radius:5px;
}

/* box help */
.box-help{
    font-family: IRANSansX;
	direction: rtl;
    font-size: 17px;
    width: 460px;
    height:570px;
    text-align: right;
    background: rgb(62,180,137);
    background: linear-gradient(101deg, rgba(62,180,137,1) 0%, rgba(165,190,127,1) 100%);
	Color: #014c94;
    padding:10px 10px;
    box-sizing: border-box;
	border: 3px solid white;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}

/* box dl */
.box-dl {
    font-family: IRANSansX;
    text-align: right;
    direction: rtl;
    font-size: 18px;
    width: 460px;
    height: 420px;
    background: linear-gradient(135deg, rgba(175,234,255,1) 0%, rgba(253,224,129,1) 100%);
	Color: #014c94;
    padding:15px 10px;
    box-sizing: border-box;
	border: 2px solid #e14e4e;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}


/* azx */ 
.azx {
	color: #e14e4e;
	text-decoration: none;
	cursor: pointer;
	font-family: GN;
	font-size: 20px;
}

.azx1 {
	color: white;
	text-decoration: none;
	cursor: pointer;
	font-family: Hilan;
	font-size: 20px;
}

/* box proxy */
.box-pr{
    font-family: IRANSansX;
	direction: rtl;
    font-size: 18px;
	color: white;
    width:490px;
    height:200px;
    text-align: right;
    background: rgb(0,83,140);
    background: linear-gradient(101deg, rgba(0,83,140,1) 0%, rgba(0,128,255,1) 25%, rgba(95,158,160,1) 75%, rgba(0,117,118,1) 100%);
    padding:15px 10px;
    box-sizing: border-box;
    border-top-left-radius:15px;
    border-top-right-radius:15px;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
}

.box-pr1{
    font-family: IRANSansX;
	direction: rtl;
    font-size: 18px;
    color : white;
    width:460px;
    height:80px;
    text-align: right;
    background: linear-gradient(135deg, rgba(61,61,61,1) 0%, rgba(0,158,127,1) 100%);;
    padding: 15px 15px;
    box-sizing: border-box;
    border: 2px solid white;
    border-top-left-radius:15px;
    border-top-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:15px;
}

/* index button */
.buttonA {
    border: none;
    width: 450px;
    color: white;
    padding: 15px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 22px;
    transition-duration: 0.6s;
    cursor: pointer;
    font-family: GN;
	box-shadow: 1px 1px 6px;

    border-top-left-radius:35px;
    border-top-right-radius:35px;
    border-bottom-left-radius:35px;
    border-bottom-right-radius:35px;
}

/* index button white*/
.button1 {
    background: linear-gradient(153deg, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 60%, rgba(211,211,211,1) 100%);
    color: black;
}
.button1:hover {
    background: black;
    color: white;
}

/* index button blue*/
.button2 {
    background: linear-gradient(153deg, rgba(78,205,196,1) 0%, rgba(0,172,255,1) 100%);
    color: white;
}
.button2:hover {
    background: white;
    color: #00acff;
}

/* index button black*/
.button3 {
    background: linear-gradient(153deg, rgba(80,80,80,1) 0%, rgba(0,0,0,1) 100%);
    color: white;
    }
.button3:hover {
    background: white;
    color: #000000;
}

/* index button download*/
.button4 {
    background: linear-gradient(135deg, #15003d, #50416b);
    color: white;
}
.button4:hover {
    background: linear-gradient(135deg, rgba(0,181,255,1) 0%, rgba(117,66,194,1) 52%, rgba(239,0,255,1) 100%);
    color: #FFE000;
}

.buttonV2 {
    background-color: white;
    color: black;
}
.buttonV2:hover {
    background: linear-gradient(to right, #355c7d, #6c5b7b, #c06c84);
    color: white;
}
	
.buttoncopy {
    background-color: #eeeeee;
    color: black;
}
.buttoncopy:hover {
    background: linear-gradient(153deg, rgba(110,215,255,1) 12%, rgba(213,252,176,1) 100%);
    color: #9f51fe;
}
	
	
/* telegram btn */
.buttonB {
    border: none;
    color: white;
    padding: 15px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 22px;
    transition-duration: 0.6s;
    cursor: pointer;
    width: 300px;
	font-family: GN;
	box-shadow: 1px 1px 6px;
		
    border-top-left-radius:17px;
    border-top-right-radius:17px;
    border-bottom-left-radius:17px;
    border-bottom-right-radius:17px;
}
.buttontel {
    background: #37bcff;
    color: white;
    }
.buttontel:hover {
    background: white;
    color: #37bcff;
}

/* button proxy */
.buttonpr {
    border: none;
    width: 300px;
	height: 45px;
    color: black;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    transition-duration: 0.6s;
    cursor: pointer;
    font-family: IRANSansX;

    border-top-left-radius:35px;
    border-top-right-radius:35px;
    border-bottom-left-radius:35px;
    border-bottom-right-radius:35px;
    }
.buttonpro {
    background-color: white;
    color: black;
    }
.buttonpro:hover {
    background: linear-gradient(135deg, rgba(95,116,166,1) 0%, rgba(192,143,247,1) 100%);
    color: white;
    }

/* button download */
.buttonD {
    border: none;
    width: 430px;
	height: 60px;
    color: white;
    padding: 15px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 22px;
    transition-duration: 0.6s;
    cursor: pointer;
    font-family: Hilan;

    border-top-left-radius:35px;
    border-top-right-radius:35px;
    border-bottom-left-radius:35px;
    border-bottom-right-radius:35px;
    }
.buttondl {
    background: linear-gradient(90deg, #3a47d5 0%, #00d2ff 100%);
    color: white;
    }
.buttondl:hover {
    background: linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
    color: black;
    }

/* hr */
hr {
	width:460px;
}

.hr-pr {
	width:409px;
}
	
/* index images corner */
.cor {
    border: 1px;
	box-shadow: 5px 5px 6px;
	border-top-left-radius:15px;
    border-top-right-radius:15px;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
}		

/* Progress line */
.progress {
    width: 130px;
    height : 15px;
    border: 2px solid black;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
}
.progress::-webkit-progress-bar {
    background-color: black;
}

.progress::-webkit-progress-value {
    background-color: #36c8ff;
	border: 2px solid #36c8ff;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px
}
	
/* flag img */
.img1 {
	float: left;
	shape-outside: circle(50%);
}

/*  header icon border*/
.img2 {
	float: left;
	border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}
.img3 {
    float: right;
	border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}

/*  apps img */
.img-4 {
    border: 1px;
    box-shadow: 5px 5px 6px;
    border-top-left-radius:15px;
    border-top-right-radius:15px;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
}

/* Popup container */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
	font-family: IRANSansX;
	font-size: 17px;
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 10px;
    padding: 8px 1px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 0.6s;
    animation: fadeIn 0.6s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

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


/* loading */
#loader {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20%;
  z-index: 1;
  width: 120px;
  height: 120px;
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #f80000;
  -webkit-animation: spin 0.6s linear infinite;
  animation: spin 0.6s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

.bottombtn {
  position: fixed;
  bottom: 40px;
  right: 35px;
  background: transparent;
  border:transparent;
  height:80px;
  width:80px;
}

.topbtn {
  position: fixed;
  top: 40px;
  right: 35px;
  background: transparent;
  border:transparent;
  height:80px;
  width:80px;
}