*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
body {
  font-family: "Noto Kufi Arabic","Roboto", sans-serif;
  height: 100vh;
  margin: 0;
  background-color: #000000;
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='40' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 0%, 1)'/><path d='M23.222 25.097l-3.266-2.056-3.219 2.058.983-3.847-3.042-2.503 3.936-.18 1.52-3.668 1.342 3.578 3.846.312-2.996 2.505z'  stroke-linecap='square' stroke-width='1' stroke='hsla(0, 0%, 8%, 1)' fill='none'/><path d='M.133-5.1l-1.52 3.668-3.935.18 3.043 2.504-.985 3.848L-.043 3.04l3.264 2.057-.895-3.803L5.322-1.21l-3.845-.312L.133-5.1zm40 0l-1.52 3.668-3.935.18 3.043 2.504-.985 3.848 3.221-2.059 3.264 2.057-.895-3.803 2.996-2.504-3.845-.312L40.133-5.1zm-40 40l-1.52 3.668-3.935.18 3.043 2.504-.985 3.848 3.221-2.059 3.264 2.057-.895-3.803 2.996-2.504-3.845-.312L.133 34.9zm40 0l-1.52 3.668-3.935.18 3.043 2.504-.985 3.848 3.221-2.059 3.264 2.057-.895-3.803 2.996-2.504-3.845-.312-1.344-3.579z'  stroke-linecap='square' stroke-width='1' stroke='hsla(0, 0%, 10%, 1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
  position: relative;
  
}

  .container {
  margin:100px auto 0px auto;

  width: 100%;
  padding: 20px;
}
.profile-card {
  position: relative;
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 8px #262626;
  background-color: #262626;
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
  /* background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='50' height='50' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 15%, 1)'/><path d='M50 25L37.5 50 25 25 37.5 0zm-25 0L12.5 50 0 25 12.5 0z'  stroke-width='1' stroke='hsla(0, 0%, 19%, 1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,-25)' fill='url(%23a)'/></svg>") */
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='40' patternTransform='scale(3) rotate(50)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 15%, 1)'/><path d='M23.222 25.097l-3.266-2.056-3.219 2.058.983-3.847-3.042-2.503 3.936-.18 1.52-3.668 1.342 3.578 3.846.312-2.996 2.505z'  stroke-width='1' stroke='none' fill='hsla(0, 0%, 28%, 1)'/><path d='M.133-5.1l-1.52 3.668-3.935.18 3.043 2.504-.985 3.848L-.043 3.04l3.264 2.057-.895-3.803L5.322-1.21l-3.845-.312L.133-5.1zm40 0l-1.52 3.668-3.935.18 3.043 2.504-.985 3.848 3.221-2.059 3.264 2.057-.895-3.803 2.996-2.504-3.845-.312L40.133-5.1zm-40 40l-1.52 3.668-3.935.18 3.043 2.504-.985 3.848 3.221-2.059 3.264 2.057-.895-3.803 2.996-2.504-3.845-.312L.133 34.9zm40 0l-1.52 3.668-3.935.18 3.043 2.504-.985 3.848 3.221-2.059 3.264 2.057-.895-3.803 2.996-2.504-3.845-.312-1.344-3.579z'  stroke-width='1' stroke='none' fill='hsla(340, 0%, 20%, 1)'/></pattern></defs><rect width='800%' height='800%' transform='translate(-78,-84)' fill='url(%23a)'/></svg>");
  -webkit-box-shadow: 5px 5px 0px 0px rgba(181, 53, 183,.5);
  -moz-box-shadow: 5px 5px 0px 0px rgba(181, 53, 183,.5);
  box-shadow: 5px 5px 0px 0px rgba(181, 53, 183,.5);
}
.profile-card img {
  position: absolute;
  top:-75px;
  left:0;
  right:0;
  margin: 0 auto;
  width: 150px;

  border-radius: 50%;
}
.profile-card h2 {
  padding-top:70px;
  margin: 10px 0;
  font-size: 24px;
  color:#fff
}
.profile-card h4 {
  margin: 5px 0;
  color: #888;
  font-weight: normal;  color:#fff

}
.profile-card p {
  color: #666;
  font-size: 14px;
  line-height: 1.5;  color:#fff

}
.profile-card .social {
  /* margin-top: 15px; */
  direction: ltr !important;
}
.profile-card .social a {
  text-decoration: none;
  color: #555;
  margin: 0 5px;
  font-size: 15px;
  color:#fff
}
.lang_description{
  margin:10px;
}
.btn-hover {
width: 200px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
border: none;
background-size: 300% 100%;

border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

.btn-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

.btn-hover:focus {
outline: none;
}

.btn-hover.color-1 {
background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}
.btn-hover.color-2 {
background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
}
.btn-hover.color-3 {
background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}
.btn-hover.color-4 {
background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
}
.btn-hover.color-5 {
background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
}
.btn-hover.color-6 {
background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);
box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
}
.btn-hover.color-7 {
background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645);
box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
}
.btn-hover.color-8 {
background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}
.btn-hover.color-9 {
background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}
.btn-hover.color-10 {
background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a , #FBB03B);
box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
}
.btn-hover.color-11 {
background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);  box-shadow: 0 5px 15px rgba(242, 97, 103, .4);
}

.btn-hover:disabled {
  background-image: None !important;
  box-shadow: none !important;

  background-color: grey !important;
  color: white !important;
  cursor: not-allowed !important;
  border: 1px solid #ccc !important;
}

.form-container {
  width:100%;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin-top:20px
}
.languages{
  direction: rtl !important;
  color:#fff;
  font-size: .6em;
  cursor: pointer;
  padding:10px
}
.form-group {
  width: 100%;
  margin-bottom: 10px;
}
.form-group label {
  display: block;
  color:#fff;
  font-size: .8em;
}
.form-group small {
  display: block;
  color:#fff;
  font-size: .6em;
}
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"] {
  width: 100%;
  border: 1px solid #393939;
  font-size: 16px;
  padding:10px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  background-color:#636363;
}
.form-group input[type="text"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="email"]:focus {
  border-color: #007BFF;
  outline: none !important;
  background-color:#4e38ce;
  color:#fff;
  padding:10px 15px;
}

.video-container {
  width: 100%;
  max-width: 800px;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
}
.video-container video {
  width: 100%;
  height: auto;
  border-radius: 15px;
}

.lang_copyright a{
color:#f86547;
}

.icon {

  animation: bounceZoom 2s infinite;
}

@keyframes bounceZoom {
  0%, 20%, 50%, 80%, 100% {
      transform:scale(1);
      -webkit-transform:scale(1);
      -moz-transform:scale(1);
      -ms-transform:scale(1);
      -o-transform:scale(1);
}
  40% {
      transform: scale(1.5);
      -webkit-transform: scale(1.5);
      -moz-transform: scale(1.5);
      -ms-transform: scale(1.5);
      -o-transform: scale(1.5);
}
  60% {
      transform:scale(0.9);
      -webkit-transform:scale(0.9);
      -moz-transform:scale(0.9);
      -ms-transform:scale(0.9);
      -o-transform:scale(0.9);
}
}


.celebration-container {
  position: absolute;
  z-index: 999999;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none; /* To make sure it doesn't block other interactions */
}

.emoji {
  position: absolute;
  top: -50px;
  font-size: 50px;
  animation: drop 4s ease forwards;
}

@keyframes drop {
  to {
      transform: translateY(100vh);
      opacity: 0;
  }
}