:root {
    --paddingPostPreview: 25px;
    --paddingPostSmallPd: 0px;
    --textBoxLeftPd: 5%;
    --sliderHeight: 400px;
    --easeAll: 0.5s;
}

.carousel-inner {
    width: 100%;
    height: 100%;

}

.sliderTextBox {
    bottom: 20% !important;
    left: calc(15% - var(--textBoxLeftPd)) !important;
    box-shadow: 0px 0px 12px #5e5e5e4a;
    position: absolute;
    width: 43%;
    height: auto;
    display: block;
    background-color: white;
    overflow: hidden;
    z-index: 2;
    transition: ease all var(--easeAll);
    transition-timing-function: ease-out;
}

#postImg {
    position: relative;
    object-fit: cover;
    display: block;

    width: 100%;
    margin: 0 auto;

    height: var(--sliderHeight);

}

#myCarousel {
    height: var(--sliderHeight);

    max-width: 100%;
}

.button {
    position: relative;
    background-color: #E87A1C;
    border: none;
    font-size: 18px;
    color: #FFFFFF;
    left: 55%;
    top: var(--paddingPostSmallPd);
    padding: 5px;
    width: 175px;
    text-align: center;
    -webkit-transition-duration: 0.3s;

    /* Safari */
    transition-duration: 0.5s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
}

.hover-div {
    background-color: #5E5E5E;
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    transition: all 0.3s ease;
    z-index: 2;
}

.button:hover {
    background-color: #5E5E5E;
}

.button:hover .hover-div {
    width: 100%;
    height: 100%;
    z-index: 1;
}


.carousel-controller {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 90%;
    left: 80%;

    z-index: 2 !important;
    box-shadow: none !important;
}

.btnSliderArrows {
    left: 50%;
    bottom: 0%;
    position: relative;
    background: white;
    border: none;
    width: 200px;
    color: white;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    z-index: 3;
}



.cls-2 {
    fill: #E87A1C;
}

.btnSliderArrows:hover {
    content: "";
    background: #e87b1c;

}

#btnSliderArrowsLeft {
    position: relative;
    width: 50px;
    height: 50px;
    z-index: 3;

}

#btnSliderArrowsRight {
    position: relative;
    width: 50px;
    height: 50px;
    z-index: 3;

}

.sliderCircle {
    position: absolute;
    width: 200px;
    height: 200px;
    padding-top: 1%;
    z-index: 1;
    transition: ease all calc(var(--easeAll) * 3);
    transition-timing-function: ease-out;
}



#readMore {
    position: relative;
    z-index: 2;
}



.sliderStack {
    padding-left: var(--textBoxLeftPd);

}

.postPreview {
    padding-left: var(--paddingPostPreview);
    padding-bottom: var(--paddingPostPreview);
    padding-right: var(--paddingPostPreview);
    padding-top: var(--paddingPostSmallPd);
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 14px;
}

.postTitle {
    padding-left: var(--paddingPostPreview);
    padding-top: var(--paddingPostPreview);
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 19px;
}

#postTitleText {
    color: #E87A1C;
}

/* Tablet */
@media (max-width: 1140px) {
    .sliderTextBox {
        width: 450px;
        height: 100%;
        left: 0% !important;
        top: 0% !important;

    }

    .sliderCircle {
        opacity: 0;
    }

    .button {
        top: 50px;
        left: 25%;

    }

    #postImg {

        object-fit: cover;

    }
}

/* Smartphone */

@media (max-width: 760px) {


    #myCarousel {
        height: calc(525px);
    }

    .btnSliderArrows {
        opacity: 0;
        pointer-events: none;
        position: relative;
        background: white;
        border: none;
        width: 0px;
        text-align: center;
        -webkit-transition-duration: 0.4s;
        /* Safari */
        transition-duration: 0.4s;
        text-decoration: none;
        overflow: hidden;
        z-index: 3;
    }

    #postImg {

        height: 50%;

    }

    .sliderTextBox {
        width: 100%;
        height: 350px;

        left: 0% !important;
        top: calc(100% - 50px) !important;
    }


    .sliderStack {
        padding-left: var(--textBoxLeftPd);
        height: 100%;
    }

    .button {
        left: 25%;
        top: 15px;
    }

    .sliderCircle {
        opacity: 0;
    }
}