:root {
    --playfair-font: "Playfair Display", serif;
    --playball-font: "Playball", cursive;
    --agaleoz-font: "Agaleoz", sans-serif;
    --larken-font: "Larken DEMO", serif;
    --belina-font: 'Bellina', serif;
    --hdrTop-bg: #c8a77f;
    --active-txt-color: #f2dec5;
    --primary-color: #ffffff;
    --secondary-color: #FAEAD7;
    --tertiary-color: #F1DABF;
    --card-txt-color: #D9CEC1;
    --border-color: #E5D1B9;
    --image-border-color: rgba(229, 209, 185, 0.4);
    --duration: 3s;
    --shine-angle: 90deg;
    --shine-color: rgba(255, 255, 255, 0.4);
    --shine-background: linear-gradient(var(--shine-angle),
            rgba(255, 255, 255, 0) 0%,
            var(--shine-color) 50%,
            rgba(255, 255, 255, 0) 100%);

    --page-prinary-color: #F4E3CE;

    --animation-duration: 9s;
    --services-totalItems: 3;
    --page-secondary-color: #FDDFBC;
}

body {
    background: url(../assets/page/body-bg.png) no-repeat center/cover;
    font-family: var(--belina-font);
}

.pageMedium-container {
    max-width: 1887;
}


.pageSmall-container {
    max-width: 1757px;
}

.pageTiny-container {
    max-width: 1595px;
}

.pageMini-container {
    max-width: 1468px;
}

/* Banner Section */

.hero-sec {
    padding: 106px 0 0;
}

.hero-wrpr {
    margin: 103px 0 15px;
}

.hero-hdr {
    padding: 10px;
    margin-bottom: 42px;
}

.heroTitle-1 {
    font-size: clamp(2rem, 3.2vw, 4.231rem);
    text-align: center;
    color: var(--page-prinary-color);

}


.heroTitle-1>span {
    font-size: clamp(1rem, 2.9vw, 2.5rem);
    transform: rotate(270deg);
    color: #F9D857;
}

.swiper7-cntn {
    max-width: 513px;
    height: 600px;
    border: 1px solid var(--image-border-color);
    margin: 0 auto;
}

.swiper7-cntn>img {
    object-fit: cover;
}


.swiper7 .swiper-slide {
    transition: all 0.5s ease;
    filter: blur(4px) brightness(0.6);
    transform: scale(0.9);
}

.swiper7 .swiper-slide-active {
    filter: blur(0) brightness(1);
    transform: scale(1);
    z-index: 2;
}

.swiper7 .swiper-slide-next,
.swiper7 .swiper-slide-prev {
    filter: blur(5px) brightness(0.8);
    transform: scale(0.95);
    z-index: 1;
}

.swiper7 {
    overflow: visible;
}

.swipe7-wrapper {
    padding-bottom: 30px;
}

.swiper-pagination-bullet {
    width: 18%;
    height: 1px;
    background: var(--border-color);
    opacity: .4;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    background: var(--border-color);
    transform-origin: center;
    opacity: 1;
}

/* Animation Section */

.anim-sec {
    padding: 30px 0;

}

.sponsorhip-animation {
    padding-block: 30px;
    position: relative;
    overflow: hidden;
    background: var(--border-color);
    cursor: grabbing;
}

.autoScroll-item {
    display: flex;
    align-items: center;
    position: absolute;
    white-space: nowrap;
    animation: slideRight linear infinite;
    animation-duration: var(--animation-duration);
    animation-delay: calc(var(--animation-duration) / var(--services-totalItems) * ((var(--services-totalItems) - var(--i)) * -1));
}

@keyframes slideRight {
    0% {
        right: -40%;
    }

    100% {
        right: 122%;
    }
}

.autoScroll-item>p {
    font-size: clamp(1.1rem, 2.5vw, 2.769rem);
    color: #472802;
    margin-left: 8px;
}

.autoScroll-item>span {
    color: #60340f;
    font-size: clamp(1.3rem, 2vw, 1.4rem);


}



/* About Section */
.pageAbt-sec {
    padding: 30px 0 95px;
}

.cel-img {
    max-width: 769px;
    border: 1px solid var(--image-border-color);
    position: relative;
    border-top-left-radius: 382px;
    border-top-right-radius: 382px;
}

.cel-img::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    border-top: 1px solid var(--image-border-color);
    border-left: 1px solid var(--image-border-color);
    border-top-left-radius: 85%;
    bottom: -2px;
    right: -2px;
    background: black;
    z-index: 1;

}



.cel-imgBox {
    position: relative;
}

.celCircle-img {
    max-width: 200px;
    min-height: 200px;
    border-radius: 50%;
    position: absolute;
    bottom: -8%;
    right: -10%;
    border: 1px solid var(--image-border-color);
    z-index: 2;

}


.pageAbt-cntn {
    font-family: var(--belina-font);
    font-weight: bold;
    color: var(--border-color);

}

.pageAbt-cntn>p:nth-child(1) {
    font-size: clamp(1.1rem, 2vw, 1.846rem);
    letter-spacing: 0.2em;
}



.pageTitle-2 {
    margin: 35px 0;
    font-size: clamp(2rem, 4vw + 1rem, 4.923rem);
}

.pageAbt-cntn>p:nth-child(3) {
    font-size: clamp(1.1rem, 2vw, 1.928rem);
}

.counting-numbers {
    margin-top: 35px;
}

.numbers-box {
    background: var(--page-secondary-color);
    text-transform: capitalize;
    max-width: 211px;
    padding: 14px;
    width: 100%;
    text-align: center;
    color: black;

}

.pageTitle-3 {
    font-size: clamp(1.6rem, 2.5vw + 0.5rem, 3.077rem);
    margin-bottom: 8px;

}


