* {



    padding: 0;



    margin: 0;



    box-sizing: border-box;



    scroll-behavior: smooth;



    /* font-family: "Lora", serif; */

    font-family: "Poppins", serif;





}

.loader {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
    border-top: 2px solid transparent;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.logo {



    width: 200px;



    /* height: 6rem; */



}







.navbar-toggler {



    padding: 0.25rem 0.75rem;



    font-size: 1.25rem;



    line-height: 1;



    background-color: #ffff;



    border: 1px solid #ffff;



    border-radius: 0.25rem;



}







.hometext {



    font-size: 55px;



}



.celebration-bg-video {

    position: absolute;

    width: 100%;

    height: 90vh;

    overflow: hidden;

    z-index: -1;

}



.celebration-bg-video video {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.celebration-bg-overlay {

    position: relative;

    width: 100%;

    height: 90vh;

    background: rgba(0, 0, 0, 0.5);

    /* Dark overlay for better text visibility */

    color: white;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

}









/* .celebration-bg-image {

    background-image: linear-gradient(rgba(211, 37, 75, 0.773), rgba(252, 236, 239, 0.362)), url('../images/home-back.jpg');

    width: 100%;

    height: 90vh;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    color: white;

} */







.celebration-2 {



    /* background-image: url('../images/celebration-2.jpg'); */



    width: 100%;



    height: auto;



    background-position: center;



    background-repeat: no-repeat;



    background-size: cover;



}







.book-now-btn {



    color: white;



    background-color: transparent;



    border: 2px solid#ff458d;



    padding: 10px 20px;



    border-radius: 5px;



    transition: .3s linear;



}







.book-now-btn:hover {



    text-decoration: none;



    color: white;



    background-color: #db0356;



}





.book-now-btn-2 {



    color: white;



    background-color: #ff458d;



    border: 2px solid#ff458d;



    padding: 10px 20px;



    border-radius: 5px;



    transition: .3s linear;



}







.book-now-btn-2:hover {



    text-decoration: none;



    color: #232323;



    background-color: transparent;



}





.shadow-card {

    color: #fff;

    min-height: 18rem;

    width: 100%;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    border-radius: 10px;

    padding: 20px;

    position: relative;

    overflow: hidden;

    /* display: flex;

    align-items: center;

    justify-content: center; */

}



.glass-card {

    /* From https://css.glass */

    background: rgba(255, 255, 255, 0.12);

    border-radius: 16px;

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

    border: 1px solid rgba(255, 255, 255, 0.12);

    padding: 20px;

    width: 80%;

    position: absolute;

    top: -100px;

    /* Start position (hidden above) */

    left: -100px;

    /* Start position (hidden left) */

    transform: translate(0, 0);

    opacity: 0;

    /* Hide initially */

    transition: all 0.4s ease-in-out;

}



.shadow-card:hover .glass-card {

    transition: .3s linear;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    opacity: 1;

}



.below-content {

    position: absolute;

    bottom: 10px;

    right: 10px;

    color: #fff;

    padding: 8px 12px;

    border-radius: 8px;

    transition: opacity 0.3s ease-in-out;

}



/* Show Glass Card on Hover (Desktop Only) */

@media (min-width: 768px) {

    .shadow-card:hover .glass-card {

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        opacity: 1;

    }

}



/* Mobile View: Make Glass Card Static & Hide Below Content */

@media (max-width: 767px) {

    .glass-card {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        opacity: 1;

        width: 80%;

        height: 80%;

    }



    .below-content {

        display: none;

    }



    .glass-card p {

        font-size: 14px;

    }

}



/* Hide Below Content on Hover */

.shadow-card:hover .below-content {

    opacity: 0;

}



.glass-card p {

    font-size: 15px;

}





.services-bgimage {



    background-image: url('../images/addtional-service-bg-image.jpg');



    width: 100%;



    height: 80vh;



    background-position: center;



    background-repeat: no-repeat;



    background-size: cover;







}







.tattoo-bg {



    background-image: linear-gradient(hsla(337, 100%, 50%, 0.444), hsla(0, 0%, 98%, 0.515)), url("../images/tattoo-1.jpg");



    height: 10rem;



    /* display: flex;



    flex-direction: column;  */



    background-position: center;



    background-repeat: no-repeat;



    background-size: cover;



}







.owl-nav {



    display: flex;



    justify-content: space-between;



}







.owl-prev {



    font-size: 80px;



    position: relative;



    color: white;



    top: -240px;



    left: 15px;



}







.owl-next {



    font-size: 80px;



    position: relative;



    color: white;



    top: -240px;



    right: 15px;



}







.owl-next:active,



.owl-next:focus,



.owl-prev:focus,



.owl-prev:active {



    outline: none;



    box-shadow: nones;



}







.owl-prev span {



    font-size: 80px;



    color: white;



    left: 15px;



}







.owl-next span {



    font-size: 80px;



    color: white;



    right: 15px;



}











@media (max-width:1200px) {



    .hometext {



        font-size: 55px;



    }



}











@media (max-width:900px) {



    .hometext {



        font-size: 50px;



    }



}







@media (max-width:768px) {



    .hometext {



        font-size: 45px;



    }



}







@media (max-width:768px) {



    .hometext {



        font-size: 40px;



    }



}







@media (max-width:425px) {



    .hometext {



        font-size: 35px;



    }



}







@media (max-width:320px) {



    .hometext {



        font-size: 30px;



    }



}







/* Footer action Btn */







.opn-btn,



.call-btn,



.cross-btn,



.whatsapp-btn,



.insta-btn,



.top-btn {



    display: inline-block;



    position: fixed;



    right: 20px;



    width: 50px;



    height: 50px;



    border-radius: 50%;



    text-align: center;



    font-size: 24px;



    color: #fff;



    background: #fa2e7d;



    transition: all .3s ease-in-out;



    z-index: 100
}







.opn-btn img,



.cross-btn img,



.call-btn img,



.insta-btn img,



.whatsapp-btn img,



.top-btn img {



    position: absolute;



    top: 0;



    bottom: 0;



    left: 0;



    right: 0;



    margin: auto
}







.opn-btn {



    bottom: 0;



    right: 20px;



    width: 50px;



    height: 20px;



    background: #fff;



    border-radius: 0
}







.cross-btn {



    bottom: 249px;



    right: 10px;



    width: 20px;



    height: 20px;



    background: #fff
}







.call-btn {



    bottom: 70px
}



.insta-btn {



    bottom: 191px
}







.whatsapp-btn {



    bottom: 130px
}







.top-btn {



    bottom: 10px
}







.opn-btn:hover,



.call-btn:hover,



.top-btn:hover,



.insta-btn:hover,



.whatsapp-btn:hover {



    transform: scale(1.1);



    background: #db0356;



}







.caption-para {



    font-weight: bold;



    text-align: center;



    font-size: 19px;



    text-transform: capitalize;



}







.social-link .social-item {



    padding: 10px;



    background-color: #fa2e7d;



    border-radius: 50%;



    display: inline-block;



}







.social-link .social-item:hover {



    background-color: #ff0062;



}







.feel-free {

    font-size: 40px;



    font-weight: bold;



}







.head-font {







    font-size: 40px;



    text-align: center;



}







.choose {



    color: #262626;







    font-size: 20px;



}







.term-condition {



    padding-left: 40px;



    color: #4b4f58;



    font-size: 20px;



}







.term-condition ol li {



    line-height: 2;



}







.second-card {



    width: 100%;



    height: 20rem;



    color: white;



    box-shadow: 0px 0px 10px 2px black;



    display: flex;



    align-items: center;



    justify-content: center;



    flex-direction: column;



}







.tattoos-img {



    border: #ff0163 solid 5px;



    width: 18rem;



    height: 17rem;



}



.blood-img {



    border: #ff0163 solid 5px;

    margin-bottom: 20px;



}







.tattos-cotent h3 {



    font-weight: bold;



    font-size: 30px;



    line-height: 1.6;



}







.tattos-cotent p {



    font-size: 20px;



    line-height: 1.6;



}







.carousel-inner {



    width: 100%;



    height: 100vh;



    display: flex;



    justify-content: center;



    align-items: center;



}





.carousel-item.carousel-item-next.carousel-item-left,



.carousel-item.carousel-item-prev.carousel-item-right {



    width: 100% !important;



    height: 100vh !important;



    display: flex !important;



    justify-content: center !important;



    align-items: top !important;



}



@media (max-width:642px) {



    .carousel-inner {



        height: auto;

    }



    .carousel-item.carousel-item-next.carousel-item-left,



    .carousel-item.carousel-item-prev.carousel-item-right {





        height: auto !important;

    }

}









#myVideo {



    min-width: 100%;



    height: 100vh;



    object-fit: cover;

    width: 70%;



}







@media (max-width:425px) {



    .feel-free {



        font-size: 30px;



    }







    .head-font {



        font-size: 30px;



    }



}







@media (max-width:375px) {



    .logo {



        width: 170px;



    }



}















/* Calender CSS */



.wrapper {



    max-width: 450px;



    background: #fff;



    border-radius: 10px;



    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);



}







