/* 
 */
 
 @font-face {
  font-family: IRANSansWeb_Medium;
  font-style: normal;
  font-weight: normal;
  src: url('/static/fonts/IRANSansWeb_Medium.eot');
  src: url('/static/fonts/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'),
    url('/static/fonts/IRANSansWeb_Medium.woff2') format('woff2'),
    url('/static/fonts/IRANSansWeb_Medium.woff') format('woff'),
    url('/static/fonts/IRANSansWeb_Medium.ttf') format('truetype');
}

a,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
span,
div,
input {
  font-family: IRANSansWeb_Medium !important;
}
body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: black;
}

.led-container {
  position: relative;
  width: 80%;
  height: 80%;
  box-sizing: border-box;
}

.led-section {
  position: absolute;
  background: linear-gradient(to bottom, #00008a, #87ceeb);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1rem;
  /*resize: both;*/
  overflow: hidden;
}

html {
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: hidden;

}

::-webkit-scrollbar {
  width: 0;
  /* Remove scrollbar space */
  background: transparent;
  /* Optional: just make scrollbar invisible */
}

/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
  background: #FF0000;
}

.controls {
  position: absolute;
  top: 500px;
  left: 500px;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px;
  border-radius: 5px;
  color: white;
  font-family: Arial, sans-serif;
}

.controls input {
  width: 50px;
  margin: 5px;
  background-color: #333;
  border: 1px solid #fff;
  color: white;
  padding: 2px 5px;
}

