* {
  margin: 0;
  padding: 0;
  vertical-align: middle;
  font-family: "Cairo", sans-serif;
  transition: all 0.3s ease;
  scroll-behavior: smooth;
  overscroll-behavior: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  /* outline: 1px solid red; */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* pesudo elements */
::-moz-selection {
  color: var(--mainColor);
  background: var(--mainColorOpacity);
}
::selection {
  color: var(--mainColor);
  background: var(--mainColorOpacity);
}

:root {
  --mainColor: #00de9a;
  --mainColorText: #00ac68;
  --mainColorOpacity: #00DE9A55;
  /* settings background */
  --light-gray: #ddd;
  --white: #f8fbf9;
  --radius: 4px;
}

::-webkit-scrollbar {
  width: 7.5px;
}

::-webkit-scrollbar-track {
  background: rgba(85, 85, 85, 0.2666666667);
}

::-webkit-scrollbar-thumb {
  background: var(--mainColor);
  border-radius: 50px;
}

/* public styles */
button {
  all: unset;
  cursor: pointer;
  transition: all 0.3s ease;
}

a {
  text-decoration: none;
  color: #000;
}

img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100px;
  height: 100px;
  display: none !important;
}

.disable {
  filter: grayscale(1) !important;
  cursor: not-allowed !important;
}

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 50px;
  height: 25px;
  border-radius: 50px;
  background: #aaa;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

input[type=checkbox]::before {
  content: "";
  position: absolute;
  top: 2.5px;
  right: 2.3px;
  width: 20px;
  height: 20px;
  border-radius: 50px;
  background: #fff;
  transition: all 0.3s ease;
}

input[type=checkbox]:checked {
  background: #09f;
}

input[type=checkbox]:checked::before {
  right: 26.7px;
}

/* body */
body {
  background: #fff;
  min-height: 100vh;
  overflow: hidden;
}

body > .windows {
  transition: none;
  padding: 10%;
  height: calc(100vh - 50px);
  overflow: auto;
}

#loading-animaiton {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00DE9A;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 11111;
  transition: none;
}
#loading-animaiton img {
  width: 100px;
  display: block !important;
}
#loading-animaiton div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  height: 100px;
  margin-bottom: -100px;
}
#loading-animaiton div .spinner {
  width: 40px;
}
#loading-animaiton div .spinner .spinner-1 {
  position: absolute;
  border-radius: 50px;
  border: 4px solid #fff;
  border-right-color: rgba(255, 255, 255, 0);
  border-top-color: rgba(255, 255, 255, 0);
  width: 40px;
  height: 40px;
  animation: loading-spinner 1s infinite linear;
}
#loading-animaiton div .spinner .spinner-2 {
  position: absolute;
  border-radius: 50px;
  border: 4px solid rgba(255, 255, 255, 0.4666666667);
  border-left-color: rgba(255, 255, 255, 0);
  border-bottom-color: rgba(255, 255, 255, 0);
  width: 40px;
  height: 40px;
  animation: loading-spinner 2s infinite linear reverse;
}
#loading-animaiton div .loadingText {
  color: #fff;
  text-align: center;
  transition: none;
  display: none;
}

@keyframes loading-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* === START HOME WINDOW === */
.home {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 70px;
}
.home .flex {
  width: 300px;
  transform: translateY(-60px);
}
.home .flex > header {
  background: var(--mainColor);
  border-radius: var(--radius);
  color: #fff;
  padding: 15px;
  margin-bottom: 10px;
}
.home .flex > header > * {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.home .flex > header > * > * {
  display: inline;
  margin: 0 3px;
}
.home .flex > header > span {
  opacity: 0.8;
}
.home .flex .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  grid-gap: 10px;
}
.home .flex .grid .prayTimes {
  padding: 7.5px 0;
  text-align: center;
  color: #fff;
  border-radius: var(--radius);
  background: var(--mainColor);
}
.home .flex .grid .prayTimes.active {
  color: #fff;
  background: var(--mainColor);
  box-shadow: 0 0 0 0 #FFA900;
  background: #ffa900;
  animation: currentSalaat 2s infinite ease;
  z-index: 1;
}
.home .flex footer {
  background: var(--mainColor);
  border-radius: var(--radius);
  color: #fff;
  padding: 12px 20px;
  margin-top: 10px;
}
.home .flex footer p:nth-of-type(2) {
  margin: -5px 0 0 0;
}

