@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque&family=El+Messiri:wght@400;500;600;700&family=Roboto+Mono:wght@100;400&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Tajawal:wght@200;300;400;500;700;800;900&family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap");

:root {
  /* fonts */
  --Bricolage-Grotesque: "Bricolage Grotesque", sans-serif;
  --El-Messiri: "El Messiri", sans-serif;
  --Roboto-Mono: "Roboto Mono", monospace;
  --Rubik: "Rubik", sans-serif;
  --Tajawal: "Tajawal Grotesque", sans-serif;
  --Vazirmatn: "Vazirmatn", sans-serif;
  --Noto-Kufi: "Noto Kufi Arabic", sans-serif;
  
}
/* width */
.w-1 {
  width: 1% !important;
}
.w-2 {
  width: 2% !important;
}
.w-3 {
  width: 3% !important;
}
.w-4 {
  width: 4% !important;
}
.w-5 {
  width: 5% !important;
}
.w-6 {
  width: 6% !important;
}
.w-7 {
  width: 7% !important;
}
.w-8 {
  width: 8% !important;
}
.w-9 {
  width: 9% !important;
}
.w-10 {
  width: 10% !important;
}
.w-11 {
  width: 11% !important;
}
.w-12 {
  width: 12% !important;
}
.w-13 {
  width: 13% !important;
}
.w-14 {
  width: 14% !important;
}
.w-15 {
  width: 15% !important;
}
.w-16 {
  width: 16% !important;
}
.w-17 {
  width: 17% !important;
}
.w-18 {
  width: 18% !important;
}
.w-19 {
  width: 19% !important;
}
.w-20 {
  width: 20% !important;
}
.w-21 {
  width: 21% !important;
}
.w-22 {
  width: 22% !important;
}
.w-23 {
  width: 23% !important;
}
.w-24 {
  width: 24% !important;
}
.w-25 {
  width: 25% !important;
}
.w-26 {
  width: 26% !important;
}
.w-27 {
  width: 27% !important;
}
.w-28 {
  width: 28% !important;
}
.w-29 {
  width: 29% !important;
}
.w-30 {
  width: 30% !important;
}
.w-31 {
  width: 31% !important;
}
.w-32 {
  width: 32% !important;
}
.w-33 {
  width: 33% !important;
}
.w-34 {
  width: 34% !important;
}
.w-35 {
  width: 35% !important;
}
.w-36 {
  width: 36% !important;
}
.w-37 {
  width: 37% !important;
}
.w-38 {
  width: 38% !important;
}
.w-39 {
  width: 39% !important;
}
.w-40 {
  width: 40% !important;
}
.w-41 {
  width: 41% !important;
}
.w-42 {
  width: 42% !important;
}
.w-43 {
  width: 43% !important;
}
.w-44 {
  width: 44% !important;
}
.w-45 {
  width: 45% !important;
}
.w-46 {
  width: 46% !important;
}
.w-47 {
  width: 47% !important;
}
.w-48 {
  width: 48% !important;
}
.w-49 {
  width: 49% !important;
}
.w-50 {
  width: 50% !important;
}
.w-51 {
  width: 51% !important;
}
.w-52 {
  width: 52% !important;
}
.w-53 {
  width: 53% !important;
}
.w-54 {
  width: 54% !important;
}
.w-55 {
  width: 55% !important;
}
.w-56 {
  width: 56% !important;
}
.w-57 {
  width: 57% !important;
}
.w-58 {
  width: 58% !important;
}
.w-59 {
  width: 59% !important;
}
.w-60 {
  width: 60% !important;
}
.w-61 {
  width: 61% !important;
}
.w-62 {
  width: 62% !important;
}
.w-63 {
  width: 63% !important;
}
.w-64 {
  width: 64% !important;
}
.w-65 {
  width: 65% !important;
}
.w-66 {
  width: 66% !important;
}
.w-67 {
  width: 67% !important;
}
.w-68 {
  width: 68% !important;
}
.w-69 {
  width: 69% !important;
}
.w-70 {
  width: 70% !important;
}
.w-71 {
  width: 71% !important;
}
.w-72 {
  width: 72% !important;
}
.w-73 {
  width: 73% !important;
}
.w-74 {
  width: 74% !important;
}
.w-75 {
  width: 75% !important;
}
.w-76 {
  width: 76% !important;
}
.w-77 {
  width: 77% !important;
}
.w-78 {
  width: 78% !important;
}
.w-79 {
  width: 79% !important;
}
.w-80 {
  width: 80% !important;
}
.w-81 {
  width: 81% !important;
}
.w-82 {
  width: 82% !important;
}
.w-83 {
  width: 83% !important;
}
.w-84 {
  width: 84% !important;
}
.w-85 {
  width: 85% !important;
}
.w-86 {
  width: 86% !important;
}
.w-87 {
  width: 87% !important;
}
.w-88 {
  width: 88% !important;
}
.w-89 {
  width: 89% !important;
}
.w-90 {
  width: 90% !important;
}
.w-91 {
  width: 91% !important;
}
.w-92 {
  width: 92% !important;
}
.w-93 {
  width: 93% !important;
}
.w-94 {
  width: 94% !important;
}
.w-95 {
  width: 95% !important;
}
.w-96 {
  width: 96% !important;
}
.w-97 {
  width: 97% !important;
}
.w-98 {
  width: 98% !important;
}
.w-99 {
  width: 99% !important;
}
.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto;
}
/* height */
.h-auto {
  height: auto;
}
.h-0 {
  height: 0%;
}
.h-1 {
  height: 1%;
}
.h-2 {
  height: 2%;
}
.h-3 {
  height: 3%;
}
.h-4 {
  height: 4%;
}
.h-5 {
  height: 5%;
}
.h-6 {
  height: 6%;
}
.h-7 {
  height: 7%;
}
.h-8 {
  height: 8%;
}
.h-9 {
  height: 9%;
}
.h-10 {
  height: 10%;
}
.h-11 {
  height: 11%;
}
.h-12 {
  height: 12%;
}
.h-13 {
  height: 13%;
}
.h-14 {
  height: 14%;
}
.h-15 {
  height: 15%;
}
.h-16 {
  height: 16%;
}
.h-17 {
  height: 17%;
}
.h-18 {
  height: 18%;
}
.h-19 {
  height: 19%;
}
.h-20 {
  height: 20%;
}
.h-21 {
  height: 21%;
}
.h-22 {
  height: 22%;
}
.h-23 {
  height: 23%;
}
.h-24 {
  height: 24%;
}
.h-25 {
  height: 25%;
}
.h-26 {
  height: 26%;
}
.h-27 {
  height: 27%;
}
.h-28 {
  height: 28%;
}
.h-29 {
  height: 29%;
}
.h-30 {
  height: 30%;
}
.h-31 {
  height: 31%;
}
.h-32 {
  height: 32%;
}
.h-33 {
  height: 33%;
}
.h-34 {
  height: 34%;
}
.h-35 {
  height: 35%;
}
.h-36 {
  height: 36%;
}
.h-37 {
  height: 37%;
}
.h-38 {
  height: 38%;
}
.h-39 {
  height: 39%;
}
.h-40 {
  height: 40%;
}
.h-41 {
  height: 41%;
}
.h-42 {
  height: 42%;
}
.h-43 {
  height: 43%;
}
.h-44 {
  height: 44%;
}
.h-45 {
  height: 45%;
}
.h-46 {
  height: 46%;
}
.h-47 {
  height: 47%;
}
.h-48 {
  height: 48%;
}
.h-49 {
  height: 49%;
}
.h-50 {
  height: 50%;
}
.h-51 {
  height: 51%;
}
.h-52 {
  height: 52%;
}
.h-53 {
  height: 53%;
}
.h-54 {
  height: 54%;
}
.h-55 {
  height: 55%;
}
.h-56 {
  height: 56%;
}
.h-57 {
  height: 57%;
}
.h-58 {
  height: 58%;
}
.h-59 {
  height: 59%;
}
.h-60 {
  height: 60%;
}
.h-61 {
  height: 61%;
}
.h-62 {
  height: 62%;
}
.h-63 {
  height: 63%;
}
.h-64 {
  height: 64%;
}
.h-65 {
  height: 65%;
}
.h-66 {
  height: 66%;
}
.h-67 {
  height: 67%;
}
.h-68 {
  height: 68%;
}
.h-69 {
  height: 69%;
}
.h-70 {
  height: 70%;
}
.h-71 {
  height: 71%;
}
.h-72 {
  height: 72%;
}
.h-73 {
  height: 73%;
}
.h-74 {
  height: 74%;
}
.h-75 {
  height: 75%;
}
.h-76 {
  height: 76%;
}
.h-77 {
  height: 77%;
}
.h-78 {
  height: 78%;
}
.h-79 {
  height: 79%;
}
.h-80 {
  height: 80%;
}
.h-81 {
  height: 81%;
}
.h-82 {
  height: 82%;
}
.h-83 {
  height: 83%;
}
.h-84 {
  height: 84%;
}
.h-85 {
  height: 85%;
}
.h-86 {
  height: 86%;
}
.h-87 {
  height: 87%;
}
.h-88 {
  height: 88%;
}
.h-89 {
  height: 89%;
}
.h-90 {
  height: 90%;
}
.h-91 {
  height: 91%;
}
.h-92 {
  height: 92%;
}
.h-93 {
  height: 93%;
}
.h-94 {
  height: 94%;
}
.h-95 {
  height: 95%;
}
.h-96 {
  height: 96%;
}
.h-97 {
  height: 97%;
}
.h-98 {
  height: 98%;
}
.h-99 {
  height: 99%;
}
.h-100 {
  height: 100%;
}

