@font-face {
    font-family: 'IRANSansWeb';
    src: url('../fonts/IRANSansWeb.ttf') format('truetype');
}

@font-face {
    font-family: 'IRANSansWeb_Bold';
    src: url('../fonts/IRANSansWeb_Bold.ttf') format('truetype');
}
* {
    font-family: IRANSansWeb;
    box-sizing: border-box;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
div {
    display: block;
    unicode-bidi: isolate;
}
header, footer, nav, article, figure, figcaption, small {
    display: block;
}
header {
    position: fixed;
    z-index: 9999;
    width: 100%;
    left: 0;
    top: 0;
    background-color: #2a343f;
    color: #d9d9d9;
    height: 3.1em;
}
#content {
    width: 60%;
    height: auto;
    position: relative;
    vertical-align: top;
    margin-top: 1em;
    margin-bottom: 0;
    padding-bottom: 0;
    display: inline-block;
}
/*
#content .clockheightholder {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding-bottom: 100%;
    margin: 0;
}
*/

/* حالت پیش‌فرض: دسکتاپ */
#bg-video {
  object-position: center center; /* مرکز */
}

/* موبایل کوچک مثل Telegram Mini App */
@media (max-width: 600px) {
  #bg-video {
    object-position: right center; /* بیشتر سمت راست ویدیو دیده شود */
  }
}
 @media (max-width: 850px) {
    iframe {
      width: 95%;
      height: 70vh; /* برای موبایل واکنش‌گرا */
    }
}
/* تبلت */
@media (min-width: 601px) and (max-width: 1024px) {
  #bg-video {
    object-position: center 30%; /* جابجایی عمودی یا افقی دلخواه */
    background: #000;
  }
}
@media (max-width: 1079px) {
    header {
        position: relative;
    }
}
@media (max-width: 882px) {
    #content {
        width: 100%;
        margin-top: 0;
        text-align: center;
    }
        #content .clockheightholder {
        padding-bottom: 70%;
    }
}
@media (max-width: 760px) {
    #content .clockheightholder {
        padding-bottom: 85%;
    }
}
@media (max-width: 675px) {
    #content {
        margin-top: 0;
    }
        #content .clockheightholder {
        padding-bottom: 95%;
    }
}
@media (max-width: 538px) {
    #content .clockheightholder {
        padding-bottom: 102%;
    }
}
body {
    margin: 0;
    background-color: #121113;
}

section {
    text-align: center;
}

.container-fluid {
    padding-left: 0;
    padding-right: 0;
    margin: 0 auto;
}
#content {
    width: 60%;
    height: auto;
    position: relative;
    vertical-align: top;
    margin-top: 1em;
    margin-bottom: 0;
    padding-bottom: 0;
    display: inline-block
}

#content .clockheightholder {
     display: grid;
    place-items: center;
    height: 100%;


}

#content canvas {
    z-index: 1;
    width: 93%;
    height: auto;
    left: 0;
    right: 0;
    vertical-align: top;
    margin: 0 auto;
}
iframe {
    width: 800px;   /* عرض دلخواه */
    height: 0px;  /* ارتفاع دلخواه */
    border: 100;
    border-radius: 12px; /* اختیاری برای زیبایی */
    box-shadow: 0 0 20px rgba(0,0,0,0.4); /* سایهٔ زیبا */
  }

 
::placeholder {
    color: grey;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.intro {
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    text-align: center;
    display: block;
}

/*---------------------------- Intro Video -----------------------------*/
#bg-video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;          /* پر کردن کل صفحه */
  object-position: center;    /* همیشه مرکز نمایش داده می‌شود */
  z-index: -1;
}




#intro-video {
    position: fixed;
    top: 0;
    right: 0;
    width: 120%;
    height: 120%;
}

/*---------------------------- Intro Content -----------------------------*/

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    height: auto;
    width:auto;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    background-color: none;
    padding: 80px 0;
}

    .content .logo {
        display: block;
        margin-bottom: 100px;
        height: auto;
        width: 50%;
        position: relative;
        animation: fullOpacity 20s;
        -webkit-animation: fullOpacity 20s;
    }

@keyframes fullOpacity {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes mymove {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*---------------------------- Phone Info -----------------------------*/

.phone-box {
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    justify-content: center;
    align-content: center;
}

.phone-number {
    align-items: center;
    display: flex;
    flex-direction: row;
    position: relative;
    background-color: #fff;
    border-radius: 15px 0 0 0;
    width: 75%;
}

    .phone-number > span {
        position: absolute;
        left: 13px;
        top: 18.5px;
        font-size: 15px;
        color: black;
    }

    .phone-number input {
        font-size: 17px;
        font-weight: 400;
        outline: none;
        margin: 2px;
        border: 1px solid white;
        border-radius: 10px;
        color: #000;
        padding: 10px;
        text-align: left;
    }

        .phone-number input:nth-of-type(1) {
            padding-left: 40px;
            width: 30%;
        }

        .phone-number input:nth-of-type(2) {
            width: 70%;
        }

    .phone-number .horizontal-line {
        margin-right: 5px;
        padding-right: 5px;
        border-right: 1px solid black;
        height: 30px;
    }

.phone-submit {
    background-color: none;
    border-top: 2px solid white;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    height: auto;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    border-radius: 0 0 15px 0;
    padding: 15px;
    width: 25%;
}

    .phone-submit > span {
        color: white;
        font-size: 17px;
        font-weight: 900;
        text-align: center;
        margin: 0;
        height: 20px;
        width: auto;
    }

    .phone-submit:hover {
        cursor: pointer;
    }

/*---------------------------- Network -----------------------------*/

.content .network {
    margin-top: 60px;
}

.network > svg {
    font-size: 30px;
    color: white;
    transition: color .1s ease-in;
    margin: 0 20px;
}

.network > a {
    font-size: 30px;
    color: white;
    transition: color .1s ease-in;
    margin: 0 20px;
}

    .network > svg:hover {
        color: #FBDE00;
        cursor: pointer;
    }
    .network > a:hover {
        color: #FBDE00;
        /*cursor: pointer;*/
    }

/*---------------------------- Footer -----------------------------*/

.footer {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .footer > span {
        font-size: 16px;
        font-weight: 700;
        color: gold;
        margin: 5px auto;
    }