@font-face {
    font-family: 'shabnam';
    src: url(../font/Shabnam-FD.ttf);
}

*{
    padding: 0;
    margin: 0;
    font-family: 'shabnam';
    background-color: rgb(32, 32, 32);
    color: aliceblue;
    box-sizing: border-box;
    transition: all 100ms;
    border-radius: 1em;
}
/* .bg-img{background: url(../img/bg-pattern.jpg);} */

a{
    text-decoration: none;
}

.display-none{display: none!important;}


.continer{
    display: flex;
    flex-wrap: wrap;
}
.center-content{
    place-content: center;
}
.center-item{
    place-items: center;
}

.center-all{
    place-content: center;
    place-items: center;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}



.fullscreen{
    width: 100%;
    height: 100vh;
}


/* margin ----------------------------- */
.margin-0_5em{margin: 0.5em;}
.margin-1em{margin: 1em;}
.margin-2em{margin: 2em;}

.margin-top-0_3em{margin-top: 0.3em;}
.margin-top-0_5em{margin-top: 0.5em;}
.margin-top-0_8em{margin-top: 0.8em;}
.margin-top-1em{margin-top: 1em;}
.margin-top-2em{margin-top: 2em;}
.margin-top-3em{margin-top: 3em;}
.margin-top-4em{margin-top: 4em;}
.margin-top-4_5em{margin-top: 4.5em;}
.margin-top-5em{margin-top: 5em;}
.margin-top-6em{margin-top: 6em;}
.margin-top-7em{margin-top: 7em;}
.margin-top-8em{margin-top: 8em;}
.margin-top-9em{margin-top: 9em;}
.margin-top-10em{margin-top: 10em;}

.margin-bottom-0_5em{margin-bottom: 0.5em;}
.margin-bottom-1em{margin-bottom: 1em;}
.margin-bottom-2em{margin-bottom: 2em;}
.margin-bottom-3em{margin-bottom: 3em;}

.margin-left-0_5em{margin-left: 0.5em;}
.margin-left-1em{margin-left: 1em;}
.margin-left-2em{margin-left: 2em;}
.margin-left-3em{margin-left: 3em;}

.margin-right-0_5em{margin-right: 0.5em;}
.margin-right-1em{margin-right: 1em;}
.margin-right-2em{margin-right: 2em;}



/* padding--------------------------- */
.padding-0_25em{padding: 0.05em;}
.padding-0_5em{padding: 0.5em;}
.padding-1em{padding: 1em;}
.padding-2em{padding: 2em;}
.padding-3em{padding: 3em;}
.padding-4em{padding: 4em;}
.padding-5em{padding: 5em;}

.padding-top-0_5em{padding-top: 0.5em;}
.padding-top-1em{padding-top: 1em;}
.padding-top-2em{padding-top: 2em;}

.padding-left-1em{padding-left: 1em;}
.padding-left-2em{padding-left: 2em;}

.padding-right-1em{padding-right: 1em;}
.padding-right-2em{padding-right: 2em;}
.padding-right-3em{padding-right: 3em;}
.padding-right-0_5em{padding-right: 0.5em;}

.padding-bottom-1em{padding-bottom: 1em;}
.padding-bottom-2em{padding-bottom: 2em;}
.padding-bottom-3em{padding-bottom: 3em;}
.padding-bottom-4em{padding-bottom: 4em;}

/* font */

.font-small{font-size: small;}
.font-large{font-size: large;}
.font-size-xx_large{font-size: xx-large;}


.space-2{letter-spacing: 2px;}
.swiper {
    /* width: ; */
    height: auto;
  }


  .r-0{border-radius: 0;}
  .r_0_5{border-radius: 0.5em;}
  .r-1em{border-radius: 1em;}
  .r-100em{border-radius: 100em;}

.input{border: 1px solid rgb(255, 255, 255);}

.submit{
    background-color: rgb(26, 116, 56);
    border-radius: 1em;
    padding: 1em;
    color: aliceblue;
    border: 1px solid aliceblue;
}

.input-clear{
    background-color: transparent;
    border: none;
}

.text-center{text-align: center;}

.form{
    /* background-color: #0f0f0f!important; */
    border: 3px dashed #000000;
}



.bg-transparent{background-color: transparent;}
.bg-blue{background-color: rgb(19, 102, 141);}
.bg-dark{background-color: #131313;}
.bg-dark-50{background-color: #1313139c;}
.bg-green{background-color: rgb(26, 116, 56);}
.bg-yellow{background-color: rgb(253, 207, 0);}
.bg-red{background-color: rgb(173, 0, 0);}
.bg-legend{background: linear-gradient(90deg,rgb(99, 0, 82),rgb(113, 0, 165));}

.blur{
    backdrop-filter: blur(10px);   
}

.color-black{color: #000000;}
.color-green{color: #08eb4c;}
.color-white{color: #ffffff;}

.border-none{border: none;}
.border-green{border: 1px solid #06b800;}
.shadow-green{box-shadow: 0 0 20px 1px #0474009c;}


.position-fixed{position: fixed;}
.position-absolute{position: absolute;}
.top-0{top: 0;}

.shadow-1{box-shadow: 0 0 0.3em 0.07em #000000;}

.z-index-10{z-index: 10;}


.hover1:hover{
    transform: scale(0.9,0.9);
    background-color: green;
}
.hover2:hover{
    transform: scale(1.01,1.01);
    background-color: rgb(39, 146, 160);
}
.hover3:hover{
    transform: scale(1.01,1.01);
    background-color: rgb(175, 158, 0);
}


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

    .form{
        border: none;
    }
    .pc-display-none{display: flex!important;}

    .res-continer{
        display: flex!important;
        flex-wrap: wrap!important;
    }
    .res-center-item{
      place-content: center!important;
      place-items: center!important;
    }

    .res-center-all{
        place-content: center;
        place-items: center;
    }

    .res-col-1 {width: 8.33%!important;}
    .res-col-2 {width: 16.66%!important;}
    .res-col-3 {width: 25%!important;}
    .res-col-4 {width: 33.33%!important;}
    .res-col-5 {width: 41.66%!important;}
    .res-col-6 {width: 50%!important;}
    .res-col-7 {width: 58.33%!important;}
    .res-col-8 {width: 66.66%!important;}
    .res-col-9 {width: 75%!important;}
    .res-col-10 {width: 83.33%!important;}
    .res-col-11 {width: 91.66%!important;}
    .res-col-12 {width: 100%!important;}

    .res-font-large{font-size: large;}

    .res-text-center{text-align: center;}

    .res-margin-right-0{margin-right: 0;}

    .res-margin-top-0_5em{margin-top: 0.5em;}
    .res-margin-top-1em{margin-top: 1em;}
}