.controls label {
  display: block;
  margin-bottom: 5px;
}
.screenSection {
    position: absolute;
    background: linear-gradient(to bottom, #00008a, #87ceeb);
    /* از آبی پررنگ به آبی آسمانی */
    margin: 0px;
    padding: 0px;
    top: 0px;
    left: 0px;
    overflow: hidden;
    font-size: 10PX;
    justify-items: center;
}
.screenSection2 {
    position: absolute;
    background: linear-gradient(to bottom, #4848b5, hsl(240, 100%, 27%) 0%, #87ceeb 52%);
    /* از آبی پررنگ به آبی آسمانی */
    margin: 0px;
    padding: 0px;
    top: 0px;
    left: 0px;
    overflow: hidden;
    font-size: 10PX;
    justify-items: center;
}
.image_slider {
    position: relative;
    height: 100%;
    width: 100%;
}

.slide {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide img {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide img.active {
    opacity: 1;
}

.text-overlay-0 {
    position: absolute;
    bottom: 15%;
    left: 0;
    width: 100%;
    text-align: center;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    /* Pale layer with opacity */
    /* padding: 10px; */
    box-sizing: border-box;
    font-size: 11px;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.text-overlay-0 .english {
  font-size: 10px;
  color: rgb(255, 255, 255); /* Lighter shade for English */
  margin-top: 4px;
  display:block;
}











.text-overlay-1 {
  position: absolute;
  bottom: 15%;
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  /* Pale layer with opacity */
  /* padding: 10px; */
  box-sizing: border-box;
  font-size: 11px;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.text-overlay-1 .english {
  font-size: 10px;
  color: rgb(255, 255, 255); /* Lighter shade for English */
  margin-top: 4px;
  display:block;
}

.text-overlay-2 {
position: absolute;
bottom: 20%;
left: 0;
width: 100%;
text-align: center;
color: white;
background-color: rgba(0, 0, 0, 0.5);
/* Pale layer with opacity */
/* padding: 10px; */
box-sizing: border-box;
font-size: 11px;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.text-overlay-2 .english {
  font-size: 10px;
  color: rgb(255, 255, 255); /* Lighter shade for English */
  margin-top: 4px;
  display:block;
}

.text-overlay3 {
position: absolute;
bottom: 20%;
left: 0;
width: 100%;
text-align: center;
color: white;
background-color: rgba(0, 0, 0, 0.5);
/* Pale layer with opacity */
/* padding: 10px; */
box-sizing: border-box;
font-size: 11px;
opacity: 0;
transition: opacity 1s ease-in-out;
}

.text-overlay3 .english {
  font-size: 10px;
  color: rgb(255, 255, 255); /* Lighter shade for English */
  margin-top: 4px;
  display:block;
}




























.slide img.active+.text-overlay-0 {
    opacity: 1;
}
.slide img.active+.text-overlay-1 {
  opacity: 1;
}
.slide img.active+.text-overlay-2 {
opacity: 1;
}
.slide img.active+.text-overlay3 {
opacity: 1;
}
.weather-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.weather-icon {
  margin-top: 10px;
  width: 40px;
  height: 40px;
}

.weather-info {
  margin-top: 10px;
  padding: 4px;
  text-align: center;
}
.qr-section {
    position: relative;
    height: 33%;
    /* Upper third */
    display: flex;
    justify-content: center;
    align-items: center;
}
.qr-section2 {
    position: relative;
    height: 7%;
    /* Upper third */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    text-align: center;
    color: #ffffffde;
}
.qr-section img {
    width: 60px;
    /* Adjust the size as needed */
    height: 60px;
    animation: none;
    /* Initially, no animation */
}

@keyframes triplePulseForward {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

@keyframes triplePulseReverse {

    0%,
    100% {
        transform: scale(1.2);
    }

    50% {
        transform: scale(1);
    }
}

.text-layer {
    position: relative;
    height: 39%;
    /* Lower two-thirds */
    background-color: rgba(0, 0, 0, 0.09);
    /* Pale layer */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 10px;
    box-sizing: border-box;
    font-size: 16px;
}
.text-layer3 {
    position: relative;
    height: 100%;
    /* Lower two-thirds */
    background-color: rgba(0, 0, 0, 0.09);
    /* Pale layer */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 10px;
    box-sizing: border-box;
    font-size: 16px;
}

img#ww {
    width: 100%;
    margin-bottom: -30%;
}


hr {
    margin: 4px;
    opacity: 0.5
}


.cube-container {
    perspective: 1000px;
    /* عمق مکعب */
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.cube {
    position: relative;
    width: 116px;
    /* اندازه مکعب */
    height: 100px;
    /* اندازه مکعب */
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: transform 1s;
}

.cube .face {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #00008b, #87ceeb);
    /* از آبی پررنگ به آبی آسمانی */
    border: linear-gradient(to bottom, #00008b, #87ceeb);
    line-height: 0;
    overflow: hidden;
}

.cube .face img {
    width: 100%;
    height: 89%;
    object-fit: cover;
}

.front {
    transform: rotateY(0deg) translateZ(50px);
}

.back {
    transform: rotateY(180deg) translateZ(50px);
}

.left {
    transform: rotateY(-90deg) translateZ(50px);
}

.right {
    transform: rotateY(90deg) translateZ(50px);
}

.cube-container:hover .cube {
    transform: rotateY(180deg);
    /* چرخش مکعب هنگام هاور */
}



@keyframes rotateCubeReverse {
0% {
    transform: rotateY(0deg);
}
100% {
    transform: rotateY(-360deg);
}
}

.cube-reverse-container {
perspective: 1000px;
/* عمق مکعب */
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.cube-reverse-container2 {
perspective: 1000px;
/* عمق مکعب */
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-top: -38;
}
.cube-reverse {
position: relative;
width: 100px;
/* اندازه مکعب */
height: 100px;
/* اندازه مکعب */
transform-style: preserve-3d;
animation: rotateCubeReverse 10s infinite linear;
}
.cube-reverse2 {
position: relative;
width: 100px;
/* اندازه مکعب */
height: 100px;
/* اندازه مکعب */
transform-style: preserve-3d;
animation: rotateCubeReverse 10s infinite linear;
}

.cube-reverse .face {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #00008b, #87ceeb);
/* از آبی پررنگ به آبی آسمانی */
border: linear-gradient(to bottom, #00008b, #87ceeb);
line-height: 0;
overflow: hidden;
}

.cube-reverse .face img {
width: 101%;
height: 89%;
object-fit: cover;
}

.front {
transform: rotateY(0deg) translateZ(50px);
}

.back {
transform: rotateY(180deg) translateZ(50px);
}

.left {
transform: rotateY(-90deg) translateZ(50px);
}

.right {
transform: rotateY(90deg) translateZ(50px);
}


/*  */
.cube-reverse2 .face {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #00008b, #87ceeb);
/* از آبی پررنگ به آبی آسمانی */
border: linear-gradient(to bottom, #00008b, #87ceeb);
line-height: 0;
overflow: hidden;
}

.cube-reverse2 .face img {
width: 101%;
height: 89%;
object-fit: cover;
}

.front2 {
transform: rotateY(0deg) translateZ(50px);
}

.back2 {
transform: rotateY(180deg) translateZ(50px);
}

.left2 {
transform: rotateY(-90deg) translateZ(50px);
}

.right2 {
transform: rotateY(90deg) translateZ(50px);
}
.weather-data {
  font-size: 14px; /* اندازه فونت برای نمایش مقدار */
  font-weight: bold;
  margin-top: 4px;
}



.overlay3{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* لایه مشکی کم‌رنگ */
  z-index: 2;
}







html {
overflow: scroll;
overflow-x: hidden;
overflow-y: hidden;

}
::-webkit-scrollbar {
width: 0;  /* Remove scrollbar space */
background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}



.black-lines-r {
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background-color: black;
z-index: 2; 
}


.black-lines-top {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 1px;
background-color: black;
z-index: 2; 
}
.black-lines-l {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background-color: black;
z-index: 2; 
}

.black-lines-bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: black;
z-index: 2; 
}

.ct {
position: relative;
width: 100%;
height: 100%;
perspective: 1000px; /* Adds perspective to the 3D effect */
overflow: hidden;
}
.cb {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: rotateX(0) rotateY(0);
animation: rt 10s infinite linear;
}
.cb div {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
backface-visibility: hidden; /* Hide the back face of each side */
}
/* تغییر ادرس */
/* تغییر ادرس */

/* تغییر ادرس */

/* تغییر ادرس */

.fr { transform: translateZ(50px); background-image: url('https://mositto.com/lcd/mossito_icon_1.png'); }
.bk { transform: rotateY(180deg) translateZ(50px); background-image: url('https://mositto.com/lcd/abaas_abad_company_logo.png'); }
.lf { transform: rotateY(-90deg) translateZ(50px); background-image: url('https://mositto.com/lcd/abaas_abad_company_logo.png'); }
.rt { transform: rotateY(90deg) translateZ(50px); background-image: url('https://mositto.com/lcd/abaas_abad_company_logo.png'); }

@keyframes rt {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}