:root {
    --primary: #e4c1b1;
    --secondary: #f3f3f3;
}

@media(max-width: 1399px) {
    .splide__pagination {
        max-width: 1120px;
    }

    h1 {
        font-size: 5rem;
    }

    .Service-section {
        overflow: hidden;
    }
}

@media(max-width: 1199px) {
    .splide__pagination {
        max-width: 960px;
        padding: 0 2rem;
    }

    .banner .splide__pagination::after {
        left: 2.6rem;
    }
}

@media (max-width: 991px) {

    h1,
    .h1 {
        font-size: 5rem;
    }

    header {
        background: #fff;
        position: static;
        top: 0;
    }

    header .navbar-nav .nav-link {
        color: #000;
    }

    header .navbar-nav .nav-link.active {
        color: var(--primary);
    }

    header nav.navbar {
        padding-block: 1.5rem;
    }

    header .navbar-nav {
        gap: 1rem;
        padding-block: 2rem;
    }

    .banner .splide {
        height: 50vh;
    }

    .splide__pagination {
        bottom: 5%;
        padding: 0 2rem;
        max-width: 720px;
    }

    .banner .splide__pagination::before,
    .banner .splide__pagination::after {
        display: none;
    }

    .skincare .image-content .content {
        left: 5rem;
    }

    .sub-heading {
        margin-bottom: 2rem;
    }

    .collections .collection-content {
        padding: 7.5rem 3rem;
    }

    .review .review-content {
        padding: 5rem 3rem;
    }

    .product-types .pro-col {
        min-height: 20rem;
    }

    .product-types .pro-col .h2 {
        padding-left: 1rem;
        font-size: 2.5rem;
        word-break: break-all;
    }

    .news-letter .news-content-col {
        padding: 8rem 5rem;
    }

    .blog-slider {
        padding-inline: 3rem;
    }

    .page-banner {
        min-height: 35rem;
    }

    .contact-page .info {
        padding: 4rem 4rem 5rem;
    }

    .contact-page .info h2 {
        font-size: 2.2rem;
        margin-bottom: 2.5rem;
    }

    .mt-40 {
        margin-top: 3rem;
    }

    .contact-page iframe {
        height: 31rem;
    }

    .contact-page {
        padding-block: 8rem;
    }

    .pricing ul {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .pricing li a {
        font-size: 2rem;
        min-height: 5rem;
    }

    #myTab li button .services-card img {
        max-width: 100%;
        min-height: 31rem;
    }

    .pricing #accordionExample .accordion-button h2 {
        font-size: 2.2rem;
    }

    .pricing #accordionExample .accordion-button {
        padding: 2rem 1.6rem;
    }

    .banner .splide .overlay-banner-text {
        transform: translate(-53%, -50%);
    }

    .Service-section.bg-secondary {
        overflow: hidden;
    }

    #myTab li button h4 {
        letter-spacing: 1.4px;
    }

    #myTab li:nth-child(2n+1) {
        transform: translateY(5rem);
        padding-bottom: 6rem;
    }

    #myTab li {
        padding: 1rem;
    }

    footer .foot_bar ul a {
        font-size: 1.3rem;
    }


}