@keyframes currentSalaat {
  0% {
    box-shadow: 0 0 0 0 #FFA900;
  }
  50%, 100% {
    box-shadow: 0 0 0 15px rgba(255, 169, 0, 0);
  }
}
/* === END HOME WINDOW === */
/* === START QURAN === */
.quran.windows {
  margin: 3%;
  padding: 0;
  border-radius: var(--radius);
  overflow: hidden;
  height: calc(100vh - 100px);
}

.quran iframe {
  width: 100%;
  height: 100%;
}

/* === END QURAN === */
/* === START CALENDER === */
.calender {
  padding: 50px;
}
.calender label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 20px;
  right: 20px;
  width: 120px;
  padding: 10px 20px;
  background: #ddd;
  color: #777;
  border-radius: 50px;
  cursor: pointer;
  /* active then change color */
  /* active then translate bg */
  /* active then translate bg */
}
.calender label span {
  text-align: center;
  z-index: 1;
}
.calender label span:nth-of-type(1) {
  color: #fff;
}
.calender label span.active {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  border-radius: 50px;
  background: var(--mainColor);
  z-index: 0;
}
.calender label input[type=checkbox]:checked ~ span:nth-of-type(2) {
  color: #fff;
}
.calender label input[type=checkbox]:checked ~ span:nth-of-type(1) {
  color: #777;
}
.calender label input[type=checkbox]:checked ~ span:nth-of-type(1) {
  color: #777;
}
.calender label input[type=checkbox]:checked ~ span.active {
  right: 50%;
}
.calender .ramadanBtn {
  position: fixed;
  top: 25px;
  left: 15px;
  width: 125px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--light-gray);
  border-radius: var(--radius);
  text-align: center;
  color: #fff;
  cursor: pointer;
}
.calender .ramadanBtn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  background: var(--mainColor);
  height: 40px;
  border-radius: 50px;
  filter: blur(10px);
  z-index: -1;
}
.calender .ramadanBtn span:nth-child(1) {
  color: var(--mainColor);
  padding: 0 10px 0 0;
}
.calender .ramadanBtn span:nth-child(2) {
  background: var(--mainColor);
  height: 100%;
  width: 50%;
  padding: 0 10px;
  border-radius: var(--radius);
  -webkit-clip-path: polygon(0% 0, 100% 0, 80% 100%, 0 100%);
          clip-path: polygon(0% 0, 100% 0, 80% 100%, 0 100%);
}
.calender .ramadanBtn.active {
  background: var(--mainColor);
  color: var(--mainColor);
}
.calender .ramadanBtn.active::before {
  left: 60%;
}
.calender .ramadanBtn.active span:nth-child(1) {
  padding: 0 10px 0 0;
  color: #fff;
}
.calender .ramadanBtn.active span:nth-child(2) {
  background: var(--light-gray);
}
.calender .ramadanDate {
  transition: none;
  position: fixed;
  top: 15vh;
  left: 0;
  height: calc(85vh - 50px);
  width: -webkit-fill-available;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.5490196078), rgba(0, 0, 0, 0.1450980392));
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  padding: 20px;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1333333333);
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  display: none;
}
.calender .ramadanDate > div {
  width: calc(100% - 50px);
}
.calender .ramadanDate > div > section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.calender .ramadanDate > div > section p {
  margin: 20px 0;
  font-size: 18px;
  border-bottom: 5px dotted var(--mainColor);
}
.calender .milady {
  display: block;
  opacity: 1;
  transition: all ease 0.3s !important;
}
.calender .hijry {
  display: block;
  opacity: 1;
  transition: all ease 0.3s !important;
}
.calender .hijry div h2:nth-child(1), .calender .milady div h2:nth-child(1) {
  color: var(--mainColorText);
  margin: 15px;
}
.calender .events p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7.5px;
  border-radius: var(--radius);
}
.calender .events p:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* === END CALENDER === */
/* === START ADKAR === */
.adkar {
  padding: 50px;
}
.adkar .flex {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  height: calc(100vh - 50px);
}
.adkar .flex .adkar-div {
  width: 200px;
  height: 70px;
  padding: 20px;
  margin: 5px 0;
  background-color: var(--mainColor);
  background-size: cover;
  border-radius: var(--radius);
  line-height: 70px;
  color: #fff;
  font-size: 20px;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  /*sabah*/
  /*masa */
  /*sala*/
  /*lail*/
}
.adkar .flex .adkar-div:nth-of-type(1) {
  background-position: center;
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSf_WRoBEs4dk2TPu2xHHoDxwRBVmh5QGuemQ&usqp=CAU");
}
.adkar .flex .adkar-div:nth-of-type(2) {
  background-position: bottom;
  background-image: url("https://images.freeimages.com/cme/images/previews/4e9/vector-evening-7334.jpg");
}
.adkar .flex .adkar-div:nth-of-type(3) {
  background-position: center;
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9UsD-2gy4SVr8T4vS9gvWHGgufp8oWGTX4A&usqp=CAU");
}
.adkar .flex .adkar-div:nth-of-type(4) {
  background-image: url("data:image/jpeg;base64,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");
}
.adkar .container {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5333333333);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: #ddd;
  overflow-y: scroll;
}
.adkar .container > div {
  padding: 30px 30px 70px 30px;
}
.adkar .container > div > button {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 20px;
  width: 40px;
  height: 40px;
  background: var(--mainColorOpacity);
  text-align: center;
  border-radius: 50px;
  color: var(--mainColorText);
}
.adkar .container > div > button * {
  color: rgba(255, 255, 255, 0.6666666667);
}
.adkar .container > div > h2 {
  font-size: 30px;
  margin: 20px 0;
  text-align: center;
}
.adkar .container > div div p, .adkar .container > div div span {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.adkar .container > div div span:nth-of-type(1) {
  color: var(--mainColorText);
}
.adkar .container > div div span:nth-of-type(2) {
  color: var(--mainColor);
}
.adkar .container > div div nav {
  width: 50%;
  display: flex;
  align-items: center;
  margin: 10px 5px;
}
.adkar .container > div div nav button {
  background: var(--mainColor);
  width: 15px;
  height: 15px;
  padding: 10px;
  margin: 5px 10px;
  line-height: 10px;
  text-align: center;
  border-radius: var(--radius);
  color: #fff;
  box-shadow: 0 0 0 0px var(--mainColorOpacity);
}
.adkar .container > div div nav button:hover {
  box-shadow: 0 0 0 4px var(--mainColorOpacity);
}
.adkar .container > div div nav button:nth-child(2) {
  background: rgba(0, 204, 255, 0.7333333333);
}
.adkar .container > div div nav button:nth-child(2):hover {
  box-shadow: 0 0 0 4px rgba(0, 204, 255, 0.3333333333);
}
.adkar .container > div div nav button:nth-child(3) {
  background: rgba(0, 77, 128, 0.7333333333);
}
.adkar .container > div div nav button:nth-child(3):hover {
  box-shadow: 0 0 0 4px rgba(0, 77, 128, 0.3333333333);
}
.adkar .container > div div nav button:nth-child(4) {
  background: rgba(12, 199, 112, 0.7333333333);
}
.adkar .container > div div nav button:nth-child(4):hover {
  box-shadow: 0 0 0 4px rgba(12, 199, 112, 0.3333333333);
}

/* .adkar .flex div:nth-of-type(1) p { color: #333;} */
/* === END CALENDER === */
/* === START SETTINGS === */
.settings > header {
  background: var(--white);
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
  filter: brightness(150%);
}
.settings .container {
  display: flex;
  height: calc(100vh - 50px);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--light-gray);
}
.settings .container .lbls {
  height: inherit;
  overflow-y: auto;
  padding: 20px 10px;
}
.settings .container .lbls p {
  margin: 15px 20px;
}
.settings .container .lbls label {
  display: flex;
  align-items: center;
  width: 250px;
  background: var(--white);
  margin: 10px;
  justify-content: space-between;
  padding: 12px 20px;
  border-radius: var(--radius);
  cursor: pointer;
}
.settings .container .lbls label:hover {
  filter: contrast(50%);
}
.settings .container .lbls label span span {
  margin: 0 15px 0 0;
}
.settings .container .lbls label span.icon {
  opacity: 0.7;
}