/* margin */
.m-1 {
  margin: 1%;
}
.m-2 {
  margin: 2%;
}
.m-3 {
  margin: 3%;
}
.m-4 {
  margin: 4%;
}
.m-5 {
  margin: 5%;
}
.m-6 {
  margin: 6%;
}
.m-7 {
  margin: 7%;
}
.m-8 {
  margin: 8%;
}
.m-9 {
  margin: 9%;
}
.m-10 {
  margin: 10%;
}
.m-11 {
  margin: 11%;
}
.m-12 {
  margin: 12%;
}
.m-13 {
  margin: 13%;
}
.m-14 {
  margin: 14%;
}
.m-15 {
  margin: 15%;
}
.m-16 {
  margin: 16%;
}
.m-17 {
  margin: 17%;
}
.m-18 {
  margin: 18%;
}
.m-19 {
  margin: 19%;
}
.m-20 {
  margin: 20%;
}
.m-21 {
  margin: 21%;
}
.m-22 {
  margin: 22%;
}
.m-23 {
  margin: 23%;
}
.m-24 {
  margin: 24%;
}
.m-25 {
  margin: 25%;
}
.m-26 {
  margin: 26%;
}
.m-27 {
  margin: 27%;
}
.m-28 {
  margin: 28%;
}
.m-29 {
  margin: 29%;
}
.m-30 {
  margin: 30%;
}
.m-31 {
  margin: 31%;
}
.m-32 {
  margin: 32%;
}
.m-33 {
  margin: 33%;
}
.m-34 {
  margin: 34%;
}
.m-35 {
  margin: 35%;
}
.m-36 {
  margin: 36%;
}
.m-37 {
  margin: 37%;
}
.m-38 {
  margin: 38%;
}
.m-39 {
  margin: 39%;
}
.m-40 {
  margin: 40%;
}
.m-41 {
  margin: 41%;
}
.m-42 {
  margin: 42%;
}
.m-43 {
  margin: 43%;
}
.m-44 {
  margin: 44%;
}
.m-45 {
  margin: 45%;
}
.m-46 {
  margin: 46%;
}
.m-47 {
  margin: 47%;
}
.m-48 {
  margin: 48%;
}
.m-49 {
  margin: 49%;
}
.m-50 {
  margin: 50%;
}
.m-51 {
  margin: 51%;
}
.m-52 {
  margin: 52%;
}
.m-53 {
  margin: 53%;
}
.m-54 {
  margin: 54%;
}
.m-55 {
  margin: 55%;
}
.m-56 {
  margin: 56%;
}
.m-57 {
  margin: 57%;
}
.m-58 {
  margin: 58%;
}
.m-59 {
  margin: 59%;
}
.m-60 {
  margin: 60%;
}
.m-61 {
  margin: 61%;
}
.m-62 {
  margin: 62%;
}
.m-63 {
  margin: 63%;
}
.m-64 {
  margin: 64%;
}
.m-65 {
  margin: 65%;
}
.m-66 {
  margin: 66%;
}
.m-67 {
  margin: 67%;
}
.m-68 {
  margin: 68%;
}
.m-69 {
  margin: 69%;
}
.m-70 {
  margin: 70%;
}
.m-71 {
  margin: 71%;
}
.m-72 {
  margin: 72%;
}
.m-73 {
  margin: 73%;
}
.m-74 {
  margin: 74%;
}
.m-75 {
  margin: 75%;
}
.m-76 {
  margin: 76%;
}
.m-77 {
  margin: 77%;
}
.m-78 {
  margin: 78%;
}
.m-79 {
  margin: 79%;
}
.m-80 {
  margin: 80%;
}
.m-81 {
  margin: 81%;
}
.m-82 {
  margin: 82%;
}
.m-83 {
  margin: 83%;
}
.m-84 {
  margin: 84%;
}
.m-85 {
  margin: 85%;
}
.m-86 {
  margin: 86%;
}
.m-87 {
  margin: 87%;
}
.m-88 {
  margin: 88%;
}
.m-89 {
  margin: 89%;
}
.m-90 {
  margin: 90%;
}
.m-91 {
  margin: 91%;
}
.m-92 {
  margin: 92%;
}
.m-93 {
  margin: 93%;
}
.m-94 {
  margin: 94%;
}
.m-95 {
  margin: 95%;
}
.m-96 {
  margin: 96%;
}
.m-97 {
  margin: 97%;
}
.m-98 {
  margin: 98%;
}
.m-99 {
  margin: 99%;
}
.m-100 {
  margin: 100%;
}

