@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Variables converted to hardcoded values */
.slick-dots {
    --slick-dot-width: 20px;
    --slick-dot-height: 20px;
    --slick-dot-color: #23AAE2;
    --slick-dot-color-active: rgb(167, 159, 159);
    --slick-opacity-default: 0.75;
    --slick-opacity-on-hover: 1;
    --slick-opacity-not-active: 0.25;
}

/* Base */
html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

/* Design Slider */
.slider, .slide {
    position : relative;
    height: calc(100vh - 80px);
}



.slider {
    width: 80%;
    margin: 0px auto;
}

    @media (min-width: 992px) {
        .slide {
        position: relative;
    }

        @media (max-width: 992px) {
            .slider {
                width: 100%;
            }
        }

.slide .slide__img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position: right;
    background-size: cover;
    background-repeat: no-repeat;
}

    .slide .slide__img img {
        max-width: 100%;
        /*height: 100%;*/
        object-fit: cover;
        opacity: 1 !important;
        animation-duration: 3s;
        transition: all 1s ease;
    }

.slide .slide__content {
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    font-family: "Poppins", sans-serif;
}

.slide .slide__content--headings {
    color: #FFF;
}

    .slide .slide__content--headings h2 {
        font-size: 4rem;
        margin: 10px 0;
        font-family: "Poppins", sans-serif;
    }

    .slide .slide__content--headings .animated {
        transition: all 0.5s ease;
    }

/* Change animation presets */
.slider [data-animation-in] {
    opacity: 0;
    animation-duration: 1.5s;
    transition: opacity 0.5s ease 0.3s;
}

/* Dots */
.slick-dotted .slick-slider {
    margin-bottom: 30px;
}

.slick-dots {
    position: absolute;
    bottom: 27px;
    list-style: none;
    display: block;
    text-align: center;
    padding: 0;
    right: 50%;
}

    .slick-dots li {
        position: relative;
        display: inline-block;
        margin: 0 5px;
        padding: 0;
        cursor: pointer;
    }

        .slick-dots li button {
            border: 0;
            display: block;
            outline: none;
            line-height: 0;
            font-size: 0;
            color: transparent;
            padding: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

            .slick-dots li button:hover,
            .slick-dots li button:focus {
                outline: none;
            }

/* Simple Dots */
.simple-dots .slick-dots li {
    width: var(--slick-dot-width);
    height: var(--slick-dot-height);
}

    .simple-dots .slick-dots li button {
        border-radius: 50%;
        background-color: #1d1d1d;
        opacity: var(--slick-opacity-not-active);
        width: var(--slick-dot-width);
        height: var(--slick-dot-height);
    }

        .simple-dots .slick-dots li button:hover,
        .simple-dots .slick-dots li button:focus {
            opacity: var(--slick-opacity-on-hover);
        }

    .simple-dots .slick-dots li.slick-active button {
        color: var(--slick-dot-color-active);
        opacity: var(--slick-opacity-default);
    }

/* Stick Dots */
.stick-dots .slick-dots li {
    height: 3px;
}

    .stick-dots .slick-dots li button {
        position: relative;
        background-color: #0b1750;
        opacity: var(--slick-opacity-not-active);
        width: 13px;
        height: 13px;
        border-radius: 50%;
        padding: 0;
    }

        .stick-dots .slick-dots li button:hover,
        .stick-dots .slick-dots li button:focus {
            opacity: var(--slick-opacity-on-hover);
        }

    .stick-dots .slick-dots li.slick-active button {
        color: var(--slick-dot-color-active);
        opacity: var(--slick-opacity-default);
    }

        .stick-dots .slick-dots li.slick-active button:hover,
        .stick-dots .slick-dots li.slick-active button:focus {
            opacity: var(--slick-opacity-on-hover);
        }

/* Image Zoom Animations */
 @keyframes zoomInImage {
    from {
      transform: scale3d(1, 1, 1);
    }
    to {
      transform: scale3d(1.1, 1.1, 1.1);
    }
  }
  
  .zoomInImage {
    animation-name: zoomInImage;
  }
  
  @keyframes zoomOutImage {
    from {
      transform: scale3d(1.1, 1.1, 1.1);
    }
    to {
      transform: scale3d(1, 1, 1);
    }
  }
  
  .zoomOutImage {
    animation-name: zoomOutImage;
  }
   


@media screen and (max-width: 1040px) {
    .slider, .slide {
        height: auto !important;
    }

        .slide .slide__img {
            background-size : cover;
        }

        .slide .slide__content {
            top: 78% !important;
            left: 26% !important;
        }
    }

@media screen and (max-width: 600px) {

        .slide .slide__content {
            top: 78% !important;
            left: 40% !important;
        }

    .slide .slide__content--headings h2 {
        font-size: 4rem;
        margin: 5px 0;
    }
    }