/* ======== SLIDER ====== */
:root{
    --shadow-color: #101828;
    --button-background-color: rgba(255, 255, 255, 0.6);
}
section.slider{
    position:relative;overflow:hidden
}
section .slides-wrapper{
    position:relative
}
section .slides-wrapper .slide{
    width:100%;
    /* max-height: calc(100vh - 100px); */
    max-height: calc(100vh - 105px - 90px);
    height: 600px;
    flex-shrink:0;
    position:relative;
    transition:all 0.3s ease
}
section .slides-wrapper .slide::before{
    inset:0;
    position:absolute;
    content:"";
    background-image:linear-gradient(251deg, rgba(0, 0, 0, 0.00) 4.39%, rgba(0, 0, 0, 0.60) 60.53%)
}
section .slides-wrapper .slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition: none;
}
.content-wrapper{
    position: relative;
    bottom: 56px;
}
section .slides-wrapper .slide .slider-contents{
    position:absolute;
	bottom:0px;
	left:28px;
	max-width: 670px;
}
section .slides-wrapper .slide .slider-contents h2{
    color:var(--white);
    font-size: 48px;
    margin-bottom: 16px;
    font-family: 'Warnock Pro';  
    font-weight: normal; font-style: normal;
    line-height: 50px;
}
section .slides-wrapper .slide .slider-contents p{
    color:var(--white);font-size:16px;line-height:24px;margin-bottom:16px}
section .slides-wrapper .slide .slider-contents a{
    background-color:var(--button-background-color);
	color:var(--primary-color);
	text-transform:uppercase;
	padding: 10px 16px;
    min-width: 160px;
    text-align: center;
    display:inline-block;
	text-decoration:none;
	transition: var(--transition);
    font-size: 12px;
	line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: 1px solid var(--primary-color);
}

.slider-contents > small {
	font-size: 12px;
    color: var(--yellow-light);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 16px;
    display: block;
}

section .slides-wrapper .slide .slider-contents a:hover{
    background-color: var(--primary-color);
    color: var(--white);
}

section .counter-wrapper{
    position:absolute;right:28px;bottom:60px;z-index:1;display:flex;align-items:center;gap:10px
}

section .counter-wrapper .counter{
    font-size:25px;display:flex;align-items:center;gap:5px;
    font-family: 'Manrope', sans-serif;
    font-weight: 200;
}

section .counter-wrapper .counter span.count-active{
    color: var(--white);
    font-size:32px
}

section .counter-wrapper .counter span.total-count{
    color: var(--white);
    opacity: 0.6;
}

section .counter-wrapper .line{
    width:250px;height:1px;background-color:var(--yellow-light)
}

.counter-wrapper .arrows .arrowPrev{
    transform: rotate(180deg);
}

section .counter-wrapper .arrows{
    display:flex;
	align-items:center;
	gap:7px;
}

section .counter-wrapper .arrows div{
    width: 39px;
    height: 39px;border-radius:50%;display:flex;justify-content:center;align-items:center;border:1px solid var(--white);cursor:pointer;transition:all 0.3s ease
}

section .counter-wrapper .arrows svg{
    width: 30px;
    height: auto;
}

section .counter-wrapper .arrows svg path{
    stroke: var(--white);
    stroke-width: 1px;
    transition: var(--transition);
}

section .counter-wrapper .arrows div:hover{
    background-color:var(--lightgrey);
}

section .counter-wrapper .arrows div:hover svg path{
    stroke: var(--primary-color)
}

@media screen and (max-width: 992px){
    section .slides-wrapper .slide {
        height: 500px;
    }
	
    section .slides-wrapper .slider-contents {
        max-width:400px !important
    }
	
    section .counter-wrapper .line{
        width:140px
    }
	
    section .slides-wrapper .slide .slider-contents h2{
        line-height: 35px;
    }
}

@media screen and (max-width: 768px) {
	section .slides-wrapper .slide {
        height: 620px;
        max-height: calc(100vh - 140px);
    }
	
    section .slides-wrapper .slide .slider-contents {
		right: 16px;
        left: 16px;
        bottom: 52px;
    }
	
    section .slides-wrapper .slide .slider-contents h2 {
        font-size: 28px;
        line-height: 30px;
    }
	
    section .slides-wrapper .slide .slider-contents p {
        font-size: 14px;
		line-height: 24px;
        color: var(--text-light);
    }
	
    section .counter-wrapper {
        right: unset;
        left: 50%;
        transform: translateX(-50%);
        bottom: 40px;
    }
	
    .counter-wrapper .counter,
	.counter-wrapper .line {
        display: none !important;
    }
	
    section .slides-wrapper .slide .slider-contents a {
        padding: 10px 16px;
    }
}