* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
}
body {
    color: #292020 !important;
}

.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}

h1, h2, h3, .h1, .h2, .h3 {
    /*font-weight: 400 !important;*/
    font-family: Poppins !important;
    color: #552613;
}

h4, h5, h6, .h4, .h5, .h6 {
    /* font-weight: 600 !important;*/
    font-family: Poppins !important;
    color: #CD0E58;
}

.my-6 {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.py-6 {
    padding-top: 3rem;
    /*padding-bottom: 6rem;*/
}
/* Carousel Section */
section.carousel {
    margin-top: 5px; /* Remove margin if there's extra space at the top */
    padding-top: 0; /* Remove padding if there's extra space */
}

.container-fluid.bg-light {
    padding-top: 0; /* Remove extra padding at the top */
}
.carousel {
    margin-top: 80px;
    background-color: #fefefe;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 100%; /* or adjust as needed */
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.carousel-content {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}

.slide {
    flex: 0 0 auto; /* Important: prevents stretching */
    width: 90%; /* Make slides smaller than full width */
    margin: 0 5%; /* Creates space on left/right */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Show the full image without cropping */
}


.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.6);
    border: none;
    font-size: 2rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    z-index: 1;
}

.left-btn {
    left: 10px;
}

.right-btn {
    right: 10px;
}

.head-text {
    /*margin-bottom: 16px;*/
    margin-top: 20px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-transform: none;
    white-space: normal;
    /*background-color: #e7dac7;*/
}

.subhead-text {
    margin-bottom: 0px;
    margin-top: 0px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    color: #141726;
    text-transform: none;
    white-space: normal;
}

.size {
    width: 50%;
    height: 50%;
}

.img-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-content-icon {
    text-align: center;
}

img.img-fluid {
    display: block;
    margin: 0 auto; /* This ensures the image is centered within its container */
}



/*** Button Start ***/
.btn.btn-primary {
    border: 0;
}

   /* .btn.btn-primary:hover {
        background: var(--bs-dark) !important;
        color: var(--bs-primary) !important;
    }*/

.btn {
   /* font-weight: 600;*/
    transition: .5s;
}

.btn-square {
    width: 32px;
    height: 32px;
}

.btn-sm-square {
    width: 38px;
    height: 38px;
}

.btn-md-square {
    width: 44px;
    height: 44px;
}

.btn-lg-square {
    width: 56px;
    height: 56px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}
/*** Button End ***/


/*** Navbar Start ***/
/* Ensure the navbar takes the full width */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*padding: 0 20px;*/
}

/* Align the profile icon to the right end */
/*.profile-iconh {
	display: flex;
	align-items: center;
}*/
.navbar-nav {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

/* Ensure the navbar links and profile icon are aligned properly */
.navbar-collapse {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav-bar {
    background: #e4d7c4;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    position: sticky;
    top: 0;
    z-index: 9999;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.navbar .navbar-nav .nav-link {
    padding: 10px;
    font-weight: 600;
    font-size: 14px;
    transition: .5s;
}

    .navbar .navbar-nav .nav-link:hover,
    .navbar .navbar-nav .nav-link.active {
        color: #552613 !important;
    }

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
/*    font-family: "Font Awesome 5 Free";*/
    font-weight: 700;
    vertical-align: middle;
    margin-left: 8px;
}

@media (min-width: 1200px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        transition: .5s;
        opacity: 0;
    }

    .navbar .nav-item:hover .dropdown-menu {
        transform: rotateX(0deg);
        visibility: visible;
        opacity: 1;
    }
}

.dropdown .dropdown-menu a:hover {
    background: var(--bs-primary);
    color: var(--bs-white);
}

#searchModal .modal-content {
    background-color: rgba(255, 255, 255, .95);
}
/*** Navbar End ***/


/*** Events Start ***/
.event .tab-class .nav-item a.active {
    background: var(--bs-primary) !important;
}

.event .event-img .event-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(212, 167, 98, 0.7);
    border-radius: 8px;
    transition: 0.5s;
    opacity: 0;
    z-index: 1;
}

.event .event-img:hover .event-overlay {
    opacity: 1;
}
/*** Events End ***/


/*** service start ***/
.service .service-item {
    position: relative;
    height: 100%;
    border-radius: 8px;
    /*  box-shadow: 0 0 45px rgba(0, 0, 0, .08);*/
}

.service-content {
    background-color: #f5f5f5;
    border-radius: 10px;
}

    .service-content::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 0;
        top: 0;
        left: 0;
        bottom: auto;
        background: #937047;
        border-radius: 8px;
        transition: 1s;
    }


.service-item .service-content-icon {
    position: relative;
    z-index: 2;
}

    .service-item .service-content-icon i,
    .service-item .service-content-icon p {
        transition: 1s;
    }

.service-item:hover .service-content-icon i {
    color: var(--bs-dark) !important;
}

.service-content-icon p {
    color: #231f1f;
}

.service-content-icon a.btn-primary {
    background: var(--bs-white);
    color: var(--bs-dark);
}

.service-item .service-content-icon a.btn-primary {
    transition: 1s !important;
}
/*** Services End ***/


/*** Menu Start ***/
.menu .nav-item a.active {
    background: var(--bs-primary) !important;
}

.menu .menu-item .border-bottom {
    border-bottom-style: dashed !important;
}
/*** Menu End ***/


/*** Youtube Video start ***/
.video {
    position: relative;
    height: 100%;
    min-height: 400px;
    overflow: hidden;
    /*  background: linear-gradient(rgba(254, 218, 154, 0.1), rgba(254, 218, 154, 0.1)), url(../img/fact.jpg);*/
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
}

    .video img {
        position: absolute; /* 'top' works now */
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: scale-down;
        object-position: center;
    }

    .video .btn-play {
        z-index: 2;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: none;
        background: transparent;
        padding: 0;
    }

        .video .btn-play:before {
            content: "";
            position: absolute;
            z-index: 0;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            display: block;
            width: 70px;
            height: 70px;
            background: var(--bs-primary);
            border-radius: 50%;
            animation: pulse-border 1500ms ease-out infinite;
        }

        .video .btn-play:after {
            content: "";
            position: absolute;
            z-index: 1;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            display: none;
            width: 100px;
            height: 100px;
            background: var(--bs-white);
            border-radius: 50%;
            transition: all 200ms;
        }

        .video .btn-play img {
            position: relative;
            z-index: 3;
            max-width: 100%;
            width: auto;
            height: auto;
        }

        .video .btn-play span {
            display: block;
            position: relative;
            z-index: 3;
            width: 0;
            height: 0;
            border-left: 20px solid var(--bs-dark);
            border-top: 14px solid transparent;
            border-bottom: 14px solid transparent;
        }

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}

#videoModal {
    z-index: 99999;
}

    #videoModal .modal-dialog {
        position: relative;
        max-width: 800px;
        margin: 60px auto 0 auto;
    }

    #videoModal .modal-body {
        position: relative;
        padding: 0px;
    }

    #videoModal .close {
        position: absolute;
        width: 30px;
        height: 30px;
        right: 0px;
        top: -30px;
        z-index: 999;
        font-size: 30px;
        font-weight: normal;
        color: #FFFFFF;
        background: #000000;
        opacity: 1;
    }
/*** Youtube Video End ***/


/*** Blog Start ***/
.blog-item {
    position: relative;
}

    .blog-item img {
        transition: 0.5s;
    }

    .blog-item:hover img {
        transform: scale(1.3)
    }

    .blog-item .blog-content {
        position: relative;
        transform: translateY(-50%);
        box-shadow: 0 0 45px rgba(0, 0, 0, .08);
    }

        .blog-item .blog-content a.btn h5 {
            transition: 0.5s;
        }

    .blog-item:hover .blog-content a.btn h5 {
        color: var(--bs-primary) !important;
    }