.wrapper header {



    display: flex;



    align-items: center;



    padding: 25px 30px 10px;



    justify-content: space-between;



}







.wrapper header .icons {



    display: flex;



}







.wrapper header .icons span {



    height: 38px;



    width: 38px;



    margin: 0 1px;



    cursor: pointer;



    color: #878787;



    text-align: center;



    line-height: 38px;



    font-size: 1.9rem;



    user-select: none;



    border-radius: 50%;



}







.icons span:last-child {



    margin-right: -10px;



}







.wrapper header .icons span:hover {



    background: #f2f2f2;



}







.wrapper header .current-date {



    font-size: 1.45rem;



    font-weight: 500;



}







.calendar {



    padding: 20px;



}







.calendar ul {



    display: flex;



    flex-wrap: wrap;



    list-style: none;



    text-align: center;



}







.calendar .days {



    margin-bottom: 20px;



}







.calendar li {



    color: #333;



    width: calc(100% / 7);



    font-size: 1.07rem;



}







.calendar .weeks li {



    font-weight: 500;



    cursor: default;



}







.calendar .days li {



    z-index: 1;



    cursor: pointer;



    position: relative;



    margin-top: 30px;

    font-weight: bold;

    color: green;



}







.days li.inactive {



    color: #aaa;



}



