@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900');

.nav-link {
    position: relative;
  }

  .nav-link:after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 10px;
    top: 55px;
    width: 80%;
    height: 2px;
    background-color: #007bff; /* Change this to the desired underline color */
    transform: scaleX(0);
    transition: transform 0.3s;
  }

  .nav-link.active:after {
    transform: scaleX(1);
  }

  .navbar .navbar-nav .nav-link {
    padding: 30px 15px;
    color: var(--dark);
    font-weight: 500;
    outline: none;
}
@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        margin-top: 15px;
        border-top: 1px solid #EEEEEE;
    }
}

h1{
    text-align: center;
    color: white;
   
}

.image{
    opacity: 5.5;
}

.divs{
    background: rgb(157,207,135);
    background: linear-gradient(90deg, rgba(157,207,135,1) 44%, rgba(0,212,255,1) 100%);
}

.divas{
  background: rgb(85,202,231);
background: linear-gradient(90deg, rgba(85,202,231,1) 5%, rgba(19,230,237,1) 39%, rgba(84,208,230,1) 78%, rgba(73,194,181,1) 94%);
}
#bod-oblast{
    background-color: rgb(205, 210, 214);
}
li{
    color: white;
    font-size: 1.3em;
}

/* Octagon */


.hex {
  display: block;
  margin: 0 auto;
  position: relative;
  width: 320px;
  height: 277.12px; /* width * 0.866 */
  border: 2 pix solid blue;
  box-sizing: border-box;
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}
.hex-background {
  position: absolute;
  
  top: 2px; /* equal to border thickness */
  left: 2px; /* equal to border thickness */
  width: 316px; /* container height - (border thickness * 2) */
  height: 273.12px; /* container height - (border thickness * 2) */
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}
.hex img {
  position: absolute;
  width: 100%; 
  height: 120%; 
  object-fit: cover;
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  
}
.back-to-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  display: none;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

.img {
  
  border:2px solid #fff;
  background: url(img/tiger.png) no-repeat;
  -moz-box-shadow: 10px 10px 5px #ccc;
  -webkit-box-shadow: 10px 10px 5px #ccc;
  box-shadow: 10px 15px 9px #a7a4a4;
  -moz-border-radius:25px;
  -webkit-border-radius:25px;
  border-radius:25px;
}

#map{
  width: 100%;
  height: 400px;
  background-color: grey;
}


.input {
  filter: drop-shadow(6px 14px 63px #000);
}

.animate-text
{
   
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 5s linear infinite;
  display: inline-block;
  margin-left:40%;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}