@import "partials";

body {
    font-family: $outfit-font;
}
img {
    max-width: 100%;
}
.custom-container {
    @media (min-width: 1680px) {
        max-width: 1400px;
    }
}
.btn-block {
    .book-btn {
        display: inline-block;
        padding: 12px 65px;
        border-radius: 39px;
        font-weight: 700;
        font-size: 18px;
        text-decoration: none;
        background-color: $primary-color;
        color: #000;
        @media ($sm-1481) {
            padding: 12px 55px;
            font-size: 16px;
        }
        @media ($sm-767) {
            font-size: 14px;
        }
    }
}
.btn-hover {
    border: solid 1px transparent;
    transition: 0.3s;
    &:hover {
        background-color: transparent !important;
        border-color: $primary-color !important;
        color: $primary-color !important;
    }
}

// Slick arrow
.slick-custom-arrow {
    .slick-arrow {
        background-color: transparent;
        width: 27px;
        height: 27px;
        border: solid 1px #fff;
        border-radius: 8px;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        bottom: 0;
        top: auto;
        transition: 0.3s;
        right: 0;
        right: 0;
        @media ($sm-991) {
            width: 25px;
            height: 25px;
        }
        &::before {
            transition: 0.3s;
            content: "";
            display: block;
            transform: rotate(45deg);
            width: 8px;
            height: 8px;
            border-left: solid 2px #fff;
            border-bottom: solid 2px #fff;
            border-radius: 2px;
            @media ($sm-991) {
                width: 7px;
                height: 7px;
            }
        }
        &.slick-prev {
            right: 32px;
            left: auto;
            &::before {
                margin-right: -4px;
            }
        }
        &.slick-next {
            &::before {
                margin-left: -4px;
                border-left: 0;
                border-bottom: 0;
                border-right: solid 2px #fff;
                border-top: solid 2px #fff;
                opacity: 1;
            }
        }
        &:hover {
            border-color: $primary-color;
            &::before {
                border-color: $primary-color !important;
            }
        }
    }
}