.days li.inactive.back {



    color: red;

    font-weight: bold;



}







.days li.active {



    color: #fff;



}







.days li::before {



    position: absolute;



    content: "";



    left: 50%;



    top: 50%;



    height: 40px;



    width: 40px;



    z-index: -1;



    border-radius: 50%;



    transform: translate(-50%, -50%);



    color: #fff;



}







.days li.active::before {



    background: #9B59B6;



}











.selected::before {



    background: #fa2e7d;



    color: #fff;



}







.selected::before {



    position: absolute;



    content: "";



    left: 50%;



    top: 50%;



    height: 40px;



    width: 40px;



    z-index: -1;



    border-radius: 50%;



    transform: translate(-50%, -50%);



}







option:disabled {



    background-color: rgb(224, 224, 224);



}







.calendar .days li.selected {



    color: #fff;



}







.order-details h5 {



    font-weight: bold;



    text-transform: uppercase;



    padding-bottom: 6px;



    margin-top: 20px;



    display: inline-block;



    border-bottom: 4px solid #fa2e7d;



}







.order-details p span {



    font-weight: bold;



    text-transform: uppercase;



}







.back-btn {



    padding: 10px 15px;



    background-color: #fa2e7d;



    color: #fff;



    border-radius: 5px;



}







.back-btn:hover {



    padding: 10px 15px;



    background-color: #fa2e7d;



    color: #fff;



    border-radius: 5px;



}







.frame-image img {

    border: 10px solid #fa2e7d;

    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;



}





.btn-book {



    padding: 10px 15px;



    background-color: #fa2e7d;



    color: #fff;



}



#notfound {

    position: relative;

    height: 100vh;

}



#notfound .notfound {

    position: absolute;

    left: 50%;

    top: 50%;

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

}



.notfound {

    max-width: 520px;

    width: 100%;

    line-height: 1.4;

    text-align: center;

}



.notfound .notfound-404 {

    position: relative;

    height: 200px;

    margin: 0px auto 20px;

    z-index: -1;

}



.notfound .notfound-404 h1 {

    font-family: 'Montserrat', sans-serif;

    font-size: 236px;

    font-weight: 200;

    margin: 0px;

    color: #211b19;

    text-transform: uppercase;

    position: absolute;

    left: 50%;

    top: 50%;

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

}



.notfound .notfound-404 h2 {

    font-family: 'Montserrat', sans-serif;

    font-size: 28px;

    font-weight: 400;

    text-transform: uppercase;

    color: #211b19;

    background: #fff;

    padding: 10px 5px;

    margin: auto;

    display: inline-block;

    position: absolute;

    bottom: 0px;

    left: 0;

    right: 0;

}



.notfound a {

    font-family: 'Montserrat', sans-serif;

    display: inline-block;

    font-weight: 700;

    text-decoration: none;

    color: #fff;

    text-transform: uppercase;

    padding: 13px 23px;

    background: #fa2e7d;

    font-size: 18px;

    -webkit-transition: 0.2s all;

    transition: 0.2s all;

}



