/* Sticky footer styles
-------------------------------------------------- */

html {
    /* min-height: 100%;  */
    /* height: 100%; */
    /* margin: 0; */
    /* font-family: Roboto, arial; */
    font-weight: 400;
    font-size: 17px;
}


/* Extra small devices (xs - phones, 600px and down) */

@media only screen and (max-width: 600px) {
    .container {
        max-width: 100%;
        margin-bottom: auto;
    }
    .font-responsive {
        font-size: 0.9rem;
    }
}


/* Small devices (sm - portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {
    .container {
        max-width: 100%;
        margin-bottom: auto;
    }
    .font-responsive {
        font-size: 1.rem;
    }
}


/* Medium devices (md - landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {
    .container {
        max-width: 100%;
        margin-bottom: auto;
    }
    .font-responsive {
        font-size: 1.1rem;
    }
}


/* Large devices (lg - laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
    .container {
        max-width: 90%;
        margin-bottom: auto;
    }
    .font-responsive {
        font-size: 1.2rem;
    }
}


/* Extra large devices (xl - large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
    .container {
        max-width: 80%;
        margin-bottom: auto;
    }
    .font-responsive {
        font-size: 1.3rem;
    }
}


/* Extra large devices (xxl - large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1400px) {
    .container {
        margin: 1% 0% 1% 0%;
        max-width: 100%;
    }
    .font-responsive {
        font-size: 1.3rem;
    }
    .d-xxl-block {
        display: initial !important;
    }
    .flex-xxl-row {
        flex-direction: row !important;
    }
}

.owl-dots {
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
}

.owl-dot span {
    width: 16px !important;
    height: 16px !important;
    margin: 5px 7px;
    background: #FFF;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    border-radius: 30px; 
}

.owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #eab308 !important;
}


.main-content {
    position: relative;

    .owl-theme {
        .custom-nav {
            position: absolute;
            top: 50%;
            /* width: 80px; */
            left: 0px;
            right: 0px;

            .owl-prev, .owl-next {
                position: absolute;
                color: #fff;
                background: none;
                border: none;
                z-index: 100;
            }

            i {
                
                font-size: 10rem;
                font-weight: bolder;
                color: #cecece;
            }

            .owl-prev {
                left: 0;
            }

            .owl-next {
                right: 0;
            }
            .owl-next, .owl-prev:hover {

                background-color:  rgba(255, 255, 255, 0) !important; 
            }
        }
    }
}
[x-cloak] {
    display: none !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

/* custom scrollbar */

.modal-container::-webkit-scrollbar {
    width: 16px;
}

.modal-container::-webkit-scrollbar-track {
    background-color: rgb(145, 168, 197);
    border-radius: 0.5rem;
}

.modal-container::-webkit-scrollbar-thumb {
    background-color: rgb(219, 39, 119);
    border-radius: 20px;
    border: 3px solid transparent;
    background-clip: content-box;
}

.modal-container::-webkit-scrollbar-thumb:hover {
    background-color: rgb(190, 24, 93);
}



.spotlight {
    display: inline-block;
    background-image: linear-gradient(
      90deg,
      #eb8705 0%,
      #eb0505 43.5%,
      #1a30ff 89.5%
    );
    background-size: 300% !important;
    background-clip: text;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-animation: Gradient 2s ease infinite !important;
    -moz-animation: Gradient 2s ease infinite !important;
    animation: Gradient 2s ease infinite !important;
  }
  
  
  /Animation Keyframes / @-webkit-keyframes Gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  @-moz-keyframes Gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  @keyframes Gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }