body
{
font-family: 'Roboto', sans-serif;
background-color:#ff831f !important;
overflow: auto;
z-index: 20;
}
#nav-bar
{
    position: sticky;
    top: 0;
    z-index: 4;
    
}
.navbar
{
  
    padding: 0 ;
}
navbar-brand img
{
    height: 33px;
    padding-left: 20px;
}
.navbar-nav li
{
    padding: 0 10px;   

}
.navbar-nav li a
{
    color: #fff !important;
   
    
}
#navbar-brand-text
{
    color:#fff;
}
#navbar-brand-text:hover
{
color:#ff831f;
}
.h1 {
  text-align:center;
}

.yellow-line {
  
  height: 1px;
 
  background-color: #f27e03;
}

.zoom {
  padding: 50px;
  
  transition: transform .2s; /* Animation */
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.cc-profile-image img {
  position: relative;
  border-radius: 50%;
  height: 180px;
  width: 180px;
  padding: 0;
  margin: 0;
  border: 15px solid transparent;
  z-index: 3;
  transition: all .3s ease-out;
}
.cc-profile-image a:before {
  content: "";
  border: 15px solid rgb(255, 255, 255);
  border-radius: 50%;
  height: 180px;
  width: 180px;
  position: absolute;
  left: 0;
  -webkit-animation: pulsate 1.6s ease-out;
  animation: pulsate 1.6s ease-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  opacity: 0.0;
  z-index: 2;
}

.adress-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 40px;
  padding: 27px 30px 27px 34px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  
  background-color: #212529;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.adress-left {
  position: relative;
  overflow: hidden;
  max-width: 300px;
}
.adress--txt {
  color: #fff;
}
.adress-hider {
  position: absolute;
  left: auto;
  top: 0%;
  right: 0%;
  bottom: 0%;
  width: 50%;
  background-image: -webkit-gradient(linear, right top, left top, color-stop(22%, #212529), to(rgba(24, 23, 31, 0)));
  background-image: linear-gradient(270deg, #212529 22%, rgba(24, 23, 31, 0));
}
.button {
  background-color: #ff831f;
  text-align: center;
  border: none;
  color: white;
  padding: 15px 32px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5);
  width: 250px;
  
}
.button:hover
{
  background-color:rgb(255, 0, 0);

}
.button:visited
{
  background-color:rgb(47, 255, 0);
}
.center {
  margin: auto;
  width: 60%;
  border: 5px;
  padding: 10px;
  }
  .center-1 {
    margin: auto;
    width: 60%;
    border: 3px solid black;
    padding: 10px;
    }
  .hover-white:hover
  {
    fill:white;
  }
  .hover-orange:hover
  {
    fill:#FF5700;
  }
  .hover-blue:hover
  {
    fill:#00acee;
  }

/*tiger animation*/
svg
  #tiger {
    margin-top:5%;
    width:100%;
    max-height: 70%;
    position:auto;
    top:0;
    left: 30%;
    
    
    
  }
  
  svg path {
      fill-opacity: 0;
    stroke-width: 1;
    stroke-dasharray: 3319;
    stroke-dashoffset: 3319;
    animation-name: draw;
    animation-duration: 7s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
  }
  
  svg path.t1 {
    fill: #C16B46 !important;
    stroke: #C16B46;
  }
  
  svg path.t2 {
    fill: #60410F !important;
    stroke: #60410F;
  }
  
  svg path.t3 {
    fill: #63561E !important;
    stroke: #60410F;
  }
  
  svg path.t4 {
    fill: #544C4C !important;
    stroke: #544C4C;
  }
  
  svg path.t5 {
    fill: #E09003 !important;
    stroke: #E09003;
  }
  
  svg path.t6 {
    fill: #FFAE1F !important;
    stroke: #FFAE1F;
  }
  
  svg path.t7 {
    fill: #EFC075 !important;
    stroke: #EFC075;
  }
  
  svg path.t8 {
    fill: #F7DC8F !important;
    stroke: #F7DC8F;
  }
  
  svg path.t9 {
    fill: #FEFFF3 !important;
    stroke: #FEFFF3;
  }
  
  svg path.t10 {
    fill: #D3C8C2 !important;
    stroke: #D3C8C2;
  }
  
  svg path.t11 {
    fill: #8C7C70 !important;
    stroke: #8C7C70;
  }
  
  svg path.t12 {
    fill: #B5AC6D !important;
    stroke: #B5AC6D;
  }
  
  svg path.t13 {
    fill: #777FA0 !important;
    stroke: #777FA0;
  }
  
  svg path.t14 {
    fill: #AFA49F !important;
    stroke: #AFA49F;
  }
  
  svg path.t15 {
    fill: #FF8D43 !important;
    stroke: #FF8D43;
  }
  
  svg path.t16 {
    fill: #C9C0AD !important;
    stroke: #C9C0AD;
  }
  
  svg path.t17 {
    fill: #C69849 !important;
    stroke: #C69849;
  }
  
  svg path.t18 {
    fill: #E2AFA3 !important;
    stroke: #E2AFA3;
  }
  
  
  svg path.t19 {
    fill: #FFA748 !important;
    stroke: #FFA748;
  }
  
  svg path.t20 {
    fill: #F9B26B !important;
    stroke: #F9B26B;
  }
  
  svg path.t21 {
    fill: #C07E48 !important;
    stroke: #C07E48;
  }
  
  
  svg path.t22 {
    fill: #937057 !important;
    stroke: #937057;
  }
  
  svg path.t23 {
    fill: #E8E9EB !important;
    stroke: #E8E9EB;
  }
  
  svg path.t24 {
    fill: #FEF8CB !important;
    stroke: #FEF8CB;
  }
  
  svg path.t25 {
    fill: #FFD385 !important;
    stroke: #FFD385;
  }
  
  svg path.t26 {
    fill: #D69385 !important;
    stroke: #D69385;
  }
  
  svg path.t27 {
    fill: #C98777 !important;
    stroke: #C98777;
  }
  
  svg path.t28 {
    fill: #EAD4B5 !important;
    stroke: #EAD4B5;
  }
  
  svg path.t29 {
    fill: #EADDCE !important;
    stroke: #EADDCE;
  }
  
  svg path.t30 {
    fill: #C98777 !important;
    stroke: #C98777;
  }
  svg path.t31 {
    fill: #48302C !important;
    stroke: #48302C;
  }
  
  svg path.t32 {
    fill: #D1C76D !important;
    stroke: #D1C76D;
  }
  
  svg path.t33 {
    fill: #84701E !important;
    stroke: #84701E;
  }
  svg path.t34 {
    fill: #564602 !important;
    stroke: #564602;
  }
  
  @keyframes draw {
    to {
        fill-opacity: 1;
      stroke-dashoffset: 0;
    }
  }
  /*
      FOOTER CSS STARTS HERE
      Auther: Abdelrhman Said
  */


