/* Project - UAE Links - All Links in OneSpot */
/* 29 Jul 2024 */
/* Client Al-Shamil */
/* Code by Dinesh */
/* Google Font Import - Work Sans */
@import "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";
/* root */
:root {
  /* ===== Colors ===== */
  --body-color: #ffffff;
  --border-color: #dee2e6;
  --primary-color: #e5e5eb;
  --primary-color-light: #F7F7FE;
  --toggle-color: #DDDDDD;
  --text-color: #1A1D1F;
  --text-color-dark: #f7f7fe;
  --bg-dark: #252F40;
  /* ====== Transition ====== */
  --tran-03: all 0.2s ease;
  --tran-03: all 0.3s ease;
  --tran-04: all 0.4s ease;
  --tran-05: all 0.5s ease;
}

body.dark {
  --body-color: #1A1D1F;
  --border-color: #2B2F34;
  --primary-color: #111111;
  --primary-color-light: #3a3b3c;
  --toggle-color: #dee2e6;
  --text-color: #cccccc;
  --text-color-dark: #1A1D1F;
  --bg-dark: #ffffff;
}

.mode .sun-moon {
  height: 50px;
  width: 60px;
}

.bottom-content li {
  height: 50px;
  list-style: none;
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.bottom-content li a {
  list-style: none;
  background-color: transparent;
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  border-radius: 6px;
  text-decoration: none;
  transition: var(--tran-03);
}
.bottom-content li a .icon {
  min-width: 60px;
  border-radius: 6px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.bottom-content li a .text {
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 1;
}
.bottom-content .mode .sun-moon {
  height: 50px;
  width: 60px;
}
.bottom-content .mode .sun-moon i {
  position: absolute;
  min-width: 60px;
  border-radius: 6px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  height: 100%;
}
.bottom-content .mode .sun-moon i.sun {
  opacity: 0;
}
.bottom-content .mode .toggle-switch {
  position: absolute;
  right: 0;
  height: 100%;
  min-width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

::selection {
  background-color: var(--primary-color);
  color: #fff;
}

body {
  min-height: 100vh;
  background-color: var(--body-color);
  transition: var(--tran-05);
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  overflow-x: hidden;
  color: var(--text-color);
}

a {
  text-decoration: none;
}

body.dark header img {
  filter: invert(1);
}
body.dark header svg path.text {
  filter: invert(1);
}
body.dark .language img {
  filter: invert(1);
}
body.dark .mode .sun-moon i.sun {
  opacity: 1;
}
body.dark .mode .sun-moon i.moon {
  opacity: 0;
}
body.dark .mode .toggle-switch .switch::before {
  left: 20px;
}

@keyframes move_y {
  from {
    bottom: -10%;
  }
  to {
    bottom: 100%;
  }
}
@keyframes oscil1 {
  from {
    translate: 0 0;
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);
  }
  25% {
    translate: 10px 0;
    transform: rotate(3deg);
    animation-timing-function: cubic-bezier(0.7, 0, 0.9, 0.7);
  }
  50% {
    translate: 0 0;
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);
  }
  75% {
    translate: -10px 0;
    transform: rotate(-3deg);
    animation-timing-function: cubic-bezier(0.7, 0, 0.9, 0.7);
  }
  to {
    translate: 0 0;
    transform: rotate(0deg);
  }
}
.language {
  color: var(--text-color);
  height: 40px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  background-color: var(--border-color);
  position: relative;
  transition: var(--tran-05);
  padding: 1rem;
  font-weight: 600;
}
@media only screen and (max-width: 575px) {
  .language {
    padding: 0.25rem 0.5rem;
  }
}
@media only screen and (max-width: 479px) {
  .language {
    padding: 0.25rem 0.5rem;
  }
}
.language img {
  margin-left: 0.5rem;
}

.mode {
  width: 200px;
  height: 40px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  background-color: var(--border-color);
  position: relative;
  transition: var(--tran-05);
}
@media only screen and (max-width: 479px) {
  .mode {
    width: 90px;
  }
}
.mode .sun-moon {
  height: 40px;
  width: 40px;
}
.mode .sun-moon i {
  position: absolute;
  min-width: 40px;
  border-radius: 6px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  height: 100%;
  color: var(--text-color);
}
.mode .sun-moon i.sun {
  opacity: 0;
}
.mode .mode-text {
  color: var(--text-color);
  font-weight: 600;
}
@media only screen and (max-width: 479px) {
  .mode .mode-text {
    display: none;
  }
}
.mode .toggle-switch {
  position: absolute;
  right: 10px;
  height: 100%;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
}
.mode .toggle-switch .switch {
  position: relative;
  height: 22px;
  width: 40px;
  border-radius: 25px;
  background-color: var(--bg-dark);
  transition: var(--tran-05);
}
.mode .toggle-switch .switch::before {
  content: "";
  position: absolute;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  background-color: var(--text-color-dark);
  transition: var(--tran-04);
}

.bloon {
  position: absolute;
  min-width: 100vw;
  min-height: 100vh;
  overflow: hidden;
}
.bloon .balloon {
  width: 250px;
  height: 300px;
  background-size: contain;
  position: absolute;
  bottom: 0%;
  z-index: 1000;
  background-repeat: no-repeat;
  background-size: contain;
}
.bloon .balloon.balloon01 {
  background-image: url(../img/balloons.png);
  animation: move_y 10s linear forwards, oscil1 3s infinite;
  left: -5%;
}
.bloon .balloon.balloon0 {
  background-image: url(../img/balloonsUAE53.png);
  animation: move_y 10s linear forwards, oscil1 3s infinite;
  left: 0%;
  width: 500px;
  height: 500px;
}
@media only screen and (max-width: 575px) {
  .bloon .balloon.balloon0 {
    display: none;
  }
}
.bloon .balloon.balloon1 {
  background-image: url(../img/balloons.png);
  animation: move_y 6s linear forwards, oscil1 4s infinite;
  left: 10%;
}
@media only screen and (max-width: 575px) {
  .bloon .balloon.balloon1 {
    display: none;
  }
}
.bloon .balloon.balloon02 {
  background-image: url(../img/balloons.png);
  animation: move_y 8s linear forwards, oscil1 6s infinite;
  left: 25%;
}
@media only screen and (max-width: 575px) {
  .bloon .balloon.balloon02 {
    display: none;
  }
}
.bloon .balloon.balloon2 {
  background-image: url(../img/balloonsUAE.png);
  animation: move_y 12s linear forwards, oscil1 3s infinite;
  left: 20%;
}
@media only screen and (max-width: 575px) {
  .bloon .balloon.balloon2 {
    display: none;
  }
}
.bloon .balloon.balloon05 {
  background-image: url(../img/balloons.png);
  animation: move_y 5s linear forwards, oscil1 6s infinite;
  left: 35%;
}
@media only screen and (max-width: 575px) {
  .bloon .balloon.balloon05 {
    left: 15%;
  }
}
.bloon .balloon.balloon3 {
  background-image: url(../img/balloons.png);
  animation: move_y 11s linear forwards, oscil1 4s infinite;
  left: 30%;
}
@media only screen and (max-width: 575px) {
  .bloon .balloon.balloon3 {
    background-image: url(../img/balloonsUAE53.png);
    left: 0%;
    width: 100%;
    height: 500px;
  }
}
.bloon .balloon.balloon4 {
  background-image: url(../img/balloonsUAE.png);
  animation: move_y 14s linear forwards, oscil1 3s infinite;
  left: 40%;
  width: 500px;
  height: 500px;
}
@media only screen and (max-width: 575px) {
  .bloon .balloon.balloon4 {
    display: none;
  }
}
.bloon .balloon.balloon5 {
  background-image: url(../img/balloons.png);
  animation: move_y 6s linear forwards, oscil1 6s infinite;
  left: 50%;
}
@media only screen and (max-width: 575px) {
  .bloon .balloon.balloon5 {
    display: none;
  }
}
.bloon .balloon.balloon6 {
  background-image: url(../img/balloonsUAE53.png);
  animation: move_y 9s linear forwards, oscil1 3s infinite;
  left: 50%;
  width: 500px;
  height: 500px;
}
@media only screen and (max-width: 575px) {
  .bloon .balloon.balloon6 {
    background-image: url(../img/balloonsUAE.png);
    left: 10%;
    width: 100%;
    height: 500px;
  }
}
.bloon .balloon.balloon7 {
  background-image: url(../img/balloons.png);
  animation: move_y 10s linear forwards, oscil1 5s infinite;
  left: 70%;
}
.bloon .balloon.balloon8 {
  background-image: url(../img/balloonsUAE53.png);
  animation: move_y 11s linear forwards, oscil1 4s infinite;
  left: 80%;
}
@media only screen and (max-width: 575px) {
  .bloon .balloon.balloon8 {
    left: 60%;
  }
}
.bloon .balloon.balloon9 {
  background-image: url(../img/balloons.png);
  animation: move_y 8s linear forwards, oscil1 6s infinite;
  left: 90%;
}
@media only screen and (max-width: 575px) {
  .bloon .balloon.balloon9 {
    display: none;
  }
}

header {
  padding: 1rem;
  background-color: var(--primary-color-light);
}
@media only screen and (max-width: 575px) {
  header {
    padding: 0;
  }
}
@media only screen and (max-width: 479px) {
  header {
    padding: 0.75rem 0;
  }
}

main .link-area {
  min-height: 82vh;
}
main .link-area .uaelinks-ul {
  border-bottom: 0px;
  justify-content: center;
}
@media only screen and (max-width: 479px) {
  main .link-area .uaelinks-ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 1.5rem;
    margin-top: 0.75rem;
  }
}
main .link-area .uaelinks-ul li {
  scroll-snap-align: start;
}
main .link-area .uaelinks-ul li.nav-item .nav-link {
  color: var(--text-color);
  text-align: center;
  border-bottom: 0;
}
@media only screen and (max-width: 479px) {
  main .link-area .uaelinks-ul li.nav-item .nav-link {
    margin-top: 0.25rem;
  }
}
main .link-area .uaelinks-ul li.nav-item .nav-link:hover {
  border-color: var(--border-color);
  background-color: var(--primary-color-light);
}
main .link-area .uaelinks-ul li.nav-item .nav-link span {
  display: block;
  margin-top: 0.35rem;
  font-size: 14px;
  font-weight: 500;
  font-size: 12px;
  color: var(--text-color);
  font-size: 12px;
}
main .link-area .uaelinks-ul li.nav-item .nav-link img {
  border: 1px solid var(--primary-color-light);
  border-radius: 0.5rem;
  padding: 0.25rem;
  width: 54px;
  background-color: white;
  box-shadow: 2px 0px 4px 0px rgba(0, 0, 0, 0.0196078431), 7px 0px 7px 0px rgba(0, 0, 0, 0.0196078431), 16px 0px 10px 0px rgba(0, 0, 0, 0.0117647059), 28px 0px 11px 0px rgba(0, 0, 0, 0), 44px 0px 12px 0px rgba(0, 0, 0, 0);
}
main .link-area .uaelinks-ul li.nav-item .nav-link.active {
  background-color: var(--primary-color-light);
  border-radius: 0.25rem 0.25rem 0 0;
  border: 1px solid var(--border-color);
  border-bottom: 0;
}
main .link-area .uaelinks-ul li.nav-item .nav-link.active span {
  font-weight: bold;
  color: var(--text-color);
}
@media only screen and (max-width: 479px) {
  main .link-area .uaelinks-ul li.nav-item .nav-link.active {
    border-radius: 0.25rem;
    border: 1px solid var(--border-color);
  }
}
main .link-area form .field-input {
  width: 100%;
  position: relative;
}
main .link-area form .field-input img {
  position: absolute;
  width: 28px;
  top: 8px;
  left: 0.65rem;
}
main .link-area form .field-input input {
  text-align: left;
  border-radius: 6rem;
  border: 1px solid transparent;
  padding: 0.6rem 8rem 0.6rem 2.75rem;
  width: 100%;
  transition: 0.5s;
  box-shadow: 0 1px 3px rgba(23, 23, 23, 0.24);
}
main .link-area form .field-input input:focus {
  outline: none;
  border-color: #2b2d30;
  transition: 0.5s;
}
main .link-area form .field-input button {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: #5F6368;
  padding: 0.365rem 2rem;
  color: #fff;
  border-radius: 3rem;
  transition: 0.5s;
  outline: none;
  border: none;
}
main .link-area form .field-input button:hover {
  background-color: #2b2d30;
}
main .link-area .tab-content .tab-pane {
  background-color: var(--primary-color-light);
  border-radius: 1.5rem 1.5rem;
  min-height: 56vh;
}
main .link-area .tab-content .tab-pane .uaeLinks {
  display: flex;
  align-items: center;
  background-color: var(--body-color);
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0px 4px 12px -10px rgba(0, 0, 0, 0.35);
  text-overflow: ellipsis;
  overflow: hidden;
  min-height: 128px;
  transition: var(--tran-04);
  border: 1px solid transparent;
}
main .link-area .tab-content .tab-pane .uaeLinks:hover {
  border: 1px solid var(--border-color);
  background-color: var(--primary-color-light);
  box-shadow: 0px 4px 12px -10px rgba(0, 0, 0, 0.85);
}
main .link-area .tab-content .tab-pane .uaeLinks a {
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: 0.5s;
  white-space: normal;
  color: var(--text-color);
  white-space: normal;
  text-decoration: none;
}
main .link-area .tab-content .tab-pane .uaeLinks a img {
  border-radius: 0.25rem;
  background-color: white;
}
main .link-area .tab-content .tab-pane .uaeLinks a:hover {
  color: #bf2300;
  font-weight: 600;
}
main .link-area .tab-content .tab-pane .uaeLinks a:last-child {
  margin-top: 0.45rem;
  border-radius: 0.25rem;
  padding: 0.25rem 0.45rem;
  background-color: var(--body-color);
}
main .link-area .tab-content .tab-pane p {
  color: var(--bg-dark);
  margin-top: 0.35rem;
}
main .link-area .tab-content .tab-pane .topic-title {
  text-align: center;
  margin: 0;
  position: relative;
  width: fit-content;
  text-align: center;
  margin: auto;
  white-space: nowrap;
  font-size: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
main .link-area .tab-content .tab-pane .topic-title:before {
  left: -20px;
  left: -14px;
}
main .link-area .tab-content .tab-pane .topic-title:after {
  right: -20px;
  right: -14px;
}

body .tab-content .tab-pane .topic-title:after, body .tab-content .tab-pane .topic-title:before {
  background-color: #bf2300;
  position: absolute;
  content: "";
  height: 7px;
  width: 7px;
  border-radius: 50%;
  top: 8px;
  top: 6px;
}

footer {
  margin-top: 1.65rem;
}
footer .footer-bottom {
  position: relative;
  z-index: 1;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: var(--primary-color-light);
}
footer .footer-bottom .author-info {
  color: var(--text-color);
}
footer .footer-bottom .author-info i {
  color: rgb(224, 45, 45);
}
footer .footer-bottom .author-info a {
  color: rgb(224, 45, 45);
}
footer .footer-bottom .author-info a:hover {
  color: rgb(224, 45, 45);
}
footer .footer-bottom p {
  margin: 0;
  color: var(--text-color);
  text-align: left;
}
@media only screen and (max-width: 479px) {
  footer .footer-bottom p {
    text-align: center;
  }
}
footer .footer-bottom p a {
  color: var(--text-color);
}
footer .footer-bottom p a:hover {
  color: var(--primary-color);
}
@media only screen and (max-width: 479px) {
  footer .footer-bottom p a {
    display: block;
  }
}
footer .footer-bottom .link {
  text-align: right;
}
@media only screen and (max-width: 479px) {
  footer .footer-bottom .link {
    text-align: center;
  }
}
footer .footer-bottom .link ul {
  padding: 0;
  margin: 0;
}
@media only screen and (max-width: 479px) {
  footer .footer-bottom .link ul {
    margin-top: 1rem;
  }
}
footer .footer-bottom .link ul li {
  list-style-type: none;
  display: inline-block;
  margin: 0;
  margin-left: 15px;
}
footer .footer-bottom .link ul li a {
  color: var(--text-color);
}
footer .footer-bottom .link ul li a:hover {
  color: var(--primary-color);
}

/*# sourceMappingURL=style.css.map */