/* margin-right */
.mr-1 {
  margin-right: 1%;
}
.mr-2 {
  margin-right: 2%;
}
.mr-3 {
  margin-right: 3%;
}
.mr-4 {
  margin-right: 4%;
}
.mr-5 {
  margin-right: 5%;
}
.mr-6 {
  margin-right: 6%;
}
.mr-7 {
  margin-right: 7%;
}
.mr-8 {
  margin-right: 8%;
}
.mr-9 {
  margin-right: 9%;
}
.mr-10 {
  margin-right: 10%;
}
.mr-11 {
  margin-right: 11%;
}
.mr-12 {
  margin-right: 12%;
}
.mr-13 {
  margin-right: 13%;
}
.mr-14 {
  margin-right: 14%;
}
.mr-15 {
  margin-right: 15%;
}
.mr-16 {
  margin-right: 16%;
}
.mr-17 {
  margin-right: 17%;
}
.mr-18 {
  margin-right: 18%;
}
.mr-19 {
  margin-right: 19%;
}
.mr-20 {
  margin-right: 20%;
}
.mr-21 {
  margin-right: 21%;
}
.mr-22 {
  margin-right: 22%;
}
.mr-23 {
  margin-right: 23%;
}
.mr-24 {
  margin-right: 24%;
}
.mr-25 {
  margin-right: 25%;
}
.mr-26 {
  margin-right: 26%;
}
.mr-27 {
  margin-right: 27%;
}
.mr-28 {
  margin-right: 28%;
}
.mr-29 {
  margin-right: 29%;
}
.mr-30 {
  margin-right: 30%;
}
.mr-31 {
  margin-right: 31%;
}
.mr-32 {
  margin-right: 32%;
}
.mr-33 {
  margin-right: 33%;
}
.mr-34 {
  margin-right: 34%;
}
.mr-35 {
  margin-right: 35%;
}
.mr-36 {
  margin-right: 36%;
}
.mr-37 {
  margin-right: 37%;
}
.mr-38 {
  margin-right: 38%;
}
.mr-39 {
  margin-right: 39%;
}
.mr-40 {
  margin-right: 40%;
}
.mr-41 {
  margin-right: 41%;
}
.mr-42 {
  margin-right: 42%;
}
.mr-43 {
  margin-right: 43%;
}
.mr-44 {
  margin-right: 44%;
}
.mr-45 {
  margin-right: 45%;
}
.mr-46 {
  margin-right: 46%;
}
.mr-47 {
  margin-right: 47%;
}
.mr-48 {
  margin-right: 48%;
}
.mr-49 {
  margin-right: 49%;
}
.mr-50 {
  margin-right: 50%;
}
.mr-51 {
  margin-right: 51%;
}
.mr-52 {
  margin-right: 52%;
}
.mr-53 {
  margin-right: 53%;
}
.mr-54 {
  margin-right: 54%;
}
.mr-55 {
  margin-right: 55%;
}
.mr-56 {
  margin-right: 56%;
}
.mr-57 {
  margin-right: 57%;
}
.mr-58 {
  margin-right: 58%;
}
.mr-59 {
  margin-right: 59%;
}
.mr-60 {
  margin-right: 60%;
}
.mr-61 {
  margin-right: 61%;
}
.mr-62 {
  margin-right: 62%;
}
.mr-63 {
  margin-right: 63%;
}
.mr-64 {
  margin-right: 64%;
}
.mr-65 {
  margin-right: 65%;
}
.mr-66 {
  margin-right: 66%;
}
.mr-67 {
  margin-right: 67%;
}
.mr-68 {
  margin-right: 68%;
}
.mr-69 {
  margin-right: 69%;
}
.mr-70 {
  margin-right: 70%;
}
.mr-71 {
  margin-right: 71%;
}
.mr-72 {
  margin-right: 72%;
}
.mr-73 {
  margin-right: 73%;
}
.mr-74 {
  margin-right: 74%;
}
.mr-75 {
  margin-right: 75%;
}
.mr-76 {
  margin-right: 76%;
}
.mr-77 {
  margin-right: 77%;
}
.mr-78 {
  margin-right: 78%;
}
.mr-79 {
  margin-right: 79%;
}
.mr-80 {
  margin-right: 80%;
}
.mr-81 {
  margin-right: 81%;
}
.mr-82 {
  margin-right: 82%;
}
.mr-83 {
  margin-right: 83%;
}
.mr-84 {
  margin-right: 84%;
}
.mr-85 {
  margin-right: 85%;
}
.mr-86 {
  margin-right: 86%;
}
.mr-87 {
  margin-right: 87%;
}
.mr-88 {
  margin-right: 88%;
}
.mr-89 {
  margin-right: 89%;
}
.mr-90 {
  margin-right: 90%;
}
.mr-91 {
  margin-right: 91%;
}
.mr-92 {
  margin-right: 92%;
}
.mr-93 {
  margin-right: 93%;
}
.mr-94 {
  margin-right: 94%;
}
.mr-95 {
  margin-right: 95%;
}
.mr-96 {
  margin-right: 96%;
}
.mr-97 {
  margin-right: 97%;
}
.mr-98 {
  margin-right: 98%;
}
.mr-99 {
  margin-right: 99%;
}
.mr-100 {
  margin-right: 100%;
}

/* margin-left */
.ml-1 {
  margin-left: 1%;
}
.ml-2 {
  margin-left: 2%;
}
.ml-3 {
  margin-left: 3%;
}
.ml-4 {
  margin-left: 4%;
}
.ml-5 {
  margin-left: 5%;
}
.ml-6 {
  margin-left: 6%;
}
.ml-7 {
  margin-left: 7%;
}
.ml-8 {
  margin-left: 8%;
}
.ml-9 {
  margin-left: 9%;
}
.ml-10 {
  margin-left: 10%;
}
.ml-11 {
  margin-left: 11%;
}
.ml-12 {
  margin-left: 12%;
}
.ml-13 {
  margin-left: 13%;
}
.ml-14 {
  margin-left: 14%;
}
.ml-15 {
  margin-left: 15%;
}
.ml-16 {
  margin-left: 16%;
}
.ml-17 {
  margin-left: 17%;
}
.ml-18 {
  margin-left: 18%;
}
.ml-19 {
  margin-left: 19%;
}
.ml-20 {
  margin-left: 20%;
}
.ml-21 {
  margin-left: 21%;
}
.ml-22 {
  margin-left: 22%;
}
.ml-23 {
  margin-left: 23%;
}
.ml-24 {
  margin-left: 24%;
}
.ml-25 {
  margin-left: 25%;
}
.ml-26 {
  margin-left: 26%;
}
.ml-27 {
  margin-left: 27%;
}
.ml-28 {
  margin-left: 28%;
}
.ml-29 {
  margin-left: 29%;
}
.ml-30 {
  margin-left: 30%;
}
.ml-31 {
  margin-left: 31%;
}
.ml-32 {
  margin-left: 32%;
}
.ml-33 {
  margin-left: 33%;
}
.ml-34 {
  margin-left: 34%;
}
.ml-35 {
  margin-left: 35%;
}
.ml-36 {
  margin-left: 36%;
}
.ml-37 {
  margin-left: 37%;
}
.ml-38 {
  margin-left: 38%;
}
.ml-39 {
  margin-left: 39%;
}
.ml-40 {
  margin-left: 40%;
}
.ml-41 {
  margin-left: 41%;
}
.ml-42 {
  margin-left: 42%;
}
.ml-43 {
  margin-left: 43%;
}
.ml-44 {
  margin-left: 44%;
}
.ml-45 {
  margin-left: 45%;
}
.ml-46 {
  margin-left: 46%;
}
.ml-47 {
  margin-left: 47%;
}
.ml-48 {
  margin-left: 48%;
}
.ml-49 {
  margin-left: 49%;
}
.ml-50 {
  margin-left: 50%;
}
.ml-51 {
  margin-left: 51%;
}
.ml-52 {
  margin-left: 52%;
}
.ml-53 {
  margin-left: 53%;
}
.ml-54 {
  margin-left: 54%;
}
.ml-55 {
  margin-left: 55%;
}
.ml-56 {
  margin-left: 56%;
}
.ml-57 {
  margin-left: 57%;
}
.ml-58 {
  margin-left: 58%;
}
.ml-59 {
  margin-left: 59%;
}
.ml-60 {
  margin-left: 60%;
}
.ml-61 {
  margin-left: 61%;
}
.ml-62 {
  margin-left: 62%;
}
.ml-63 {
  margin-left: 63%;
}
.ml-64 {
  margin-left: 64%;
}
.ml-65 {
  margin-left: 65%;
}
.ml-66 {
  margin-left: 66%;
}
.ml-67 {
  margin-left: 67%;
}
.ml-68 {
  margin-left: 68%;
}
.ml-69 {
  margin-left: 69%;
}
.ml-70 {
  margin-left: 70%;
}
.ml-71 {
  margin-left: 71%;
}
.ml-72 {
  margin-left: 72%;
}
.ml-73 {
  margin-left: 73%;
}
.ml-74 {
  margin-left: 74%;
}
.ml-75 {
  margin-left: 75%;
}
.ml-76 {
  margin-left: 76%;
}
.ml-77 {
  margin-left: 77%;
}
.ml-78 {
  margin-left: 78%;
}
.ml-79 {
  margin-left: 79%;
}
.ml-80 {
  margin-left: 80%;
}
.ml-81 {
  margin-left: 81%;
}
.ml-82 {
  margin-left: 82%;
}
.ml-83 {
  margin-left: 83%;
}
.ml-84 {
  margin-left: 84%;
}
.ml-85 {
  margin-left: 85%;
}
.ml-86 {
  margin-left: 86%;
}
.ml-87 {
  margin-left: 87%;
}
.ml-88 {
  margin-left: 88%;
}
.ml-89 {
  margin-left: 89%;
}
.ml-90 {
  margin-left: 90%;
}
.ml-91 {
  margin-left: 91%;
}
.ml-92 {
  margin-left: 92%;
}
.ml-93 {
  margin-left: 93%;
}
.ml-94 {
  margin-left: 94%;
}
.ml-95 {
  margin-left: 95%;
}
.ml-96 {
  margin-left: 96%;
}
.ml-97 {
  margin-left: 97%;
}
.ml-98 {
  margin-left: 98%;
}
.ml-99 {
  margin-left: 99%;
}
.ml-100 {
  margin-left: 100%;
}