@media (max-width: 767px) {

    h1,
    .h1 {
        font-size: 3rem;
    }

    h2,
    .h2 {
        font-size: 2.5rem;
    }

    h3,
    .h3 {
        font-size: 1.8rem;
    }

    .sub-heading {
        margin-bottom: 1rem;
        font-size: 1.6rem;
    }


    footer .foot_bar {
        margin-block: 0;
    }

    footer .foot_bar ul {
        justify-content: start;
        gap: 1rem;
        padding: 0;
        flex-direction: column;
    }

    footer .foot_bar ul li::after {
        display: none;
    }

    footer .foot_bar ul a {
        font-size: 1.2rem;
    }

    footer .copyright {
        margin-block-start: 4rem;
    }

    footer .copyright .copy_link li::after {
        margin-inline: 2rem;
    }



    .banner .splide {
        height: 42vh;
    }

    .banner .splide .overlay-banner-text span {
        letter-spacing: 1rem;
        font-size: 1.2rem;
    }

    .banner .splide .overlay-banner-text .btn {
        margin-top: 2rem;
    }

    .banner .splide .overlay-banner-text h1 {
        margin-block: 1rem 2rem;
    }


    .splide__pagination {
        padding-block: 0;
        padding-inline: 1.8rem;
        justify-content: end;
    }


    .skincare .image-content .h1 {
        font-size: 3rem;
        margin-bottom: 0rem;
    }

    .skincare .image-content .content {
        left: 5%;
    }

    .features {
        padding-block: 3rem;
    }

    .features .feature-content h3 {
        margin-block: 0 1.5rem;
    }

    .collections .collection-content {
        padding: 4.5rem 3rem;
    }

    .review .review-content {
        padding: 4rem 2rem;
    }

    .review .review-content .splide__slide__container {
        margin-bottom: 6rem;
    }

    section.quality,
    .news-letter {
        padding-block: 5rem;
    }

    section.quality .natural-col figure {
        max-width: 4rem;
    }

    section.quality .natural-col h3 {
        letter-spacing: 0.3rem;
        margin: 3rem 1rem 1.5rem;
    }

    .product-types .pro-col {
        min-height: 20rem;
    }

    .product-types .pro-col .h2 {
        font-size: 3rem;
        padding-left: 2rem;
    }

    .news-letter .news-content-col {
        padding: 4rem 3rem !important;
    }

    .blog-slider {
        padding-inline: 0rem;
    }

    .blog-slider button.splide__arrow {
        top: 110%;
    }

    .news-blog .splide__pagination {
        bottom: -11%;
    }

    .news-blog .splide__arrows button {
        width: 3.5rem;
        height: 3.5rem;
    }

    .blog-slider .card-body .date {
        width: 100%;
        max-width: 25rem;
    }

    .mission-section {
        padding-block: 5rem;
    }

    .page-banner {
        min-height: 22rem;
    }

    .contact-page {
        padding-block: 5rem;
    }

    .contact-page .info {
        padding: 3rem 3rem 4rem;
    }

    .contact-page .info p {
        margin-bottom: 0rem;
    }

    .number {
        margin-bottom: 1.5rem;
    }

    .pricing ul {
        grid-template-columns: 1fr;
    }

    .pricing li a {
        font-size: 2rem;
        min-height: auto;
    }

    .pagination {
        padding-block: 2rem;
    }

    .pagination .page-link {
        font-size: 1.2rem;
    }

    #myTab.justify-content-center {
        justify-content: inherit !important;
    }

    #myTab li {
        padding: 1rem;
    }

    #myTab li:nth-child(2n+1) {
        transform: translateY(0rem);
        padding-bottom: 2rem;
    }

    #myTab li button .services-card img {
        max-width: 100%;
        min-height: 21rem;
    }

    #myTabContent,
    .pricing {
        padding-block: 5rem;
    }

    .pricing #accordionExample .accordion-button h2 {
        font-size: 1.5rem;
    }

    .pricing #accordionExample .accordion-button {
        padding: 2rem 1.6rem;
    }

    .pricing #accordionExample .price-list li {
        font-size: 14px;
    }

    .pricing #accordionExample .price-list {
        margin: 1rem auto 1rem;
    }

    #myTab li button h4 {
        letter-spacing: 1.2px;
    }

    .Service-section.bg-secondary {
        overflow: hidden;
    }

    #servicesTab .row.mt-5 img {
        min-height: 17rem;
        -o-object-fit: cover;
    }

    footer .address li a {
        word-break: break-all;
    }

    header .navbar-brand P {
        font-size: 2.9rem;
    }

    .leaves1 img {
        width: 6rem;
    }

    .leaves2 {
        left: 3rem;
    }

    .leaves1 {
        right: 4rem;
    }

    #booking-form {
        overflow: hidden;
    }

    .btn-buchen {
        justify-content: center !important;
        flex-wrap: nowrap;
    }

    .btn-buchen a {
        padding: 0.8rem 1.2rem;
    }
}

@media (max-width: 576px) {
    header .container-fluid {
        padding-inline: 2rem;
    }

    header .navbar-brand {
        font-size: 1.3rem;
    }

    .Service-section.bg-secondary {
        overflow: hidden;
    }

}