/* Banner Section */
 .memebership_banner {
     /* background: #f9f6f1; */
     position: relative;
     /* background-image: url(https://sundariwellnessclub.com/wp-content/uploads/2026/04/banner-wellness.jpg); */
     padding: 200px 0 100px;
     overflow: hidden;
     min-height: 100vh;
     display: flex;
     align-items: center;
 }

 .memebership_banner::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg,
             rgb(0 0 0 / 50%) 31.78%,
             rgba(18, 18, 18, 0) 100%);
     z-index: 0;
 }

 .memebership_banner .bg_img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transform: scale(1.05);
 }

 .memebership_banner .bg_img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
 }

 .memebership_banner .container {
     position: relative;
     z-index: 1;
 }

 .memebership_banner_inner .memebership_banner_title {
     display: flex;
     flex-direction: column;
     gap: 30px;
     max-width: 1000px;
     align-items: center;
     margin: auto;
     text-align: center;
 }

 .memebership_banner_inner .memebership_banner_title h1 {
     font-size: 70px;
     line-height: 1.1;
     color: var(--white);
     margin: 0;
 }


 .memebership_banner_inner .memebership_banner_title p {
     color: #ffffff;
     margin-bottom: 0px;
     max-width: 800px;
     font-size: 20px;
     line-height: 1.5;
 }

 .memebership_banner_inner .btn-wrapper {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
     align-items: center;
 }


 /* Banner End */


 .memebership_sec {
     padding: 100px 0;
     background: #faf8f5;
 }

 .memebership_sec .sec_header {
     display: flex;
     flex-direction: column;
     max-width: 810px;
     margin: auto;
     text-align: center;
     margin-bottom: 60px;
 }

 .memebership_sec .sec_header .small_title {
     color: var(--metallic-gold);
     font-size: 14px;
     text-transform: uppercase;
     letter-spacing: 18%;
 }

 .memebership_sec .sec_header h2 {
     font-size: 60px;
     line-height: 1.2;
     font-weight: 600;
     margin-top: 5px;
     margin-bottom: 16px;
     color: var(--primary);
 }

 .memebership_sec .sec_header p {
     font-size: 18px;
     line-height: 1.5;
 }

 .memebership_sec .grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
 }

 .memebership_sec .add-comment {
     margin-top: 50px;
     padding: 20px 40px;
     background-color: rgba(186, 158, 100, 0.05);
     border: 1px solid rgba(186, 158, 100, 0.2);
     max-width: 1000px;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
 }

 .memebership_sec .add-comment p {
     font-size: 16px;
     font-weight: 500;
     line-height: 1.6;
     color: var(--primary);
     margin: 0;
     font-style: italic;
 }

 .memebership_sec .plan_card {
     background: var(--white);
     position: relative;
     margin-top: 42px;
     transition: 0.3s ease-in-out;
 }

 .memebership_sec .plan_card.popular_plan {
     box-shadow: 0 30px 80px -30px hsl(24 30% 12% / .35);
 }

 .memebership_sec .plan_card:hover {
     transform: translateY(-10px);
 }

 .memebership_sec .plan_card::before {
     content: '';
     position: absolute;
     height: 5px;
     width: 100%;
     background: var(--pecan);
     top: -5px;
 }

 .memebership_sec .plan_card.popular_plan::before {
     background: transparent;
 }

 .memebership_sec .plan_card .popular_title {
     padding: 10px;
     background: linear-gradient(135deg, hsl(38 55% 55%), hsl(42 70% 72%));
     /* color: var(--white); */
     text-align: center;
     height: 42px;
     margin-top: -42px;
 }

 .memebership_sec .plan_card .card_content {
     padding: 20px;
     height: 100%;
     display: flex;
     flex-direction: column;
     border: 1px solid #00000017;
 }

 .memebership_sec .plan_card .card_content .small_title {
     font-size: 12px;
     font-weight: 500;
     text-transform: uppercase;
 }

 .memebership_sec .plan_card .card_content h3 {
     font-size: 46px;
     margin: 14px 0 50px;
     font-weight: 500;
     color: var(--metallic-gold);
 }

 .memebership_sec .plan_card .card_content .price_text {
     font-size: 40px;
     margin-bottom: 6px;
 }

 .memebership_sec .plan_card .card_content .price_text span {
     font-size: 16px;
 }

 .memebership_sec .plan_card .card_content .save_text {
     font-size: 14px;
     color: #00000096;
     font-weight: 500;
 }

 .memebership_sec .plan_card .card_content .small_title {
     font-size: 12px;
     font-weight: 500;
     text-transform: uppercase;
 }

 .memebership_sec .plan_card .card_content h3 {
     font-size: 46px;
     margin: 14px 0 50px;
     font-weight: 500;
     color: var(--metallic-gold);
 }

 .memebership_sec .plan_card .card_content .price_text {
     font-size: 40px;
     margin-bottom: 6px;
 }

 .memebership_sec .plan_card .card_content .price_text span {
     font-size: 16px;
 }

 .memebership_sec .plan_card .card_content .save_text {
     font-size: 14px;
     color: #00000096;
     font-weight: 500;
 }

 .memebership_sec .plan_card .card_content .include_list {
     padding-left: 0px;
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin-bottom: 20px;
 }

 .memebership_sec .plan_card .card_content .include_list li {
     position: relative;
     display: flex;
     gap: 10px;
     font-size: 16px;
 }

 .memebership_sec .plan_card .card_content .include_list li::before {
     content: '';
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-check h-4 w-4 mt-1 shrink-0 text-primary'%3E%3Cpath d='M20 6 9 17l-5-5'%3E%3C/path%3E%3C/svg%3E");
     background-size: 16px;
     background-position: center 3px;
     background-repeat: no-repeat;
     display: block;
     width: 16px;
     min-width: 16px;
 }

 .memebership_sec .plan_card .card_content .btn-primary {
     margin-top: auto;
     text-align: center;
 }

 #full-experience {
     padding: 100px 0px;
     background-color: var(--pecan-light);
 }

 .membership-list {
     padding: 60px 0 0;
 }

 .membership-listitem {
     display: grid;
     grid-template-columns: repeat(12, minmax(0, 1fr));
     gap: 2.5rem;
     padding: 3rem 0;
     border-bottom: 1px solid #e2dbd5;

     &:first-of-type {
         padding-top: 0;
     }

     &:last-of-type {
         padding-bottom: 0;
         border-bottom: 0;
     }
 }

 .membership-listitem .left {
     grid-column: span 4 / span 4;
     position: sticky;
     top: 120px;
     align-self: start;
 }

 .membership-listitem .left p {
     margin-bottom: 8px;
     font-size: 14px;
     line-height: 16px;
     letter-spacing: 2px;
     color: #a77f2d;
 }

 .membership-listitem .left h3 {
     font-size: 2.25rem;
     line-height: 2.5rem;
     color: #2a241d;
     margin: 0 0 20px;
 }

 .membership-listitem .right {
     grid-column: span 8 / span 8;
 }

 .membership-listitem .right p {
     line-height: 26px;
     font-size: 18px;
     color: #2a241dbf;
     font-weight: 500;
 }

 .membership-listitem .left .price {
     padding: 20px 80px 20px 20px;
     background: var(--pecan-mid);
     border-left: 3px solid var(--pecan);
     margin-bottom: 20px;
     display: flex;
     align-items: center;
     width: fit-content;
 }

 .membership-listitem .left .price p {
     font-size: 28px;
     color: #2a241d;
     font-weight: 500;
     margin-bottom: 0;
 }

 .membership-listitem .left .price p span {
     color: #a77f2d;
     font-size: 16px;
 }

 /* Media Query */
 @media (max-width:1024px) {
     .memebership_banner {
         padding: 150px 0 70px;
     }

     .memebership_banner_inner .memebership_banner_title h1 {
         font-size: 46px;
     }

     .memebership_sec,
     #full-experience {
         padding: 70px 0;
     }

     .memebership_sec .grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .memebership_sec .sec_header h2 {
         font-size: 46px;
     }

     .memebership_sec .plan_card .card_content h3 {
         font-size: 36px;
     }

     .memebership_sec .plan_card .card_content .price_text {
         font-size: 32px;
     }

     .memebership_sec .plan_card .card_content .include_list li {
         font-size: 15px;
     }

     .memebership_sec .plan_card .card_content .include_list li::before {
         width: 14px;
         background-size: 14px;
         background-position: center 5px;
     }

     .membership-list {
         padding-top: 40px;
     }
 }

 @media (max-width: 991px) {
     .membership-listitem .left .price {
         padding: 20px 40px 20px 20px;
     }
 }

 @media (max-width:768px) {

     .memebership_banner {
         padding: 130px 0 40px;
     }

     .memebership_banner_inner .memebership_banner_title {
         gap: 20px;
     }

     .memebership_banner_inner .memebership_banner_title h1 {
         font-size: 40px;
     }

     .memebership_banner_inner .memebership_banner_title p {
         font-size: 18px;
     }

     .memebership_sec,
     #full-experience {
         padding: 40px 0;
     }

     .memebership_sec .grid {
         grid-template-columns: repeat(1, 1fr);
     }

     .memebership_sec .plan_card {
         margin-top: 0px;
     }

     .memebership_sec .plan_card .popular_title {
         margin-top: 0;
     }

     .memebership_sec .plan_card .card_content {
         height: auto;
     }

     .memebership_sec .sec_header {
         margin-bottom: 40px;
     }

     .memebership_sec .sec_header h2 {
         font-size: 36px;
     }

     .memebership_sec .sec_header p {
         font-size: 16px;
     }

     .memebership_sec .plan_card .card_content h3 {
         font-size: 32px;
         margin-bottom: 30px;
     }

     .memebership_sec .plan_card .card_content .price_text {
         font-size: 28px;
     }

     .membership-listitem .left,
     .membership-listitem .right {
         grid-column: span 12 / span 12;
     }

     .membership-listitem .left {
         position: relative;
         top: auto;
     }

     .membership-listitem {
         gap: 1rem;
         padding: 1.5rem 0;
     }

     .membership-listitem .left h3 {
         font-size: 28px;
         line-height: 1;
     }

     .membership-listitem .right p {
         line-height: 24px;
         font-size: 16px;
     }

     .membership-listitem .left .price p {
         font-size: 22px;
     }
 }