/*** Blog End ***/


/*** Team Start ***/
.team-item {
    width: 100%;
    height: 100%;
    position: relative;
}

    .team-item .team-icon {
        position: absolute;
        top: 0;
        right: 0;
    }

        .team-item .team-icon .share-link {
            opacity: 0;
            transition: 0.9s;
        }

    .team-item:hover .share-link {
        opacity: 1;
    }

    .team-item .team-content {
        transition: 0.9s;
    }

    .team-item:hover .team-content {
        background: var(--bs-primary) !important;
        color: var(--bs-dark) !important;
    }

    .team-item .team-content h4,
    .team-item .team-content p {
        transition: 0.5s;
    }

    .team-item:hover .team-content h4 {
        color: var(--bs-dark) !important;
    }

    .team-item:hover .team-content p {
        color: var(--bs-white);
    }
/*** Team End ***/


/*** testimonial Start ***/
.testimonial-item {
    border: 1px solid var(--bs-primary);
    padding: 20px 20px;
}

.testimonial-carousel .owl-item img {
    width: 100px;
    height: 100px;
}

.testimonial-carousel.owl-rtl .testimonial-item {
    direction: ltr !important;
}
/*** testimonial End ***/


/*** Contact start ***/
.contact-form {
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
}

/*** Contact End ***/


/*** Footer Start ***/
.footer .footer-item a.text-body:hover {
    /* color: var(--bs-primary) !important;*/
    color: #552613 !important;
}

.text-body {
    color: #552613 !important;
}
}
/*** Footer End ***/


.navbar-light .navbar-nav .nav-link {
    color: #552613;
}

.flat-icon {
    width: 110px;
    height: 110px;
    border: 2px dotted #0e0900;
    border-radius: 50%;
    margin: auto;
}

    .flat-icon img {
        width: 70px;
        margin-bottom: 30px;
        margin: 17px;
    }

.menu-item img {
    width: 100px;
    height: 100px;
}

.text-primary {
    color: #552613 !important;
}


.minus-item, .plus-item, .delete-item {
    padding: 9px 15px !important;
}

.item-count {
    font-size: 1rem;
    padding: 0.25rem;
    width: 70px !important;
}

.show-cart li {
    display: flex;
}

.card {
    margin-bottom: 20px;
}

.card-img-top {
    width: 200px;
    height: 200px;
    align-self: center;
}

.fabric:hover {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    background: #a1c4fd;
}

#panel {
    display: none;
}

#panel, .flip {
    font-size: 16px;
    padding: 10px;
    text-align: center;
    background-color: #e7dac7;
    color: white;
    border: solid 1px #927047;
    margin: auto;
}

.contact-number, .contact-number:focus-visible {
    border: 1px solid #927047;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.flip-card {
    background-color: #fff;
    perspective: 1000px;
    height: 300px;
    /*width: 300px;*/
    padding: 10px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {
    color: black;
    padding: 20% 10px;
}

.caller-img {
    -webkit-animation: img 2s infinite;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes img {
    0% {
    }

    10% {
        -webkit-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -o-transform: rotate(5deg);
    }

    20% {
        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
    }

    30% {
        -webkit-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -o-transform: rotate(5deg);
    }

    40% {
        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
    }

    50% {
        -webkit-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -o-transform: rotate(5deg);
    }

    60% {
        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
    }

    70% {
        -webkit-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -o-transform: rotate(5deg);
    }

    80% {
        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
    }

    90% {
        -webkit-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -o-transform: rotate(5deg);
    }

    100% {
        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
    }
}


.flip-card-back {
    background-color: #e7dac7;
    color: #000;
    transform: rotateY(180deg);
    padding: 40% 10px;
}

.hide {
    display: none;
}

.service:hover + .hide {
    display: block !important;
}

.popover {
    left: 40% !important;
}

.why {
    border-width: 1px 1px 6px;
    border-color: rgb(146 112 71);
    border-style: solid;
    border-radius: 30px;
    padding: 20px;
    font-size: 15px;
    box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.25);
}

.about h1 {
    margin: 2rem;
    color: #bf6a06;
}
/* .why p, h1 { */
/* text-align: center; */
/* color: #9d651f; */
/* } */
/* .why h1 { */
/* font-size: 15px; */
/* padding: 15px 0; */
/* color: #bf6a06; */
/* } */
.about {
    margin: 2rem 0;
}

.btn {
    margin: 1%;
}

#addon {
    background-color: #999;
    width: 100%
}

.text-center a {
    color: #552613 !important;
}

canvas {
    border: 1px solid #ccc;
}

.custom-input {
    width: 20% !important;
    padding: 10px;
    border: 1px solid lightslategray;
}

.form-measure label {
    width: 20%;
    margin-right: 10px;
    margin-bottom: 5px;
    margin-left: 2rem;
}

.form-measure {
    display: flex;
    /* justify-content: normal; */
    margin-bottom: 20px;
}

    .form-measure input {
        /*margin-left: 2rem;*/
        position: static !important;
    }

.text {
    width: 30px;
}

.form-check-inline .form-check-input {
    margin-left: 1rem;
}

.form-check-inline {
    margin-bottom: 1rem;
}

.design {
    border: 1px solid gray;
    border-radius: 10px;
    height: 100%;
}

    .design p {
        margin: 20px;
    }

.required {
    color: red;
    font-size: 15px;
}

.marquee {
    font-size: 10px;
    color: #CD0E58;
}

.nav-link {
    color: #552613;
    font-size: 14px;
}

.form-wrapper label {
    margin-bottom: 0px !important;
}

.btn-primary.focus, .btn-primary:focus {
    box-shadow: none !important;
}

.inner {
    /* background-color: #e7dac7 !important; */
    color: #927047;
    width: 500px !important;
    /*margin: 30px !important;
    padding: 70px;*/
}

    .inner h3 {
        color: #CD0E58 !important;
    }

.small-size {
    width: 500px !important;
}
/* First the Grid */
.gallery-grid {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 1.5rem;
    justify-items: center;
    margin: 0;
    padding: 0;
}

/* The Picture Frame */
.gallery-frame {
    /*box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.25);*/
    font-size: 13px;
    text-align: center;
    background-color: #fff;
    padding: 10px;
    color: #333;
    height: 92%;
    /*border-radius: 40px 0px;*/
     border: 1px solid #937047; 
    border-style: solid;
    border-width: 1px 1px 6px;
    border-color: rgb(146 112 71);
}

    .gallery-frame:hover {
        background-color: #d6c3a6;
    }

/* The Images */
.gallery-img {
    width: 40%;
    height: auto;
    object-fit: cover;
    transition: opacity 0.25s ease-in-out;
}

    .gallery-img:hover {
        opacity: .7;
    }

figcaption {
    padding: 10px 0px;
    font-size: 18px;
    font-weight: 600;
    color: #CD0E58;
}

.process {
    text-align: center;
    color: #552613;
    padding: 20px 0;
}

hr {
    /* margin-bottom: 1rem; */
 /*   border: 0;
    border-top: 3px solid #df8712;
    width: 100px;*/
}

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {
    box-shadow: none !important;
}

.regi {
    padding: 10px;
    border: none;
    color: #fff;
    background-color: cadetblue;
    margin: 5% 30%;
}

form {
    width: 100% !important;
    height: 100%;
    padding: 15px !important;
    padding: 20px;
    border-radius: 10px;
}

@media (min-width: 1025px) {
    .h-custom {
        height: 100vh !important;
    }
}

.card-registration .select-input.form-control[readonly]:not([disabled]) {
    font-size: 1rem;
    line-height: 2.15;
    padding-left: .75em;
    padding-right: .75em;
}

.card-registration .select-arrow {
    top: 13px;
}