.notfound a:hover {

    color: #fa2e7d;

    background: #211b19;

}



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

    .notfound .notfound-404 h1 {

        font-size: 148px;

    }

}



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

    .notfound .notfound-404 {

        height: 148px;

        margin: 0px auto 10px;

    }



    .notfound .notfound-404 h1 {

        font-size: 86px;

    }



    .notfound .notfound-404 h2 {

        font-size: 16px;

    }



    .notfound a {

        padding: 7px 15px;

        font-size: 14px;

    }

}





.branch-card {

    padding: 0 !important;

    border-radius: 10px;

    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

    transition: .2s linear;

}



.branch-card:hover {

    transform: translateY(-10px);

}



.card.branch-card.selectable.selected,

.card.category-card.selectable.selected {

    border: 2px solid #fa2e7d;

}



.btn.btn-outline-primary.time-slot.selected {

    background-color: #007bff;

    color: #fff;

}



.next-btn {

    padding: 7px 30px;

}



.layer {

    border-radius: 10px;

    background-color: #fff;

    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

    padding: 10px 10px;

}



.btn-count {

    background-color: #fa2e7d;

    color: #fff;

}



.form-control:disabled,

.form-control[readonly] {

    background-color: #fff !important;

}



.book-form-details {

    margin: auto;

    width: 50%;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    padding: 20px;

    border-radius: 10px;

}



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



    .book-form-details {

        width: 100%;

    }

    .glass-card p {

        font-size: 14px;

        line-height: 20px;

    }

}



.btn.btn-outline-primary.time-slot.disabled {

    border: 2px solid #007bff;

}



.card-list ul li {

    list-style-position: inside;

    color: #4b4f58;

    font-size: 14px;

}



.card-list-down ul li {

    list-style-position: inside;

    color: #4b4f58;

    font-size: 14px;

    list-style: none;

}



.btn.btn-outline-primary.mb-2.time-slot {

    font-size: 14px;

    padding: 5px;

}



.card-title.color {

    color: #fa2e7d;

}



.btn-outline-primary:not(:disabled):not(.disabled).active:focus,

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,

.show>.btn-outline-primary.dropdown-toggle:focus {

    box-shadow: none !important;

}



.carousel-inner.custom {

    height: auto !important;

}



.carousel-item.carousel-item-next.carousel-item-left,

.carousel-item.carousel-item-prev.carousel-item-right {

    height: auto !important;

}



.btn-cutom {

    position: absolute;

    right: 13px;

    bottom: 85px;

}



.custom-card:hover {

    transform: translateY(-10px);

    transition: .3s linear;

}



.why-choose-us p {

    font-size: 14px;

}



.why-choose-us h3,

h5 {

    font-weight: bold;

}





/* About Us */

.vision {

    border-right: solid 2px #fa2e7d;

}



.theatre {

    background: url(../images/about-us.JPG);

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    height: 300px;

    border-radius: 25px;

}



.icon-color {

    color: #fa2e7d;

}



.feature-card {

    padding: 20px 30px 25px;

    border-radius: 10px;

    border: none;

    box-shadow: 0px 2px 4px grey;

    border-left: solid 4px #fa2e7d;

    transition: transform 0.3s ease-in-out;

}



.feature-card:hover {

    transform: translateY(-10px);

}



.nav-item .nav-link:hover {

    color: #fa2e7d !important;

    transition: .3s ease-out;

}



/* contact section  */

.contact-section {

    background: url('/images/contactForm.webp') no-repeat center 70%;

    background-size: cover;

    padding: 80px 0;

}



.contact-form {

    background: rgba(255, 255, 255, 0.9);

    padding: 30px;

    border-radius: 10px;

    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

}



.contact-form h2 {

    font-weight: bold;

    font-size: 28px;

    margin-bottom: 10px;

}



.contact-form p {

    font-size: 16px;

    margin-bottom: 20px;

}



.input-group {

    border: 1px solid #ddd;

    border-radius: 5px;

    padding: 10px;

    background: #fff;

}



.input-group input {

    border: none;

    width: 100%;

    outline: none;

}

.fas {

    color: #fa2e7d;

}



.btn-submit {

    background: #fa2e7d;

    color: #fff;

    font-weight: bold;

    border: 2px solid #fa2e7d;

    transition: 0.3s ease-in-out;

}



.btn-submit:hover {

    background: #fff;

    color: #fa2e7d;

}



.shadow-md {

    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);

}

.sub-btn {

    background-color: #fa2e7d;

    color: #fff;

}