.myslider {



.item {

width: 100%;

position: relative;



&.c   {

background-color: #325D7F;

}

&.b   {

background-color: #F2727F;

}

&.a   {

background-color: #F9B294;

}



h2 {

color: #fff;

font-size: 8vw;

font-weight: 400;

line-height: 1.1;

text-align: center;

margin: 0 auto;

max-width: 80%;

text-transform: uppercase;

position: absolute;

top: 50%;

transform: translateY(-50%);

left: 0;

right: 0;

}

}



}



.slick-dots 

{

    position: absolute;

    top: 94%;

    transform: translateY(-50%);

    right: 45%;



li 

{

list-style: none;

margin: 0px 5px;
float: left;

}

button {

border-radius: 50%;

width: 10px;

height: 12px;

border: none;

background-color: #fff;

text-indent: -9999px;

outline: 0;

&:hover {

background-color: #000;

}

}



}

.slick-slide {

height: auto !important;

}


/* Media query for screens smaller than 768px (typical mobile devices) */
@media screen and (max-width: 767px) {
    .slick-slide {
      height: 35vh !important; /* Adjust the height as needed for mobile */
    }

    .slick-dots {
        
        top: 57%;}
  }

















/* Slider */



.slick-slider {

position: relative;

display: block;

box-sizing: border-box;

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

-ms-touch-action: pan-y;

touch-action: pan-y;

-webkit-tap-highlight-color: transparent;

}

.slick-list {

position: relative;

overflow: hidden;

display: block;

margin: 0;

padding: 0;



&:focus {

outline: none;

}



&.dragging {

cursor: pointer;

cursor: hand;

}

}

.slick-slider .slick-track,

.slick-slider .slick-list {

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

-o-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}



.slick-track {

position: relative;

left: 0;

top: 0;

display: block;



&:before,

&:after {

content: "";

display: table;

}



&:after {

clear: both;

}



.slick-loading & {

visibility: hidden;

}

}

.slick-slide {

float: left;

height: 100%;

min-height: 1px;

[dir="rtl"] & {

float: right;

}

img {

display: block;

}

&.slick-loading img {

display: none;

}



display: none;



&.dragging img {

pointer-events: none;

}



.slick-initialized & {

display: block;

}



.slick-loading & {

visibility: hidden;

}



.slick-vertical & {

display: block;

height: auto;

border: 1px solid transparent;

}

}

.slick-arrow.slick-hidden {

display: none;

}



.slick-active button{background-color: #F4B11C !important ;height: 18px; width: 18px;}