:root {
  --base-color: rgba(182, 7, 7, 0.761);
}
*{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
.img{
  height: 115px;
  padding-top: 8px;
  padding-bottom: 8px;
}
@media screen and (max-width:  2000px) {
  .name {
    font-size: 40px;
    font-weight: bold;
  }
  .img {
    height: 105px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
@media screen and (max-width:  1050px) {
  .name {
    font-size: 32px;
    font-weight: bold;
  }
  .img{
    height: 105px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

@media screen and (max-width:  625px) {
  .name {
    font-size: 30px;
    font-weight: bold;
  }
  .img{
    height: 95px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

@media screen and (max-width:  480px) {
  .name {
    font-size: 20px;
    font-weight: bold;
  }
  .img {
    height: 90px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
@media screen and (max-width:  350px) {
  .name {
    font-size: 15px;
    font-weight: bold;
  }
  .img {
    height: 60px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

.name {
  padding:2%;
  color: rgba(7, 7, 113, 0.854);
}
.nav {
  background-color:rgba(7, 7, 113, 0.854);
}
.nav1 {
  background-color: var(--base-color);
}
.clr {
  color:rgba(7, 7, 113, 0.854) ;
}
.icon {
  color:rgba(7, 7, 113, 0.854);
  font-size:17px;
}
.info {
  color:white ;
  padding-left: 5px;
}
.msg {
  font-size: 25px;
}
.line {
  width: 50px;
}
.bton {
  background-color:rgba(7, 7, 113, 0.854);
  border-radius: 10px;
  padding-top: 4px; 
}
#navbarDropdown {
  color: black;
}
#navbarDropdown:hover {
  color: white;
}
.btn:hover {
  cursor: pointer;
  background-color:   rgba(7, 7, 113, 0.854);
}
.btn:active {
  cursor: pointer;
  background-color:  rgba(7, 7, 113, 0.854);
}
.btn:hover > a {
  color: white !important;
  color:rgba(14, 64, 247, 0.878);
 
}
.botn:hover {
  border: 5px solid rgba(7, 7, 113, 0.854); 
  border-radius: 10px;
}
.imag {
  width: 150vh;
  /* color:rgb(242, 240, 240); */
}
.img-div {
  transition: transform .3s;
}
.img-div:hover {
  z-index: 1;
  transform: scale(1.18);
}
#div1, #div2 {
  width: 600px;
  height: 50px; 
  font-weight: bold;
  position: relative;
  animation: mymove 3s linear;
  overflow: hidden;
}
  
#div1 {animation-timing-function: ZAINAB BLOCK;}
  
@keyframes mymove {
  from {left: -400px;}
  to {left: 140px;}
} 

.icons {
  cursor: pointer;
  margin-top: 6%;
  flex-direction: row;
  text-align: center;
  justify-content: center;
  font-size: 25px;
}
.line-left {
  overflow: hidden;
  width: 40%;
  height: 2px;
  background: rgba(7, 7, 113, 0.854);
  position: absolute;
  top: 50%;
  left: 74%;
  transform: translate(-50%, -50%);
}
.line-left::before {
  overflow: hidden;
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  animation: animate-left 500s linear 1;
}

@keyframes animate-left {
  0% {
    left: 0;
  }

  0.5% {
    left: 100%;
  }

  100% {
    left: 100%
  }
}
.line-right {
  overflow: hidden;
  width: 40%;
  height: 2px;
  background: rgba(7, 7, 113, 0.854);
  position: absolute;
  top: 50%;
  right: 32%;
  transform: translate(-50%, -50%);
}

.line-right::before {
  overflow: hidden;
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  animation: animate-right 500s linear 1;
}

@keyframes animate-right {
  0% {
    right: 0;
  }

  0.5% {
    right: 100%;
  }

  100% {
    right: 100%;
  }
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.clr{
  background-color: rgb(143, 145, 146);
}
.sport{
  border: 5px solid black;
  border-radius: 50%;
}
.shadow {

  /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
  /* box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; */
  /* box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset; */
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  /* box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.9) 0px 0px 0px 1px; */
  /* box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset; */
}
.image{
  background-image: url('images/libarar.jpg');
  height:500px;
}
.icn{
  font-size: 20px;
}

.moveImg {
  width: 250px;
  height: 300px;
  transition: width 2s, height 2s, transform 0.3s;
}

.moveImg:hover {
  width: 350px;
  height: 400px;
}

canvas {
  width: 100% !important;
  overflow-x: hidden !important;
}

.opacity-black {
  background-color: rgba(0, 0, 0, 0.222);
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid rgba(7, 7, 113, 0.854);
  width: 120px;
  height: 120px;
  -webkit-animation: spin 1.5s linear infinite; /* Safari */
  animation: spin 1.5s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}