:root {
    --orange-deep: #F85B0C;
    --royal-blue: #09294D;
    --emerald-green: #1B8F55;
    --light-gray: #EDEDED;
  }
body,
  html {
    font-family: 'Cairo', sans-serif !important;
    direction: rtl;
    text-align: right;
    background-color: var(--light-gray);
    height: 100%;
  }
  h1, h2, h3, h4, h5, h6 {
    color: var(--royal-blue);
  }
  .royal-blue {
    color: var(--royal-blue);
    text-decoration: none;
  }
  .navbar, footer {
    background-color: var(--royal-blue);
  }
  .navbar-brand, .navbar-nav .nav-link {
    color: var(--royal-blue) !important;
  }
  .btn-primary {
    background-color: var(--emerald-green);
    border-color: var(--emerald-green);
  }
  .btn-primary:hover {
    background-color: #115835;
    border-color: #115835;
  }
  .btn-secondary {
    background-color: #09294D;
    border-color: #09294D;
    color: #ffffff;
  }
  .btn-secondary:hover {
    background-color: #02121F;
    border-color: #02121F;
    color: #ffffff;
  }
  .btn-outline-royalblue {
  background-color: transparent;
  border: 2px solid #09294D;
  color: #09294D;
  transition: all 0.3s ease;
}

.btn-outline-royalblue:hover {
  background-color: #09294D;
  border-color: #09294D;
  color: #ffffff;
}
  .contact-box {
      background-color: #ffffff;
      padding: 20px;
      border-radius: 6px;
      flex: 1;
      min-width: 250px;
      max-width: 320px;
      text-align: center;
  }
  .contact-box.active {
      background-color: #F85B0C;
      color: white;
  }
  .contact-box p {
      font-weight: 700;
      font-size: 16px;
  }
  .contact-box i {
      color: #F85B0C;
      margin: 15px 0px;
  }

  #userDropdown {
  color: #09294d;
  border: 2px solid #09294d;
  background-color: transparent;
}
#userDropdown:hover {
  background-color: #ececec;
  color: #09294d;
}
.dropdown-menu .dropdown-item {
  color: #09294d;
  text-align: start;
}
.dropdown-menu .dropdown-item:hover {
  background-color: #09294d;
  color: white;
}

.bg-gradient-primary-to-secondary {
  background: #09294D;
  background: linear-gradient(135deg, #F85B0C 0%, #09294D 100%);
}

.text-gradient {
  background: -webkit-linear-gradient(315deg, #F85B0C 0%, #F85B0C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rounded-4 {
  border-radius: 1rem !important;
}

.creative {
  position: relative;
  height: 75vw;
  width: 75vw;
  border-radius: 5vw;
  margin-top: 5vw;
  max-height: 40rem;
  max-width: 40rem;
}
.creative .creative-img {
  height: 80vw;
  max-height: 45rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.creative .dots-1 {
  position: absolute;
  width: 3vw;
  right: 1.5vw;
  top: 4vw;
}
.creative .dots-1 svg {
  fill: #fff;
}
.creative .dots-2 {
  position: absolute;
  width: 3vw;
  right: -4vw;
  top: 6.05vw;
}
.creative .dots-2 svg {
  fill: #09294D;
}
.creative .dots-3 {
  position: absolute;
  width: 3vw;
  left: 1.5vw;
  bottom: 6.05vw;
}
.creative .dots-3 svg {
  fill: #fff;
}
.creative .dots-4 {
  position: absolute;
  width: 3vw;
  left: -4vw;
  bottom: 4vw;
}
.creative .dots-4 svg {
  fill: #09294D;
}

@media (min-width: 576px) {
  .creative {
    height: 60vw;
    width: 60vw;
  }
  .creative .creative-img {
    height: 65vw;
  }
  .creative .dots-1 {
    width: 3vw;
    right: 1.5vw;
  }
  .creative .dots-2 {
    width: 3vw;
    right: -4vw;
  }
  .creative .dots-3 {
    width: 3vw;
    left: 1.5vw;
  }
  .creative .dots-4 {
    width: 3vw;
    left: -4vw;
  }
}
@media (min-width: 768px) {
  .creative {
    height: 50vw;
    width: 50vw;
  }
  .creative .creative-img {
    height: 55vw;
  }
  .creative .dots-1 {
    width: 3vw;
    right: 1.5vw;
  }
  .creative .dots-2 {
    width: 3vw;
    right: -4vw;
  }
  .creative .dots-3 {
    width: 3vw;
    left: 1.5vw;
  }
  .creative .dots-4 {
    width: 3vw;
    left: -4vw;
  }
}
@media (min-width: 992px) {
  .creative {
    height: 40vw;
    width: 40vw;
  }
  .creative .creative-img {
    height: 45vw;
  }
  .creative .dots-1 {
    width: 1.5vw;
    right: 0.75vw;
  }
  .creative .dots-2 {
    width: 1.5vw;
    right: -2vw;
  }
  .creative .dots-3 {
    width: 1.5vw;
    left: 0.75vw;
  }
  .creative .dots-4 {
    width: 1.5vw;
    left: -2vw;
  }
}
@media (min-width: 1200px) {
  .creative {
    height: 35vw;
    width: 35vw;
  }
  .creative .creative-img {
    height: 40vw;
  }
  .creative .dots-1 {
    width: 1.5vw;
    right: 0.75vw;
  }
  .creative .dots-2 {
    width: 1.5vw;
    right: -2vw;
  }
  .creative .dots-3 {
    width: 1.5vw;
    left: 0.75vw;
  }
  .creative .dots-4 {
    width: 1.5vw;
    left: -2vw;
  }
}