hr{
    opacity:1;
}


small{
    font-size: 16px;
}

.zoom {
    transition: transform .1s;
    /* Animation */
    width: 100%;
    margin: auto;
}

.zoom:hover {
    transform: scale(1.1);
    /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.zoom a{
    text-decoration:none;
    color:black;
  }
  .zoom a:hover{
    text-decoration:none;
    color:black;
  }
  
  .index-image1 {
    width: 300px;
    height: 300px;
    background-color: black;
    position: absolute;
    /* border-radius:10%; */
}

.index-image2 {
    width: 300px;
    height: 300px;
    position: relative;
    left: 200px;
    top: 150px;
    margin-bottom: 100px;
    /* border-radius:10%; */
}

@media (max-width: 777px) {
    .index-image1 {
        width: 100px;
        height: 100px;
        background-color: black;
        position: absolute;
        left: 100px;
        /* border-radius:10%; */
    }

    .index-image2 {
        width: 100px;
        height: 100px;
        position: relative;
        left: 30px;
        top: 60px;
        margin-bottom: 80px;
        /* border-radius:10%; */
    }

}
 
 /* slider styles */
  
 .parent{
    position: relative;
    width: 90%;
 }
 .img{
   width:100%;
 }
 .top-right{
    position: absolute;
    right:0;
    top:0;
 }
 
 .glow-on-hover-canvas {
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}
 
 /* Tab sliders */
.nav-tabs .nav-link.active {
    border-bottom: 1px solid red;
    border-top: #fff;
    border-left: #fff;
    border-right: #fff;
    color: black;
}

.nav-tabs .nav-link {
    color: black;
    margin-right: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border: #fff;
}

.nav-tabs li a:hover {
    color: black;
    border: #fff;
}

.nav-tabs li {
    border: #fff;
}

.tab-content {
    border: #fff;
    padding: 20px;
}

.text-light-75 {
    color: #ffffff;
    opacity: 87%;
}

.text-light-50 {
    color: #ffffff;
    opacity: 60%;
}

.text-light-25 {
    color: #ffffff;
    opacity: 38%;
}

.bg-dark-75 {
    background-color: #0a0a0a;
}

.bg-dark-50 {
    background-color: #121212;
}

.bg-dark-25 {
    background-color: #191919;
}

.text-red {
    color: #ff0000;
}

.close{
    border: none
}

.close:hover{
    border: none
}
.close:active{
    border: none
}

/* request quote button start */
.btn-helpme {
    background: linear-gradient(180deg,transparent 54%,#d9534f),radial-gradient(circle farthest-corner at 30% 40%,#d50b14d1,#d50b14);
    border:none;
    padding:9.5px 0px;
    color:white;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.btn-helpme:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -50px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #ffffff9c;
    animation: shiny-btn1 3s ease-in-out infinite;
    transition: all 0.3s ease;
}



@-webkit-keyframes shiny-btn1 {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
/* request quote button end*/


/* Glow on Hover Starts */

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 50px;
    color: white;
    text-align:center;
    --borderWidth: 5px;
    background: black;
    position: relative;
    border-radius:30px;
  }
  
  .button:after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--borderWidth));
    left: calc(-1 * var(--borderWidth));
    height: calc(100% + var(--borderWidth) * 2);
    width: calc(100% + var(--borderWidth) * 2);
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    border-radius:30px;
    z-index: -1;
    animation: animatedgradient 3s ease infinite;
    background-size: 400% 400%;
  }
  

  
  @keyframes animatedgradient {
      0% {
          background-position: 0% 50%;
      }
      50% {
          background-position: 100% 50%;
      }
      100% {
          background-position: 0% 50%;
      }
  }

  /* Glow on Hover ends  */


/* accordion for hydra */

.faqs-wrapper
{
 max-width: 760px;
 margin: 50px auto;
 padding: 40px 20px
}

.faqs-wrapper .accordion-item {
    background-color: #f8f8f8;
    border: #f8f8f8;
  }
  
.faqs-wrapper .accordion-button {
    background-color: #f8f8f8;
    border: #fff;
}
.faqs-wrapper .accordion-button:hover
{
 background-color: #f8f8f8
}
.faqs-wrapper .accordion-button:focus
{
    box-shadow: inherit
}
.faqs-wrapper .accordion-button::after{
    background-image: url("http://cdn.onlinewebfonts.com/svg/img_221758.png") !important;
}
.faqs-wrapper .accordion-button:not(.collapsed)
{
    color: inherit;
    background-color:#ecf0f1;
    border-bottom: 1px solid #ddd !important
}
.faqs-wrapper .accordion-button:not(.collapsed)::after
{
    filter:brightness(0%) invert(70%)
}
.faqs-wrapper .accordion-button.collapsed
{
    border-bottom: 1px solid #ddd !important
}
.faqs-wrapper .accordion-collapse.show
{
    border-bottom: 1px solid #ddd !important
}
.faqs-wrapper .accordion-collapse
{
    background-color: #fff
}
.faqs-wrapper .accordion-collapse p
{
    width: 100%;
}
.faqs-wrapper .accordion-collapse p a
{
    text-decoration: none;
    color: #333;
   display: block
}
@media (max-width: 777px){.wrapper{margin: 50px 20px}}
@media (max-width: 365px){.wrapper{margin: 50px 10px}.w-75{width: 90% !important}}