.gradient-custom-2 {
    /* fallback for old browsers */
    background: #a1c4fd;
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, rgba(161, 196, 253, 1), rgba(194, 233, 251, 1));
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, rgba(161, 196, 253, 1), rgba(194, 233, 251, 1))
}

.bg-indigo {
    background-color: #4835d4;
}

@media (min-width: 992px) {
    .card-registration-2 .bg-indigo {
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
    }
}

@media (max-width: 991px) {
    .card-registration-2 .bg-indigo {
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }
}

.flat-icon {
    width: 110px;
    height: 110px;
    border: 2px dotted #0e0900;
    border-radius: 50%;
    /*	background-color: #241f1c;*/
    margin-bottom: 15px;
}

.top-bar {
    background: #937047;
    padding: 4px 0px;
}

.button {
    background-color: #e7dac7; /* Green */
    border: none;
    color: #CD0E58;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 30px !important;
}

.social-media ul li {
    display: inline-block;
    padding: 0px 5px;
}

    .social-media ul li a {
        font-size: 16px;
        color: #241f1c;
    }

.contact-details {
    padding: 0px;
}

    .contact-details ul li {
        display: inline-block;
        color: #ffffff;
    }

.social-media ul {
    list-style: none;
    padding: 4px;
}

.navbar-dark .navbar-toggler {
    color: rgb(217 16 16 / 50%);
    border-color: rgb(215 31 31 / 10%);
}
/* .bg-light { */
/* background-color: #e7dac7 !important; */
/* } */
.btn-group {
    margin: 20px 0px 0px 23%;
}

.btn-primary {
    background-color: #552613 !important;
    border: #e7dac7 !important;
    color: #CD0E58 !important;
    color: #fff !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

    .btn-primary:hover {
        color: #fff !important;
        background-color: #552613!important;
        border: #212529 !important;
        cursor: pointer;
    }

.file span {
    border: none;
    padding: 10px 15px;
    background-color: #e7dac7;
    cursor: pointer;
}

.file button:hover {
    cursor: pointer;
}

body {
    font-family: "Poppins" !important;
    font-size: 13px;
}

a {
    transition: all 0.3s ease;
}

    a:hover {
        text-decoration: none !important;
    }

h4, h5, h3, h6 {
    color: #552613;
}

.weight-500 {
    font-weight: 500;
}

.navbar-nav {
    font-size: 15px;
}

#mainNav {
    background-color: #202124;
}

.navbar-dark .navbar-nav .nav-link {
    color: #CD0E58 !important;
    padding-left: 30px;
}
/*#carouselExampleCaptions {
	background: black;
	overflow: hidden;
}*/
/*.d-block {
    object-fit: cover;
    opacity: 0.4;
}*/
/*.carousel-caption {
	position: absolute;
	top: 44%;
	left: 15%;
	z-index: 10;
	padding-top: 0;
	padding-bottom: 0;
	text-align: left;
	color: #fff;
}*/
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: #b56304;
}

::placeholder {
    font-size: 14px;
}

.active {
    color: #552613 !important;
}

.text-white {
    color: #fff !important;
}


.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    z-index: 50000;
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 100%;
}

/* The Close Button */
.close {
    color: #cc1f1f;
    font-size: 28px;
    font-weight: bold;
    text-align: right;
}

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

.breadcrumb {
    background-color: none !important;
}

a.active.bg-white.border.border-primary.d-flex.mx-2.py-2.rounded-pill {
    background-color: #552613 !important;
    color: white !important;
}

.card-body {
    text-align: center;
}

.owl-carousel {
    z-index: 0;
}

.bg-dark {
    background-color: #937047 !important;
}

@media (max-width: 767px) {
    .modal.fade {
        top: 0 !important;
    }
}

.book-appointment-btn {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #552613;
    color: white;
    text-decoration: none;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    top: 60%;
    transform: translateY(-50%);
}

    .book-appointment-btn:hover {
        background-color: #e485aa; /* Darker blue on hover */
    }

.btn-appointment {
    display: inline-block;
    padding: 10px 20px; /* Adjust padding to make the button larger/smaller */
    font-size: 12px; /* Adjust font size */
    width: fit-content;
    color: #cd0e58 !important; /* Text color */
    background-color: #e7dac7; /* Button background color */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */

    text-decoration: none; /* Remove underline */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: background-color 0.3s; /* Smooth background color transition */
}

    .btn-appointment:hover {
        background-color: #937047; /* Darker blue on hover */
    }

h5 {
    margin: 0px;
    font-size: 18px;
    font-weight: 500;
}
/*start*/
.container-form {
    width: 100%;
    max-width: 700px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent white background */
    backdrop-filter: blur(10px); /* Applies the blur effect */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    margin: auto;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Slight border to enhance the frosted effect */
    color: #333; /* Text color for contrast */
}

/* Header Styles */


header h1 {
    font-size: 36px;
}

/* Form Styling */
.form-container {
    margin-top: 20px;
}

.appointment-form {
    display: flex;
    flex-direction: column;
}

/* Input Fields and Labels */
label {
    font-size: 14px;
    margin-bottom: 5px;
    color: #2c2c2c;
}

input, select {
    padding: 10px;
}