/* margin-top */
.mt-1 {
  margin-top: 1%;
}
.mt-2 {
  margin-top: 2%;
}
.mt-3 {
  margin-top: 3%;
}
.mt-4 {
  margin-top: 4%;
}
.mt-5 {
  margin-top: 5%;
}
.mt-6 {
  margin-top: 6%;
}
.mt-7 {
  margin-top: 7%;
}
.mt-8 {
  margin-top: 8%;
}
.mt-9 {
  margin-top: 9%;
}
.mt-10 {
  margin-top: 10%;
}
.mt-11 {
  margin-top: 11%;
}
.mt-12 {
  margin-top: 12%;
}
.mt-13 {
  margin-top: 13%;
}
.mt-14 {
  margin-top: 14%;
}
.mt-15 {
  margin-top: 15%;
}
.mt-16 {
  margin-top: 16%;
}
.mt-17 {
  margin-top: 17%;
}
.mt-18 {
  margin-top: 18%;
}
.mt-19 {
  margin-top: 19%;
}
.mt-20 {
  margin-top: 20%;
}
.mt-21 {
  margin-top: 21%;
}
.mt-22 {
  margin-top: 22%;
}
.mt-23 {
  margin-top: 23%;
}
.mt-24 {
  margin-top: 24%;
}
.mt-25 {
  margin-top: 25%;
}
.mt-26 {
  margin-top: 26%;
}
.mt-27 {
  margin-top: 27%;
}
.mt-28 {
  margin-top: 28%;
}
.mt-29 {
  margin-top: 29%;
}
.mt-30 {
  margin-top: 30%;
}
.mt-31 {
  margin-top: 31%;
}
.mt-32 {
  margin-top: 32%;
}
.mt-33 {
  margin-top: 33%;
}
.mt-34 {
  margin-top: 34%;
}
.mt-35 {
  margin-top: 35%;
}
.mt-36 {
  margin-top: 36%;
}
.mt-37 {
  margin-top: 37%;
}
.mt-38 {
  margin-top: 38%;
}
.mt-39 {
  margin-top: 39%;
}
.mt-40 {
  margin-top: 40%;
}
.mt-41 {
  margin-top: 41%;
}
.mt-42 {
  margin-top: 42%;
}
.mt-43 {
  margin-top: 43%;
}
.mt-44 {
  margin-top: 44%;
}
.mt-45 {
  margin-top: 45%;
}
.mt-46 {
  margin-top: 46%;
}
.mt-47 {
  margin-top: 47%;
}
.mt-48 {
  margin-top: 48%;
}
.mt-49 {
  margin-top: 49%;
}
.mt-50 {
  margin-top: 50%;
}
.mt-51 {
  margin-top: 51%;
}
.mt-52 {
  margin-top: 52%;
}
.mt-53 {
  margin-top: 53%;
}
.mt-54 {
  margin-top: 54%;
}
.mt-55 {
  margin-top: 55%;
}
.mt-56 {
  margin-top: 56%;
}
.mt-57 {
  margin-top: 57%;
}
.mt-58 {
  margin-top: 58%;
}
.mt-59 {
  margin-top: 59%;
}
.mt-60 {
  margin-top: 60%;
}
.mt-61 {
  margin-top: 61%;
}
.mt-62 {
  margin-top: 62%;
}
.mt-63 {
  margin-top: 63%;
}
.mt-64 {
  margin-top: 64%;
}
.mt-65 {
  margin-top: 65%;
}
.mt-66 {
  margin-top: 66%;
}
.mt-67 {
  margin-top: 67%;
}
.mt-68 {
  margin-top: 68%;
}
.mt-69 {
  margin-top: 69%;
}
.mt-70 {
  margin-top: 70%;
}
.mt-71 {
  margin-top: 71%;
}
.mt-72 {
  margin-top: 72%;
}
.mt-73 {
  margin-top: 73%;
}
.mt-74 {
  margin-top: 74%;
}
.mt-75 {
  margin-top: 75%;
}
.mt-76 {
  margin-top: 76%;
}
.mt-77 {
  margin-top: 77%;
}
.mt-78 {
  margin-top: 78%;
}
.mt-79 {
  margin-top: 79%;
}
.mt-80 {
  margin-top: 80%;
}
.mt-81 {
  margin-top: 81%;
}
.mt-82 {
  margin-top: 82%;
}
.mt-83 {
  margin-top: 83%;
}
.mt-84 {
  margin-top: 84%;
}
.mt-85 {
  margin-top: 85%;
}
.mt-86 {
  margin-top: 86%;
}
.mt-87 {
  margin-top: 87%;
}
.mt-88 {
  margin-top: 88%;
}
.mt-89 {
  margin-top: 89%;
}
.mt-90 {
  margin-top: 90%;
}
.mt-91 {
  margin-top: 91%;
}
.mt-92 {
  margin-top: 92%;
}
.mt-93 {
  margin-top: 93%;
}
.mt-94 {
  margin-top: 94%;
}
.mt-95 {
  margin-top: 95%;
}
.mt-96 {
  margin-top: 96%;
}
.mt-97 {
  margin-top: 97%;
}
.mt-98 {
  margin-top: 98%;
}
.mt-99 {
  margin-top: 99%;
}
.mt-100 {
  margin-top: 100%;
}