.thx {
  position: fixed !important;
  top: 5%;
  right: 50%;
  width: -moz-max-content;
  width: max-content;
  transform: translate(50%, 0);
  padding: 10px 20px;
  font-weight: 600;
  font-size: 15px;
  color: #29f18e;
  background: rgba(20, 135, 67, 0.6117647059);
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  border: 2px solid #0fab4e;
  border-radius: var(--radius);
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.13);
  transition: all 0.3s ease !important;
  z-index: 10;
  opacity: 0;
}

.layer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  background: rgba(0, 0, 0, 0.5333333333);
  z-index: 1111;
}
.layer .card {
  width: 70%;
  height: -moz-fit-content;
  height: fit-content;
  padding: 20px;
  border-radius: var(--radius);
  background: #fff;
  position: relative;
  /* close button */
}
.layer .card > button {
  position: absolute;
  top: 2px;
  left: 12.5px;
  font-size: 1.5em;
  transform: rotate(45deg);
}
.layer .card > h2 {
  text-align: center;
  font-size: 25px;
}

/* contactUs */
.layer.contactUs .card > nav, .layer.shareUs .card > nav {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}
.layer.contactUs .card > nav a, .layer.shareUs .card > nav a {
  font-size: 3em;
  margin: 0px 10px;
  cursor: pointer;
  color: #333;
}