/* Submit Button */
.submit-btn {
    background-color: #cd0e58;
    color: white;
    font-size: 16px;
    padding: 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .submit-btn:hover {
        background-color: #a10a43;
    }

/* Register Link */
.register-link {
    text-align: center;
    margin-top: 20px;
}

    .register-link a {
        color: #552613;
        text-decoration: none;
    }

        .register-link a:hover {
            text-decoration: underline;
        }
/*end*/
/*dropdown start*/
/* Container for all form elements */
.form1-container {
    display: flex;
    justify-content: space-between;
    gap: 15px; /* Space between the elements */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    margin: 0 auto;
    width: 90%; /* Or any custom width */
    max-width: 1200px; /* Maximum width */
    /*padding: 20px;*/
}

/* Styling for each form group */
.form1-group {
    display: flex;
    flex-direction: column;
    width: 32%; /* Ensure three columns can fit in one row */
    min-width: 250px; /* Minimum width for responsiveness */
}

/* Label styling */
/*label {
    font-size: 14px;
    margin-bottom: 8px;
    color: #cd0e58;*/
    /*font-weight: bold;*/
/*}*/

/* Custom dropdown and input styling */
.select {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    border: 1px solid #cd0e58;
    border-radius: 5px;
    background-color: white;
    background-repeat: no-repeat;
    background-position: right 10px center; /* Position the chevron icon */
    appearance: none; /* Removes default dropdown arrow */
}

    /* Add hover effect */
    .select:hover {
        border-color: #a10a43;
    }

    /* Focused state */
    .select:focus {
        border-color: #cd0e58;
        outline: none;
        box-shadow: 0 0 5px rgba(205, 14, 88, 0.4);
    }

select option[value=""]:disabled {
    color: #999 !important; /* Light grey color for placeholder text */
}

/* Style for date picker input */
.datepicker1 {
    padding-right: 30px; /* Adjust space for calendar icon */
}

    .datepicker1 + .fa-calendar {
        position: absolute;
        right: 10px;
        top: 35px; /* Adjust as needed */
        font-size: 16px;
        color: #cd0e58;
        pointer-events: none; /* Prevent clicking the icon */
    }

/* Flex wrap and responsive design for smaller screens */
@media screen and (max-width: 768px) {
    .form1-container {
        flex-direction: column;
        align-items: stretch;
    }

    .form1-group {
        width: 100%;
    }
}


/*end*/
/*.comment {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	box-sizing: border-box;
	border: none;
	border-bottom: 2px solid #CD0E58;
}*/
p {
    font-size: 12px;
    color: black;
}

.caption {
    font-size: 14px;
    color: #141726;
    text-align: center;
    margin-top: 15px;
}


.center {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container {
    display: flex;
    gap: 20px;
    display: flex;
    justify-content: center; /* Horizontally centers the container */
    align-items: center; /* Vertically centers the container */
    margin-top: 20px;
    /*margin: 10px;*/
}

.rounded-img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ddd;
}
/* End Non-Essential  */

.property-card {
    height: 18em;
    width: 14em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    border-radius: 16px;
    overflow: hidden;
    -webkit-box-shadow: 15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
    box-shadow: 15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
}
/* ^-- The margin bottom is necessary for the drop shadow otherwise it gets clipped in certain cases. */

/* Top Half of card, image. */

.property-image {
    height: 6em;
    width: 14em;
    padding: 1em 2em;
    position: Absolute;
    top: 0px;
    -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    background-image: url('https://cdn.photographylife.com/wp-content/uploads/2017/01/What-is-landscape-photography.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

/* Bottom Card Section */

.property-description {
    background-color: #FAFAFC;
    height: 12em;
    width: 14em;
    position: absolute;
    bottom: 0em;
    -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    padding: 0.5em 1em;
    text-align: center;
}

/* Social Icons */

.property-social-icons {
    width: 1em;
    height: 1em;
    background-color: black;
    position: absolute;
    bottom: 1em;
    left: 1em;
    -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Property Cards Hover States */

.property-card:hover .property-description {
    height: 0em;
    padding: 0px 1em;
}

.property-card:hover .property-image {
    height: 18em;
}

.property-card:hover .property-social-icons {
    background-color: white;
}

    .property-card:hover .property-social-icons:hover {
        background-color: blue;
        cursor: pointer;
    }

.scene {
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: space-around;
    perspective: 800px;
    margin: 0 auto;
}


.card {
    position: relative;
    width: 240px;
    height: 300px;
    color: white;
    cursor: pointer;
    transition: transform 1s ease-in-out;
    transform-style: preserve-3d;
    margin: 0 5px;
}

    .card:hover {
        transform: rotateY(180deg);
    }

.card__face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: 1s ease-in-out;
    /*-webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));*/
}

.card__face--front img {
    width: 240px;
    height: 300px;
    object-fit: cover;
}

.card__face--back {
    transform: rotateY(180deg);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e7dac7;
    color: white;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}
/* Media Query for tablets */
@media (max-width: 768px) {
    .scene {
        flex-wrap: wrap; /* Allow wrapping on smaller screens */
    }

    .card {
        width: 200px;
        height: 250px;
    }

    .card__face--front img {
        width: 200px;
        height: 250px;
    }
}

/* Media Query for mobile devices */
@media (max-width: 480px) {
    .scene {
        flex-direction: column;
        align-items: center;
    }

    .card {
        width: 100%;
        max-width: 300px;
        height: 350px;
    }

    .card__face--front img {
        width: 100%;
        height: 100%;
    }

    .card__face--back {
        padding: 15px;
    }
}
/* Custom Profile Styles */
.profile-icon {
    font-size: 100px;
    /*color: #007bff;*/ /* Customize icon color */
    text-align: center;
}

.profile-info {
    text-align: center;
}

    .profile-info h4 {
        font-size: 1.5rem;
        margin: 10px 0;
    }

    /*.btn-small {
	font-size: 0.8rem;
	padding: 5px 10px;
}*/
    .profile-info a {
        font-size: 0.8rem;
        margin: 0 5px;
        color: #007bff;
        text-decoration: none;
    }

        .profile-info a:hover {
            text-decoration: underline;
        }

    .profile-info .fa-edit {
        margin-right: 5px;
    }

    .profile-info .fa-trash-alt {
        margin-right: 5px;
    }


.profile-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
    cursor: pointer;
}

    .profile-card .card-body {
        text-align: center;
    }

    .profile-card .card-title {
        font-size: 1.25rem;
        margin-bottom: 10px;
    }

    .profile-card .card-text {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

header {
    background-color: #333;
    padding: 10px 0;
}

#carouselExample {
    width: 100%; /* Make sure carousel takes up full width */
    padding: 0;
    margin: 0;
}

.carousel-inner img {
    width: 100%; /* Ensures images take up full width */
    height: auto; /* Keeps the aspect ratio */
}

/*priority,tailor,home,fashion section*/
.col-lg-3, .col-sm-3, .col-6 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.section-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.section-img {
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-text {
    margin-top: 10px; /* Add some space between image and text */
}

/*final pop-up*/

/* Modal Styles */
.final-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed to the screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Black background with transparency */
    z-index: 9999; /* Ensure it's on top of all other content */
    /*overflow: auto;*/ /* Allow scrolling if modal content is too long */
}

.final-modal-content {
    background-color: white;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    /*overflow-y: auto;*/ /* Make content scrollable within the modal if needed */
    max-height: 80vh; /* Limit the height of the modal content to 80% of the viewport height */
}

.final-close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .final-close-btn:hover,
    .final-close-btn:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

.bill-details {
    margin-bottom: 20px;
}

.modal-actions {
    display: flex;
    justify-content: space-between;
}

.final-cancel-btn,
.final-proceed-btn {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
}

.final-cancel-btn {
    background-color: #f44336;
    color: white;
}

.final-proceed-btn {
    background-color: #552613;
    color: white;
}

.final-cancel-btn:hover {
    background-color: #d32f2f;
}

.final-proceed-btn:hover {
    background-color: #552613;
    color: #fff;
}

.input-group {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    /*margin-left:81px;*/
}

    .input-group .form-control {
        max-width: 60px; /* Ensures the input box doesn't take too much space */
        flex-grow: 1;
        text-align: center;
    }

    .input-group button {
        flex-shrink: 0;
        width: 40px;
      /*  height: 40px;*/
    }

@media (max-width: 767px) {
    .input-group {
        flex-wrap: nowrap;
        width: 42%;
        /* Stack buttons and input for smaller screens */
    }

        .input-group button {
            width: 100%;
            margin-bottom: 5px; /* Space between buttons */
        }

        .input-group .form-control {
            width: 100%;
        }
}

.mobile-navbar {
    position: fixed; /* Keep it fixed to the bottom */
    bottom: 0;
    left: 0;
    width: 100%; /* Full width */
    background-color: #937047;
    border-top: 1px solid #ccc; /* Optional border for separation */
    z-index: 999;
    padding: 5px 0;
}

    /* Flexbox to arrange the items horizontally */
    .mobile-navbar .navbar-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-left: 0;
        margin: 0;
    }

    /* Ensure nav items are evenly spaced and fill the screen */
    .mobile-navbar .nav-item {
        flex: 1; /* Allow items to grow and fill available space */
    }

    /* Optional: Style for the nav links (icons) */
    .mobile-navbar .nav-link {
        color: #fff;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 4px 0;
        text-decoration: none;
    }

        .mobile-navbar .nav-link i {
            font-size: 18px;
            margin-bottom: 2px; /* Reduced gap */
        }

        .mobile-navbar .nav-link span.nav-caption {
            font-size: 11px;
            line-height: 1;
        }


* Base style for all screens */
.footer-icon a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding: 0;
}

/* Mobile-specific adjustments */
@media (max-width: 576px) {
    .footer-icon {
        justify-content: center;
        gap: 8px; /* Spacing between buttons */
    }

        .footer-icon a {
            width: 36px;
            height: 36px;
            font-size: 14px;
            margin: 0;
        }
}

/*one stop shop*/
/* Tailoring Service Section Styling */
.tailoring-service {
    margin-bottom: 40px; 
    padding: 20px; 
    background-color: #f9f9f9; 
    border-radius: 8px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}

/* Tailoring Heading Styling */
.tailoring-heading {
    font-size: 16px; 
    font-weight: none;
    color: #552613; 
    margin-bottom: 15px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    text-align: center;
}