/* margin-bottom */
.mb-1 {
  margin-bottom: 1%;
}
.mb-2 {
  margin-bottom: 2%;
}
.mb-3 {
  margin-bottom: 3%;
}
.mb-4 {
  margin-bottom: 4%;
}
.mb-5 {
  margin-bottom: 5%;
}
.mb-6 {
  margin-bottom: 6%;
}
.mb-7 {
  margin-bottom: 7%;
}
.mb-8 {
  margin-bottom: 8%;
}
.mb-9 {
  margin-bottom: 9%;
}
.mb-10 {
  margin-bottom: 10%;
}
.mb-11 {
  margin-bottom: 11%;
}
.mb-12 {
  margin-bottom: 12%;
}
.mb-13 {
  margin-bottom: 13%;
}
.mb-14 {
  margin-bottom: 14%;
}
.mb-15 {
  margin-bottom: 15%;
}
.mb-16 {
  margin-bottom: 16%;
}
.mb-17 {
  margin-bottom: 17%;
}
.mb-18 {
  margin-bottom: 18%;
}
.mb-19 {
  margin-bottom: 19%;
}
.mb-20 {
  margin-bottom: 20%;
}
.mb-21 {
  margin-bottom: 21%;
}
.mb-22 {
  margin-bottom: 22%;
}
.mb-23 {
  margin-bottom: 23%;
}
.mb-24 {
  margin-bottom: 24%;
}
.mb-25 {
  margin-bottom: 25%;
}
.mb-26 {
  margin-bottom: 26%;
}
.mb-27 {
  margin-bottom: 27%;
}
.mb-28 {
  margin-bottom: 28%;
}
.mb-29 {
  margin-bottom: 29%;
}
.mb-30 {
  margin-bottom: 30%;
}
.mb-31 {
  margin-bottom: 31%;
}
.mb-32 {
  margin-bottom: 32%;
}
.mb-33 {
  margin-bottom: 33%;
}
.mb-34 {
  margin-bottom: 34%;
}
.mb-35 {
  margin-bottom: 35%;
}
.mb-36 {
  margin-bottom: 36%;
}
.mb-37 {
  margin-bottom: 37%;
}
.mb-38 {
  margin-bottom: 38%;
}
.mb-39 {
  margin-bottom: 39%;
}
.mb-40 {
  margin-bottom: 40%;
}
.mb-41 {
  margin-bottom: 41%;
}
.mb-42 {
  margin-bottom: 42%;
}
.mb-43 {
  margin-bottom: 43%;
}
.mb-44 {
  margin-bottom: 44%;
}
.mb-45 {
  margin-bottom: 45%;
}
.mb-46 {
  margin-bottom: 46%;
}
.mb-47 {
  margin-bottom: 47%;
}
.mb-48 {
  margin-bottom: 48%;
}
.mb-49 {
  margin-bottom: 49%;
}
.mb-50 {
  margin-bottom: 50%;
}
.mb-51 {
  margin-bottom: 51%;
}
.mb-52 {
  margin-bottom: 52%;
}
.mb-53 {
  margin-bottom: 53%;
}
.mb-54 {
  margin-bottom: 54%;
}
.mb-55 {
  margin-bottom: 55%;
}
.mb-56 {
  margin-bottom: 56%;
}
.mb-57 {
  margin-bottom: 57%;
}
.mb-58 {
  margin-bottom: 58%;
}
.mb-59 {
  margin-bottom: 59%;
}
.mb-60 {
  margin-bottom: 60%;
}
.mb-61 {
  margin-bottom: 61%;
}
.mb-62 {
  margin-bottom: 62%;
}
.mb-63 {
  margin-bottom: 63%;
}
.mb-64 {
  margin-bottom: 64%;
}
.mb-65 {
  margin-bottom: 65%;
}
.mb-66 {
  margin-bottom: 66%;
}
.mb-67 {
  margin-bottom: 67%;
}
.mb-68 {
  margin-bottom: 68%;
}
.mb-69 {
  margin-bottom: 69%;
}
.mb-70 {
  margin-bottom: 70%;
}
.mb-71 {
  margin-bottom: 71%;
}
.mb-72 {
  margin-bottom: 72%;
}
.mb-73 {
  margin-bottom: 73%;
}
.mb-74 {
  margin-bottom: 74%;
}
.mb-75 {
  margin-bottom: 75%;
}
.mb-76 {
  margin-bottom: 76%;
}
.mb-77 {
  margin-bottom: 77%;
}
.mb-78 {
  margin-bottom: 78%;
}
.mb-79 {
  margin-bottom: 79%;
}
.mb-80 {
  margin-bottom: 80%;
}
.mb-81 {
  margin-bottom: 81%;
}
.mb-82 {
  margin-bottom: 82%;
}
.mb-83 {
  margin-bottom: 83%;
}
.mb-84 {
  margin-bottom: 84%;
}
.mb-85 {
  margin-bottom: 85%;
}
.mb-86 {
  margin-bottom: 86%;
}
.mb-87 {
  margin-bottom: 87%;
}
.mb-88 {
  margin-bottom: 88%;
}
.mb-89 {
  margin-bottom: 89%;
}
.mb-90 {
  margin-bottom: 90%;
}
.mb-91 {
  margin-bottom: 91%;
}
.mb-92 {
  margin-bottom: 92%;
}
.mb-93 {
  margin-bottom: 93%;
}
.mb-94 {
  margin-bottom: 94%;
}
.mb-95 {
  margin-bottom: 95%;
}
.mb-96 {
  margin-bottom: 96%;
}
.mb-97 {
  margin-bottom: 97%;
}
.mb-98 {
  margin-bottom: 98%;
}
.mb-99 {
  margin-bottom: 99%;
}
.mb-100 {
  margin-bottom: 100%;
}

/* gap */
.gap-1 {
  gap: 1px;
}
.gap-2 {
  gap: 2px;
}
.gap-3 {
  gap: 3px;
}
.gap-4 {
  gap: 4px;
}
.gap-5 {
  gap: 5px;
}
.gap-6 {
  gap: 6px;
}
.gap-7 {
  gap: 7px;
}
.gap-8 {
  gap: 8px;
}
.gap-9 {
  gap: 9px;
}
.gap-10 {
  gap: 10px;
}
.gap-11 {
  gap: 11px;
}
.gap-12 {
  gap: 12px;
}
.gap-13 {
  gap: 13px;
}
.gap-14 {
  gap: 14px;
}
.gap-15 {
  gap: 15px;
}
.gap-16 {
  gap: 16px;
}
.gap-17 {
  gap: 17px;
}
.gap-18 {
  gap: 18px;
}
.gap-19 {
  gap: 19px;
}
.gap-20 {
  gap: 20px;
}
.gap-21 {
  gap: 21px;
}
.gap-22 {
  gap: 22px;
}
.gap-23 {
  gap: 23px;
}
.gap-24 {
  gap: 24px;
}
.gap-25 {
  gap: 25px;
}
.gap-26 {
  gap: 26px;
}
.gap-27 {
  gap: 27px;
}
.gap-28 {
  gap: 28px;
}
.gap-29 {
  gap: 29px;
}
.gap-30 {
  gap: 30px;
}
.gap-31 {
  gap: 31px;
}
.gap-32 {
  gap: 32px;
}
.gap-33 {
  gap: 33px;
}
.gap-34 {
  gap: 34px;
}
.gap-35 {
  gap: 35px;
}
.gap-36 {
  gap: 36px;
}
.gap-37 {
  gap: 37px;
}
.gap-38 {
  gap: 38px;
}
.gap-39 {
  gap: 39px;
}
.gap-40 {
  gap: 40px;
}
.gap-41 {
  gap: 41px;
}
.gap-42 {
  gap: 42px;
}
.gap-43 {
  gap: 43px;
}
.gap-44 {
  gap: 44px;
}
.gap-45 {
  gap: 45px;
}
.gap-46 {
  gap: 46px;
}
.gap-47 {
  gap: 47px;
}
.gap-48 {
  gap: 48px;
}
.gap-49 {
  gap: 49px;
}
.gap-50 {
  gap: 50px;
}
.gap-51 {
  gap: 51px;
}
.gap-52 {
  gap: 52px;
}
.gap-53 {
  gap: 53px;
}
.gap-54 {
  gap: 54px;
}
.gap-55 {
  gap: 55px;
}
.gap-56 {
  gap: 56px;
}
.gap-57 {
  gap: 57px;
}
.gap-58 {
  gap: 58px;
}
.gap-59 {
  gap: 59px;
}
.gap-60 {
  gap: 60px;
}
.gap-61 {
  gap: 61px;
}
.gap-62 {
  gap: 62px;
}
.gap-63 {
  gap: 63px;
}
.gap-64 {
  gap: 64px;
}
.gap-65 {
  gap: 65px;
}
.gap-66 {
  gap: 66px;
}
.gap-67 {
  gap: 67px;
}
.gap-68 {
  gap: 68px;
}
.gap-69 {
  gap: 69px;
}
.gap-70 {
  gap: 70px;
}
.gap-71 {
  gap: 71px;
}
.gap-72 {
  gap: 72px;
}
.gap-73 {
  gap: 73px;
}
.gap-74 {
  gap: 74px;
}
.gap-75 {
  gap: 75px;
}
.gap-76 {
  gap: 76px;
}
.gap-77 {
  gap: 77px;
}
.gap-78 {
  gap: 78px;
}
.gap-79 {
  gap: 79px;
}
.gap-80 {
  gap: 80px;
}
.gap-81 {
  gap: 81px;
}
.gap-82 {
  gap: 82px;
}
.gap-83 {
  gap: 83px;
}
.gap-84 {
  gap: 84px;
}
.gap-85 {
  gap: 85px;
}
.gap-86 {
  gap: 86px;
}
.gap-87 {
  gap: 87px;
}
.gap-88 {
  gap: 88px;
}
.gap-89 {
  gap: 89px;
}
.gap-90 {
  gap: 90px;
}
.gap-91 {
  gap: 91px;
}
.gap-92 {
  gap: 92px;
}
.gap-93 {
  gap: 93px;
}
.gap-94 {
  gap: 94px;
}
.gap-95 {
  gap: 95px;
}
.gap-96 {
  gap: 96px;
}
.gap-97 {
  gap: 97px;
}
.gap-98 {
  gap: 98px;
}
.gap-99 {
  gap: 99px;
}
.gap-100 {
  gap: 100px;
}