.layer.shareUs .card nav a {
  width: 40px;
  height: 40px;
  margin: 10px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius);
  color: var(--mainColor);
  font-size: 2.5em;
  background: rgba(135, 135, 135, 0.1294117647);
}
.layer.shareUs .card nav a:nth-child(1) {
  color: rgba(0, 204, 255, 0.7333333333);
}
.layer.shareUs .card nav a:nth-child(2) {
  color: rgba(0, 77, 128, 0.7333333333);
}
.layer.shareUs .card nav a:nth-child(3) {
  color: rgba(12, 199, 112, 0.7333333333);
}
.layer.shareUs .card nav a:nth-child(4) {
  color: rgba(12, 31, 199, 0.7333333333);
}

/* theme color */
.layer.themeColor .card {
  width: 75%;
}
.layer.themeColor .card section {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  /* btn */
}
.layer.themeColor .card section .color {
  width: 50px;
  height: 50px;
  border-radius: var(--radius);
  margin: 15px;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.2));
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.layer.themeColor .card section .color:nth-child(1):hover {
  box-shadow: 0 0 0 5px rgba(94, 96, 206, 0.3333333333);
}
.layer.themeColor .card section .color:nth-child(2):hover {
  box-shadow: 0 0 0 5px rgba(193, 18, 31, 0.3333333333);
}
.layer.themeColor .card section .color:nth-child(3):hover {
  box-shadow: 0 0 0 5px rgba(199, 126, 107, 0.3333333333);
}
.layer.themeColor .card section .color:nth-child(4):hover {
  box-shadow: 0 0 0 5px rgba(102, 155, 188, 0.3333333333);
}
.layer.themeColor .card section .color:nth-child(5):hover {
  box-shadow: 0 0 0 5px rgba(182, 145, 33, 0.3333333333);
}
.layer.themeColor .card section .color:nth-child(6):hover {
  box-shadow: 0 0 0 5px rgba(123, 63, 86, 0.3333333333);
}
.layer.themeColor .card section .color > * {
  transform: scale(2);
  color: #fff;
}
.layer.themeColor .card section button {
  padding: 10px 20px;
  margin: 5px;
  width: calc(50% - 55px);
  border-radius: var(--radius);
  text-align: center;
  color: #fff;
  background: #09f;
}
.layer.themeColor .card section button:nth-child(1) {
  background: rgba(0, 0, 0, 0.062745098);
  color: #555;
}
.layer.themeColor .card section button:nth-child(1):hover {
  box-shadow: 0 0 0 5px rgba(0, 153, 255, 0.2);
  filter: grayscale(1);
}
.layer.themeColor .card section button:nth-child(2) {
  color: #fff;
  background: #09f;
}
.layer.themeColor .card section button:nth-child(2):hover {
  box-shadow: 0 0 0 5px rgba(0, 153, 255, 0.3333333333);
}