/* Tailoring Description Paragraph Styling */
.tailoring-description p {
    font-size: 14px;
    color: #555; 
    line-height: 1.6; 
    /*margin-bottom: 10px;*/ /* Add space between paragraphs */
    text-align: center;
}

/* Add padding and responsive layout for mobile */
@media (max-width: 768px) {
    .tailoring-service {
        padding: 15px;
    }

    .tailoring-heading {
        font-size: 20px;
    }

    .tailoring-description p {
        font-size: 14px;
    }
}

/*Size chart*/
.size-chart-content {
    display: none;
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    margin-top: 10px;
}

/* When the checkbox is checked, show the size chart */
#size-toggle:checked + .size-chart-content {
    display: block;
}

/* Optional: Style the label */
.size-chart {
    cursor: pointer;
    color: #2c2c2c;
    text-decoration: underline;
    /*float:right;*/
}

/* General table styling */
.responsive-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

    .responsive-table th, .responsive-table td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ddd;
    }

    .responsive-table th {
        background-color: #f4f4f4;
        font-weight: bold;
    }

/* Responsive behavior */
@media screen and (max-width: 768px) {
    .responsive-table {
        border: 0;
    }

        .responsive-table thead {
            display: none;
        }

        .responsive-table tr {
            display: block;
            margin-bottom: 10px;
        }

        .responsive-table td {
            display: block;
            text-align: right;
            position: relative;
            padding-left: 50%;
        }

            .responsive-table td::before {
                content: attr(data-label);
                position: absolute;
                left: 10px;
                font-weight: bold;
            }

            .responsive-table td:last-child {
                border-bottom: 1px solid #ddd;
            }
}

.radio-options {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.assign-sec1 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom-style: groove;
    margin-bottom: 35px;
}

#assignReassign {
    padding: 20px;
    margin: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
}

#bookOrder {
    /*display: flex;
	flex-wrap: wrap;*/ /* Allows elements to wrap to new lines */
    gap: 10px;
    justify-content: flex-start; /* Aligns items to the start */
}

    #bookOrder label {
        flex: 1 1 120px; /* Ensures labels have a flexible width but don't shrink too much */
        margin-right: 10px;
    }

    #bookOrder input, #bookOrder select {
        padding: 8px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }


/* Responsive design for mobile */
@media screen and (max-width: 768px) {
    #bookOrder {
        flex-direction: column; /* Stack the elements vertically */
        align-items: stretch;
    }

        #bookOrder label, #bookOrder input, #bookOrder select, #bookOrder button {
            width: 100%; /* Make all items 100% width on smaller screens */
            margin-bottom: 10px;
        }

        #bookOrder button {
            margin-top: 10px; /* Adds spacing above the button */
        }
}

/* Optional: Adding some padding around the section for smaller screens */
@media screen and (max-width: 480px) {
    #assignReassign {
        padding: 15px;
    }
}

.orderid-status {
    display: flex;
    justify-content: space-around
}

.labels {
    font-size: 12px;
    color: black;
}

.input-text {
    padding: 0px !important;
    margin-bottom: 0px;
}

.buttons {
    text-align: center;
}

.service-tile {
    position: relative;
    background-color: #f9f9f9; /* pale background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1 / 1; /* Makes it square */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .service-tile:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }

.tile-img {
    width: 100%;
    height: 70%;
    object-fit: cover;
    border-bottom: 1px solid #eee;
}

.tile-caption {
    text-align: center;
    font-weight: 500;
    padding: 0.8rem;
    font-size: 1.1rem;
    color: #333;
}

.tile-box {
    flex: 1 1 calc(50% - 1rem); /* 2 per row on small screens */
    background-color: #e4d7c4;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.tile-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    height: 100%;
}



.tile-link {
    font-size: 0.85rem;
    color: #d1a01f;
    text-decoration: none;
}

.tile-content img {
    width: 100px;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .tile-content {
        flex-direction: column !important; /* Stack vertically */
        align-items: center;
    }

    .tile-text p {
        display: none; /* Hide paragraph on mobile */
    }

    .tile-box {
        width: 90%;
    }

    .tile-image {
        width: 80%;
        height: auto;
    }

    .tile-heading {
        white-space: nowrap; /* Prevent line break */
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    h6.text-primary.fw-bold {
        font-size: 12px; /* or any size you prefer */
    }
}



/* 4 per row on screens >= 768px */
@media (min-width: 768px) {

    .tile-box {
        flex: 0.6 1 calc(25% - 1rem);
    }

    .tile-content img {
        width: 120px;
    }
}

.icon-box {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

@media (max-width: 576px) {
    .caption {
        font-size: 12px; /* smaller on mobile */
    }
}

@media(max-width:576px) {
    .head-text {
        font-size: 18px;
    }
}

@media(max-width:576px) {
    .subhead-text {
        font-size: 14px;
    }
}

@media(max-width:576px) {
    .card-title {
        font-size: unset;
    }
}

@media (max-width: 576px) {
    .gallery-img {
        max-height: 100px;
        object-fit: contain;
    }

    .card-title, .card-text {
        font-size: 10px;
        margin-bottom: 4px;
    }

    .add-to-cart {
        font-size: 10px;
        padding: 4px 6px;
    }

    .gallery-frame {
        padding: 5px;
    }
}

@media (max-width: 576px) {
    .service-content-icon img {
        width: 100px; /* or whatever smaller size fits well */
        height: auto;
    }

    .service-content-icon h4 {
        font-size: 1rem; /* smaller heading */
        margin-top: 0.5rem;
    }

    .service-content-icon p {
        font-size: 0.75rem; /* smaller paragraph */
        margin-bottom: 0.5rem;
    }

    .service-content {
        padding: 1rem !important; /* reduce padding around the content */
    }
}

@media (max-width:576px) {
    .process h4 {
        font-size: 16px;
    }

    .process p {
        font-size: 0.6rem;
    }
}

@media (max-width:576px) {
    figcaption {
        font-size: 0.8rem;
    }
}

.mobile-navbar {
    position: fixed; /* Keep it fixed to the bottom */
    bottom: 0;
    left: 0;
    width: 100%; /* Full width */
    background-color: #e4d7c4;
    border-top: 1px solid #ccc; /* Optional border for separation */
    z-index: 1000; /* Ensures it sits above other content */
    opacity: 1 !important;
}

    /* Flexbox to arrange the items horizontally */
    .mobile-navbar .navbar-nav {
        display: flex; /* Enable Flexbox */
        justify-content: space-around; /* Space out the items horizontally */
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: center;
        flex-direction: row;
    }

    /* Ensure nav items are evenly spaced and fill the screen */
    .mobile-navbar .nav-item {
        flex: 1; /* Allow items to grow and fill available space */
    }

    /* Optional: Style for the nav links (icons) */
    .mobile-navbar .nav-link {
        padding: 10px 0; /* Padding for vertical spacing */
        font-size: 24px; /* Adjust the size of the icons */
        text-align: center; /* Ensure text is centered */
    }

        /* Add hover effect for icons */
        .mobile-navbar .nav-link:hover {
            color: #937047; /* Change color on hover */
        }


.nav-link {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 14px;
    padding: 5px 0;
    text-decoration: none;
}

.icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px; /* This controls space between icon and caption */
}

.nav-link i {
    font-size: 20px;
}

.nav-caption {
    font-size: 11px; /* You can go smaller, and spacing won't grow */
    color: #000; /* Customize as needed */
}
.tab-header {
    display: flex;
    margin-bottom: 20px;
    justify-content: center;
    border-bottom: 2px solid #ccc;
}
.tab-link {
    flex: 1;
    padding: 12px;
    cursor: pointer;
    background: #f8f8f8;
    border: none;
    font-weight: bold;
    color: #6b4a23;
    border-bottom: 3px solid transparent;
    transition: 0.3s;
}

    .tab-link.active {
        background: white;
        border-bottom: 3px solid #552316;
        color: #552613;
    }

.customtab-content {
    display: none;
}

    .customtab-content.active {
        display: block;
    }

.form-actions {
    margin-top: 30px;
    text-align: center;
}

.login-section {
    width: 100%;
}

.login-container {
    max-width: 100%;
    width: 100%;
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    margin: auto;
}

/* Login Form */


.login-form label {
    display: block;
    margin-bottom: 6px;
   /* font-weight: 500;*/
    color: #ce1158;
}

.login-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
}
.login-p {
    font-size: 10px;
    color: #909090;
    margin-left: 10px;
}

.otp-p {
}

.otplogin {
    background-color: #FFFFFF !important;
    color: #6b4a23 !important;
    border: 1px solid !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.loginbtn {
    background-color: #552613 !important;
    color: #FFFFFF !important;
}

.forgot-link {
    text-align: right;
    font-size: 0.9em;
    margin-bottom: 15px;
}

    .forgot-link span {
        color: #ce1158;
        cursor: pointer;
        text-decoration: underline;
    }

.btn-primary {
    text-align: center;
    background: #007bff;
    color: white;
    padding: 12px;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
    font-size: 1em;
    cursor: pointer;
}

    .btn-primary:hover {
        background: #0056b3;
    }

/* Register Text */
.register-text {
    text-align: center;
    margin-top: 15px;
    font-size: 0.9em;
}

    .register-text a {
        color: #007bff;
        text-decoration: none;
    }

        .register-text a:hover {
            text-decoration: underline;
        }

/* Mobile First (Already Responsive) */
@media (max-width: 400px) {
    .login-container {
        padding: 20px;
        max-width: 100%;
    }
}
@media (max-width :600px) {
    .otplogin {
        background-color: #FFFFFF !important;
        color: #6b4a23 !important;
        border: 1px solid !important;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
}

@media (max-width: 576px) {
    .login-form {
        padding: 20px;
    }

        .login-form input[type="text"],
        .login-form input[type="password"],
        .login-form input[type="submit"],
        .login-form input[type="button"] {
            font-size: 16px;
        }



    .form-section {
        background-size: cover;
        background-position: center;
    }
}

/*register form*/
.form-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

.form-container {
    width: 100%;
    max-width: 700px;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

    /* Form elements */
    .form-container h2 {
        text-align: center;
        margin-bottom: 25px;
        color: #003366;
    }

/* Form Groups */
.form-group {
    margin-bottom: 20px;
}

/* Labels */
.form-container label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #552613;
}

.form input[type="text"],
.form input[type="password"],
.form input[type="email"],
.form input[type="number"],
.form input[type="tel"] {
    width: 100%;
}

/* Checkbox */
.checkbox label {
    font-size: 0.9em;
    color: #444;
}

.checkbox input[type="checkbox"] {
    margin-right: 8px;
    opacity: 1;
}

/* Button */
.btn-primary {
    padding: 12px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    text-align: center;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.3s;
}

    .btn-primary:hover {
        background: #0056b3;
    }

/* Responsive tweaks */
@media (max-width: 600px) {
    .form-container {
        padding: 20px;
    }
}

/*book page styles*/
@media (max-width: 767px) {
    body {
        padding-right: inherit !important;
        padding-left: inherit !important;
    }
}

form {
    width: 100% !important;
    height: 100%;
    padding: 15px !important;
    border-radius: 10px;
}

.size-chart-content {
    display: none;
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    margin-top: 10px;
}

/* When the checkbox is checked, show the size chart */
#size-toggle:checked + .size-chart-content {
    display: block;
}



/* General table styling */
.responsive-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

    .responsive-table th, .responsive-table td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ddd;
    }

    .responsive-table th {
        background-color: #f4f4f4;
        font-weight: bold;
    }

/* Responsive behavior */
@media screen and (max-width: 768px) {
    .responsive-table {
        border: 0;
    }

        .responsive-table thead {
            display: none;
        }

        .responsive-table tr {
            display: block;
            margin-bottom: 10px;
        }

        .responsive-table td {
            display: block;
            text-align: right;
            position: relative;
            padding-left: 50%;
        }

            .responsive-table td::before {
                content: attr(data-label);
                position: absolute;
                left: 10px;
                font-weight: bold;
            }

            .responsive-table td:last-child {
                border-bottom: 1px solid #ddd;
            }
}

.calendar-container {
    max-width: 600px;
    margin: 40px auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 255, 0.1);
}

