@import "../css/fontawesome-free-6.5.1-web/all.css";
/* @import "./css/bootstrap-5.3.3-dist/css/bootstrap.css";  */

@font-face {
    font-family: "vazir1";
    src: url("../fonts/Vazir-Bold.woff") format("woff");
}

@font-face {
    font-family: "IRANSans-web";
    src: url("../fonts/IRANSans-web.woff") format("woff");
}

@font-face {
    font-family: "bhoma";
    src: url("../fonts/BHoma_0.ttf") format("woff");
}
@font-face {
    font-family:  iransans;
    src: url('../fonts/IRANSansWeb(FaNum)V.ttf');
}
.font-iransans{
    font-family: iransans;
}
@font-face {
    font-family: "San";
    src: url("../fonts/IRANSansWeb(FaNum).ttf") format("ttf");
}


@font-face {
    font-family: "peyda_old";
    src: url("../fonts/peyda/Peyda-Regular.ttf") format("woff");
    src: url("../fonts/peyda/Peyda-ExtraBold.ttf") format("woff");
}

@font-face {
    font-family: "peyda";
    src: url("../fonts/Yekan Bakh - Pro/Font Family/YekanBakh-Regular.ttf")
        format("woff");
    src: url("../fonts/Yekan Bakh - Pro/Font Family/YekanBakh-Bold.ttf")
        format("woff");
}
/* in head define font-peyda!!! */
/* ------------------------------------------------------------------------------------------------------- */

:root {
    --color_violate: #7301f7;
    --color_blue: #007bff;
    --color_yellow: #f9a603;
}

.bg-violate {
    background-color: var(--color_blue);
}

.text-violate {
    color: var(--color_violate);
}
/* ===================================== */
/* custom scrollbar */

::-webkit-scrollbar {
    inline-size: 8px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 1px;
    border: 0px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf;
}

/* custom scrollbar */

::-webkit-scrollbar {
    inline-size: 8px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color_violate);
    border-radius: 1px;
    border: 0px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color_violate);
    /*  background-color: #a8bbbf; */
}

/* ===================================== */

.select-dropdown li:hover,
.select-dropdown input:checked ~ label {
    background-color: #f2f2f2;
}

.select-dropdown input:focus ~ label {
    background-color: #dfdfdf;
}

.pry-border1 {
    border: 2px solid #ddd;
    border-radius: 17px;
    overflow: hidden;
}

.pry-video1 {
    border: 2px solid #ddd;
    border-radius: 17px;
    overflow: hidden;
    padding: 7px;
    aspect-ratio: 16 / 9;
}
/* ===================================== */
/* ------------------------------------------------------ */
/* Responsive Bootstrap */
/* ------------------------------------------------------  */
/* html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
} */
/* ------------------------------------------------------ */
/* Responsive */
/* ------------------------------------------------------  */
/* Default Design */

.gfg-div {
    /* To make all elements center */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Default Styling */
    margin: 20px auto;
    padding: 30px;
    inline-size: 300px;
    block-size: 300px;
    background-color: darkseagreen;
    color: black;
}



/* @media (min-inline-size:320px) {}
   @media (min-inline-size:768px) {}
   @media (min-inline-size:1280px) {}
   @media (min-inline-size:1536px) {}
   @media (min-inline-size:1920px) {}
   @media (min-inline-size:2560px) {} */

/* For Desktop View */
/* @media screen and (min-inline-size: 1024px) {} */

/* For Tablet View */
/* @media screen and (min-inline-size: 768px) and (max-device-width: 1024px) {} */

/* For Mobile Portrait View */
/* @media screen and (max-inline-size: 480px) and (orientation: portrait) {} */

/* For Mobile Landscape View */
/* @media screen and (max-inline-size: 640px) and (orientation: landscape) {} */

/* For Mobile Phones Portrait or Landscape View */
/* @media screen and (max-inline-size: 640px) {} */

/* For iPhone 4 Portrait or Landscape View */
/* @media screen and (min-device-width: 320px) {} */

/* For iPhone 5 Portrait or Landscape View */
/* @media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {} */

/* For iPhone 6 and 6 plus Portrait or Landscape View */
/* @media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3) {} */

/* For deskinset-block-start: */
/* .col-1 {inline-size: 8.33%;}
    .col-2 {inline-size: 16.66%;}
    .col-3 {inline-size: 25%;}
    .col-4 {inline-size: 33.33%;}
    .col-5 {inline-size: 41.66%;}
    .col-6 {inline-size: 50%;}
    .col-7 {inline-size: 58.33%;}
    .col-8 {inline-size: 66.66%;}
    .col-9 {inline-size: 75%;}
    .col-10 {inline-size: 83.33%;}
    .col-11 {inline-size: 91.66%;}
    .col-12 {inline-size: 100%;} */

/* For mobile phones: */
/* @media only screen and (max-inline-size: 768px) {
     [class*="col-"] {inline-size: 100%;}
    } */
/* ------------------------------------------------------ */
/* Responsive */
/* ------------------------------------------------------  */

/* @import url('https://fonts.googleapis.com/css?family=Numans'); */


.shadow1 {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 1px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.shadow2 {
    box-shadow: rgba(60, 64, 67, 0.3)0px 1px 3px 1px,
    rgba(60, 64, 67, 0.15) 0px -2px 1px 1px;
}
.shadow-up {
    box-shadow: rgba(60, 64, 67, 0.3) 0px -1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px -1px 3px 1px;
}
.border0
{
    border-radius: 7px!important;
    border:0px solid #aaa!important;
}
.borderR
{
    border-radius: 7px!important;
}
.borderRY
{
    border-radius: 7px 0px!important;
    border:1px  solid #aaa!important;
}
.borderRT{
    border-radius: 7px 7px 0px 0px!important;
}
.borderRB{
    border-radius: 0px 0px 7px 7px!important;
}
.borderRX
{
    border-radius: 0px 7px!important;
    border:1px  solid #aaa!important;
}
.border1
{
    border-radius: 7px!important;
    border:1px solid #aaa!important;
}

/* <!-- HTML !-->
<button class="button-82-pushable" role="button">
  <span class="button-82-shadow"></span>
  <span class="button-82-edge"></span>
  <span class="button-82-front text">
    Button 82
  </span>
</button> */

/* CSS */
.button-82-pushable {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.button-82-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.button-82-edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(
        to left,
        hsl(340deg 100% 16%) 0%,
        hsl(340deg 100% 32%) 8%,
        hsl(340deg 100% 32%) 92%,
        hsl(340deg 100% 16%) 100%
    );
}

.button-82-front {
    display: block;
    position: relative;
    padding: 6px 13px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-size: 11px;
    color: white;
    background: hsl(345deg 100% 47%);
    will-change: transform;
    transform: translateY(-4px);
    transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

@media (min-width: 768px) {
    .button-82-front {
        font-size: 1.25rem;
        /* font-size: 12px; */
        padding: 12px 42px;
    }
}

.button-82-pushable:hover {
    filter: brightness(110%);
    -webkit-filter: brightness(110%);
}

.button-82-pushable:hover .button-82-front {
    transform: translateY(-6px);
    transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.button-82-pushable:active .button-82-front {
    transform: translateY(-2px);
    transition: transform 34ms;
}

.button-82-pushable:hover .button-82-shadow {
    transform: translateY(4px);
    transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.button-82-pushable:active .button-82-shadow {
    transform: translateY(1px);
    transition: transform 34ms;
}

.button-82-pushable:focus:not(:focus-visible) {
    outline: none;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}