/* == languages ==*/
.layer.change_Languages .card section label {
  display: block;
  margin: 10px;
}

.layer.change_Languages .card section label span {
  margin: 0 10px;
}

.layer.change_Languages .card section label input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 15px;
  height: 15px;
  border-radius: var(--radius);
  background: rgba(170, 170, 170, 0);
  border: 1px solid #aaa;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.layer.change_Languages .card section label input[type=radio]::before {
  content: "";
  position: absolute;
  top: 0; /* top: 2.5px; */
  right: 0; /* right: 2.3px; */
  width: 15px;
  height: 15px;
  border-radius: var(--radius);
  background: #09f;
  transition: all 0.3s ease;
  transform: scale(0);
}

.layer.change_Languages .card section label input[type=radio]:checked {
  background: #09f;
}

.layer.change_Languages .card section label input[type=radio]:checked::before {
  right: 0;
  background: #09f;
  transform: scale(1) rotate(360deg);
  /* right: calc(50px - 2.3px - 21px); */
}

/* === END SETTINGS === */
/* === START FOOTER === */
.footer-body {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 50px;
  padding: 0.5px;
  background: rgba(248, 251, 249, 0.5411764706);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  color: var(--mainColorText);
  box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.2);
  z-index: 111;
}
.footer-body button {
  padding: 10px;
  text-align: center;
  position: relative;
}
.footer-body button span {
  position: absolute;
  width: 35px;
  height: 35px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: var(--radius);
  background: var(--mainColorOpacity);
  z-index: -1;
}
.footer-body button span::before {
  content: "";
  position: absolute;
  background: var(--mainColorOpacity);
  width: 40px;
  height: 40px;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  filter: blur(7px);
  border-radius: 50%;
}
.footer-body button span.active-NavBtn {
  transform: translate(-50%, -50%) scale(1);
}
.footer-body button:nth-child(1) span.active-NavBtn + * {
  animation: cogFooterBtn 1s ease;
}
.footer-body button:nth-child(2) span.active-NavBtn + * {
  animation: caleFooterBtn 1s ease;
}
.footer-body button:nth-child(3) span.active-NavBtn + * {
  animation: active-footer-button 1s ease;
}
.footer-body button:nth-child(4) span.active-NavBtn + * {
  animation: active-footer-button 1s ease;
}
.footer-body button:nth-child(5) span.active-NavBtn + * {
  animation: adkFooterBtn 1s ease;
  transform: rotate(-30deg);
}

@keyframes caleFooterBtn {
  25% {
    transform: translateY(-5px) rotate(30deg);
  }
  50% {
    transform: translateY(-5px) rotate(-30deg);
  }
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
}
@keyframes cogFooterBtn {
  50% {
    transform: translateY(-5px) rotate(90deg);
  }
  0%, 100% {
    transform: translateY(0px);
  }
}
@keyframes adkFooterBtn {
  50% {
    transform: translateY(-5px);
  }
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px) rotate(-30deg);
  }
}
@keyframes active-footer-button {
  50% {
    transform: translateY(-5px);
  }
  0%, 100% {
    transform: translateY(0px);
  }
}
/* === END FOOTER === */
/* status */
.online {
  position: absolute;
  top: -200px;
  left: 0;
  width: 100%;
  text-align: center;
  background: #ff9999;
  color: #cc2828;
  border-bottom: 2px solid #cc2828;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  transition: top 1s ease;
  z-index: 11112;
}

.moreE.windows {
  padding-top: 5%;
}
.moreE.windows div {
  position: relative;
  padding: 15px 30px;
  border-radius: var(--radius);
  margin: 20px 0;
  font-size: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
}
.moreE.windows div:hover {
  box-shadow: 0px 5px 15px var(--mainColorOpacity);
}
.moreE.windows div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(40deg, var(--mainColorOpacity), transparent);
}
.moreE.windows div span.icon {
  color: var(--mainColor);
  font-size: 2em;
}

script + div {
  display: none !important;
  transform: scale(0) !important;
}

script + div a {
  display: none !important;
  transform: scale(0) !important;
}

script + div a img {
  display: none !important;
  transform: scale(0) !important;
}/*# sourceMappingURL=style.css.map */