/* padding */
.p-1 {
  padding: 1px;
}
.p-2 {
  padding: 2px;
}
.p-3 {
  padding: 3px;
}
.p-4 {
  padding: 4px !important;
}
.p-5 {
  padding: 5px;
}
.p-6 {
  padding: 6px;
}
.p-7 {
  padding: 7px;
}
.p-8 {
  padding: 8px;
}
.p-9 {
  padding: 9px;
}
.p-10 {
  padding: 10px;
}
.p-11 {
  padding: 11px;
}
.p-12 {
  padding: 12px;
}
.p-13 {
  padding: 13px;
}
.p-14 {
  padding: 14px;
}
.p-15 {
  padding: 15px;
}
.p-16 {
  padding: 16px;
}
.p-17 {
  padding: 17px;
}
.p-18 {
  padding: 18px;
}
.p-19 {
  padding: 19px;
}
.p-20 {
  padding: 20px;
}
.p-21 {
  padding: 21px;
}
.p-22 {
  padding: 22px;
}
.p-23 {
  padding: 23px;
}
.p-24 {
  padding: 24px;
}
.p-25 {
  padding: 25px;
}
.p-26 {
  padding: 26px;
}
.p-27 {
  padding: 27px;
}
.p-28 {
  padding: 28px;
}
.p-29 {
  padding: 29px;
}
.p-30 {
  padding: 30px;
}
.p-31 {
  padding: 31px;
}
.p-32 {
  padding: 32px;
}
.p-33 {
  padding: 33px;
}
.p-34 {
  padding: 34px;
}
.p-35 {
  padding: 35px;
}
.p-36 {
  padding: 36px;
}
.p-37 {
  padding: 37px;
}
.p-38 {
  padding: 38px;
}
.p-39 {
  padding: 39px;
}
.p-40 {
  padding: 40px;
}
.p-41 {
  padding: 41px;
}
.p-42 {
  padding: 42px;
}
.p-43 {
  padding: 43px;
}
.p-44 {
  padding: 44px;
}
.p-45 {
  padding: 45px;
}
.p-46 {
  padding: 46px;
}
.p-47 {
  padding: 47px;
}
.p-48 {
  padding: 48px;
}
.p-49 {
  padding: 49px;
}
.p-50 {
  padding: 50px;
}
.p-51 {
  padding: 51px;
}
.p-52 {
  padding: 52px;
}
.p-53 {
  padding: 53px;
}
.p-54 {
  padding: 54px;
}
.p-55 {
  padding: 55px;
}
.p-56 {
  padding: 56px;
}
.p-57 {
  padding: 57px;
}
.p-58 {
  padding: 58px;
}
.p-59 {
  padding: 59px;
}
.p-60 {
  padding: 60px;
}
.p-61 {
  padding: 61px;
}
.p-62 {
  padding: 62px;
}
.p-63 {
  padding: 63px;
}
.p-64 {
  padding: 64px;
}
.p-65 {
  padding: 65px;
}
.p-66 {
  padding: 66px;
}
.p-67 {
  padding: 67px;
}
.p-68 {
  padding: 68px;
}
.p-69 {
  padding: 69px;
}
.p-70 {
  padding: 70px;
}
.p-71 {
  padding: 71px;
}
.p-72 {
  padding: 72px;
}
.p-73 {
  padding: 73px;
}
.p-74 {
  padding: 74px;
}
.p-75 {
  padding: 75px;
}
.p-76 {
  padding: 76px;
}
.p-77 {
  padding: 77px;
}
.p-78 {
  padding: 78px;
}
.p-79 {
  padding: 79px;
}
.p-80 {
  padding: 80px;
}
.p-81 {
  padding: 81px;
}
.p-82 {
  padding: 82px;
}
.p-83 {
  padding: 83px;
}
.p-84 {
  padding: 84px;
}
.p-85 {
  padding: 85px;
}
.p-86 {
  padding: 86px;
}
.p-87 {
  padding: 87px;
}
.p-88 {
  padding: 88px;
}
.p-89 {
  padding: 89px;
}
.p-90 {
  padding: 90px;
}
.p-91 {
  padding: 91px;
}
.p-92 {
  padding: 92px;
}
.p-93 {
  padding: 93px;
}
.p-94 {
  padding: 94px;
}
.p-95 {
  padding: 95px;
}
.p-96 {
  padding: 96px;
}
.p-97 {
  padding: 97px;
}
.p-98 {
  padding: 98px;
}
.p-99 {
  padding: 99px;
}
.p-100 {
  padding: 100px;
}

/* padding x */
.px-1 {
  padding: 0 1px;
}
.px-2 {
  padding: 0 2px;
}
.px-3 {
  padding: 0 3px;
}
.px-4 {
  padding: 0 4px;
}
.px-5 {
  padding: 0 5px;
}
.px-6 {
  padding: 0 6px;
}
.px-7 {
  padding: 0 7px !important;
}
.px-8 {
  padding: 0 8px;
}
.px-9 {
  padding: 0 9px;
}
.px-10 {
  padding: 0 10px;
}
.px-11 {
  padding: 0 11px;
}
.px-12 {
  padding: 0 12px;
}
.px-13 {
  padding: 0 13px;
}
.px-14 {
  padding-right: 14px !important;
  padding-left: 14px !important;
}
.px-15 {
  padding: 0 15px;
}
.px-16 {
  padding: 0 16px;
}
.px-17 {
  padding: 0 17px;
}
.px-18 {
  padding: 0 18px;
}
.px-19 {
  padding: 0 19px;
}
.px-20 {
  padding: 0 20px;
}
.px-21 {
  padding: 0 21px;
}
.px-22 {
  padding: 0 22px;
}
.px-23 {
  padding: 0 23px;
}
.px-24 {
  padding: 0 24px;
}
.px-25 {
  padding: 0 25px;
}
.px-26 {
  padding: 0 26px;
}
.px-27 {
  padding: 0 27px;
}
.px-28 {
  padding: 0 28px;
}
.px-29 {
  padding: 0 29px;
}
.px-30 {
  padding: 0 30px;
}
.px-31 {
  padding: 0 31px;
}
.px-32 {
  padding: 0 32px;
}
.px-33 {
  padding: 0 33px;
}
.px-34 {
  padding: 0 34px;
}
.px-35 {
  padding: 0 35px;
}
.px-36 {
  padding: 0 36px;
}
.px-37 {
  padding: 0 37px;
}
.px-38 {
  padding: 0 38px;
}
.px-39 {
  padding: 0 39px;
}
.px-40 {
  padding: 0 40px;
}
.px-41 {
  padding: 0 41px;
}
.px-42 {
  padding: 0 42px;
}
.px-43 {
  padding: 0 43px;
}
.px-44 {
  padding: 0 44px;
}
.px-45 {
  padding: 0 45px;
}
.px-46 {
  padding: 0 46px;
}
.px-47 {
  padding: 0 47px;
}
.px-48 {
  padding: 0 48px;
}
.px-49 {
  padding: 0 49px;
}
.px-50 {
  padding: 0 50px;
}
.px-51 {
  padding: 0 51px;
}
.px-52 {
  padding: 0 52px;
}
.px-53 {
  padding: 0 53px;
}
.px-54 {
  padding: 0 54px;
}
.px-55 {
  padding: 0 55px;
}
.px-56 {
  padding: 0 56px;
}
.px-57 {
  padding: 0 57px;
}
.px-58 {
  padding: 0 58px;
}
.px-59 {
  padding: 0 59px;
}
.px-60 {
  padding: 0 60px;
}
.px-61 {
  padding: 0 61px;
}
.px-62 {
  padding: 0 62px;
}
.px-63 {
  padding: 0 63px;
}
.px-64 {
  padding: 0 64px;
}
.px-65 {
  padding: 0 65px;
}
.px-66 {
  padding: 0 66px;
}
.px-67 {
  padding: 0 67px;
}
.px-68 {
  padding: 0 68px;
}
.px-69 {
  padding: 0 69px;
}
.px-70 {
  padding: 0 70px;
}
.px-71 {
  padding: 0 71px;
}
.px-72 {
  padding: 0 72px;
}
.px-73 {
  padding: 0 73px;
}
.px-74 {
  padding: 0 74px;
}
.px-75 {
  padding: 0 75px;
}
.px-76 {
  padding: 0 76px;
}
.px-77 {
  padding: 0 77px;
}
.px-78 {
  padding: 0 78px;
}
.px-79 {
  padding: 0 79px;
}
.px-80 {
  padding: 0 80px;
}
.px-81 {
  padding: 0 81px;
}
.px-82 {
  padding: 0 82px;
}
.px-83 {
  padding: 0 83px;
}
.px-84 {
  padding: 0 84px;
}
.px-85 {
  padding: 0 85px;
}
.px-86 {
  padding: 0 86px;
}
.px-87 {
  padding: 0 87px;
}
.px-88 {
  padding: 0 88px;
}
.px-89 {
  padding: 0 89px;
}
.px-90 {
  padding: 0 90px;
}
.px-91 {
  padding: 0 91px;
}
.px-92 {
  padding: 0 92px;
}
.px-93 {
  padding: 0 93px;
}
.px-94 {
  padding: 0 94px;
}
.px-95 {
  padding: 0 95px;
}
.px-96 {
  padding: 0 96px;
}
.px-97 {
  padding: 0 97px;
}
.px-98 {
  padding: 0 98px;
}
.px-99 {
  padding: 0 99px;
}
.px-100 {
  padding: 0 100px;
}