.numbers-box>p:last-child {
    font-size: clamp(1rem, 1vw + 0.8rem, 1.6rem);
    white-space: nowrap;
}

/* Details Section */
.details-sec {
    padding: 30px 0 88px;
}

.detail-box {
    border: 1px solid var(--image-border-color);
    padding: 27px 22px;
    max-width: 447px;
    width: 100%;
    font-size: clamp(1.1rem, 2.3vw, 2.3rem);
    font-weight: bold;
}

.detail-box>span {
    color: var(--border-color);
}


.detail-box>p:nth-child(2) {
    color: #FADDBA;
    margin: 20px 0;
    white-space: nowrap;
}

.detail-box>p:nth-child(3) {
    font-size: clamp(1rem, 1.5vw, 1.7rem);
    color: #F9E6D0;

}

/* Luxury Section */
.luxury-sec {
    padding: 30px 0;
}


.luxuryImg-box {
    position: relative;
}

.luxury-img {
    max-width: 794px;
    border: 1px solid var(--image-border-color);

}


.luxury-circleImg {
    max-width: 200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
    top: -5%;
    right: -15%;
    border: 20px solid black;

}

.luxuryCntn-box {
    color: var(--border-color);

}

.luxuryCntn-box>p:nth-child(1) {
    font-size: clamp(1.2rem, 2.3vw, 2.3rem);
    letter-spacing: 0.4em;
    position: relative;
    z-index: 1;
}

.luxuryCntn-box>p:nth-child(2) {
    font-size: clamp(1.8rem, 3.5vw, 3.46rem);
    letter-spacing: 0.05em;
    margin: 70px 0;
}

.luxury-btn {
    padding: 34px 25px;
    max-width: 331px;
    background: #F3CD9F;
    color: #693D09;
    font-size: clamp(1.4rem, 2.8vw, 2.7rem);
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    text-transform: capitalize;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}

.luxury-btn>span:nth-child(2),
.luxury-btn>span:nth-child(3) {
    background: #B26D1B;
    color: var(--border-color);
    font-size: 15px;
    width: 47px;
    height: 47px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(-45deg);
    position: absolute;
    z-index: 9;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.luxury-btn>span:nth-child(2) {
    right: 16px;

}

.luxury-btn>span:nth-child(3) {
    left: -25%;

}

.luxury-btn>span:nth-child(1) {
    position: relative;
    z-index: 1;
    transform: translateX(-12px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);


}

.btn-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background-color: var(--tertiary-color);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.luxury-btn:hover {
    box-shadow: 0 0 0 12px transparent;
    color: #212121;
    border-radius: 20px;

}

.luxury-btn:hover span:nth-child(2) {
    right: -25%;
    transform: rotate(360deg);
}

.luxury-btn:hover span:nth-child(3) {
    left: 16px;
    transform: rotate(360deg);
}

.luxury-btn:hover span:nth-child(1) {
    transform: translateX(70px);
}

.luxury-btn:hover .btn-circle {
    width: 100%;
    height: 100%;
    opacity: 1;
}

@media screen and (max-width:1200px) {




    /* About Section */
    .cel-img {
        margin: 0 auto;

    }

    .celCircle-img {
        right: 4%;
    }

    .cel-img::after {
        width: 155px;
        height: 155px;
        bottom: -4px;
        right: -4px;
    }

    /* Luxury Section */
    .luxury-img {
        max-width: 700px;
    }

    .luxury-circleImg {
        right: 9%;
    }
}

@media screen and (max-width:992px) {

    /* Luxy */
    .luxy-el {
        transform: none !important;
    }

    /* About Section */
    .cel-img {
        max-width: 655px;

    }

    .celCircle-img {
        max-width: 180px;
        min-height: 180px;
        right: 0;
    }

    /* Luxury Section */
    .luxury-circleImg {
        max-width: 180px;
        height: 180px;
        right: 0;
    }



}


@media screen and (max-width:768px) {

    /* About Section */
    .cel-img {
        max-width: 450px;
    }

    .celCircle-img {
        max-width: 165px;
        min-height: 165px;
        right: 4%;
    }

    /* Luxury Section */
    .luxury-img {
        max-width: 500px;
    }


}



@media screen and (max-width:576px) {

    /* Animation Section */
    .sponsorhip-animation {
        padding-block: 25px;
    }

    @keyframes slideRight {
        0% {
            right: -80%;
        }

        100% {
            right: 250%;
        }
    }

    /* About Section */
    .celCircle-img {
        max-width: 130px;
        min-height: 130px;
        bottom: -8%;
        right: 9%;
    }

    .cel-img {
        max-width: 250px;
    }

    .cel-img::after {
        width: 127px;
        height: 127px;
    }

    .pageAbt-sec {
        padding: 30px 0;
    }

    /* Detail Page Section */
    .details-sec {
        padding: 30px 0;
    }

    .detail-box {
        padding: 10px 5px;
    }

    .detail-box>p:nth-child(2) {
        margin: 10px 0;
    }

    /* Luxury Section */
    .luxury-img {
        max-width: 350px;
    }

    .luxury-circleImg {
        right: -20px;
    }

    .luxuryCntn-box>p:nth-child(1) {
        letter-spacing: 0.3em;
    }

    .luxuryCntn-box>p:nth-child(2) {
        margin: 40px 0;
    }

    .luxury-btn {
        padding: 20px;
        max-width: 250px;

    }


}

@media screen and (max-width:400px) {
    /* About Section */

    .celCircle-img {
        max-width: 110px;
        min-height: 110px;
        right: 3%;
    }

    /* Luxury Section */
    .luxury-img {
        max-width: 250px;
    }

    .luxury-circleImg {
        max-width: 120px;
        height: 120px;
    }

}