@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Poppins:wght@400;500;700&display=swap");
@media (min-width: 992px) { .slider, .slide { height: 56vh; } }
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) { .slider, .slide { height: 50vh; } }
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) { .slider, .slide { height: 40vh; } }
.slider:hover .slick-nav, .slide:hover .slick-nav { display: block !important; }

.slide { position: relative; transition: 1s; }
.slide .slide__img { width: 100%; height: 550px; overflow: hidden; }
@media (min-width: 992px) { .slide .slide__img { position: relative; top: 50%; left: 0; transform: translateY(-50%); } }
.slide .slide__img img { max-width: 100%; height: auto; opacity: 1 !important; animation-duration: 3s; transition: all 1s ease; width: 100%; height: 100%; object-fit: cover; }
.slide .slide__img.has_overlay::after { content: ''; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; background-image: url(../img/overlayer.png); background-position: center center; background-size: auto; z-index: 1; }
.slide .slide__content { position: absolute; top: 25%; width: 40%; }
.slide .slide__content.slide__content__right { right: 15%; left: auto; transform: translate(5%, -50%); }
.slide .slide__content--headings { color: #FFF; z-index: 2; position: relative; }
.slide .slide__content--headings h2 { font-size: 4.5rem; margin: 10px 0; }
.slide .slide__content--headings .animated { transition: all .5s ease; }
.slide .slide__content--headings .top-title { font-family: "Poppins", sans-serif; font-size: 2.5rem; text-transform: uppercase; font-weight: bold; }
.slide .slide__content--headings .title { font-size: 3.5rem; }
.slide .slide__content--headings a { text-decoration: none; color: #fff; padding: .5rem 3rem; font-size: 1rem; background-color: #6BB7BF; border: 2px solid #6BB7BF; text-transform: uppercase; font-weight: 600; border-radius: 10px; }
.slide .slide__content--headings a:hover { background-color: #fff; color: #6BB7BF; }
@media (min-width: 768px) and (max-width: 991px), (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slide .slide__content { width: 90%; }
  .slide .slide__content--headings h2 { font-size: 1.5rem; }
  .slide .slide__content--headings .top-title { font-size: 1rem; }
  .slide .slide__content--headings .title { font-size: 1.2rem; }
  .slide .slide__content--headings a { font-size: .7rem; padding: 10px 30px; } }

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

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

.slick-dots { position: absolute; bottom: -10px; list-style: none; display: block; text-align: center; padding: 0; margin: 0; width: 100%; }
.slick-dots li { position: relative; display: inline-block; margin: 0 5px; padding: 0; cursor: pointer; }
.slick-dots li button { border: 1px solid white; display: block; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; transition: all .3s ease; border-radius: 50%; }
.slick-dots li button::before { display: none; }
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }

.simple-dots .slick-dots li { width: 10px; height: 10px; }
.simple-dots .slick-dots li button { border-radius: 50%; background-color: transparent; opacity: 0.25; width: 10px; height: 10px; }
.simple-dots .slick-dots li button:hover, .simple-dots .slick-dots li button:focus { opacity: 1; }
.simple-dots .slick-dots li.slick-active button { color: white; opacity: 0.75; }

.stick-dots .slick-dots li { height: 3px; width: 20px; }
.stick-dots .slick-dots li button { position: relative; background-color: transparent; opacity: 0.25; width: 10px; height: 10px; padding: 0; }
.stick-dots .slick-dots li button:hover, .stick-dots .slick-dots li button:focus { opacity: 1; }
.stick-dots .slick-dots li.slick-active button { color: white; opacity: 0.75; }
.stick-dots .slick-dots li.slick-active button:hover, .stick-dots .slick-dots li.slick-active button:focus { opacity: 1; }

/* /////////// IMAGE ZOOM /////////// */
@keyframes zoomInImage { from { transform: scale3d(1, 1, 1); transition: 1s; }
  to { transform: scale3d(1.1, 1.1, 1.1); transition: 1s; } }
.zoomInImage { animation-name: zoomInImage; }

@keyframes zoomOutImage { from { transform: scale3d(1.1, 1.1, 1.1); transition: 1s; }
  to { transform: scale3d(1, 1, 1); transition: 1s; } }
.zoomOutImage { animation-name: zoomOutImage; transition: 1s; }

.slick-nav { --active: #fff; --border: rgba(255, 255, 255, .12); width: 44px; height: 44px; position: absolute; display: none !important; cursor: pointer; top: calc(50% - 44px); }
.slick-nav.prev-arrow { left: 3%; transform: scaleX(-1); z-index: 999; }
.slick-nav.next-arrow { left: auto; right: 3%; }
.slick-nav i { display: block; position: absolute; margin: -10px 0 0 -10px; width: 20px; height: 20px; left: 50%; top: 50%; }
.slick-nav i:before, .slick-nav i:after { content: ''; width: 10px; height: 2px; border-radius: 1px; position: absolute; left: 50%; top: 50%; background: var(--active); margin: -1px 0 0 -5px; display: block; transform-origin: 9px 50%; }
.slick-nav i:before { transform: rotate(-40deg); }
.slick-nav i:after { transform: rotate(40deg); }
.slick-nav:before, .slick-nav:after { content: ''; display: block; position: absolute; left: 1px; right: 1px; top: 1px; bottom: 1px; border-radius: 50%; border: 2px solid var(--border); }
.slick-nav svg { width: 44px; height: 44px; display: block; position: relative; z-index: 1; color: var(--active); stroke-width: 2px; stroke-dashoffset: 126; stroke-dasharray: 126 126 0; transform: rotate(0deg); }
.slick-nav.animate svg { animation: stroke 1s ease forwards .3s; }
.slick-nav.animate i { animation: arrow 1.6s ease forwards; }
.slick-nav.animate i:before { animation: arrowUp 1.6s ease forwards; }
.slick-nav.animate i:after { animation: arrowDown 1.6s ease forwards; }

@keyframes stroke { 52% { transform: rotate(-180deg); stroke-dashoffset: 0; }
  52.1% { transform: rotate(-360deg); stroke-dashoffset: 0; }
  100% { transform: rotate(-180deg); stroke-dashoffset: 126; } }
@keyframes arrow { 0%,
    100% { transform: translateX(0); opacity: 1; }
  23% { transform: translateX(17px); opacity: 1; }
  24%,
    80% { transform: translateX(-22px); opacity: 0; }
  81% { opacity: 1; transform: translateX(-22px); } }
@keyframes arrowUp { 0%,
    100% { transform: rotate(-40deg) scaleX(1); }
  20%,
    80% { transform: rotate(0deg) scaleX(0.1); } }
@keyframes arrowDown { 0%,
    100% { transform: rotate(40deg) scaleX(1); }
  20%,
    80% { transform: rotate(0deg) scaleX(0.1); } }