/* padding y */
.py-1 {
  padding: 1px 0;
}
.py-2 {
  padding: 2px 0;
}
.py-3 {
  padding: 3px 0;
}
.py-4 {
  padding: 4px 0 !important;
}
.py-5 {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
.py-6 {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.py-7 {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}
.py-8 {
  padding: 8px 0;
}
.py-9 {
  padding: 9px 0;
}
.py-10 {
  padding: 10px 0;
}
.py-11 {
  padding: 11px 0;
}
.py-12 {
  padding: 12px 0;
}
.py-13 {
  padding: 13px 0;
}
.py-14 {
  padding: 14px 0;
}
.py-15 {
  padding: 15px 0;
}
.py-16 {
  padding: 16px 0;
}
.py-17 {
  padding: 17px 0;
}
.py-18 {
  padding: 18px 0;
}
.py-19 {
  padding: 19px 0;
}
.py-20 {
  padding: 20px 0;
}
.py-21 {
  padding: 21px 0;
}
.py-22 {
  padding: 22px 0;
}
.py-23 {
  padding: 23px 0;
}
.py-24 {
  padding: 24px 0;
}
.py-25 {
  padding: 25px 0;
}
.py-26 {
  padding: 26px 0;
}
.py-27 {
  padding: 27px 0;
}
.py-28 {
  padding: 28px 0;
}
.py-29 {
  padding: 29px 0;
}
.py-30 {
  padding: 30px 0;
}
.py-31 {
  padding: 31px 0;
}
.py-32 {
  padding: 32px 0;
}
.py-33 {
  padding: 33px 0;
}
.py-34 {
  padding: 34px 0;
}
.py-35 {
  padding: 35px 0;
}
.py-36 {
  padding: 36px 0;
}
.py-37 {
  padding: 37px 0;
}
.py-38 {
  padding: 38px 0;
}
.py-39 {
  padding: 39px 0;
}
.py-40 {
  padding: 40px 0;
}
.py-41 {
  padding: 41px 0;
}
.py-42 {
  padding: 42px 0;
}
.py-43 {
  padding: 43px 0;
}
.py-44 {
  padding: 44px 0;
}
.py-45 {
  padding: 45px 0;
}
.py-46 {
  padding: 46px 0;
}
.py-47 {
  padding: 47px 0;
}
.py-48 {
  padding: 48px 0;
}
.py-49 {
  padding: 49px 0;
}
.py-50 {
  padding: 50px 0;
}
.py-51 {
  padding: 51px 0;
}
.py-52 {
  padding: 52px 0;
}
.py-53 {
  padding: 53px 0;
}
.py-54 {
  padding: 54px 0;
}
.py-55 {
  padding: 55px 0;
}
.py-56 {
  padding: 56px 0;
}
.py-57 {
  padding: 57px 0;
}
.py-58 {
  padding: 58px 0;
}
.py-59 {
  padding: 59px 0;
}
.py-60 {
  padding: 60px 0;
}
.py-61 {
  padding: 61px 0;
}
.py-62 {
  padding: 62px 0;
}
.py-63 {
  padding: 63px 0;
}
.py-64 {
  padding: 64px 0;
}
.py-65 {
  padding: 65px 0;
}
.py-66 {
  padding: 66px 0;
}
.py-67 {
  padding: 67px 0;
}
.py-68 {
  padding: 68px 0;
}
.py-69 {
  padding: 69px 0;
}
.py-70 {
  padding: 70px 0;
}
.py-71 {
  padding: 71px 0;
}
.py-72 {
  padding: 72px 0;
}
.py-73 {
  padding: 73px 0;
}
.py-74 {
  padding: 74px 0;
}
.py-75 {
  padding: 75px 0;
}
.py-76 {
  padding: 76px 0;
}
.py-77 {
  padding: 77px 0;
}
.py-78 {
  padding: 78px 0;
}
.py-79 {
  padding: 79px 0;
}
.py-80 {
  padding: 80px 0;
}
.py-81 {
  padding: 81px 0;
}
.py-82 {
  padding: 82px 0;
}
.py-83 {
  padding: 83px 0;
}
.py-84 {
  padding: 84px 0;
}
.py-85 {
  padding: 85px 0;
}
.py-86 {
  padding: 86px 0;
}
.py-87 {
  padding: 87px 0;
}
.py-88 {
  padding: 88px 0;
}
.py-89 {
  padding: 89px 0;
}
.py-90 {
  padding: 90px 0;
}
.py-91 {
  padding: 91px 0;
}
.py-92 {
  padding: 92px 0;
}
.py-93 {
  padding: 93px 0;
}
.py-94 {
  padding: 94px 0;
}
.py-95 {
  padding: 95px 0;
}
.py-96 {
  padding: 96px 0;
}
.py-97 {
  padding: 97px 0;
}
.py-98 {
  padding: 98px 0;
}
.py-99 {
  padding: 99px 0;
}
.py-100 {
  padding: 100px 0;
}

/* flex properties */
.js-s {
  justify-content: start;
}
.js-c {
  justify-content: center;
}
.js-e {
  justify-content: end;
}
.js-sb {
  justify-content: space-between !important;
}
.js-se {
  justify-content: space-evenly !important;
}
.js-sa {
  justify-content: space-around !important;
}
.al-s {
  align-items: start;
}
.al-c {
  align-items: center;
}
.al-e {
  align-items: end !important;
}

/* containers */

.aw-container {
  width: 88%;
  margin: auto;
}
.con-col {
  display: flex;
  flex-direction: column;
}
.con-row {
  display: flex;
  flex-direction: row;
}

/* inputs */
.form-input {

padding: 0.4rem !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    outline: none !important;
    font-size: 16px !important;
    font-family: "Vazirmatn", sans-serif !important;
    color: #373737 !important;
}
.form-input:focus {
  border: 1px solid #a8a8a8;
}
/* buttons */

.aw-btn {
  padding: 0.4rem 0.5rem;
  border: none;
  border-radius: 7px;
  background-color: #000000;
  color: #ffffff;
  font-size: 1.2rem;
  font-family: "Vazirmatn", sans-serif;
  cursor: pointer;
  display: flex
;
height: 2.5rem;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  justify-content: center;

  max-height: 100%;
  position: relative;
}

.aw-btn.blue {
  background-color: rgb(0, 140, 255);
  color: #fff;
}
.aw-btn.blue:hover {
  background-color: rgb(0, 133, 241);
  color: #fff;
}
.aw-btn.blue:active {
  background-color: rgb(0, 128, 233);
  color: #fff;
}
.aw-btn.red {
  background-color: rgb(214, 60, 60);
  color: #fff;
}
.aw-btn.red:hover {
  background-color: rgb(199, 48, 48);
  color: #fff;
}
.aw-btn.red:active {
  background-color: rgb(194, 53, 53);
  color: #fff;
}
.aw-btn.green {
  background-color: rgb(33, 163, 0);
  color: #ffffff;
}
.aw-btn.green:hover {
  background-color: rgb(30, 151, 0);
  color: #ffffff;
}
.aw-btn.green:active {
  background-color: rgb(29, 145, 0);
  color: #ffffff;
}
.aw-btn.yellow-green {
  background-color: rgb(112, 197, 0);
  color: #ffffff;
}
.aw-btn.yellow-green:hover {
  background-color: rgb(104, 184, 0);
  color: #ffffff;
}
.aw-btn.yellow-green:active {
  background-color: rgb(93, 165, 0);
  color: #ffffff;
}
.aw-btn.yellow {
  background-color: rgb(207, 187, 0);
  color: #ffffff;
}
.aw-btn.yellow:hover {
  background-color: rgb(196, 176, 0);
  color: #ffffff;
}
.aw-btn.yellow:active {
  background-color: rgb(177, 159, 0);
  color: #ffffff;
}
.aw-btn.black {
  background-color: rgb(0, 0, 0);
  color: #fff;
}
.aw-btn.black:hover {
  background-color: rgb(26, 26, 26);
  color: #fff;
}
.aw-btn.black:active {
  background-color: rgb(49, 49, 49);
  color: #fff;
}
.aw-btn.grey {
  background-color: rgb(117, 117, 117);
  color: #fff;
}
.aw-btn.grey:hover {
  background-color: rgb(107, 107, 107);
  color: #fff;
}
.aw-btn.grey:active {
  background-color: rgb(94, 94, 94);
  color: #fff;
}
.aw-btn.green-3 {
  background-color: #1a8500;
  color: #fff;
}
.aw-btn.blackish-orange {
  background-color: #c26400;
  color: #fff;
}
.aw-btn.white {
  background-color: rgb(255, 255, 255);
  color: #5a5a5a;
  border: 1px solid #b4b4b4;
}
.aw-btn.white:hover {
  background-color: rgb(235, 235, 235);
  color: #5a5a5a;
  border: 1px solid #b4b4b4;
}
.aw-btn.white:active {
  background-color: rgb(226, 226, 226);
  color: #5a5a5a;
  border: 1px solid #b4b4b4;
}
.aw-btn.pink {
  background-color: rgb(255, 181, 181);
  color: #6e3c3c;
}
.aw-btn.pink:hover {
  background-color: rgb(255, 174, 174);
  color: #6e3c3c;
}
.aw-btn.pink:active {
  background-color: rgb(255, 161, 161);
  color: #6e3c3c;
}
.aw-btn.cyan {
  background-color: rgb(85, 167, 139);
  color: #fff;
}
.aw-btn.cyan:hover {
  background-color: rgb(78, 155, 129);
  color: #fff;
}
.aw-btn.cyan:active {
  background-color: rgb(69, 141, 117);
  color: #fff;
}
.aw-btn.orange {
  background-color: rgb(255, 123, 0);
  color: #fff;
}
.aw-btn.orange:hover {
  background-color: rgb(240, 116, 0);
  color: #fff;
}
.aw-btn.orange:active {
  background-color: rgb(230, 111, 0);
  color: #fff;
}
.aw-btn.purple {
  background-color: rgb(207, 0, 197);
  color: #fff;
}
.aw-btn.purple:hover {
  background-color: rgb(190, 0, 181);
  color: #fff;
}
.aw-btn.purple:active {
  background-color: rgb(177, 0, 168);
  color: #fff;
}
.aw-btn.brown {
  background-color: #57321c;
  color: #fff;
  border: 1px solid wheat;
}
.aw-btn.brown:hover {
  background-color: #774325;
  color: #fff;
}
.aw-btn.brown:active {
  background-color: #99552e;
  color: #fff;
}
.aw-btn.blackish-blue {
  background-color: #295680;
  color: #fff;
}
.aw-btn.blackish-blue:hover {
  background-color: #254e74;
  color: #fff;
}
.aw-btn.blackish-blue:active {
  background-color: #204466;
  color: #fff;
}
.aw-btn.plank {
  background-image: url(../images/plank.png);
  background-size: 100% 50px;
  background-repeat: no-repeat;
  color: wheat;
}
.aw-btn.plank:hover {
  filter: brightness(1.2);
}
.aw-btn.plank:active {
  filter: brightness(0.8);
}
.aw-btn.sky-blue {
  background-color: #2196f3;

  color: wheat;
}
.aw-btn.sky-blue:hover {
  background-color: #208fe9;
}
.aw-btn.sky-blue:active {
  background-color: #1d87dd;
}
.aw-btn.green-2 {
  background-color: #53a557;

  color: wheat;
}
.aw-btn.green-2:hover {
  background-color: #4c9750;
}
.aw-btn.green-2:active {
  background-color: #458a48;
}

/* spinner css */

.lds-ring {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  margin: 0px;
  border: 3px solid wheat;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.d-n {
  display: none !important;
}
.d-f {
  display: flex !important;
}
.d-b {
  display: block !important;
}
/* font-size */
.fs-1 {
  font-size: 1px;
}
.fs-19 {
  font-size: 19px;
}
.fs-20 {
  font-size: 20px;
}
.fs-21 {
  font-size: 21px;
}
.fs-22 {
  font-size: 22px;
}
.fs-23 {
  font-size: 23px;
}
.fs-24 {
  font-size: 24px;
}
/* font-family */

.ff-rubik {
  font-family: var(--Rubik);
}

/* font-weight */
.fw-b {
  font-weight: bold;
}

/* backgrounds */

.bg-red {
  background-color: rgb(167 11 11);
}
.bg-wheat {
  background-color: wheat;
}
.bg-white {
  background-color: white;
}
.bg-black {
  background-color: black;
}
.bg-green {
  background-color: rgb(46, 92, 9);
}
.bg-blue {
  background-color: rgb(6, 60, 131);
}
/* colors  */

.c-white {
  color: white;
}
.c-wheat {
  color: wheat;
}
.c-black {
  color: black;
}

/* opacity */
.op-0 {
  opacity: 0;
}
.op-01 {
  opacity: 0.1;
}
.op-02 {
  opacity: 0.2;
}
.op-03 {
  opacity: 0.3;
}
.op-04 {
  opacity: 0.4;
}
.op-05 {
  opacity: 0.5;
}
.op-06 {
  opacity: 0.6;
}
.op-07 {
  opacity: 0.7;
}
.op-08 {
  opacity: 0.8;
}
.op-09 {
  opacity: 0.9;
}
.op-1 {
  opacity: 1;
}
.trans-1s {
  transition: 1s;
}
.trans-2s {
  transition: 2s;
}
.scale-1 {
  transform: scale(1) !important;
}
.brightness-9 {
  filter: brightness(0.9);
}
.brightness-5 {
  filter: brightness(0.5);
}