html {
    scroll-behavior: smooth;
}

body {
    background-color: black;
        color: white;
    font-family: sans-serif;
}

#bg {
    background: #a9e4ed url(images/bg.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-blend-mode: screen;
}

a.nav-link:hover {
    color: #17a2b8;
}

.display-6 {
    font-size: 1.3rem;
}

#bg2 {
    /* RGB: (13, 110, 253) */

    background: #17a2b8 url(images/bg-coledra.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-blend-mode: luminosity;

}

/* #bg2::after {
    content: "";
    background-color: rgb(228, 185, 185);
    height: 100%;
    width: 100%;
    left: 0px;
    position: absolute;
    opacity: 0.1;
    z-index: -1;
} */

hr {
    background-color: #17a2b8;

}

#sticky {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 5;
}


/* .container{
           background-image: url(images/bg2.jpg);
          background-size: cover;
          background-attachment: fixed;
          min-height: 1000; 
          z-index: -1;
      } */
.tales {
    width: 100%;
    height: 75vh;
}

.carousel-caption,
.carousel {
    z-index: 2;
}

nav::before {
    content: "";
    background-color: rgb(0, 0, 0);
    height: 100%;
    width: 100%;
    left: 0px;
    position: absolute;
    opacity: 0.9;
    z-index: -1;
}



/* social media hover */
.socialhov1:hover{
    color: #0165E1;
    transform: scale(1.4);
}
.socialhov2:hover{
    color: rgb(255, 143, 103);
    transform: scale(1.4);
}
.socialhov3:hover{
    color: #128C7E;
    transform: scale(1.4);
}
.socialhov4:hover{
    color:  #0A66C2;
    transform: scale(1.4);
}
.socialhov5:hover{
    color: #FF0000;
    transform: scale(1.4);
}


/* three cloud */

.threecloudvd1:hover, .threecloudvd2:hover, .threecloudvd3:hover{
    transform: scale(1.1);
    transition: all 0.2s ease 0.1s;
}



/* nav :hover */


.e3{
color: #17a2b8 !important;
scale: 1.1;
  }
  .e2:hover{
    color: #17a2b8 !important;
    transform: scale(1.1);
  }
  .e1:hover{
    color: #17a2b8 !important;
    transform: scale(1.1);
  }
  .e4:hover{
    color: #17a2b8 !important;
    transform: scale(1.1);
  }



/* javascript */


.new.animate__animated {

    opacity: 1;
    animation-play-state: running;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    /* animation-delay: 2s; */
}