@import url('https://fonts.googleapis.com/css2?family=Allura&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');


   body {
       font-family: "Montserrat", sans-serif;
       color: #00000;
   }

   a {
       cursor: pointer;
       text-decoration: none;
   }

   header {
       background-color: #F5F1E8;
       padding: 1rem;
   }

   nav {
       width: 100%;
       max-width: 1440px;
       margin: auto;

   }

   .logo {
       width: 250px;
   }

   a.nav-link {
       font-size: 18px;
       color: #28282B;
   }

   .btn-red {
       border-radius: 0;
       font-weight: 400;
       font-size: 20px;
       text-decoration: none;
       padding: 0.5rem 2.5rem;
       width: fit-content;
       background-color: #9B111E;
       color: white;
   }

   .btn-red:hover {
       background-color: grey;
       color: white;
   }

   .btn-off {
       border-radius: 0;
       font-weight: 400;
       font-size: 20px;
       text-decoration: none;
       padding: 0.5rem 1rem;
       width: fit-content;
       background-color: #F5F1E8;
       color: #9B111E;
       border: 1px solid #9B111E;
   }

   .btn-off:hover {
       background-color: lightgray;
       color: #9B111E;
       border: 1px solid #9B111E;
   }

   footer {
       background: #28282B;
       padding: 4rem 5rem;

   }

   footer .container {
       max-width: 950px !important;
       padding: 0;

   }

   .f-logo {
       width: 85%;
       max-width: 500px;
   }

   .f-links a {
       text-decoration: none;
       color: #F5F1E8 !important;
       font-weight: 400;
       font-size: 18px;

   }

   .f-links a.dropdown-item {
       color: black !important;
   }

   .f-links a.underline {
       border-bottom: 1.5px solid #F5F1E8;
       width: fit-content;

   }

   .f-copy {
       color: #F5F1E8;
       font-size: 14px;
       font-weight: 300;
   }

   .term-links a {
       font-size: 14px;
       font-weight: 300;
       color: #F5F1E8;
       text-decoration: underline;
   }

   footer hr {
       margin: 10px 0 15px 0;
       opacity: 1;
       border-top: 0.05rem solid #eae0c857;
       width: 100%;
   }

   @media (max-width:992px) {}

   @media (max-width:768px) {
       footer {
           padding: 2rem;
       }
       
   }

   @media (max-width:500px) {
       .btn-red {
           padding: 0.3rem 0.5rem;
       }
   }

   /* Show dropdown on hover */
   .nav-item.dropdown:hover .dropdown-menu {
       display: block;
   }

   .nav-item.dropdown:hover .nav-link {
       color: inherit;
   }

   /* Make all slider slides equal height */
   .blogSlider .swiper-slide {
       height: auto;
       display: flex;
   }

   /* Force card to stretch full height */
   .blogSlider .card {
       height: 100%;
       display: flex;
       flex-direction: column;
   }

   /* Content area flexible */
   .blogSlider .content {
       flex-grow: 1;
       display: flex;
       flex-direction: column;
   }

   /* Keep Read More button at bottom */
   .blogSlider .content .readmore {
       margin-top: auto;
   }

   /* Blog Category Buttons */
   .blog-filter-btn {
       margin: 0 5px 10px;
       text-decoration: none;
       padding: 0.5rem 2.5rem;
       font-weight: 400;
       font-size: 20px;
       border-radius: 0px;
       background-color: #fff;
       border: none;
       color: #212529;
       transition: 0.3s ease;
       width: fit-content;
       border: 1px solid #212529;
       font-family: "Montserrat", sans-serif;
       line-height: 1.5;
   }

   .blog-filter-btn:hover,
   .blog-filter-btn.active {
       background-color: #9B111E;
       /* slightly darker shade for hover/active */
       color: #fff;
       border: 1px solid #9B111E;
   }

   .blog-filter-btn:focus {
       box-shadow: none;
   }

   .dropdown-item.active,
   .dropdown-item:active {
       background-color: #9B111E;
   }

   .blogSlider .content p {
       min-height: 72px;
       max-height: 72px;
       overflow: hidden;
   }

   .card .card-footer {
       padding: 10px 0 0 0;
       margin-top: auto;
       background-color: #fff;
       border-top: none;
   }

   .card .post-category {
       font-size: 16px;
       font-weight: 500;
       text-transform: uppercase;
       color: #9B111E;
       font-family: "Montserrat";
   }

   .card .post-category:hover {
       text-decoration: underline;
   }

   .card .content a h3 {
       color: #212529;
   }

   .card .content a h3:hover {
       color: #9B111E;
   }

   .blogSlider .image img {
       width: 100%;
       height: 260px;
       object-fit: cover;
   }

   .w-lg-50 {
       width: 50%;
   }

   .color-red {
       color: #9B111E;
   }

   .color-off {
       color: #EAE0C8;
   }

   .hero {
       position: relative;
       background-image: url(./img/sec11bg.png);
       background-size: cover;
       background-position: top;
   }
   .hero::before {
       content: "";
       position: absolute;
       z-index: 0;
       inset: 0;
       background: #EAE0C8E5;
       pointer-events: none;
   }


   .search-box {
       border: 1px solid white;
       background-color: rgb(255, 255, 255, 0.2);

   }

   .hero-tagline {
       font-family: "Allura", cursive;

       font-weight: 400;
       font-style: Regular;
       font-size: 60px;
       color: #9B111E;
       line-height: 140%;
       letter-spacing: 4%;

   }

   /*.hero-title {*/

   /*    font-family: "Playfair Display", serif;*/
   /*    font-weight: 400;*/
   /*    font-style: Roman;*/
   /*    font-size: 40px;*/

   /*    line-height: 100%;*/
   /*    letter-spacing: 0%;*/

   /*}*/

   .hero-text {
       margin: 2rem 0;
       font-family: Montserrat;
       font-weight: 400;
       font-style: Regular;
       font-size: 24px;

       line-height: 140%;
       letter-spacing: 0%;

   }

   .steps-section {
       padding: 5rem;
   }

   .step-box {
       position: relative;
       width: 31%;


       border: 1px solid #EAE0C8;
       margin-top: 7rem;
       padding: 0 0 1rem 0;
   }

   .step-icon {
       height: 120px;
       width: 120px;
       position: relative;
       margin-top: -60px;
       margin-bottom: 2rem;
       left: 50%;
       transform: translateX(-50%);
   }

   .step-title {
       font-family: "Playfair Display", serif;
       color: #9B111E;
       font-weight: 400;
       font-style: Roman;
       font-size: 32px;
       leading-trim: NONE;
       line-height: 100%;
       letter-spacing: 0%;
       text-align: center;

   }

   .step-text {
       margin-top: 1rem;
       font-weight: 400;
       font-style: Regular;
       font-size: 20px;
       leading-trim: NONE;
       line-height: 140%;
       letter-spacing: 0%;
       text-align: center;

   }

   .bendArrow {

       position: absolute;
       transform: translate(-50%, -50%);
       left: 104%;
       top: 50%;

   }

   .section-tagline {
       font-family: "Allura", cursive;
       color: #9B111E;
       font-weight: 400;
       font-style: bold;
       font-size: 53px;
       leading-trim: NONE;
       line-height: 140%;
       letter-spacing: 0%;


   }

   .section-title {
       margin-top: 1rem;
       font-family: "Playfair Display", serif;
       font-weight: 400;
       font-style: Roman;
       font-size: 56px;
       leading-trim: NONE;
       line-height: 130%;
       letter-spacing: 0%;

       text-transform: capitalize;

   }

   .section-subtext {
       font-family: Montserrat;
       font-weight: 400;
       font-style: Regular;
       font-size: 20px;
       leading-trim: NONE;
       line-height: 160%;
       letter-spacing: 0%;

       margin: 2rem 0 1rem 0;
   }

   section.blog-sec-con {
       background-image:
           linear-gradient(rgba(245, 241, 232, 0.898), rgba(245, 241, 232, 0.898)),
           url('./img/sec2bg.jpg');
       background-size: cover;
       background-position: center;

       background-size: cover;
       background-position: top;
   }

   .mission-section {
       background-image:
           linear-gradient(rgba(245, 241, 232, 0.898), rgba(245, 241, 232, 0.898)),
           url('./img/sec2bg.jpg');
       background-size: cover;
       background-position: center;

       background-size: cover;
       background-position: top;
       padding: 7rem 5rem 10rem 5rem;
   }

   .mission-text {
       padding: 5rem 3rem 0 0;
   }

   .mission-images {
       position: relative;
   }

   .img-back img {
       width: 78%;
       object-position: 20px 10px;
       aspect-ratio: 1/0.85;
       object-fit: cover;
       object-position: center;
       margin: 0 0 0 auto;
       display: block;
       object-position: 80px -100px;
   }

   .img-front img {
       position: absolute;
       width: 70%;
       aspect-ratio: 1/0.9;
       top: 35%;
       object-fit: contain;
   }

   .section-join {
       padding: 5rem;
   }

   .sec-join-img {
       width: 45%;
   }

   .sec-join-img img {
       object-fit: cover;
       aspect-ratio: 1/0.85;
       object-position: 0 -117px;
   }

   .sec-join-info {
       width: 55%;
   }

   .sec-blog {
       background-image:
           linear-gradient(rgba(245, 241, 232, 0.898), rgba(245, 241, 232, 0.898)),
           url('./img/sec2bg.jpg');
       background-size: cover;
       background-position: center;

       background-size: cover;
       background-position: top;
       padding: 5rem 4rem;
   }

   .blogSlider .swiper-slide,
   .reviewSlider .swiper-slide {
       display: flex;
       justify-content: center;
   }

   .card {
       margin: auto;
       width: 80%;
       background: #fff;
       /* border-radius: 10px; */
       overflow: hidden;
       box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
       border-radius: 0;
   }

   .card .image {
       position: relative;
   }

   .card .image img {
       width: 100%;
       height: 230px;
       object-fit: cover;
   }

   .card .date {
       font-family: "Playfair Display", serif;
       position: absolute;
       bottom: -20px;
       right: 15px;
       background: #9B111E;
       color: #fff;
       padding: 10px 12px;
       text-align: center;
       font-size: 18px;
       line-height: 1;

   }

   .card .date span {
       display: block;
       font-size: 12px;
       opacity: .9;
   }

   .card .content {
       padding: 20px;
   }

   .card h3 {
       font-family: "Playfair Display", serif;

       font-weight: 400;
       font-style: Roman;
       font-size: 32px;
       leading-trim: NONE;
       line-height: 120%;
       letter-spacing: 0%;
       text-transform: capitalize;
       padding-bottom: 10px;
       border-bottom: 1px solid #EAE0C8;

   }

   .card h3 a {
       color: #212529;
   }

   .card h3 a:hover {
       color: #9B111E;
   }

   .card p {
       font-size: 20px;
       line-height: 20px;
       color: #666;
       margin-bottom: 15px;
   }

   .readmore {
       font-family: "Playfair Display", serif;
       color: #9B111E;
       font-size: 18px;
       text-decoration: none;
       font-weight: 600;
   }

   .swiper-button-next,
   .swiper-button-prev,
   .slick-prev,
   .slick-next {

       width: 35px;
       height: 35px;

       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .blogSlider .swiper-button-next,
   .blogSlider .swiper-button-prev {
       color: #9B111E;
       border: 1px solid #9B111E;
   }

   .swiper-button-next::after,
   .swiper-button-prev::after {
       font-size: 15px;
   }

   .sec-review {
       padding: 5rem 4rem;
       background-image:
           linear-gradient(#28282BB2, #28282BB2),
           url('./img/sec3bg.jpg');
       background-size: cover;
       background-position: center;

       background-size: cover;
       background-position: top;
   }

   .reviewSlider .swiper-button-next,
   .reviewSlider .swiper-button-prev,
   .slick-prev,
   .slick-next {
       color: #EAE0C8;
       border: 1px solid #EAE0C8;
   }

   .reviewSlider div.card {
       background: transparent;
       width: 82%;
   }

   .r-box {
       margin-top: 5rem;
       padding: 5px 15px;
       background: #F5F1E8;
   }

   .r-box div img {
       border-radius: 200px;
   }

   .r-box h3 {
       color: #9B111E;
       font-family: "Playfair Display", serif;
       border: 0;
       padding: 0;
       font-weight: 400;
       font-style: Roman;
       font-size: 32px;
       leading-trim: NONE;
       line-height: 100%;
       letter-spacing: 0%;
       text-align: center;
       text-transform: capitalize;

   }

   .rating {
       color: #D6B23D;
       text-align: center;
       font-size: 30px;
   }

   .r-box p {
       color: #28282B;
       font-weight: 400;
       font-style: Regular;
       font-size: 18px;
       leading-trim: NONE;
       line-height: 20px;
       letter-spacing: 0%;
       text-align: center;

   }
   .reviews-box {
       background: #fff;
       border-radius: 8px;
       padding: 20px;
   }
   @media (max-width:992px) {
       .step-box {
           width: 90%;
           margin: 5rem auto 0 auto;
       }

       .bendArrow {
           display: none;
       }

       .w-lg-50 {
           width: 90%;
           margin: auto;
       }

       .mission-text {
           padding: 0;
           margin-bottom: 5rem;
       }

       .section-join {
           padding: 2rem;
       }

       .sec-join-img {
           width: 90%;
       }

       .sec-join-info {
           width: 90%;
       }

   }
@media (max-width:1200px) {
           .reviews-box {

    padding: 0;
    margin: 10px 0 15px 0;
}
}

   @media (max-width:768px) {

       .btn-off,.btn-red {
  
    font-size: 14px;
    padding: 0.5rem;

}
          .hero {
    
       background-position: right;
   }
       .img-back img {
           width: 60%;
           object-position: 20px 10px;
           aspect-ratio: unset;
           object-fit: contain;
           object-position: center;
           margin: 0 0 0 auto;
           display: block;
           /* object-position: 80px -100px; */
           top: -58px;
           position: relative;
       }

       .img-front img {
           position: absolute;
           width: 60%;
           aspect-ratio: unset;
           top: 29%;
           object-fit: contain;
           left: 0;
       }

       .hero-content {

           padding: 3rem 0;
           margin: auto;

       }

       .steps-section {
           padding: 2rem 0;
       }

       .mission-section {
           padding: 2rem 0 6rem 0;
       }

       .section-join {
           padding: 2rem 0;
       }

       .card {
           width: 85%;
       }

       .reviewSlider div.card {

           width: 80%;
       }

       .sec-blog,
       .sec-review {
           padding: 2rem 0;
       }
   }

   /* about page styles */
   .color-red {
       color: #9B111E;
   }

   .color-off {
       color: #EAE0C8;
   }




   .search-box {
       border: 1px solid white;
       background-color: rgb(255, 255, 255, 0.2);
   }

   .section-tagline {
       font-family: "Allura", cursive;
       color: #9B111E;
       font-weight: 400;
       font-style: bold;
       font-size: 53px;
       leading-trim: NONE;
       line-height: 140%;
       letter-spacing: 0%;


   }

   .sec-1 {


       padding: 5rem;
   }


   .s-sub {
       font-family: "Playfair Display", serif;
       font-weight: 400;
       font-style: Roman;
       font-size: 56px;
       leading-trim: NONE;
       line-height: 130%;
       letter-spacing: 0%;
       text-align: center;
       text-transform: capitalize;
       margin-bottom: 2rem;

   }


   .sec-2 {
       background-image:
           linear-gradient(rgba(245, 241, 232, 0.898), rgba(245, 241, 232, 0.898)),
           url('./img/sec2bg.jpg');
       background-size: cover;
       background-position: center;

       padding: 5rem;
   }

   /* Text Styling */
   .about-text p {
       font-size: 18px;
       line-height: 23px;
       text-align: center;
       margin-bottom: 25px;
       font-weight: 300;
   }



   /* Abstract Shapes Container */
   .shapes-container {
       position: relative;
       height: 720px;
       /* Fixed height for the shapes area on desktop */
       width: 100%;
   }

   /* The Shapes - recreated using CSS divs */
   .shape {
       position: absolute;

   }

   .shape img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   .shape-1 {

       /* Top Left Large Box */
       width: 300px;
       height: 320px;
       top: 0;
       left: 20px;

       z-index: 1;
   }

   .shape-2 {

       /* Middle Right Box */
       width: 330px;
       height: 290px;
       top: 180px;
       left: 220px;

       z-index: 2;
   }

   .shape-3 {


       /* Bottom Left Box */
       width: 340px;
       height: 280px;
       top: 380px;
       left: 80px;

       z-index: 3;
   }



   .stacy-title {
       font-family: "Playfair Display", serif;
       font-size: 3.5rem;
       margin-bottom: 30px;
       color: #1a1a1a;
       font-weight: 400;
   }


   .stacy-intro {
       font-size: 22px;
       margin-bottom: 25px;
       color: #333;
       font-weight: 400;
   }

   .stacy-text p {
       font-size: 18px;
       line-height: 23px;

       margin-bottom: 25px;
       font-weight: 300;
   }

   /* Image Column Styling */
   .image-container {
       width: 100%;
       height: 100%;
       min-height: 500px;
       position: relative;
       /* This creates the visual placeholder for the photo */
       background-color: #e0e0e0;
       overflow: hidden;
   }

   .image-container img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }

   @media (max-width: 991px) {
       .shape-1 {
           width: 40%;
           height: 363px;
           top: 0;
           left: 20px;
           z-index: 1;
       }

       .shape-2 {
           width: 45%;
           aspect-ratio: 1/0.9;
           top: 180px;
           left: 27%;
           z-index: 2;
           height: auto;
       }

       .shape-3 {
           width: 45%;
           height: 290px;
           top: 380px;
           left: auto;
           z-index: 3;
           right: 0;
       }


       .about-content-col {
           text-align: left;
       }

       .image-container {
           min-height: 400px;
       }

       .stacy-wrapper {
           padding: 40px 20px;
       }
   }

   @media (max-width:768px) {

       .sec-1,
       .sec-2 {
           padding: 2rem;
       }

   }

   @media (max-width: 700px) {
       .shape-1 {
           width: 50%;

       }

       .shape-2 {
           width: 55%;
           top: 212px;
           left: 22%;

       }

       .shape-3 {
           width: 50%;
       }
   }

   @media (max-width: 520px) {
       .shape-1 {
           width: 60%;

       }

       .shape-2 {
           width: 65%;

       }

       .shape-3 {
           width: 57%;
       }
   }

   @media (max-width: 450px) {
       .shape-1 {
           width: 70%;

       }

       .shape-2 {
           width: 74%;
           left: 15%;
           top: 220px;
       }

       .shape-3 {
           width: 67%;
       }
   }

   /* customer login */
   .color-red {
       color: #9B111E;
   }

   .color-off {
       color: #EAE0C8;
   }


   .sec-1 {
       background-image:
           linear-gradient(rgba(245, 241, 232, 0.898), rgba(245, 241, 232, 0.898)),
           url('./img/sec2bg.jpg');
       background-size: cover;
       background-position: center;

       padding: 5rem;
   }

   .customer-signIn h3 {
       font-family: "Playfair Display", serif;
       font-size: 48px;
   }

   .customer-signIn input[type="text"],
   .customer-signIn input[type="password"],
   .customer-signIn input[type="email"],

   .customer-signIn select {

       background-color: rgba(255, 255, 255, 0.502);
       border: 1px solid #28282B;
       border-radius: 0;
       height: 50px;

   }

   .customer-signIn input[type="checkbox"] {
       background-color: rgba(255, 255, 255, 0.502);
       border: 1px solid #28282B;
       border-radius: 0;
       height: 40px;
       width: 40px;
   }

   .customer-signIn .form-check {
       display: flex;
       align-items: center;
       gap: 10px;

   }


   @media (max-width:992px) {}


   @media (max-width:768px) {

       .sec-1 {
           padding: 2rem;
       }

   }

   /* partner login */

   .color-red {
       color: #9B111E;
   }

   .color-off {
       color: #EAE0C8;
   }


   .sec-1 {
       background-image:
           linear-gradient(rgba(245, 241, 232, 0.898), rgba(245, 241, 232, 0.898)),
           url('./img/sec2bg.jpg');
       background-size: cover;
       background-position: center;

       padding: 5rem;
   }

   .customer-signIn h3 {
       font-family: "Playfair Display", serif;
       font-size: 48px;
   }

   .customer-signIn input[type="text"],
   .customer-signIn input[type="password"],
   .customer-signIn input[type="email"],

   .customer-signIn select {

       background-color: rgba(255, 255, 255, 0.502);
       border: 1px solid #28282B;
       border-radius: 0;
       height: 50px;

   }

   .customer-signIn input[type="checkbox"] {
       background-color: rgba(255, 255, 255, 0.502);
       border: 1px solid #28282B;
       border-radius: 0;
       height: 40px;
       width: 40px;
   }

   .customer-signIn .form-check {
       display: flex;
       align-items: center;
       gap: 10px;

   }


   @media (max-width:992px) {}


   @media (max-width:768px) {

       .sec-1 {
           padding: 2rem;
       }

   }

   /* customer signUp */
   .color-red {
       color: #9B111E;
   }

   .color-off {
       color: #EAE0C8;
   }


   .sec-1 {
       background-image:
           linear-gradient(rgba(245, 241, 232, 0.898), rgba(245, 241, 232, 0.898)),
           url('./img/sec2bg.jpg');
       background-size: cover;
       background-position: center;

       padding: 5rem;
   }

   .customer-signUp input[type="text"],
   .customer-signUp input[type="password"],
   .customer-signUp input[type="date"],
   .customer-signUp input[type="email"],

   .customer-signUp select {

       background-color: rgba(255, 255, 255, 0.502);
       border: 1px solid #28282B;
       border-radius: 0;
       height: 50px;

   }

   .customer-signUp input[type="checkbox"] {
       background-color: rgba(255, 255, 255, 0.502);
       border: 1px solid #28282B;
       border-radius: 0;
       height: 40px;
       width: 40px;
   }

   .customer-signUp .form-check {
       display: flex;
       align-items: center;
       gap: 10px;

   }


   @media (max-width:992px) {}


   @media (max-width:768px) {

       .sec-1 {
           padding: 2rem;
       }

   }

   /* partner signUp */
   .color-red {
       color: #9B111E;
   }

   .color-off {
       color: #EAE0C8;
   }


   .sec-1 {
       background: white;
       padding: 5rem;
   }


   @media (max-width:992px) {}


   @media (max-width:768px) {

       .sec-1 {
           padding: 2rem;
       }

   }

   /* Scoped Styles - No :root or body modifications */
   .photographer-signup-container {

       color: #333;
       background-color: #fff;
       /* Ensure white background if placed on colored section */
       padding: 40px 20px;
       max-width: 1400px;
       margin: 0 auto;
   }

   /* Typography */
   .photographer-signup-container h1.main-title {
       font-family: "Playfair Display", serif;
       font-size: 3rem;
       text-align: center;
       margin-bottom: 60px;
       font-weight: 400;
       color: #1a1a1a;
   }

   .photographer-signup-container h2.section-title {
       font-family: "Playfair Display", serif;
       font-size: 1.5rem;
       margin-bottom: 25px;
       font-weight: 400;
       color: #1a1a1a;
   }

   /* Form Controls */
   .photographer-signup-container .form-label {
       font-size: 0.9rem;
       color: #666;
       margin-bottom: 8px;
   }

   .photographer-signup-container .form-control,
   .photographer-signup-container .form-select {
       border-radius: 0;
       /* Square look */
       border: 1px solid #888;
       padding: 10px 15px;
       font-size: 0.95rem;
       color: #333;
       background-color: transparent;
   }

   .photographer-signup-container .form-control:focus,
   .photographer-signup-container .form-select:focus {
       box-shadow: none;
       border-color: #000;
       background-color: #fff;
   }

   .photographer-signup-container textarea.form-control {
       resize: none;
   }

   /* Placeholder color match */
   .photographer-signup-container ::placeholder {
       color: #666;
       opacity: 1;
   }

   /* Upload Box */
   .photographer-signup-container .upload-box {
       border: 1px solid #888;
       height: 100%;

       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       text-align: center;
       cursor: pointer;
       position: relative;
       background-color: #f9f9f9;
       /* Slight bg for contrast area */
   }

   .photographer-signup-container .upload-box-inner {
       border: 1px solid #ccc;
       background: #fff;
       padding: 10px 20px;
       font-size: 0.8rem;
       margin-bottom: 5px;
   }

   .photographer-signup-container .upload-text {
       font-size: 0.75rem;
       color: #666;
   }

   /* Custom Checkboxes (Large Squares) */
   .photographer-signup-container .custom-checkbox-wrapper {
       display: flex;
       align-items: center;
       margin-bottom: 15px;
   }

   .photographer-signup-container .custom-checkbox {
       width: 24px;
       height: 24px;
       border: 1px solid #888;
       margin-right: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       flex-shrink: 0;
   }

   .photographer-signup-container .custom-checkbox input {
       display: none;
       /* Hide actual checkbox */
   }

   .photographer-signup-container .custom-checkbox.checked::after {
       content: '\2713';
       /* Checkmark */
       font-size: 18px;
       color: #000;
   }

   .photographer-signup-container .checkbox-label {
       font-size: 0.95rem;
       color: #444;
       font-weight: 300;
   }

   /* Dividers */
   .photographer-signup-container hr {
       border-top: 1px solid #ccc;
       opacity: 1;
       margin: 50px 0;
   }



   .photographer-signup-container .btn-plus {
       border: 1px solid #333;
       background: transparent;
       width: 32px;
       height: 32px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.2rem;
       color: #333;
       padding: 0;
       margin-left: auto;
       /* Push to right */
   }

   /* Layout Helpers */
   .photographer-signup-container .gap-y-3>* {
       margin-bottom: 1rem;
   }

   /* Specific alignment for the upload section text */
   .photographer-signup-container .upload-label {
       margin-bottom: 10px;
       display: block;
       text-align: center;
       width: 100%;
       color: #333;
   }

   @media (max-width:992px) {
       .photographer-signup-container .upload-box {
           min-height: 140px;
       }
   }

   .playfair-title {
       font-family: 'Playfair Display', serif;
       font-weight: 500;
   }

   h2.main-title {
       font-size: 2.5rem;
       margin-bottom: 40px;
   }

   h4.section-title {
       font-size: 2rem;
       margin-bottom: 20px;
   }

   /* Header Icons */
   .top-icons {
       display: flex;
       justify-content: flex-end;
       gap: 15px;
       padding: 20px;
   }

   /* Profile Section */
   .profile-img-container {
       width: 250px;
       height: 250px;
       border-radius: 50%;
       overflow: hidden;
       margin: 0 auto;
   }

   .profile-img-container img {
       width: 250px;
       height: 250px;
       object-fit: cover;
   }

   .info-label {
       font-weight: 400;
       color: #444;
       margin-bottom: 15px;
       display: block;
   }

   /* Divider */
   .section-divider {
       border-top: 1px solid #ddd;
       margin: 60px 0;
   }

   /* Table Styling */
   .custom-table {
       width: 100%;
       border-collapse: collapse;
       font-size: 0.85rem;
       border: 1px solid #dee2e6;
   }

   .custom-table thead th {
       background-color: #333;
       color: white;
       font-weight: normal;
       padding: 12px;
       text-align: left;
       border: 1px solid #444;
   }

   .custom-table tbody td {
       padding: 12px;
       border: 1px solid #dee2e6;
       vertical-align: middle;
   }

   .custom-table tbody tr:nth-child(even) {
       background-color: #f2f2f2;
   }

   /* Buttons */
   .btn-custom-red {
       background-color: #a51c24;
       color: white;
       border: none;
       padding: 5px 12px;
       font-size: 0.8rem;
       text-decoration: none;
       display: inline-block;
   }

   .btn-custom-red:hover {
       background-color: #8a171e;
       color: white;
   }

   /* Reviews & Favorites Boxes */
   .content-box {
       border: 1px solid #999;
       padding: 20px;
       min-height: 320px;
   }

   .review-item {
       border-bottom: 1px solid #333;
       padding-bottom: 10px;
       margin-bottom: 15px;
   }

   .review-meta {
       font-size: 0.75rem;
       margin-bottom: 5px;
   }

   .stars {
       color: #f1c40f;
       font-size: 1.1rem;
   }

   .favorite-link {
       display: block;
       font-size: 0.8rem;
       color: #333;
       text-decoration: underline;
       margin-bottom: 15px;
   }

   .icon-small {
       width: 18px;
       height: 18px;
       vertical-align: middle;
   }

   /* Container for each checkbox item */
   .form-check {
       display: flex;
       align-items: center;

       margin-bottom: 15px;
   }

   /* The actual checkbox square */
   .form-check-input {
       width: 25px;
       height: 25px;
       border: 1px solid #ccc;
       /* Thin gray border from image */
       border-radius: 0;
       /* Force square corners */
       background-color: #fff;
       cursor: pointer;
       margin-top: 0;
       margin-right: 15px;
       /* Space between box and text */
       flex-shrink: 0;
       -webkit-appearance: none;
       /* Reset default browser styling */
       appearance: none;
       transition: all 0.2s ease-in-out;
   }

   /* Checkmark appearance when clicked */
   .form-check-input:checked {
       background-color: #000;
       /* Or your preferred brand color */
       border-color: #000;
       position: relative;
   }

   .form-check-input:checked::after {
       content: '\f00c';
       /* FontAwesome checkmark */
       font-family: 'Font Awesome 6 Free';
       font-weight: 900;
       color: #fff;
       font-size: 14px;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }

   /* Label text styling */
   .form-check-label {
       font-size: 0.95rem;
       color: #666;
       /* Muted gray text like the screenshot */
       cursor: pointer;
       font-weight: 300;
       user-select: none;
   }

   /* Hover effect */
   .form-check-input:hover {
       border-color: #888;
   }



   .see-all-container {
       margin-top: 16px;
       text-align: left;
       /* or center */
   }

   .color-red {
       color: #9B111E;
   }

   .color-off {
       color: #EAE0C8;
   }

   .color-black {
       color: #28282B;
   }

   .hero-p-p-profile {
       background-image: url(./assets/img/sec2bg.jpg);
   }


   .hero::before {
       content: "";
       position: absolute;
       z-index: 0;
       inset: 0;
       background: #EAE0C8E5;
       pointer-events: none;
   }

   form.flex-column {
       flex-direction: row !important;
   }

   .hero-content {
       position: relative;
       z-index: 1;
       width: 100%;
       max-width: 900px;
       margin: auto;
       padding: 10rem 2rem;
   }

   .btn-check:checked+.btn,
   .btn.active,
   .btn.show,
   .btn:first-child:active,
   :not(.btn-check)+.btn:active {
       color: black;
       background-color: #F5F1E8 !important;
       border-color: var(--bs-btn-active-border-color);
   }


   .hero-title {
       font-family: "Playfair Display", serif;
       font-weight: 400;
       margin-bottom: 1.5rem;
       font-style: Roman;
       font-size: 80px;
       line-height: 100%;
       letter-spacing: 0%;
       text-align: center;


   }

   .hero-subtext {
       font-weight: 500;
       font-style: Medium;
       font-size: 24px;
       line-height: 140%;
       letter-spacing: 0%;
       text-align: center;


   }

   .sec-profile {
       padding: 5rem;
   }

   .profile {
       background: #F5F1E8;
   }

   .photographer {
       height: 150px;
       width: 150px;
       object-fit: cover;
       border-radius: 200px;
   }

   .profile h3 {
       font-family: "Playfair Display", serif;
       font-weight: 400;
       font-style: Roman;
       font-size: 32px;
       line-height: 100%;
       letter-spacing: 0%;
       text-align: center;

   }

   .p-location {

       font-weight: 500;
       font-style: Medium;
       font-size: 24px;
       line-height: 100%;
       letter-spacing: 0%;
       text-transform: capitalize;

   }

   .p-profile p {

       font-weight: 400;
       font-style: Regular;
       font-size: 20px;

       line-height: 140%;
       letter-spacing: 0%;
       text-align: center;

   }



   .reviews {
       border: 1px solid #EAE0C8;
   }

   .reviews h5 {
       font-family: "Playfair Display", serif;
       color: #9B111E;
       font-size: 32px;

   }

   .rating {
       color: #D6B23D;
       text-align: center;
       font-size: 25px;

   }

   /* Slider height auto */
   .swiper {

       width: 100%;
       padding-bottom: 40px;
   }

   .swiper-slide {}

   /* Custom pagination bullets */
   .swiper-pagination-bullet {
       width: 20px;
       height: 12px;
       background: #f3efe6;
       /* pale color */
       opacity: 1;
       border-radius: 999px;
       transition: all 0.3s ease;
   }

   .swiper-pagination-bullet-active {
       width: 35px;
       /* long pill shape */
       background: #8e0d18;
       /* red color */
   }

   .f-title {
       font-family: "Playfair Display", serif;
       /*color: #9B111E;*/
       color: #000 !important;
       font-weight: 400;
       font-style: Roman;
       font-size: 56px;
       leading-trim: NONE;
       line-height: 100%;
       letter-spacing: 0%;
       text-transform: capitalize;

   }

   .feature-images img {
       object-fit: cover;
       aspect-ratio: 1;
   }

   @media (min-width: 992px) {
       .equal-height {
           display: flex;
           align-items: stretch;
       }

       .equal-height>div {
           display: flex;
           flex-direction: column;
       }

       .equal-height .profile {
           flex: 1;
       }
   }

   @media (max-width:992px) {

       .sec-profile {
           padding: 3rem;
       }
   }


   @media (max-width:768px) {


       .sec-profile {
           padding: 2rem;
       }

       h1.hero-title {

           font-size: 50px;

       }


       .sec-title {

           font-size: 40px;

       }


   }

   /*----------basic profile------------*/


   .see-all-container {
       margin-top: 16px;
       text-align: left;
       /* or center */
   }



   .hero-p-p-profile {
       background-image: url(./assets/img/sec2bg.jpg);
   }


   .hero-title {
       font-family: "Playfair Display", serif;
       font-weight: 400;
       margin-bottom: 1.5rem;
       font-style: Roman;
       font-size: 80px;
       line-height: 100%;
       letter-spacing: 0%;
       text-align: center;


   }

   .hero-subtext {
       font-weight: 500;
       font-style: Medium;
       font-size: 24px;
       line-height: 140%;
       letter-spacing: 0%;
       text-align: center;


   }

   .sec-profile {
       padding: 5rem;
   }

   .profile {
       background: #F5F1E8;
   }
.page-hero{
        background-image: linear-gradient(rgba(245, 241, 232, 0.898), rgba(245, 241, 232, 0.898)), url(./img/sec2bg.jpg);
}
   .photographer {
       height: 150px;
       width: 150px;
       object-fit: cover;
       border-radius: 200px;
   }

   .profile h3 {
       font-family: "Playfair Display", serif;
       font-weight: 400;
       font-style: Roman;
       font-size: 32px;
       line-height: 100%;
       letter-spacing: 0%;
       text-align: center;

   }

   .p-location {

       font-weight: 500;
       font-style: Medium;
       font-size: 24px;
       line-height: 100%;
       letter-spacing: 0%;
       text-transform: capitalize;

   }

   .p-profile p {

       font-weight: 400;
       font-style: Regular;
       font-size: 20px;

       line-height: 140%;
       letter-spacing: 0%;
       text-align: center;

   }



   .reviews {
       border: 1px solid #EAE0C8;
   }

   .reviews h5 {
       font-family: "Playfair Display", serif;
       color: #9B111E;
       font-size: 32px;

   }

   .rating {
       color: #D6B23D;
       text-align: center;
       font-size: 25px;

   }

   /* Slider height auto */
   .swiper {

       width: 100%;
       padding-bottom: 40px;
   }

   .swiper-slide {}

   /* Custom pagination bullets */
   .swiper-pagination2 .swiper-pagination-bullet {
       width: 20px;
       height: 12px;
       background: #f3efe6;
       /* pale color */
       opacity: 1;
       border-radius: 999px;
       transition: all 0.3s ease;
   }

   .swiper-pagination2 .swiper-pagination-bullet-active {
       width: 35px;
       /* long pill shape */
       background: #8e0d18;
       /* red color */
   }

   .f-title {
       font-family: "Playfair Display", serif;
       color: #9B111E;
       font-weight: 400;
       font-style: Roman;
       font-size: 56px;
       leading-trim: NONE;
       line-height: 100%;
       letter-spacing: 0%;
       text-transform: capitalize;

   }

   .feature-images img {
       object-fit: cover;
       aspect-ratio: 1;
   }

   @media (min-width: 992px) {
       .equal-height {
           display: flex;
           align-items: stretch;
       }

       .equal-height>div {
           display: flex;
           flex-direction: column;
       }

       .equal-height .profile {
           flex: 1;
       }
   }

   @media (max-width:992px) {

       .sec-profile {
           padding: 3rem;
       }
   }


   @media (max-width:768px) {


       .sec-profile {
           padding: 2rem;
       }

       .hero-title {

           font-size: 46px;

       }


       .sec-title {

           font-size: 40px;

       }


   }

   /*----------Premium Profile-----------*/
 

   .see-all-container {
       margin-top: 16px;
       text-align: left;
       /* or center */
   }


   .color-red {
       color: #9B111E;
   }

   .color-off {
       color: #EAE0C8;
   }

   .color-black {
       color: #28282B;
   }

   .hero-p-p-profile {
       background-image: url(./assets/img/sec2bg.jpg);
   }

   .hero-title {
       font-family: "Playfair Display", serif;
       font-weight: 400;
       margin-bottom: 1.5rem;
       font-style: Roman;
       font-size: 80px;
       line-height: 100%;
       letter-spacing: 0%;
       text-align: center;


   }

   .hero-subtext {
       font-weight: 500;
       font-style: Medium;
       font-size: 24px;
       line-height: 140%;
       letter-spacing: 0%;
       text-align: center;


   }

   .sec-profile {
       padding: 5rem;
   }

   .profile {
       background: #F5F1E8;
   }

   .photographer {
       height: 150px;
       width: 150px;
       object-fit: cover;
       border-radius: 200px;
   }

   .profile h3 {
       font-family: "Playfair Display", serif;
       font-weight: 400;
       font-style: Roman;
       font-size: 32px;
       line-height: 100%;
       letter-spacing: 0%;
       text-align: center;

   }

   .p-location {

       font-weight: 500;
       font-style: Medium;
       font-size: 24px;
       line-height: 100%;
       letter-spacing: 0%;
       text-transform: capitalize;

   }

   .p-profile p {

       font-weight: 400;
       font-style: Regular;
       font-size: 20px;

       line-height: 140%;
       letter-spacing: 0%;
       text-align: center;

   }


   .reviews h5 {
       font-family: "Playfair Display", serif;
       color: #9B111E;
       font-size: 32px;

   }

   .rating {
       color: #D6B23D;
       text-align: center;
       font-size: 25px;

   }

   /* Slider height auto */
   .swiper {

       width: 100%;
       padding-bottom: 40px;
   }

   .swiper-slide {}

   /* Custom pagination bullets */
   .swiper-pagination-bullet {
       width: 20px;
       height: 12px;
       background: #f3efe6;
       /* pale color */
       opacity: 1;
       border-radius: 999px;
       transition: all 0.3s ease;
   }

   .swiper-pagination-bullet-active {
       width: 35px;
       /* long pill shape */
       background: #8e0d18;
       /* red color */
   }

   .f-title {
       font-family: "Playfair Display", serif;
       color: #9B111E;
       font-weight: 400;
       font-style: Roman;
       font-size: 56px;
       leading-trim: NONE;
       line-height: 100%;
       letter-spacing: 0%;
       text-transform: capitalize;

   }

   .feature-images img {
       object-fit: cover;
       aspect-ratio: 1;
   }

   @media (min-width: 992px) {
       .equal-height {
           display: flex;
           align-items: stretch;
       }

       .equal-height>div {
           display: flex;
           flex-direction: column;
       }

       .equal-height .profile {
           flex: 1;
       }
   }

   @media (max-width:992px) {

       .sec-profile {
           padding: 3rem;
       }
   }


   @media (max-width:768px) {
       .hero-content {
           padding: 10rem 1rem;
       }

       .sec-profile {
           padding: 2rem;
       }

       .hero-title {

           font-size: 46px;

       }


       .sec-title {

           font-size: 40px;

       }


   }

   /*---premium pro portfolio---*/
   /* Overlay Background */
   .img-popup-overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.8);
       display: none;
       justify-content: center;
       align-items: center;
       z-index: 9999;
   }

   /* Popup Image */
   .img-popup-overlay img {
       max-width: 90%;
       max-height: 90%;
       border-radius: 4px;
       box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
   }

   /* Close Button */
   .img-popup-close {
       position: absolute;
       top: 20px;
       right: 30px;
       font-size: 40px;
       color: #fff;
       cursor: pointer;
       font-weight: bold;
   }

   /* Masonry for the categories */
   .masonry-gallery {
       column-count: 4;
       column-gap: 1.5rem;
   }

   .masonry-item {
       break-inside: avoid;
       margin-bottom: 1.5rem;
       cursor: pointer;
   }

   .masonry-item img {
       width: 100%;

       display: block;
   }


   /* Responsive */
   @media (max-width: 992px) {
       .masonry-gallery {
           column-count: 2;
       }

       .overlay-masonry {
           column-count: 2;
       }
   }

   @media (max-width: 576px) {
       .masonry-gallery {
           column-count: 1;
       }

       .overlay-masonry {
           column-count: 1;
       }
   }


   .photoG-masonry {
       column-count: 4;
       column-gap: 15px;
       /*display: grid;*/
       grid-template-columns: repeat(5, 1fr);
       justify-content: center;
       align-items: center;
       text-align: center;
   }

   .photoG-masonry img {
       width: 100%;
       display: block;
       margin-bottom: 15px;
       /*aspect-ratio:1;*/
       break-inside: avoid;
       /* CRUCIAL: no cropping, keeps full vertical/horizontal */
   }

   /* Responsive */
   @media (max-width: 991px) {
       .photoG-masonry {
           grid-template-columns: repeat(3, 1fr);
       }
   }

   @media (max-width: 768px) {
       .photoG-masonry {
           grid-template-columns: repeat(2, 1fr);
       }

   }

   @media (max-width: 500px) {
       .photoG-masonry {
           column-count: 1;
       }
   }

   .color-red {
       color: #9B111E;
   }

   .color-off {
       color: #EAE0C8;
   }

   .color-black {
       color: #28282B !important;
   }

   /* this cover image image will be changed by the photographer */
   .hero-p-p-photographer {
       background-image: url(./assets/img/ppportfolio/pexels-jeshoots-3600.jpg);
   }



   .hero-title {
       font-family: "Playfair Display", serif;
       margin-bottom: 1.5rem;
       font-weight: 400;
       font-style: Roman;
       font-size: 80px;
       line-height: 100%;
       letter-spacing: 0%;
       text-align: center;


   }

   .hero-subtext {
       font-weight: 500;
       font-style: Medium;
       font-size: 24px;
       line-height: 140%;
       letter-spacing: 0%;
       text-align: center;


   }

   .search-box {
       border: 1px solid white;
       background-color: rgb(255, 255, 255, 0.2);
   }

   .sec-1 {
       padding: 5rem;
   }

   .sec-title {
       font-family: "Playfair Display", serif;
       font-weight: 400;
       font-style: Roman;
       font-size: 56px;
       leading-trim: NONE;
       line-height: 100%;
       letter-spacing: 0%;
       text-align: center;
       text-transform: capitalize;

   }

   .category-text {
       font-family: "Playfair Display", serif;
       color: #9B111E;
       margin: 1rem 0;
       font-weight: 400;
       font-style: Roman;
       font-size: 32px;
       leading-trim: NONE;
       line-height: 100%;
       letter-spacing: 0%;

   }

   .photoG-img img {
       object-fit: cover;
       aspect-ratio: 1;
       cursor: pointer;
   }

   .hor-ratio img {
       aspect-ratio: 3 / 2 !important;
   }

   .sec-2 {
       padding: 5rem;
       background-image: linear-gradient(rgba(245, 241, 232, 0.898), rgba(245, 241, 232, 0.898)), url(./assets/img/sec2bg.jpg);
       background-size: cover;
       background-position: center;

   }

   .location {

       font-weight: 500;
       font-style: Medium;
       font-size: 19px;
       line-height: 100%;
       letter-spacing: 0%;
       text-align: center;
       color: #28282B;

   }

   .free-profile {
       background: #F1EADB;
   }

   @media (max-width:992px) {

       .sec-1,
       .sec-2 {
           padding: 3rem;
       }
   }


   @media (max-width:768px) {


       .sec-1,
       .sec-2 {
           padding: 2rem;
       }

       .sec-title {

           font-size: 40px;

       }


   }

   /*---------P Program--------*/
   .hero-pr {
       background-image: url('./img/sec11bg.png');
       background-size: cover;
       background-position: top;
   }


   .search-box {
       border: 1px solid white;
       background-color: rgb(255, 255, 255, 0.2);
   }

   .sec-1 {


       padding: 5rem;
   }

   .s-title {
       font-family: "Allura", cursive;
       color: #9B111E;
       font-weight: 400;
       font-style: Regular;
       font-size: 53px;
       leading-trim: NONE;
       line-height: 140%;
       letter-spacing: 0%;
       text-align: center;

   }

   .s-sub {
       font-family: "Playfair Display", serif;
       font-weight: 400;
       font-style: Roman;
       font-size: 56px;
       leading-trim: NONE;
       line-height: 130%;
       letter-spacing: 0%;
       text-align: center;
       text-transform: capitalize;
       margin-bottom: 2rem;

   }

   .s-intro {

       font-weight: 400;
       font-style: Regular;
       font-size: 20px;
       leading-trim: NONE;
       line-height: 160%;
       letter-spacing: 0%;
       text-align: center;
       margin-bottom: 3.5rem;
   }

   .sec-2 {
       background-image:
           linear-gradient(rgba(245, 241, 232, 0.898), rgba(245, 241, 232, 0.898)),
           url('./img/sec2bg.jpg');
       background-size: cover;
       background-position: center;

       padding: 5rem;
   }



   .pricing-wrapper {
       padding: 50px 20px;

       color: #333;
   }

   .pricing-card {
       background-color: #F5F1E8;
       /* Light cream background */
       padding: 40px 30px;
       height: 100%;
       display: flex;
       flex-direction: column;
       border: none;
       border-radius: 0;
       /* Sharp corners based on image */
       transition: transform 0.2s ease;
   }

   /* Typography matching the image */
   .pricing-title {
       font-family: "Playfair Display", serif;
       font-size: 3rem;
       font-weight: 400;
       margin-bottom: 10px;
       color: #1a1a1a;
       letter-spacing: -0.5px;
   }

   .pricing-price {
       color: #A6192E;
       /* Deep Red color */
       font-size: 1.25rem;
       font-weight: 600;
       margin-bottom: 3rem;
       display: block;
   }

   /* Feature Lists */
   .pricing-features {
       list-style: none;
       padding: 0;
       margin: 0 0 auto 0;
       /* Push button to bottom */
       flex-grow: 1;
   }

   .pricing-features li {
       margin-bottom: 8px;
       font-size: 0.95rem;
       color: #555;
       padding-left: 15px;
       position: relative;
       font-weight: 300;
   }

   /* Custom small bullet dot */
   .pricing-features li::before {
       content: "•";
       position: absolute;
       left: 0;
       color: #333;
       font-size: 1.2em;
       line-height: 1rem;
   }



   .spacer-price {
       height: 1.8rem;
       margin-bottom: 3rem;
   }


   .comparison-title {
       font-family: "Playfair Display", serif;
       font-size: 56px;
       text-align: center;
       margin-bottom: 70px;
       color: #00000;
   }

   /* Table Styling */
   .table-custom {
       width: 100%;
       border-collapse: separate;
       border-spacing: 0;
       min-width: 600px;
   }

   .table-custom th,
   .table-custom tr,
   .table-custom td {
       background: transparent;
   }

   .table-custom th {
       width: 17.5%;
       font-family: "Playfair Display", serif;
       font-size: 32px;
       font-weight: 400;
       text-align: center;
       padding-bottom: 30px;
       border: none;
       color: #1a1a1a;
   }

   /* Align the first column header left */
   .table-custom th:first-child {
       text-align: left;
       padding-left: 20px;
   }

   .table-custom td {
       padding: 15px 10px;
       font-size: 20px;
       font-weight: 300;
       color: #333;
       border: none;
       /* Remove default bootstrap borders */
       vertical-align: middle;
   }

   /* First column (Features) styling */
   .table-custom td:first-child {
       text-align: left;
       padding-left: 20px;
       width: 30%;
       /* Give features check text some breathing room */
   }

   /* Center the checkmarks */
   .table-custom td:not(:first-child) {
       text-align: center;
   }

   /* Vertical Dividers matching the design */
   /* We apply a border-left to the plan columns */
   .table-custom th:nth-child(2),
   .table-custom td:nth-child(2),
   .table-custom th:nth-child(3),
   .table-custom td:nth-child(3),
   .table-custom th:nth-child(4),
   .table-custom td:nth-child(4),
   .table-custom th:nth-child(5),
   .table-custom td:nth-child(5) {
       border-left: 1px solid #1a1a1a;
   }

   /* Add the closing border on the right for the last column */
   .table-custom th:last-child,
   .table-custom td:last-child {
       border-right: 1px solid #1a1a1a;
   }

   /* Checkmark Icon Styling */
   .check-icon {
       width: 24px;
       height: 24px;
       color: #A6192E;
       /* Deep Red */
       stroke-width: 3;
   }

   /* Responsive Table Wrapper */
   .table-responsive-custom {
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
   }

   .step-icon {
       height: 120px;
       width: 120px;
       position: relative;
       margin-top: -60px;
       margin-bottom: 2rem;
       left: 50%;
       transform: translateX(-50%);
   }

   .reviewSlider .swiper-slide {
       display: flex;
       justify-content: center;
   }

   .card {
       width: 80%;
       background: #fff;
       /* border-radius: 10px; */
       overflow: hidden;
       box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
       border-radius: 0;
   }

   .card .image {
       position: relative;
   }

   .card .image img {
       width: 100%;
       height: 230px;
       object-fit: cover;
   }



   .card .content {
       padding: 20px;
   }

   .card h3 {
       font-family: "Playfair Display", serif;

       font-weight: 400;
       font-style: Roman;
       font-size: 32px;
       leading-trim: NONE;
       line-height: 120%;
       letter-spacing: 0%;
       text-transform: capitalize;
       padding-bottom: 10px;
       border-bottom: 1px solid #EAE0C8;

   }

   .card p {
       font-size: 20px;
       line-height: 20px;
       color: #666;
       margin-bottom: 15px;
   }



   .swiper-button-next,
   .swiper-button-prev {

       width: 35px;
       height: 35px;

       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
   }


   .swiper-button-next::after,
   .swiper-button-prev::after {
       font-size: 15px;
   }

   .sec-review {
       padding: 5rem 4rem;
       background-image:
           linear-gradient(#28282BB2, #28282BB2),
           url('./img/sec3bg.jpg');
       background-size: cover;
       background-position: center;

       background-size: cover;
       background-position: top;
   }

   .reviewSlider .swiper-button-next,
   .reviewSlider .swiper-button-prev {
       color: #EAE0C8;
       border: 1px solid #EAE0C8;
   }

   .reviewSlider div.card {
       background: transparent;
       width: 82%;
   }

   .r-box {
       margin-top: 5rem;
       padding: 5px 20px 15px 20px;
       background: #F5F1E8;
   }

   .r-box div img {
       border-radius: 200px;
   }

   .r-box h3 {
       color: #9B111E;
       font-family: "Playfair Display", serif;
       border: 0;
       padding: 0;
       font-weight: 400;
       font-style: Roman;
       font-size: 32px;
       leading-trim: NONE;
       line-height: 100%;
       letter-spacing: 0%;
       text-align: center;
       text-transform: capitalize;

   }

   .rating {
       color: #D6B23D;
       text-align: center;
       font-size: 30px;
   }

   .r-box p {
       color: #28282B;
       font-weight: 400;
       font-style: Regular;
       font-size: 18px;
       leading-trim: NONE;
       line-height: 24px;
       letter-spacing: 0%;
       text-align: center;

   }

   @media (max-width:992px) {}


   @media (max-width:768px) {

       .sec-1,
       .sec-2 {
           padding: 2rem;
       }

       .reviewSlider div.card {

           width: 80%;
       }


       .sec-review {
           padding: 2rem 0;
       }
   }

   /*--------------*/
   .hero-p-p-profile {
       background-image: url(./img/sec2bg.jpg);
   }

   .hero-title {
       font-family: "Playfair Display", serif;
       font-weight: 400;
       margin-bottom: 1.5rem;
       font-style: Roman;
       font-size: 80px;
       line-height: 100%;
       letter-spacing: 0%;
       text-align: center;


   }

   .hero-subtext {
       font-weight: 500;
       font-style: Medium;
       font-size: 24px;
       line-height: 140%;
       letter-spacing: 0%;
       text-align: center;


   }

   .search-box {
       border: 1px solid white;
       background-color: rgb(255, 255, 255, 0.2);
   }

   .sec-1 {
       padding: 5rem;
   }

   .sec-title {
       font-family: "Playfair Display", serif;
       font-weight: 400;
       font-style: Roman;
       font-size: 56px;
       leading-trim: NONE;
       line-height: 100%;
       letter-spacing: 0%;
       text-align: center;
       text-transform: capitalize;

   }

   .category-text {
       font-family: "Playfair Display", serif;
       color: #9B111E;
       margin: 1rem 0;
       font-weight: 400;
       font-style: Roman;
       font-size: 32px;
       leading-trim: NONE;
       line-height: 100%;
       letter-spacing: 0%;

   }


   .location {

       font-weight: 500;
       font-style: Medium;
       font-size: 19px;
       line-height: 100%;
       letter-spacing: 0%;
       text-align: center;
       color: #28282B;

   }

   .free-profile {
       background: #F1EADB;
   }

   /*---upload photo----------*/
   .photo-upload-wrapper {
       background-color: #ffffff;
       color: #333;
       display: flex;
       flex-direction: column;
       align-items: center;
   }

   .photo-upload-wrapper h1,
   .photo-upload-wrapper .serif-font {
       font-family: "Playfair Display", serif;
   }

   .photo-upload-wrapper .main-title {
       font-size: 3rem;
       font-weight: 400;
       color: #222;
       text-align: center;
       margin-bottom: 60px;
   }

   .photo-upload-wrapper .form-container {
       width: 100%;
       max-width: 700px;
       padding: 0 20px;
   }

   .photo-upload-wrapper .upload-area {
       position: relative;
       height: 300px;
       margin-bottom: 40px;
       background-color: #ffffff;
       border: 1px solid #777;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: background-color 0.2s ease, border-color 0.2s ease;
       overflow: visible;
   }

   .photo-upload-wrapper .upload-area.drag-active {
       background-color: #f8f9fa;
       border-color: #333;
   }

   .photo-upload-wrapper .upload-content {
       position: relative;
       z-index: 2;
       text-align: center;
       display: flex;
       flex-direction: column;
       align-items: center;
   }

   .photo-upload-wrapper .cloud-icon {
       font-size: 6rem;
       color: #e9e9e9;
       margin-bottom: -25px;
       z-index: 1;
       pointer-events: none;
   }

   .photo-upload-wrapper .btn-choose-file {
       background-color: transparent;
       border: 1px solid #777;
       padding: 8px 20px;
       font-size: 0.9rem;
       color: #333;
       border-radius: 0;
       margin-bottom: 5px;
       transition: background-color 0.2s ease, border-color 0.2s ease;
   }

   .photo-upload-wrapper .btn-choose-file:hover {
       background-color: #f9f9f9;
       border-color: #555;
   }

   .photo-upload-wrapper .drag-drop-text {
       font-size: 0.85rem;
       color: #555;
       margin-top: 8px;
   }

   .file-display-info {
       margin-top: 15px;
       padding: 10px;
       width: 90%;
       max-height: 100px;
       overflow-y: auto;
       background: rgba(255, 255, 255, 0.95);
       border-radius: 4px;
       font-size: 0.9rem;
       font-weight: 500;
       color: #000;
       z-index: 3;
       text-align: left;
   }

   .file-display-info i {
       color: #555;
   }

   .file-list-item {
       padding: 4px 0;
       font-size: 0.85rem;
       border-bottom: 1px solid #eeeeee;
   }

   .file-list-item:last-child {
       border-bottom: none;
   }

   .photo-upload-wrapper .form-group {
       margin-bottom: 20px;
   }

   .photo-upload-wrapper .form-control-custom {
       width: 100%;
       padding: 12px 15px;
       border: 1px solid #555;
       border-radius: 0;
       font-size: 1rem;
       color: #333;
       background-color: transparent;
       transition: border-color 0.2s ease;
   }

   .photo-upload-wrapper .form-control-custom::placeholder {
       color: #444;
       font-weight: 400;
   }

   .photo-upload-wrapper .form-control-custom:focus {
       outline: none;
       border-color: #000;
       box-shadow: none;
   }

   .photo-upload-wrapper .btn-submit {
       background-color: #991b1b;
       color: #ffffff;
       border: none;
       padding: 12px 40px;
       font-size: 20px;
       margin: 20px auto 0;
       border-radius: 0;
       display: flex;
       align-items: center;
       gap: 10px;
       transition: background-color 0.2s ease;
   }

   .photo-upload-wrapper .btn-submit:hover {
       background-color: #7f1616;
       color: #ffffff;
   }

   /*----------------------*/
   .cp-wrapper {

       color: #333;
       background-color: #fff;

   }

   /* Typography matching the image */
   .cp-wrapper h1,
   .cp-wrapper h2,
   .cp-wrapper h3,
   .cp-wrapper h4,
   .cp-wrapper h5 {
       font-family: "Playfair Display", serif;
       color: #1a1a1a;
   }

   /* Header Section */
   .cp-header-icons i {
       font-size: 1.5rem;
       margin-left: 15px;
       cursor: pointer;
   }

   .cp-main-title {
       font-size: 2.5rem;
       text-align: center;
       margin-bottom: 3rem;
       position: relative;
   }

   .cp-main-title i {
       font-size: 1rem;
       vertical-align: super;
       color: #333;
       cursor: pointer;
   }

   /* Profile Image */
   .cp-profile-img-container {
       display: flex;
       justify-content: center;
       align-items: center;
   }

   .cp-profile-img {
       width: 250px;
       height: 250px;
       border-radius: 50%;
       object-fit: cover;

       background-color: #8B1E28;
   }

   /* Info Sections */
   .cp-info-row {
       display: flex;
       align-items: baseline;
       margin-bottom: 1.5rem;
   }

   .cp-info-label {
       font-weight: 400;
       color: #1a1a1a;
       font-size: 1.1rem;

       min-width: 140px;
   }

   .cp-info-value {

       color: #555;
       flex-grow: 1;
   }

   /* Divider */
   .cp-divider {
       border-top: 1px solid #ccc;
       margin: 3rem 0;
       opacity: 1;
   }

   /* Table Styles */
   .cp-table-container {
       width: 100%;
       height: 100%;
       border: 1px solid #ddd;
       max-width: 680px;
       overflow-x: auto;
   }

   .gallery {
       background-color: #F5F1E8;
       padding: 2rem 1rem;
       border: 1px solid black;
   }

   .gallery h3 {
       font-size: 28px;
       margin: 0;
   }

   .gallery img {
       aspect-ratio: 1;
       object-fit: cover;
   }

   /* --- Modal Overlay (The background dimmer) --- */
   .modal-overlay {
       display: none;
       /* Hidden by default */
       position: fixed;
       z-index: 1000;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.5);
       /* Semi-transparent black */
       justify-content: center;
       align-items: center;
   }

   /* --- Modal Card Styles (From previous request) --- */
   .message-card {
       background-color: #ffffff;
       border: 2px solid #000;
       border-radius: 4px;
       padding: 40px 30px 30px 30px;
       width: 90%;
       max-width: 500px;
       position: relative;
       box-sizing: border-box;
       box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
       animation: popIn 0.3s ease-out;
   }

   /* Animation to make it pop */
   @keyframes popIn {
       from {
           transform: scale(0.8);
           opacity: 0;
       }

       to {
           transform: scale(1);
           opacity: 1;
       }
   }

   /* Close Button */
   .close-btn {
       position: absolute;
       top: 15px;
       right: 15px;
       width: 30px;
       height: 30px;
       background: #fff;
       border: 1px solid #000;
       border-radius: 4px;
       font-size: 20px;
       padding: 0;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .close-btn:hover {
       background-color: #f0f0f0;
   }

   /* Typography & Inputs */
   .card-title {
       text-align: center;
       font-size: 26px;
       margin-top: 0;
       margin-bottom: 30px;
       font-weight: normal;
   }

   .form-group {
       margin-bottom: 20px;
   }

   .sketch-input {
       width: 100%;
       padding: 10px;
       font-size: 16px;
       font-family: inherit;
       border: 1px solid #000;
       border-radius: 2px;
       box-sizing: border-box;
       outline: none;
   }

   .sketch-input.textarea {
       height: 150px;
       resize: vertical;
   }

   .btn-container {
       text-align: center;
       margin-top: 10px;
   }

   /*---------partner reviews------------------*/
   .profile-header {
       display: flex;
       gap: 30px;
       margin-bottom: 40px;
       align-items: flex-start;
   }

   .profile-img-container {

       border: 1px solid #000;
       flex-shrink: 0;
       overflow: hidden;
       /* Ensures image stays inside border */
       background-color: #eee;
   }


   .profile-info {
       flex-grow: 1;
       display: flex;
       flex-direction: column;
       justify-content: center;
   }

   .profile-title {
       font-size: 24px;
       font-weight: bold;
       margin: 0 0 15px 0;
   }

   .rating-row {
       display: flex;
       align-items: center;
       gap: 15px;
       margin-bottom: 10px;
   }

   .rating-text {
       font-size: 20px;
   }

   .score-box {
       border: 1px solid #000;
       padding: 2px 6px;
       font-size: 18px;
       font-weight: bold;
       background: #fff;
   }


   .stars-display {
       font-size: 32px;
       line-height: 1;
       letter-spacing: 5px;
       color: #333;
   }

   /* --- Reviews List Section --- */
   .reviews-list {
       display: flex;
       flex-direction: column;
       gap: 20px;
   }

   /* Individual Review Box */
   .review-card {
       width: 100%;
       border: 1px solid #000;
       padding: 25px;
       box-sizing: border-box;
       display: flex;
       gap: 20px;
       align-items: flex-start;
       background-color: transparent;
       backdrop-filter: blur(10px);
   }

   .avatar-circle {
       width: 60px;
       height: 60px;
       border: 1px solid #000;
       border-radius: 50%;
       overflow: hidden;
       /* Clip the square image to a circle */
       flex-shrink: 0;
       background-color: #eee;
   }

   .avatar-circle img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   .review-content {
       flex-grow: 1;
   }

   .review-meta {
       display: flex;
       justify-content: space-between;
       margin-bottom: 5px;
       font-weight: bold;
       font-size: 16px;
   }

   .review-stars-small {
       color: #333;
       font-size: 18px;
       margin-bottom: 10px;
   }

   .review-body {
       font-size: 15px;
       line-height: 1.4;
   }



   /* --- Modal Overlay --- */
   .modal-overlay {
       display: none;
       /* Hidden by default */
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.5);
       z-index: 1000;
       justify-content: center;
       align-items: center;
   }

   /* --- Review Card Styles --- */
   .review-card2 {
       background-color: #ffffff;
       border: 2px solid #000;
       border-radius: 4px;
       padding: 30px 40px;
       width: 90%;
       max-width: 500px;
       position: relative;
       box-sizing: border-box;
       color: #333;
       box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
       animation: dropIn 0.3s ease-out;
   }

   @keyframes dropIn {
       from {
           transform: translateY(-50px);
           opacity: 0;
       }

       to {
           transform: translateY(0);
           opacity: 1;
       }
   }

   /* Close Button */
   .close-btn {
       position: absolute;
       top: 10px;
       right: 10px;
       background: none;
       border: 1px solid #000;
       border-radius: 3px;
       font-size: 20px;
       cursor: pointer;
       line-height: 1;
       padding: 2px 6px;
       font-family: sans-serif;
   }

   .close-btn:hover {
       background-color: #eee;
   }

   /* Typography */
   .review-title {
       text-align: center;
       font-size: 28px;
       margin-top: 10px;
       margin-bottom: 30px;
       font-weight: normal;
   }

   /* Ratings Layout */
   .rating-container {
       margin-bottom: 25px;
       padding: 0 10px;
   }

   .rating-row2 {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 15px;
   }

   .rating-label {
       font-size: 18px;
       font-weight: bold;
   }

   /* --- Interactive Stars Styles --- */
   .stars {
       font-size: 32px;
       line-height: 1;
       cursor: pointer;
       letter-spacing: 5px;
       user-select: none;
       /* Prevents highlighting text when clicking fast */
   }

   .star {
       color: #333;
       /* Default ink color */
       transition: color 0.2s;
   }

   /* Hover effect: The star being hovered and previous ones turn greyish */
   .star:hover,
   .star.hovered {
       color: #666;
   }

   /* Selected effect: The clicked stars turn black (filled look) */
   .star.selected {
       color: #000;
   }

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

   .sketch-input {
       width: 100%;
       padding: 12px;
       font-size: 16px;
       font-family: inherit;
       border: 1px solid #000;
       border-radius: 2px;
       box-sizing: border-box;
       outline: none;
   }

   .sketch-input.textarea {
       height: 150px;
       resize: vertical;
   }

   .sketch-input:focus {
       border: 2px solid #000;
       padding: 11px;
   }

   /* Submit Button */
   .btn-container {
       text-align: center;
   }

   @media (max-width:992px) {}


   @media (max-width:768px) {

       .sec-1 {
           padding: 2rem;
       }

       .rating-row {
           flex-direction: column;
           align-items: baseline;
       }

       #openReviewBtn {
           font-size: 18px;
           padding: 5px 12px;
       }


   }

   /* --------advance search result---------- */
   .section-tagline {
       font-family: "Allura", cursive;
       color: #9B111E;
       font-weight: 400;
       font-style: bold;
       font-size: 53px;
       leading-trim: NONE;
       line-height: 140%;
       letter-spacing: 0%;


   }



   .hero-p-p-profile {
       background-image: url(./img/sec2bg.jpg);
   }



   .hero::before {
       content: "";
       position: absolute;
       z-index: 0;
       inset: 0;
       background: #EAE0C8E5;
       pointer-events: none;
   }




   .hero-title {
       font-family: "Playfair Display", serif;
       font-weight: 400;
       margin-bottom: 1.5rem;
       font-style: Roman;
       font-size: 80px;
       line-height: 100%;
       letter-spacing: 0%;
       text-align: center;
       color: #9B111E !important;

   }

   .hero-subtext {
       font-weight: 500;
       font-style: Medium;
       font-size: 24px;
       line-height: 140%;
       letter-spacing: 0%;
       text-align: center;
       color: #000 !important;

   }

   .search-box {
       border: 1px solid white;
       background-color: rgb(255, 255, 255, 0.2);
   }


   .sec-title {
       font-family: "Playfair Display", serif;
       font-weight: 400;
       font-style: Roman;
       font-size: 56px;
       leading-trim: NONE;
       line-height: 100%;
       letter-spacing: 0%;
       text-align: center;
       text-transform: capitalize;

   }

   .category-text {
       font-family: "Playfair Display", serif;
       color: #9B111E;
       margin: 1rem 0;
       font-weight: 400;
       font-style: Roman;
       font-size: 28px;
       leading-trim: NONE;
       line-height: 100%;
       letter-spacing: 0%;

   }



   .location {

       font-weight: 500;
       font-style: Medium;
       font-size: 19px;
       line-height: 100%;
       letter-spacing: 0%;
       text-align: center;
       color: #28282B;

   }

   .free-profile {
       background: #F1EADB;
   }




   @media (max-width:768px) {


       .slide-90 {
           width: 90%;
       }

       .sec-title {

           font-size: 40px;

       }


   }

   .slide-90 {
       width: 100%;
       margin: auto;
       display: block;
   }

   .swiper-slide img {
       width: 100%;
       object-fit: cover;
       aspect-ratio: 1;
   }

   .swiper-button-next,
   .swiper-button-prev {
       top: 40% !important;
       width: 35px;
       height: 35px;
       background: rgba(239, 235, 224, 0.5);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .swiper-button-next,
   .swiper-button-prev {
       color: #9B111E;
       border: 1px solid #9B111E;
   }

   .swiper-button-next::after,
   .swiper-button-prev::after {
       font-size: 15px;
   }

   /* Overlay */
   #popupOverlay {
       display: none;
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.6);
       z-index: 9999;
   }

   /* Center popup */
   #searchPopup {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 85%;
       max-width: 1100px;
       background: #E6DDC7;
       padding: 30px;
       border-radius: 6px;

       max-height: 90vh;
       overflow-y: auto;
   }

   #searchPopup .form-check {
       font-size: 20px;
       padding: 0;
       margin: 8px 0;
   }

   #searchPopup input[type=checkbox] {
       height: 20px;
       width: 20px;
   }


   .btn-close-custom {
       background: white;
       color: #9B111E;
       display: flex;
       align-items: center;
       justify-content: center;
       text-decoration: none;
       height: 40px;
       width: 40px;
       border: none;
       font-size: 35px;
       float: right;
       cursor: pointer;
       position: absolute;
       right: 0;
       top: 0;
   }

   /*--blogs--*/
   .blog-sec h1 {
       font-family: "Playfair Display", serif;
       color: #9B111E;
       font-weight: 400;
       font-style: Regular;
       font-size: 46px;
       leading-trim: NONE;
       line-height: 140%;
       letter-spacing: 0%;
       text-align: center;

   }

   .blog-sec h2 {
       font-family: "B Badoni";
       font-weight: 400;
       font-style: Roman;
       font-size: 56px;
       leading-trim: NONE;
       line-height: 130%;
       letter-spacing: 0%;
       text-align: center;
       text-transform: capitalize;
       margin-bottom: 2rem;

   }



   /* Scoped styles wrapper */
   .blog-wrapper {
       padding: 0 2rem;

       font-family: 'Lato', sans-serif;
       color: #333;
   }

   /* Top Navigation Row */
   .blog-nav-row {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: space-between;
       margin-bottom: 2rem;
       gap: 20px;
   }

   /* Search Bar */
   .blog-search-container {
       position: relative;
       width: 100%;
       max-width: 300px;
   }

   .blog-search-input {
       width: 100%;
       padding: 10px 15px 10px 40px;
       /* Left padding for icon */
       border: 1px solid #333;
       background: transparent;
       border-radius: 0;
       /* Sharp corners */
       font-size: 0.9rem;
       color: #333;
   }

   .blog-search-icon {
       position: absolute;
       left: 15px;
       top: 50%;
       transform: translateY(-50%);
       color: #333;
       font-size: 0.9rem;
   }



   /* Sort Dropdown */
   .blog-sort-container {
       width: 100%;
       max-width: 200px;
       display: flex;
       justify-content: flex-end;
   }

   .blog-sort-select {
       width: 100%;
       padding: 10px 15px;
       border: 1px solid #333;
       background: transparent;
       border-radius: 0;
       font-size: 0.9rem;
       cursor: pointer;
       appearance: none;
       /* Remove default arrow to style custom if needed, keeping simple for now */
       background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
       background-repeat: no-repeat;
       background-position: right 15px top 50%;
       background-size: 10px auto;
   }


   /* Grid Spacing */
   .blog-grid {
       margin-bottom: 2rem;
   }

   .card {
       width: 100%;
       border: 0;
       background: #fff;
       /* border-radius: 10px; */
       overflow: hidden;
       box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
       border-radius: 0;
   }

   .card .image {
       position: relative;
   }

   .card .image img {
       width: 100%;
       height: 230px;
       object-fit: cover;
   }

   .card .date {
       font-family: "Playfair Display", serif;
       position: absolute;
       bottom: -20px;
       right: 15px;
       background: #9B111E;
       color: #fff;
       padding: 10px 12px;
       text-align: center;
       font-size: 18px;
       line-height: 1;

   }

   .card .date span {
       display: block;
       font-size: 12px;
       opacity: .9;
   }

   .card .content {
       padding: 20px;
   }

   .card h3 {
       font-family: "Playfair Display", serif";

           font-weight: 400;
       font-style: Roman;
       font-size: 32px;
       leading-trim: NONE;
       line-height: 120%;
       letter-spacing: 0%;
       text-transform: capitalize;
       padding-bottom: 10px;
       border-bottom: 1px solid #EAE0C8;

   }

   .card p {
       font-family: "Montserrat";
       font-size: 16px;
       line-height: 18px;
       color: #212529;
       margin-bottom: 15px;
   }

   .readmore {
       font-family: "Playfair Display", serif";
 color: #9B111E;
       font-size: 18px;
       text-decoration: none;
       font-weight: 600;
   }


   @media (max-width:768px) {


       .blog-wrapper {
           padding: 0;
       }

   }

   /*---Single Post---*/
   .blog-sec.single-post-header {
       background-color: #F5F1E8;
   }

   .post-date {
       font-family: "Montserrat";
       font-size: 16px;
       line-height: 18px;
       color: #212529;
   }

   .post-content p {
       font-family: "Montserrat";
       font-size: 16px;
       line-height: 18px;
       color: #212529;
   }

   .post-content h1 {
       font-family: "Playfair Display", serif;
       font-size: 60px;
       line-height: 64px;
       color: #212529;
       margin-bottom: 15px;
   }

   .post-content h2 {
       font-family: "Playfair Display", serif;
       font-size: 56px;
       line-height: 60px;
       color: #212529;
       margin-bottom: 15px;
   }

   .post-content h3 {
       font-family: "Playfair Display", serif;
       font-size: 32px;
       line-height: 36px;
       color: #212529;
       margin-bottom: 15px;
   }

   .post-content h4 {
       font-family: "Playfair Display", serif;
       font-size: 28px;
       line-height: 32px;
       color: #212529;
       margin-bottom: 15px;
   }

   .post-content h5 {
       font-family: "Playfair Display", serif;
       font-size: 24px;
       line-height: 28px;
       color: #212529;
       margin-bottom: 15px;
   }

   .post-content h6 {
       font-family: "Playfair Display", serif;
       font-size: 20px;
       line-height: 24px;
       color: #212529;
       margin-bottom: 15px;
   }

   /* Pagination links */
   .single-post-pagination a {
       color: #9B111E;
   }

   .single-post-pagination a:hover {
       color: #9B111E;
   }

   /* Comments links */
   .single-post-comments a,
   .comment-list a,
   .comment-meta a {
       color: #9B111E;
   }

   .single-post-comments a:hover,
   .comment-list a:hover,
   .comment-meta a:hover {
       color: #9B111E;
   }



   .single-post-pagination .nav-links {
       display: flex;
       justify-content: space-between;
       gap: 20px;
   }

   .single-post-pagination .nav-subtitle {
       display: block;
       font-size: 12px;
       text-transform: uppercase;
       color: #777;
   }

   .single-post-pagination .nav-title {
       font-size: 16px;
       font-weight: 600;
   }

   .single-post-comments {
       padding-top: 40px;
       border-top: 1px solid #eee;
   }


   @media (max-width:767px) {

       .blog-sec h1 {
           line-height: 1.1;
       }

       .single-post-image.sec-1 {
           padding: 2rem 0px 2rem;
       }

       .blog-sec .section-tagline {
           line-height: 1;
       }
   }


   /*---faq---*/
   .faq-section-wrapper {
       background-color: #fff;
       color: #28282B;
   }

   /* Main Title */
   .faq-section-wrapper .faq-title {
       font-family: "Playfair Display", serif;
       font-size: 56px;
       text-align: center;
       margin-bottom: 3rem;
       color: #000;
   }

   /* Accordion Overrides */
   .faq-section-wrapper .accordion-item {
       border: none;
       margin-bottom: 1.5rem;
       background: transparent;
   }

   .faq-section-wrapper .accordion-button {
       background-color: #f5f3ee;
       /* The beige color from the screenshot */
       color: #1a1a1a;
       font-family: "Playfair Display", serif;
       font-size: 32px;
       font-weight: 400;
       padding: 1.5rem 2rem;
       border: none;
       box-shadow: none;
       /* Remove Bootstrap focus shadow */
       border-radius: 0 !important;
       /* Sharp corners */
   }

   .faq-section-wrapper .accordion-button:not(.collapsed) {
       background-color: #F5F1E8;
       /* Keep same color when open */
       color: #9b111e;
       box-shadow: none;
   }

   /* Custom Arrow Icon Logic to match simple chevron */
   .faq-section-wrapper .accordion-button::after {
       background-image: none;
       /* Remove default SVG */
       content: "\f078";
       /* FontAwesome Chevron Down */
       font-family: "Font Awesome 6 Free";
       font-weight: 900;
       font-size: 1rem;
       color: #9b111e;
       transition: transform 0.2s ease-in-out;
   }

   .faq-section-wrapper .accordion-button:not(.collapsed)::after {
       transform: rotate(-180deg);
   }

   .faq-section-wrapper .accordion-body {
       padding: 1.5rem 2rem;
       /* No side padding to align with edge, or adjust if needed */
       font-size: 18px;
       line-height: 24px;
       color: #444;
       background-color: #fff;
       text-align: left;
   }

   /* -----contact------ */
   .contact input[type="text"],
   .contact input[type="password"],
   .contact input[type="email"],

   .contact select,
   .contact textarea {

       background-color: rgba(255, 255, 255, 0.502) !important;
       border: 1px solid #28282B;
       border-radius: 0;
       height: 50px;

   }

   .contact-con h1 {
       font-family: "Allura", cursive;
       color: #9B111E;
       font-weight: 400;
       font-style: Regular;
       font-size: 32px;
       leading-trim: NONE;
       line-height: 140%;
       letter-spacing: 0%;
       text-align: center;

   }

   .contact-con h2 {
       font-family: "Playfair Display", serif;
       font-weight: 400;
       font-style: Roman;
       font-size: 56px;
       leading-trim: NONE;
       line-height: 130%;
       letter-spacing: 0%;
       text-align: center;
       text-transform: capitalize;
       margin-bottom: 2rem;

   }

   .customer-signUp .form-check {
       display: flex;
       align-items: center;
       gap: 10px;

   }

   /*--------partner portal--------*/
   .partner-portal-wrapper {

       background-color: #fff;
       color: #333;
   }

   /* Typography Overrides within the wrapper */
   .partner-portal-wrapper h1,
   .partner-portal-wrapper h2,
   .partner-portal-wrapper h3,
   .partner-portal-wrapper h4,
   .partner-portal-wrapper h5,
   .partner-portal-wrapper .serif-font {
       font-family: "Playfair Display", serif;
   }

   /* Main Header */
   .partner-portal-wrapper .top-header {
       padding: 40px 0;
       position: relative;
   }

   .partner-portal-wrapper .portal-title {
       font-size: 2.5rem;
       color: #333;
       letter-spacing: 1px;
   }

   .partner-portal-wrapper .help-section {
       position: absolute;
       right: 20px;
       top: 50%;
       transform: translateY(-50%);
       display: flex;
       align-items: center;
       gap: 10px;
       font-size: 0.9rem;
       color: #555;
   }

   @media (max-width: 768px) {
       .partner-portal-wrapper .help-section {
           position: relative;
           right: auto;
           top: auto;
           transform: none;
           justify-content: center;
           margin-top: 10px;
       }
   }

   /* Sidebar / Inbox */
   .partner-portal-wrapper .inbox-section {
       padding-right: 0;
   }

   .partner-portal-wrapper .btn-group-custom {
       margin-bottom: 20px;
   }

   .partner-portal-wrapper .btn-custom-red {
       background-color: #991b1b;
       /* primary-red */
       color: white;
       border: 1px solid #991b1b;
       border-radius: 0 !important;
       padding: 5px 25px;
       font-size: 0.85rem;
   }

   .partner-portal-wrapper .btn-custom-outline {
       background-color: transparent;
       color: #555;
       border: 1px solid #ccc;
       border-radius: 0 !important;
       padding: 5px 25px;
       font-size: 0.85rem;
   }

   .partner-portal-wrapper .btn-custom-outline.active {
       background-color: #eee;
       border-color: #bbb;
   }

   /* Message List Styles */
   .partner-portal-wrapper .inbox-scroll-container {
       max-height: 500px;
       overflow-y: auto;
       padding-right: 5px;
   }

   .partner-portal-wrapper .inbox-scroll-container::-webkit-scrollbar {
       width: 8px;
   }

   .partner-portal-wrapper .inbox-scroll-container::-webkit-scrollbar-track {
       background: #f9f9f9;
       border-radius: 4px;

   }

   .partner-portal-wrapper .inbox-scroll-container::-webkit-scrollbar-thumb {
       background-color: #888;
       border-radius: 4px;
   }

   .partner-portal-wrapper .message-item {
       display: flex;
       align-items: flex-start;
       padding: 15px 10px;
       background-color: #D9D9D933;
       margin-bottom: 10px;
       border: 1px solid transparent;
       cursor: pointer;
       transition: all 0.2s;
       border-radius: 8px;
       /* Keep radius for hover effect */
   }

   /* Only show background on hover, removed .active styling */
   .partner-portal-wrapper .message-item:hover {
       background-color: #ffffff;
       border: 1px solid #D9D9D933;
   }

   /* Avatar Styles */
   .partner-portal-wrapper .avatar-wrapper {
       position: relative;
       margin-right: 12px;
       flex-shrink: 0;
   }

   .partner-portal-wrapper .avatar-img {
       width: 48px;
       height: 48px;
       border-radius: 50%;
       object-fit: cover;
       display: block;
   }

   /* Message Content */
   .partner-portal-wrapper .message-content {
       flex-grow: 1;
       min-width: 0;
   }

   .partner-portal-wrapper .message-header {
       display: flex;
       justify-content: space-between;
       align-items: baseline;
       margin-bottom: 4px;
   }

   .partner-portal-wrapper .sender-name {
       font-weight: 700;
       font-size: 0.95rem;
       color: #222;
       display: flex;
       align-items: center;
       gap: 5px;
   }

   .partner-portal-wrapper .timestamp {
       font-size: 0.75rem;
       color: #777;
       white-space: nowrap;
       margin-left: 8px;
   }

   .partner-portal-wrapper .message-preview {
       font-size: 0.85rem;
       color: #666;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       margin: 0;
       line-height: 1.4;
   }

   /* Hide items when filtering */
   .partner-portal-wrapper .d-none-filter {
       display: none !important;
   }

   /* Right Content Area */
   .partner-portal-wrapper .profile-section {
       display: flex;
       flex-direction: column;
       align-items: center;
       margin-bottom: 40px;
   }

   .partner-portal-wrapper .profile-pic-large {
       width: 100px;
       height: 100px;
       background-color: #d3d3d3;
       border-radius: 50%;
       margin-bottom: 15px;
   }

   .partner-portal-wrapper .btn-edit-profile {
       background: transparent;
       border: 1px solid #999;
       color: #555;
       padding: 5px 20px;
       font-size: 0.8rem;
       border-radius: 0;
   }

   /* Tables */
   .partner-portal-wrapper .table-section-title {
       font-size: 1.5rem;
       margin-bottom: 15px;
       margin-top: 30px;
       font-weight: 400;
   }

   .partner-portal-wrapper .custom-table {
       width: 100%;
       border-collapse: collapse;
       margin-bottom: 30px;
       font-size: 0.9rem;
   }

   .partner-portal-wrapper .custom-table thead {
       background-color: #212529;
       color: white;
   }

   .partner-portal-wrapper .custom-table th {
       padding: 12px;
       font-weight: 400;
       font-size: 0.85rem;
       border: 1px solid #444;
   }

   .partner-portal-wrapper .custom-table td {
       padding: 12px;
       border: 1px solid #ddd;
       vertical-align: middle;
   }

   .profile-pic-large img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: 50%;
       /* optional – if you want circular image */
   }

   .partner-portal-wrapper .custom-table tbody tr:nth-child(odd) {
       background-color: #fff;
   }

   .partner-portal-wrapper .custom-table tbody tr:nth-child(even) {
       background-color: #e9ecef;
   }

   .partner-portal-wrapper .check-cell {
       text-align: center;
   }

   .partner-portal-wrapper .check-cell input[type="checkbox"] {
       width: 16px;
       height: 16px;
       cursor: pointer;
   }

   /*free account inbox*/
   .free-inbox-wrapper {

       background-color: #fff;
       color: #333;

       padding-bottom: 50px;
   }

   /* Typography */
   .free-inbox-wrapper h1,
   .free-inbox-wrapper h2,
   .free-inbox-wrapper .serif-font {
       font-family: "B Badoni";
   }

   /* Title Section */
   .free-inbox-wrapper .main-title {
       font-size: 3rem;
       color: #222;

       margin-bottom: 60px;
       text-align: center;
       font-weight: 400;
   }

   /* Profile Section (Left) */
   .free-inbox-wrapper .profile-container {
       display: flex;
       flex-direction: column;
       align-items: center;
       padding-top: 20px;
   }

   .free-inbox-wrapper .profile-pic {
       width: 140px;
       height: 140px;
       background-color: #d9d9d9;
       border-radius: 50%;
       margin-bottom: 20px;
   }

   .free-inbox-wrapper .btn-view-profile {
       background: transparent;
       border: 1px solid #555;
       color: #333;
       padding: 8px 20px;
       font-size: 0.9rem;
       border-radius: 0;
       /* Sharp corners */
       width: 180px;
   }

   .free-inbox-wrapper .btn-view-profile:hover {
       background-color: #f4f4f4;
   }

   /* Inbox Section (Right) */
   .free-inbox-wrapper .inbox-container {
       max-width: 500px;

   }

   /* Tabs */
   .free-inbox-wrapper .tabs-container {
       display: flex;
       gap: 15px;
       margin-bottom: 30px;
   }

   .free-inbox-wrapper .btn-tab-red {
       background-color: #991b1b;
       color: white;
       border: 1px solid #991b1b;
       padding: 8px 0;
       width: 120px;
       text-align: center;
       border-radius: 0;
       font-size: 0.9rem;
   }

   .free-inbox-wrapper .btn-tab-outline {
       background-color: transparent;
       color: #333;
       border: 1px solid #ccc;
       padding: 8px 0;
       width: 120px;
       text-align: center;
       border-radius: 0;
       font-size: 0.9rem;
   }

   /* Scrollable List */
   .free-inbox-wrapper .message-list-scroll {
       height: 500px;
       /* Fixed height for scrolling */
       overflow-y: auto;
       padding-right: 15px;
       /* Space for scrollbar */
       /* Custom Scrollbar Styling */
       scrollbar-width: thin;
       scrollbar-color: #888 #f1f1f1;
   }

   /* Webkit Scrollbar Styling (Chrome/Safari) */
   .free-inbox-wrapper .message-list-scroll::-webkit-scrollbar {
       width: 8px;
   }

   .free-inbox-wrapper .message-list-scroll::-webkit-scrollbar-track {
       background: #f9f9f9;
       border-radius: 4px;
       margin-top: 20px;
       margin-bottom: 20px;
   }

   .free-inbox-wrapper .message-list-scroll::-webkit-scrollbar-thumb {
       background-color: #888;
       border-radius: 4px;
   }

   /* Message Items */
   .free-inbox-wrapper .message-card {
       background-color: #f7f7f7;
       /* Light grey background */
       border-radius: 15px;
       padding: 20px;
       display: flex;
       align-items: center;
       margin-bottom: 20px;
       position: relative;
       transition: all 0.2s;
       border: 1px solid transparent;
   }

   .free-inbox-wrapper .message-card:hover {
       background-color: #fff;
       border: 1px solid #f7f7f7;
   }

   .free-inbox-wrapper .avatar-img {
       width: 60px;
       height: 60px;
       border-radius: 50%;
       object-fit: cover;
       margin-right: 20px;
       /* Red tint filter effect if needed, or just use image */
   }

   .free-inbox-wrapper .msg-info h4 {
       font-family: 'Playfair Display', serif;
       font-size: 1.4rem;
       margin: 0 0 5px 0;
       color: #111;
   }

   .free-inbox-wrapper .msg-info p {
       margin: 0;
       font-size: 0.95rem;
       color: #555;
       font-weight: 300;
   }

   .free-inbox-wrapper .timestamp {
       position: absolute;
       top: 20px;
       right: 20px;
       font-size: 0.9rem;
       color: #444;
   }

   /* Grid Alignment Helpers */
   .free-inbox-wrapper .layout-row {
       display: flex;
       justify-content: center;
       gap: 80px;
       /* Space between profile and inbox */
       flex-wrap: wrap;
   }

   /* Filter Utility */
   .free-inbox-wrapper .d-none-filter {
       display: none !important;
   }

   /* --- ADMIN PORTAL STYLES --- */
   .admin-portal-wrapper {
       font-family: 'Roboto', sans-serif;
       background-color: #fff;
       color: #333;
   }

   /* Typography Overrides within the wrapper */
   .admin-portal-wrapper h1,
   .admin-portal-wrapper h2,
   .admin-portal-wrapper h3,
   .admin-portal-wrapper h4,
   .admin-portal-wrapper h5,
   .admin-portal-wrapper .serif-font {
       font-family: 'Playfair Display', serif;
   }

   /* --- HEADER --- */
   .admin-portal-wrapper .top-header {
       padding: 40px 0;
       position: relative;
   }

   .admin-portal-wrapper .portal-title {
       font-size: 2.5rem;
       color: #333;
       letter-spacing: 1px;
   }

   .admin-portal-wrapper .help-section {
       position: absolute;
       right: 20px;
       top: 50%;
       transform: translateY(-50%);
       display: flex;
       align-items: center;
       gap: 10px;
       font-size: 0.9rem;
       color: #555;
   }

   /* --- LEFT SIDEBAR (INBOX) --- */
   .admin-portal-wrapper .btn-group-custom {
       margin-bottom: 20px;
   }

   .btn-custom-red {
       background-color: #991b1b;
       color: white;
       border: 1px solid #991b1b;
       border-radius: 0 !important;
       padding: 5px 25px;
       font-size: 0.85rem;
   }

   .btn-custom-outline {
       background-color: transparent;
       color: #555;
       border: 1px solid #ccc;
       border-radius: 0 !important;
       padding: 5px 25px;
       font-size: 0.85rem;
   }

   .admin-portal-wrapper .inbox-scroll-container {
       max-height: 500px;
       overflow-y: auto;
       padding-right: 5px;
   }

   .admin-portal-wrapper .inbox-scroll-container::-webkit-scrollbar {
       width: 8px;
   }

   .admin-portal-wrapper .inbox-scroll-container::-webkit-scrollbar-track {
       background: #f9f9f9;
       border-radius: 4px;

   }

   .admin-portal-wrapper .inbox-scroll-container::-webkit-scrollbar-thumb {
       background-color: #888;
       border-radius: 4px;
   }

   /* UPDATED: Message Item Styling */
   .admin-portal-wrapper .message-item {
       display: flex;
       align-items: flex-start;
       padding: 15px 10px;
       background-color: #D9D9D933;
       margin-bottom: 10px;
       border: 1px solid transparent;
       cursor: pointer;
       transition: all .2s;
       border-radius: 8px;
   }

   .admin-portal-wrapper .message-item:hover {
       background-color: #fff;
       border: 1px solid #D9D9D933;
   }

   .admin-portal-wrapper .avatar-img {
       width: 50px;
       height: 50px;
       border-radius: 50%;
       object-fit: cover;
       margin-right: 15px;
       border: 2px solid #fff;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }

   .admin-portal-wrapper .message-content {
       flex-grow: 1;
   }

   .admin-portal-wrapper .sender-name {
       font-family: 'Playfair Display', serif;
       font-size: 1.1rem;
       color: #222;
       margin-bottom: 2px;
       display: block;
   }

   .admin-portal-wrapper .message-preview {
       font-size: 0.85rem;
       color: #555;
       margin: 0;
       line-height: 1.3;
   }

   .admin-portal-wrapper .timestamp {
       font-size: 0.8rem;
       color: #666;
       position: absolute;
       top: 15px;
       right: 15px;
   }

   .admin-portal-wrapper .message-item-wrapper {
       position: relative;
       /* For absolute positioning of timestamp */
   }

   /* --- RIGHT CONTENT --- */
   .admin-portal-wrapper .profile-section {
       display: flex;
       flex-direction: column;
       align-items: center;
       margin-bottom: 40px;
   }

   .admin-portal-wrapper .profile-pic-large {
       width: 100px;
       height: 100px;
       background-color: #d3d3d3;
       border-radius: 50%;
       margin-bottom: 15px;
   }

   .admin-portal-wrapper .btn-edit-profile {
       background: transparent;
       border: 1px solid #999;
       color: #555;
       padding: 5px 20px;
       font-size: 0.8rem;
       border-radius: 0;
   }

   /* Header Row with Search */
   .admin-portal-wrapper .content-header-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 20px;
       margin-top: 30px;
       flex-wrap: wrap;
       gap: 15px;
   }

   .admin-portal-wrapper .table-section-title {
       font-size: 1.5rem;
       margin: 0;
       font-weight: 400;
   }

   .admin-portal-wrapper .search-container {
       position: relative;
       min-width: 350px;
   }

   .admin-portal-wrapper .search-input {
       width: 100%;
       padding: 8px 10px 8px 35px;
       border: 1px solid #ccc;
       border-radius: 0;
       font-size: 0.9rem;
   }

   .admin-portal-wrapper .search-icon {
       position: absolute;
       left: 10px;
       top: 50%;
       transform: translateY(-50%);
       color: #777;
       font-size: 0.8rem;
   }

   /* Admin Table Styling */
   .admin-portal-wrapper .custom-table {
       width: 100%;
       border-collapse: collapse;
       margin-bottom: 30px;
       font-size: 0.85rem;
   }


   .admin-portal-wrapper .custom-table thead {
       background-color: #222;
       /* Dark header */
       color: white;
   }

   .admin-portal-wrapper .custom-table th {
       padding: 12px;
       font-weight: 400;
       font-size: 0.75rem;
       border: 1px solid #444;
       /* Dark border for header */
       vertical-align: middle;
   }

   .admin-portal-wrapper .custom-table td {
       padding: 10px;
       border: 1px solid #999;
       /* Visible grid borders */
       vertical-align: middle;
   }

   /* Striped effect manual control to match screenshot */
   .admin-portal-wrapper .custom-table tbody tr:nth-child(odd) {
       background-color: #fff;
   }

   .admin-portal-wrapper .custom-table tbody tr:nth-child(even) {
       background-color: #e9ecef;
       /* Light grey stripe */
   }

   .admin-portal-wrapper .btn-message-table {
       background-color: #991b1b;
       color: white;
       border: none;
       padding: 6px 12px;
       font-size: 0.75rem;
       display: inline-flex;
       align-items: center;
       gap: 5px;
       width: 100%;
       justify-content: center;
       text-decoration: none;
   }

   .admin-portal-wrapper .btn-message-table:hover {
       background-color: #7f1616;
       color: white;
   }

   /* Filter Utility */
   .admin-portal-wrapper .d-none-filter {
       display: none !important;
   }


   /* --- Modal Overlay (The background dimmer) --- */
   .modal-overlay {
       display: none;
       /* Hidden by default */
       position: fixed;
       z-index: 1000;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.5);
       /* Semi-transparent black */
       justify-content: center;
       align-items: center;
   }

   /* --- Modal Card Styles (From previous request) --- */
   .message-card {
       background-color: #ffffff;
       border: 2px solid #000;
       border-radius: 4px;
       padding: 40px 30px 30px 30px;
       width: 90%;
       max-width: 500px;
       position: relative;
       box-sizing: border-box;
       box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
       animation: popIn 0.3s ease-out;
   }

   /* Animation to make it pop */
   @keyframes popIn {
       from {
           transform: scale(0.8);
           opacity: 0;
       }

       to {
           transform: scale(1);
           opacity: 1;
       }
   }

   /* Close Button */
   .close-btn {
       position: absolute;
       top: 15px;
       right: 15px;
       width: 30px;
       height: 30px;
       background: #fff;
       border: 1px solid #000;
       border-radius: 4px;
       font-size: 20px;
       padding: 0;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .close-btn:hover {
       background-color: #f0f0f0;
   }

   /* Typography & Inputs */
   .card-title {
       text-align: center;
       font-size: 26px;
       margin-top: 0;
       margin-bottom: 30px;
       font-weight: normal;
   }

   .form-group {
       margin-bottom: 20px;
   }

   .sketch-input {
       width: 100%;
       padding: 10px;
       font-size: 16px;
       font-family: inherit;
       border: 1px solid #000;
       border-radius: 2px;
       box-sizing: border-box;
       outline: none;
   }

   .sketch-input.textarea {
       height: 150px;
       resize: vertical;
   }

   .btn-container {
       text-align: center;
       margin-top: 10px;
   }


   .ss-popup-overlay {
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.55);
       display: none;
       align-items: center;
       justify-content: center;
       z-index: 9999;
   }

   .ss-popup {
       background: #e9e1cc;
       width: 90%;
       max-width: 900px;
       padding: 30px;
       border-radius: 10px;
       position: relative;
   }

   .ss-close {
       position: absolute;
       top: 12px;
       right: 15px;
       background: none;
       border: none;
       font-size: 26px;
       cursor: pointer;
       color: #8b0000;
   }

   /* Titles */
   .ss-title {
       margin-bottom: 20px;
       font-weight: 600;
       border-bottom: 1px solid rgba(0, 0, 0, 0.1);
       padding-bottom: 10px;
   }

   /* Each Item Box */
   .ss-item {
       background: #ffffff;
       color: #333;
       padding: 12px 15px;
       margin-bottom: 10px;
       border-radius: 4px;
       font-size: 14px;
       display: flex;
       align-items: center;
       /* This ensures they stay consistent even with different text lengths */
       min-height: 50px;
       width: 100%;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
   }

   /* Action Area */
   .ss-actions {
       margin-top: 25px;
       display: flex;
       justify-content: flex-end;
   }

   @media (max-width:768px) {
       .ss-popup {
           height: 89vh;
           overflow-y: auto;
       }

   }