/* Accordian for workshop */
.accordion{
    --bs-accordion-border-width: 0px;
}
.accordion-item {
    background-color: #121212;
    border: #121212;
}

.accordion-button {
    background-color: #121212;
}

.accordion-button:focus {
    box-shadow: inherit;    
}

.accordion-button:hover {
    background-color: #121212;
}
.accordion-button:active {
    background-color: #121212;
}

.accordion-button:after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
  }

.accordion-button:not(.collapsed) {
    color: #fff;
    background-color: #121212;
}

.accordion-button:not(.collapsed)::after {
    filter:brightness(0%) invert(100%);
}


/* Accordian end */


/* carousel */
.carousel {
    margin: auto;
}

.carousel .card {
    color: #fff;
    border-radius: 10px;
    margin: 10px;
}

.owl-dots {
    text-align: center;
    margin-top: 40px;
}

.owl-dot {
    height: 15px;
    width: 45px;
    margin: 0 5px;
    outline: none;
    border-radius: 14px;
    border: 2px solid white !important;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.owl-dot.active,
.owl-dot:hover {
    background: white !important;
}

#hexGrid {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 0 auto auto;
    overflow: hidden;
    /*font-family: 'Raleway', sans-serif;*/
    font-size: 15px;
    list-style-type: none;
    align-items: right;
  }
  
  .hex {
    position: relative;
    visibility:hidden;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
  }
  .hex::after{
    content:'';
    display:block;
    padding-bottom: 86.602%;  /* =  100 / tan(60) * 1.5 */
  }
  .hexIn{
    position: absolute;
    width:96%;
    padding-bottom: 110.851%; /* =  width / sin(60) */
    margin:0 2%;
    overflow: hidden;
    visibility: hidden;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
    -webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
        -ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
            transform: rotate3d(0,0,1,-60deg) skewY(30deg);
  }
  .hexIn * {
    position: absolute;
    visibility: visible;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
  }
  .hexLink {
      display:block;
      width: 100%;
      height: 100%;
      text-align: center;
      color: #fff;
      overflow: hidden;
      -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
          -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
              transform: skewY(-30deg) rotate3d(0,0,1,60deg);
  }
  
  /*** HEX CONTENT **********************************************************************/
  .hex img {
    left: -100%;
    right: -100%;
    width: auto;
    height: 100%;
    margin: 0 auto;
    -webkit-transform: rotate3d(0,0,0,0deg);
        -ms-transform: rotate3d(0,0,0,0deg);
            transform: rotate3d(0,0,0,0deg);
  }
  
  .hex h4, .hex p {
    width: 100%;
    padding: 5%;
    box-sizing:border-box;
    background-color: rgba(255, 0, 0, 0.95);
    font-weight: 300;
    -webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;
            transition:          transform .2s ease-out, opacity .3s ease-out;
  }
  .hex h4 {
    bottom: 50%;
    padding-top:50%;
    font-size: 1.5em;
    z-index: 1;
    -webkit-transform:translate3d(0,-100%,0);
        -ms-transform:translate3d(0,-100%,0);
            transform:translate3d(0,-100%,0);
  }
  .hex h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 45%;
    width: 10%;
    text-align: center;
    border-bottom: 1px solid #fff;
  }
  .hex p {
    top: 50%;
    padding-bottom:50%;
    -webkit-transform:translate3d(0,100%,0);
        -ms-transform:translate3d(0,100%,0);
            transform:translate3d(0,100%,0);
  }
  
  
  /*** HOVER EFFECT  **********************************************************************/
  .hexLink:hover h4, .hexLink:focus h4,
  .hexLink:hover p, .hexLink:focus p{
    -webkit-transform:translate3d(0,0,0);
        -ms-transform:translate3d(0,0,0);
            transform:translate3d(0,0,0);
  }
  /*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
  @media (min-width:1201px) { /* <- 5-4  hexagons per row */
    #hexGrid{
      padding-bottom: 5.5%
    }
    .hex {
      width: 25%; /* = 100 / 5 */
    }
    .hex:nth-child(7n+5){ /* first hexagon of even rows */
      margin-left:12.5%;  /* = width of .hex / 2  to indent even rows */
    }
  }
  
  @media (max-width: 900px) and (min-width:601px) { /* <- 3-2  hexagons per row */
    #hexGrid{
      padding-bottom: 7.4%
    }
    .hex {
      width: 33.333%; /* = 100 / 3 */
    }
    .hex:nth-child(5n+4){ /* first hexagon of even rows */
      margin-left:16.666%;  /* = width of .hex / 2  to indent even rows */
    }
  }
  
  @media (max-width: 600px) { /* <- 2-1  hexagons per row */
    #hexGrid{
      padding-bottom: 11.2%
    }
    .hex {
      width: 50%; /* = 100 / 2 */
    }
    .hex:nth-child(3n+3){ /* first hexagon of even rows */
      margin-left:25%;  /* = width of .hex / 2  to indent even rows */
    }
  }

  .chat_window {

    float: right !important;
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
}