.calendar-header {
    background-color: #936D43;
    padding: 12px;
    text-align: center;
}

    .calendar-header input {
        background: #e6d4b9;
        border: none;
        padding: 8px 12px;
        border-radius: 6px;
        font-weight: bold;
        color: #936D43;
        text-align: center;
        width: 160px;
    }

    .calendar-header .fa-calendar {
        margin-left: 10px;
        color: white;
    }

.time-slots {
    background: #fff;
    padding: 20px;
    text-align: center;
    border-top: none;
}

.chip {
    display: inline-block;
    background: #fff;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
    border: 1px solid;
}

    .chip:hover,
    .chip.selected {
        background: #936d43;
        color: #fff;
    }

/* Datepicker custom styling */
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    background: #f9f9f9;
    color: #ccc;
    cursor: not-allowed;
}

.datepicker .day:hover {
    background: #936D43;
    color: white;
}

.datepicker .active.day {
    background-color: #936D43 !important;
    border-color: #936D43 !important;
    color: white !important;
}

.datepicker-dropdown {
    z-index: 9999 !important;
}

.radio-section {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 30px auto;
    max-width: 900px;
    gap: 20px;
}

.form1-group {
    flex: 1;
    min-width: 280px;
    padding: 15px;
    background: #fdfdfd;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

    .form1-group label.section-title {
        display: block;
        color: #CD0E58;
        margin-bottom: 10px;
        font-size: 16px;
    }

    .form1-group .radio-option {
        display: block;
        margin-bottom: 10px;
        color: #000; /* Black text */
        font-size: 15px;
    }

        .form1-group .radio-option input {
            margin-right: 10px;
        }

            .form1-group .radio-option input:disabled + span {
                color: #aaa;
                cursor: not-allowed;
            }

@media (max-width: 600px) {
    .btn-primary {
        font-size: 12px;
        padding: 0px 12px;
        border-radius: 4px;
       /* background-color: #eddece !important;*/
        border: none;
        display: unset;
        width: auto;
        min-width: 100px;
        text-align: center;
    }
}
/*dummy*/
.fabric-container {
    display: flex;
    flex-wrap: nowrap; /* This keeps them side-by-side */
    justify-content: center; /* Center the group on the screen */
    gap: 20px;
    padding: 0px 20px;
    overflow-x: auto; /* Allows horizontal scroll on small viewports */
}

.fabric-card {
    display: flex;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    width: 368px;
    min-width: 360px;
    overflow: hidden;
    flex-direction: row;
}

.fabric-preview {
    background-color: #e7dac7;
    color: white;
    padding: 20px;
    width: 139px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .fabric-preview img {
        max-width: 65px;
        margin-bottom: 15px;
    }

    .fabric-preview h6 {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
        opacity: 0.7;
        margin: 0;
    }

    .fabric-preview h2 {
        font-size: 18px;
        margin: 10px 0 0;
        text-align: center;
    }

.fabric-info {
    padding: 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .fabric-info p {
        font-size: 12px;
        margin-bottom: 20px;
        color: #333;
    }

    .fabric-info .btn {
        align-self: flex-start;
        background-color: #552613;
        color: white;
        padding: 0px 15px;
        border-radius: 50px;
        text-decoration: none;
        font-size: 12px;
        transition: background 0.3s;
    }

        .fabric-info .btn:hover {
            background-color: #552613;
        }

/* Responsive Stack on Small Screens */
@media (max-width: 768px) {
    .fabric-container {
        flex-wrap: wrap;
    }

    .fabric-card {
        flex-direction: column;
        width: 100%;
        min-width: unset;
    }

    .fabric-preview {
        width: 100%;
    }

    .fabric-info {
        text-align: center;
        align-items: center;
    }

        .fabric-info .btn {
            align-self: center;
        }
}

.size-chips {
    margin: 10px 0;
}

.chips {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid #937047;
    border-radius: 20px;
    margin-right: 8px;
    cursor: pointer;
}

    .chips input[type="radio"] {
        display: none;
    }

    .chips:hover {
        background-color: #e7dac7;
    }


.size-chart-content {
    margin-top: 0.5rem;
    transition: all 0.3s ease;
}

.hidden {
    display: none;
}
.btn-styles{
    background-color:#552613;
    color:#ffffff;
}
.btn-fabric-styles {
    background-color: #e7dac7;
    color: #cd0e58;
}
.btn-default {
    background-color: #e7dac7;
    color: #cd0e58;
}
a.disabled {
    pointer-events: none;
    opacity: 0.6;
}

.benefits-section {
    max-width: 1000px;
    margin: auto;
    padding: 2rem;
}

.benefit-card {
    display: flex;
    align-items: flex-start;
    background: #f9f9f9;
    border-radius: 15px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    gap: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.benefit-image {
    flex: 0 0 25%;
}

    .benefit-image img {
        width: 100%;
        height: auto;
        border-radius: 10px;
        display: block;
    }

.benefit-text {
    flex: 1;
}



    .benefit-text p {
        margin: 0;
        font-size: 0.80rem;
        color: #333;
    }

@media (max-width: 768px) {
    .benefit-card {
        flex-direction: column;
    }

    .benefit-image,
    .benefit-text {
        flex: 1 1 100%;
    }
}

.confirm-section {
    margin: 0;
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.confirmation-box {
    background-color: #e8f5e9;
    width: 75%;
    max-width: 700px;
    padding: 30px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.tick-icon {
    font-size: 36px;
    color: #2e7d32;
    margin-bottom: 10px;
}

.confirmation-box h1 {
    color: #2e7d32;
    font-size: 20px;
    margin-bottom: 10px;
}

.confirmation-box p {
    color: #444;
    font-size: 14px;
    margin: 8px 0;
}

.order-id {
    margin-top: 15px;
    font-weight: 600;
    font-size: 15px;
    color: #333;
    background-color: #e9f5e9;
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
}

/*address section*/
.address-section {
    max-width: 600px;
    margin: auto;
    padding: 20px;
}

.section-title {
    font-weight: bold;
    margin-bottom: 20px;
}

.address-card {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}

.add-new-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #ff3f6c;
    font-weight: 500;
    margin-bottom: 15px;
}

.plus-icon {
    font-size: 24px;
    line-height: 1;
}

.new-address-form {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 15px;
    background-color: #fff;
}

.address-add-new {
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
}

.address-content input {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

@media (max-width: 600px) {
    .address-content input {
        font-size: 13px;
    }
}
.modal-actions {
    display: flex;
    justify-content: space-between;
}

.login-section {
    background-image: repeating-linear-gradient(168deg, #e7dac7, #f5f5f5 10px, #e0e0e0 10px, #e0e0e0 20px);
    width: 100%;
}

.login-container {
    max-width: 50%;
    width: 100%;
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    margin: auto;
    margin-top: 40px;
}

/* Login Form */


.login-form label {
    display: block;
    margin-bottom: 6px;
    /*font-weight: 500;*/
    color: #ce1158;
}

.login-form input {
    border: 1px solid #ccc;
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 20px;
    /*border-radius: 20px;*/
    /*font-family: "Muli-Bold";*/
    background: none;
}

.otplogin {
    background-color: #FFFFFF !important;
    color: #6b4a23 !important;
    border: 1px solid !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.loginbtn {
    background-color: #937047 !important;
    color: #FFFFFF !important;
}

.forgot-link {
    text-align: right;
    font-size: 0.9em;
    margin-bottom: 15px;
}

    .forgot-link span {
        color: #ce1158;
        cursor: pointer;
    }

.btn-primary {
    display: block;
    text-align: center;
    background: #007bff;
    color: white;
    padding: 12px;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
}

    .btn-primary:hover {
        background: #0056b3;
    }

/* Register Text */
.register-text {
    text-align: center;
    margin-top: 15px;
    font-size: 0.9em;
}

    .register-text a {
        color: #007bff;
        text-decoration: none;
    }

        .register-text a:hover {
            text-decoration: underline;
        }


@media (max-width: 400px) {
    .login-container {
        padding: 20px;
        max-width: 100%;
    }
}

@media (max-width :600px) {
    .otplogin {
        background-color: #FFFFFF !important;
        color: #6b4a23 !important;
        border: 1px solid !important;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
}

@media (max-width: 576px) {
    .login-form {
        padding: 20px;
    }

        .login-form input[type="text"],
        .login-form input[type="password"],
        .login-form input[type="submit"],
        .login-form input[type="button"] {
            font-size: 16px;
        }



    .form-section {
        background-size: cover;
        background-position: center;
    }
}

/*register form*/
.form-section {
    /*background-image: repeating-linear-gradient( 168deg, #e7dac7, #f5f5f5 10px, #e0e0e0 10px, #e0e0e0 20px );*/

    background-repeat: repeat;
    background-position: top left;
    background-size: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 0px 15px;
    background-size: cover;
    background-position: center;
}

.form-container {
    width: 100%;
    max-width: 700px;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

    /* Form elements */
    .form-container h2 {
        text-align: center;
        margin-bottom: 25px;
        color: #003366;
    }

/* Form Groups */
.form-group {
    margin-bottom: 20px;
}

/* Labels */
.form-container label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #cd0e58;
}

.form input[type="text"],
.form input[type="password"],
.form input[type="email"],
.form input[type="number"],
.form input[type="tel"] {
    width: 100%;
}

/* Checkbox */
.checkbox label {
    font-size: 0.9em;
    color: #444;
}

.checkbox input[type="checkbox"] {
    margin-right: 8px;
    opacity: 1;
}

.form-actions {
    text-align: center;
    margin-top: 30px;
}
/* Button */
.btn-primary {
    padding: 12px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    text-align: center;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.3s;
}

    .btn-primary:hover {
        background: #0056b3;
    }

/* Responsive  */
@media (max-width: 600px) {
    .form-container {
        padding: 20px;
    }

    .form-actions {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
}
.tab-header {
    display: flex;
    margin-bottom: 20px;
    justify-content: center;
    border-bottom: 2px solid #ccc;
}

.tab-link {
    flex: 1;
    padding: 12px;
    cursor: pointer;
    background: #f8f8f8;
    border: none;
    font-weight: bold;
    color: #6b4a23;
    border-bottom: 3px solid transparent;
    transition: 0.3s;
}

.tab-link.active {
    background: white;
    border-bottom: 3px solid #937047;
    color: #937047;
}

.tab-content {
   /* display: none;*/
}

/*new login page design*/ 
.customtab-content {
    display: none;
}

.customtab-content.active {
    display: block;
}

.form-actions {
    margin-top: 20px;
}

.login-section {
    background-image: repeating-linear-gradient(168deg, #e7dac7, #f5f5f5 10px, #e0e0e0 10px, #e0e0e0 20px);
    width: 100%;
}

.login-container {
    max-width: 50%;
    width: 100%;
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    margin: auto;
    margin-top: 10px;
}

/* Login Form */


.login-form label {
    display: block;
    margin-bottom: 6px;
    /*font-weight: 500;*/
    color: #ce1158;
}

.login-form input {
    border: 1px solid #ccc;
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 20px;
    /*border-radius: 20px;*/
    /*font-family: "Muli-Bold";*/
    background: none;
}

.otplogin {
    background-color: #FFFFFF !important;
    color: #6b4a23 !important;
    border: 1px solid !important;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.loginbtn {
    background-color: #937047 !important;
    color: #FFFFFF !important;
}

.forgot-link {
    text-align: right;
    font-size: 0.9em;
    margin-bottom: 15px;
}

    .forgot-link span {
        color: #ce1158;
        cursor: pointer;
    }

.btn-primary {
    display: block;
    text-align: center;
    background: #007bff;
    color: white;
    padding: 12px;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
}

    .btn-primary:hover {
        background: #0056b3;
    }

/* Register Text */
.register-text {
    text-align: center;
    margin-top: 15px;
    font-size: 0.9em;
}

    .register-text a {
        color: #007bff;
        text-decoration: none;
    }

        .register-text a:hover {
            text-decoration: underline;
        }


@media (max-width: 400px) {
    .login-container {
        padding: 20px;
        max-width: 100%;
    }
}

@media (max-width :600px) {
    .otplogin {
        background-color: #FFFFFF !important;
        color: #6b4a23 !important;
        border: 1px solid !important;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
}

@media (max-width: 576px) {
    .login-form {
        padding: 20px;
    }
        .login-form input[type="text"],
        .login-form input[type="password"],
        .login-form input[type="submit"],
        .login-form input[type="button"] {
            font-size: 16px;
        }

    .form-section {
        background-size: cover;
        background-position: center;
    }
}

/*register form*/
.form-section {
    /*background-image: repeating-linear-gradient( 168deg, #e7dac7, #f5f5f5 10px, #e0e0e0 10px, #e0e0e0 20px );*/

    background-repeat: repeat;
    background-position: top left;
    background-size: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 40px 15px;
    background-size: cover;
    background-position: center;
}

.form-container {
    width: 100%;
    max-width: 700px;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

    /* Form elements */
    .form-container h2 {
        text-align: center;
        margin-bottom: 25px;
        color: #003366;
    }

/* Form Groups */
.form-group {
    margin-bottom: 20px;
}

/* Labels */
.form-container label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #cd0e58;
}

/* Checkbox */
.checkbox label {
    font-size: 0.9em;
    color: #444;
}

.checkbox input[type="checkbox"] {
    margin-right: 8px;
    opacity: 1;
}

.form-actions {
    text-align: center;
    margin-top: 30px;
}
/* Button */
.btn-primary {
    padding: 12px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    text-align: center;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.3s;
}

    .btn-primary:hover {
        background: #0056b3;
    }

/* Responsive  */
@media (max-width: 600px) {
    .form-container {
        padding: 20px;
    }

    .form-actions {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
}

.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
}

.popup {
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 300px;
    text-align: center;
}

    .popup input {
        width: 90%;
        padding: 8px;
        margin: 10px 0;
    }

.popup-buttons {
    display: flex;
    justify-content: space-between;
}

.otp-boxes {
    display: none;
    margin-top: 10px;
}

    .otp-boxes input {
        width: 40px;
        padding: 8px;
        margin: 0 5px;
        text-align: center;
    }

 /*   styles added content 22-07-25*/
.category-title {
    font-weight: 600;
    color: #3a0d0d;
    margin-bottom: 4px;
}
.category-card {
    margin-bottom: 20px;
    text-align: center;
}

.category-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.category-card img {
    width: 80%;
    border-radius: 16px;
    object-fit: cover;
    max-width: 100%;
}

.category-label {
    margin-top: 8px;
    font-weight: 700;
    font-size: 1rem;
    color: #333;
    text-align: center;
}
.zoom-card-effect {
    transition: transform 0.3s ease;
    overflow: hidden;
}

    .zoom-card-effect:hover {
        transform: scale(1.1);
    }


a.badge {
    font-size: 20px;
    border-radius: 5px;
    border: 1px #552613;
    border-style: dashed;
    font-weight: normal;
}
.preferences {
    cursor: pointer;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 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;
    30px;
}

.pref-row {
    align-items: flex-start;
}
@media (max-width: 768px) {
  

    .card-title {
        font-size: 1rem;
    }

    .card-text {
        font-size: 0.9rem;
    }

    .qty-wrapper label {
        font-size: 0.85rem;
    }

    .input-group-sm > .btn,
    .input-group-sm > .form-control {
        font-size: 0.75rem;
        padding: 4px 6px;
    }

    .item-count {
        max-width: 40px;
    }

    .btn-sm {
        font-size: 0.75rem;
        padding: 5px 10px;
    }

    /*	.gallery-frame {
		height: 100%;
	}*/

    .col-6 {
        padding-left: 5px;
        padding-right: 5px;
    }
}

.btn, .btn-outline-success {
    /*color: #552613 !important;
	background-color: white;*/
    border-color: #552613;
}

    .btn-outline-success:hover {
        color: #552613 !important;
        background-color: white;
        border-color: #552613;
    }

@media (max-width: 576px) {
    .back-to-top {
        width: 36px;
        height: 44px;
        font-size: 14px;
        right: 20px;
        bottom: 80px;
    }
}

.footer-icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
}


.footer-icon-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #552613;
    border-radius: 50%;
    color: white;
    font-size: 20px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}


    .footer-icon-link:hover {
        background-color: #401c10;
        transform: scale(1.1);
    }

/* Make the icons responsive on smaller screens */
@media (max-width: 576px) {
    .footer-icon-link {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

.custom-cart-item {
    flex: 1;
    text-align: center;
}

.custom-cart-link {
    flex-direction: column !important; /* Changed from row */
    font-size: 14px;
    font-weight: 300;
    align-items: center;
}

    .custom-cart-link i {
        font-size: 18px;
    }

    .custom-cart-link span {
        font-size: 13px;
    }

.count-size {
    font-size: 14px;
}
.custom-marquee {
    background-color: #bd9176;
    color: white;
    font-size: 18px;
}
.style-text {
    background-color: #bd9176;
    color: white;
    padding: 13px;
    margin: 20px 20px;
    font-size:18px;
}

.faqt-item {
    background-color: #e3c29f;
}

@media (min-width: 768px) {
    .faqt {
        margin-top: -62px;
    }
}

/* On smaller screens, no margin to avoid overlap */
@media (max-width: 767.98px) {
    .faqt {
        margin-top: 0;
    }
}

.tailorit-testimonials {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    padding: 1.5rem 1rem;
    max-width: 100%;
    margin: 0 auto;
}

/* Each testimonial card */
.tailorit-testimonial-card {
    background: #e4d7c4;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    padding: 1rem 1.5rem;
    flex: 1 1 280px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease;
}

    .tailorit-testimonial-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }

/* Quote text */
.tailorit-quote {
    font-style: italic;
    font-weight: 500;
    color: #444;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

/* Author text */
.tailorit-author {
    font-weight: 700;
    color: #222;
    text-align: right;
    font-size: 0.9rem;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .tailorit-testimonials {
        flex-direction: column;
        padding: 1rem 0.5rem;
    }

    .tailorit-testimonial-card {
        max-width: 100%;
        flex: 1 1 auto;
        padding: 1rem 1.2rem;
    }
}
#mainNavbar {
    position: relative;
    width: 100%;
    transition: all 0.5s ease-in-out;
    z-index: 1000;
}

@keyframes bounceInTop {
    0% {
        transform: translateY(-100%);
    }

    60% {
        transform: translateY(10%);
    }

    80% {
        transform: translateY(-5%);
    }

    100% {
        transform: translateY(0);
    }
}

#mainNavbar.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    animation: bounceInTop 0.6s ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Optional shadow for effect */
}