 /* Import Google Font */
 @import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

 body {
     margin: 0;
     padding: 0;
     font-family: "Lora", serif;
     font-optical-sizing: auto;
     box-sizing: border-box;
     background-color: #f9f9f9;
 }



 .toggleitDaY {
     display: flex;
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
     font-size: 18px;
 }

 .deal {
     background-color: #2fa44f;
     color: white;
     position: absolute;
     top: 30px;
     left: 30px;
     padding: 10px;
     font-weight: bold;
 }

 .image-container {
     position: relative;
     width: 50%;
     /* height: 45%; */
 }

 .image-container img {
     width: 100%;
     height: auto;
     min-height: 200px;
     max-height: 359px;
 }

 .details {
     border-style: groove;
     border-radius: 27px;
     padding: 20px;
     display: flex;
     justify-content: space-between;
     align-items: baseline;
 }

 .hotel-info {
     width: 56%;
 }

 .hotel-info h4 {
     margin-bottom: 10px;
     font-size: 20px;
 }

 .hotel-info p {
     margin-bottom: 8px;
     color: #333;
 }

 .price {
     display: inline-block;
     font-size: 21px;
 }



 .old-price {
     font-size: 16px;
     display: inline-block;
 }

 .price-section {
     width: 40%;
     text-align: right;
 }

 .price-section p {
     font-size: 20px;
     margin-bottom: 5px;
 }

 .price {
     font-size: 28px;
     color: #2fa44f;
 }

 .old-price {
     text-decoration: line-through;
     color: #888;
 }

 .check-availability {
     display: block;
     text-align: center;
     padding: 15px;
     background-color: #f45454;
     color: white;
     text-decoration: none;
     font-weight: bold;
     margin-top: 10px;
 }

 .check-availability:hover {
     background-color: #d94444;
 }

 .package-info {
     background-color: #f7f7f7;
     border-top: 1px solid #ddd;
 }

 .package-info span {
     display: inline-block;
     margin-right: 15px;
     font-weight: bold;
     color: #666;
 }

 .rating {
     color: #555;
     font-size: 14px;
     margin-top: 5px;
 }

 .cta-section {
     padding: 0;
     font-size: 18px;
     text-align: center;
 }

 /* Second Section: Highlights and Form */
 .content-section {
     width: 73%;
     margin: 20px auto;
     display: flex;
     justify-content: space-between;
     gap: 20px;
     margin-top: 20px;
     background-color: white;
     padding: 20px;
 }


 .form-section {
     background-color: white;
     padding: 20px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }

 .package-details {
     width: 60%;
 }

 .form-section {
     width: 35%;
     padding: 25px;
 }

 .package-details h2 {
     margin-bottom: 15px;
     font-size: 24px;
     color: #333;
 }

 .package-details p {
     margin-bottom: 10px;
     color: #555;
 }

 .package-details p strong {
     color: #333;
 }

 .read-more {
     color: #0073aa;
     cursor: pointer;
 }

 .highlights {
     margin-top: 20px;
 }

 .highlights h3 {
     font-size: 20px;
     margin-bottom: 10px;
 }

 .highlight-list {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
 }

 .highlight-item {
     width: 100%;
     flex: 1 1 calc(40% - 10px);
     /* Adjust the width to be one-third minus some margin */
     margin: 5px;
     /* Adjust the margin as needed */
     box-sizing: border-box;

 }

 .highlight-item p {
     margin-bottom: 8px;
     display: flex;
     align-items: center;
 }

 .highlight-item p::before {
     content: "✔";
     color: green;
     margin-right: 10px;
 }

 /* Form Section */
 .form-section h3 {
     margin-bottom: 20px;
     font-size: 22px;
     color: #333;
 }

 .form-section label {
     display: block;
     margin-bottom: 5px;
     font-size: 14px;
     color: #555;
 }

 .form-section input[type="text"],
 .form-section select {
     width: 100%;
     padding: 10px;
     margin-bottom: 15px;
     border: 1px solid #ddd;
     border-radius: 4px;
     font-size: 14px;
 }

 .form-section input[type="checkbox"] {
     margin-right: 10px;
 }

 .departure-options {
     display: flex;
     gap: 10px;
 }

 .departure-options button {
     padding: 10px 20px;
     border: 1px solid #ddd;
     background-color: #f7f7f7;
     cursor: pointer;
 }

 .departure-options button:hover {
     background-color: #eee;
 }

 .submit-btn {
     width: 100%;
     padding: 10px;
     background-color: #f45454;
     color: white;
     border: none;
     font-size: 16px;
     cursor: pointer;
     margin-top: 12px;
 }

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



 .itinerary-container {
     /* position: relative; */
     width: 49%;
     background-color: white;
     border: 1px solid #ddd;
     padding: 20px;
     /* max-width: 800px; */
     margin: 0 auto;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }

 .itinerary-header {
     font-size: 24px;
     font-weight: bold;
     margin-bottom: 20px;
     z-index: 1;
 }

 .itinerary-scroll-container {
     overflow-y: auto;
     padding-right: 10px;
     /* Custom Scrollbar */
     scrollbar-width: thin;
     scrollbar-color: #888 #f1f1f1;
 }


 /* Responsive Design */
 @media screen and (max-width: 768px) {


     .itinerary-scroll-container {
         max-height: 309px !important;
         overflow-y: auto;
         padding-right: 10px;
         /* Custom Scrollbar */
         scrollbar-width: thin;
         scrollbar-color: #888 #f1f1f1;
     }

     .itinerary-container {
         width: 100%;
         height: 400px;
         padding: 15px;
     }



     .day {
         padding: 12px;
     }

     .day-title {
         font-size: 15px;
     }

     .detailSide {
         width: 100% !important;
     }
 }

 .day {

     padding: 15px 0;
     position: relative;
     padding-left: 50px;
 }

 .day:last-child {
     border-bottom: none;
 }

 .day::before {
     content: "";
     position: absolute;
     top: 15px;
     left: 15px;
     width: 12px;
     height: 12px;
     background-color: #2fa44f;
     border-radius: 50%;
     z-index: 1;
 }

 .day::after {
     content: "";
     position: absolute;
     top: 35px;
     left: 20px;
     width: 2px;
     height: calc(100% - 35px);
     background-color: #ccc;
 }

 .day-title {
     font-size: 18px;
     font-weight: bold;
     margin-bottom: 10px;
 }

 .day-label {
     display: inline-block;
     padding: 5px 10px;
     background-color: #f0f0f0;
     font-size: 12px;
     color: #555;
     border-radius: 15px;
 }

 .day-options {
     font-size: 14px;
     color: #888;
     margin-top: 5px;
 }

 .day-options::before {
     content: "(Optional)";
     margin-right: 10px;
     font-size: 12px;
     color: #999;
 }

 .hotel-section {
     width: 50%;
     /* max-width: 800px; */
     margin: 0px auto;
     background-color: white;
     padding: 20px;

     border: 1px solid #ddd;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }

 .hotel-section h1 {
     margin-top: 0;
     font-size: 24px;
     color: #333;
 }

 .note {
     font-size: 14px;
     color: #777;
     margin-bottom: 10px;
 }

 .stay-info {
     margin-bottom: 15px;
     font-size: 16px;
     color: #555;
 }

 .hotel-card {
     padding: 4px;
     height: 140px;
     flex: 0 0 auto;
     width: 330px;
     overflow: hidden;
     scroll-snap-align: start;
     border: 2px solid;
     border-radius: 8px;
     background: white;
     display: flex;
     gap: 5px;

     transition: transform 0.3s ease;
 }

 /* Hide scrollbar for Chrome, Safari and Opera */
 .hotel-cards-container::-webkit-scrollbar {
     display: none;
 }

 .hotel-image {
     width: 120px;
     height: auto;
     object-fit: cover;
     border-radius: 4px;
 }

 .detailSide {
     width: 50%;
 }

 .hotel-details {
     flex: 1;
     display: flex;
     flex-direction: column;
 }

 .hotel-details h2 {
     margin: 0;
     font-size: 22px;
     line-height: 1;
 }

 .star-rating {
     display: flex;
 }

 .hotel-details p {
     margin: 0;
     font-size: 18px;
     color: #666;
 }

 /* Add active state for touch devices */
 .hotel-card:active {
     transform: scale(0.98);
 }



 .hotel-cards-container {
     display: flex;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     /* For smooth scrolling on iOS */
     gap: 20px;
     padding: 20px;

     scrollbar-width: none;
     /* Hide scrollbar for Firefox */
     -ms-overflow-style: none;
     /* Hide*/
 }



 .row {
     display: flex;
     width: 70%;
     border: 1px solid #ccc;
     border-radius: 5px;
     margin: 50px auto;
     padding: 20px;
 }

 .container-inc {
     border: 1px solid #ccc;
     border-radius: 5px;
     margin: 50px auto;
     padding: 20px;
 }

 .tabs {
     display: flex;
     justify-content: start;
     border-bottom: 1px solid #ccc;
 }

 .tab {
     padding: 10px 20px;
     cursor: pointer;
 }

 .tab.active {
     background-color: #f1f1f1;
     border-bottom: 2px solid teal;
 }

 .content {
     margin-top: 20px;
 }

 ul {
     list-style-type: none;
     padding: 0;
 }

 li {
     position: relative;
     padding-left: 25px;
     margin-bottom: 10px;
 }

 .content li::before {
     content: "•";
     color: green;
     position: absolute;
     left: 0;
     top: 0;
     font-size: 20px;
 }

 .exclusions {
     display: none;
 }

 .active+.exclusions {
     display: block;
 }

 .faq-container {
     width: 67%;
     margin: 50px auto;
 }

 h2 {
     font-size: 24px;
     font-weight: bold;
     margin-bottom: 20px;
 }

 .faq-item {
     border-bottom: 1px solid #ccc;
     padding: 10px 0;
 }

 .faq-question {
     display: flex;
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
     /* font-size: 18px; */
 }

 .faq-question .icon {
     font-size: 24px;
     color: red;
     font-weight: bold;
     margin-right: 10px;
 }

 .arrow {
     font-size: 18px;
     color: #555;
 }





 .service-icons {
     display: flex;
     /* margin-left: -32%; */
     justify-content: center;

 }

 .service-icons i {
     font-size: 24px;
     color: black;
     border-right: 1px solid black;
     padding-right: 20px;
 }

 .service-icons i:last-child {
     border: none;
     padding-right: 0;
 }

 .service-icons i p {
     margin-top: 5px;
     font-size: 10px;
 }


 .overview {
     margin-top: 20px;
 }

 .op-container {
     padding: 15px;
     overflow: hidden;
     display: flex;
     flex-direction: row;
     gap: 20px;
     width: 70%;
     margin: auto;
     border-radius: 37px;
     /* border: 1px solid #ddd; */
     box-shadow: 0 0 15px rgb(0, 0, 0);
 }

 /* Mobile styles */
 @media (max-width: 767px) {



     /* responsive body */
     body {

         width: 100%;
     }

     .faq-question:last-child {
         margin-bottom: 20px;
     }

     /* Class that gets added via JavaScript */
     .is-sticky {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         animation: slideDown 0.3s ease-in-out;
     }



     .mob-only {
         display: block;
     }

     .desktop-only {
         /* hide in mobile view */
         display: none;
     }

     .image-container img {
         width: 100%;
         height: auto;
         min-height: 200px;
         max-height: 200px;

     }

     .op-container {
         flex-direction: column;
         width: 100%;

     }

     .image-container {
         width: 100%;
     }

     .details {
         margin: 10px;
         /* padding: 0; */
         padding-bottom: 7px;
         padding-top: 7px;
         flex-direction: column;
         align-items: flex-start;
     }

     .hotel-info,
     .price-section {
         width: 100%;
         text-align: left;
     }

     .price-section {
         text-align: left;
         margin-top: 10px;
     }

     .content-section {
         flex-direction: column;
         width: 100%;
         padding: 0;
     }

     .package-details,
     .form-section {

         width: 100%;
         margin-bottom: 20px;
     }

     .form-section {
         display: none;
     }

     /* .highlight-list {
        flex-direction: ;
    } */


     .hotel-div {
         padding-top: 4px;
     }

     .itinerary-container,
     .hotel-section {
         width: 100%;
         margin: 10px;
         margin: auto;
     }

     .row {
         flex-direction: column;
         width: 100%;
         margin: auto;
         padding: 0;
     }


     .faq-container {
         width: 85%;
         margin: 24px;
     }

     .hotel-card {
         width: 99%;
         flex-direction: row;
         /* Change to horizontal layout on larger screens */
     }

     .hotel-image {
         width: 50%;
         /* Set image width to 50% */
         max-width: 400px;
         /* Max width for the image */
     }

     .hotel-details {
         width: 50%;
         /* Set details width to 50% */

         /* Add padding */
     }

     .content {
         flex-direction: row;
         /* Change to horizontal layout for inclusions/exclusions */
         justify-content: space-between;
         /* Space between columns */
     }

     .inclusions,
     .exclusions {
         width: 100%;
         /* Set a width for inclusions and exclusions */
         display: block;
         /* Allow block display for both */
     }

 }



 /* Hide the menu on larger screens */
 @media (min-width: 768px) {
     .mobile-tabs {
         display: none;
     }
 }

 /* Display the menu on smaller screens */
 @media (max-width: 767px) {
     .mob-tab-sticky {

         position: relative;
         z-index: 4;
         transform: translate3d(0px, 0px, 0px);
         width: 100%;
         background: #fff;
         z-index: 100;
     }

     @keyframes slideDown {
         from {
             transform: translateY(-100%);
         }

         to {
             transform: translateY(0);
         }
     }

     .package-info {
         padding: 10px;
         background-color: #f7f7f7;
         border-top: 1px solid #ddd;
     }

     .mobile-tabs {
         top: 0px;
         width: 381.4px;
         display: flex;
         overflow-x: auto;
         white-space: nowrap;
         padding: 10px;
         background-color: #fff;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none;
         -ms-overflow-style: none;
         /* IE and Edge */
         /* Hide scrollbar for Firefox */
     }

     .service-icons {
         /* margin-left: -18%; */
         gap: 4px;
         margin-top: 10px;
     }

     .service-icons i p {
         margin-top: 5px;
         font-size: 9px;
     }

     .mobile-tabs::-webkit-scrollbar {
         display: none;
         /* Hide scrollbar for Chrome, Safari, and Opera */
     }

     .container-inc {
         border: 1px solid #ccc;
         border-radius: 5px;
         margin: 50px auto;
         padding: 0 7px;
     }

     .mobile-tabs a {
         text-decoration: none;
         padding: 10px 20px;
         margin-right: 10px;
         color: #000;
         border-radius: 5px;
         font-weight: bold;
         display: inline-block;
         cursor: pointer;
     }

     .cta-section {

         /* margin: 0;
        padding: 3px; */
         font-size: 15px;
         text-align: center;
     }

     .mobile-tabs a:hover {
         background-color: #f0f0f0;

     }
 }

 /* Style for sections to differentiate */
 .section {
     height: 500px;
     padding: 20px;
 }


 .read-more-toggle a {
     color: #0073aa;
     cursor: pointer;
     text-decoration: underline;
 }

 .read-more-toggle a:hover {
     color: #005177;
 }

 .read-more-content {
     margin-top: 10px;
 }

 .package-gallery-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
 }

 .discount {
     font-size: 12px;
     color: #fff;
     background: #20a397;
     border-radius: 27px;
     display: inline-block;
     padding: 0 10px;
     height: 18px;
 }

 /* Hide buttons by default */
 .fixed-buttons {
     display: none;
 }

 /* Display buttons only on mobile view */
 @media (max-width: 768px) {
     .fixed-buttons {
         display: flex;
         justify-content: space-between;
         width: 100%;
         padding: 10px;
         box-sizing: border-box;
         position: fixed;
         bottom: 0;
         left: 0;
         background-color: #ffffff;
         z-index: 1000;
     }

     /* .call-btn, */
     .availability-btn {
         flex: 1;
         padding: 12px;
         font-size: 16px;
         color: #ffffff;
         border: none;
         cursor: pointer;
     }

     .call-btn {
         /* flex: 1; */
         width: 32%;
         padding: 12px;
         font-size: 16px;
         color: #ffffff;
         border: none;
         cursor: pointer;
         border: 2px solid #ff7070;
         color: #ff7070;


         /* color for "Call Us" button */
         margin-right: 10px;
     }

     .availability-btn {
         background-color: #ff4d4d;
         /* color for "Check Availability" button */
     }


 }

 .fromM {
     display: none;
 }

 /* Mobile-only styles (max-width: 767px) */
 @media screen and (max-width: 767px) {
     .fromM {
         height: 73%;
         display: none;
         /* Hidden by default */
         position: fixed;
         bottom: -100%;
         left: 0;
         width: 100%;
         background: white;
         z-index: 1000;
         border-radius: 20px 20px 0 0;
         padding: 20px;
         box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
         transition: bottom 0.3s ease-in-out;
     }

     /* When form is shown */
     .fromM.show-modal {
         display: block;
         bottom: 0;
     }

     /* Overlay for mobile */
     .modal-overlay {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: rgba(0, 0, 0, 0.5);
         z-index: 999;
     }

     /* Show overlay */
     .modal-overlay.show-modal {
         display: block;
     }

     /* Close button */
     .fromM .close-btn {
         position: absolute;
         right: 15px;
         top: 15px;
         background: none;
         border: none;
         font-size: 24px;
         cursor: pointer;
         color: #666;
     }
 }

 /* Hide on desktop */
 @media screen and (min-width: 768px) {
     .fromM {
         display: none !important;
     }

     /* 
     .slideshow-container {
         margin-top: 10px;
     } */
 }



 @media screen and (max-width: 768px) {
     .slideshow-container {
         height: 200px !important;
         min-height: 200px !important;
         max-height: 200px !important;
     }



 }

 .package-container {
     display: flex;
     gap: 20px;
     overflow-x: auto;
     scroll-behavior: smooth;
     scrollbar-width: none;
     -ms-overflow-style: none;
     padding: 20px 0;
 }

 .package-card {
     flex: 0 0 300px;
     min-width: 300px;
     background: #fff;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     transition: transform 0.2s;
 }

 .scroll-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 40px;
     height: 40px;
     background: rgba(32, 163, 151, 0.85);
     color: white;
     border: none;
     border-radius: 50%;
     cursor: pointer;
     opacity: 0;
     transition: opacity 0.3s;
 }

 /* Improved scroll arrows styling */
 .scroll-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 44px;
     height: 44px;
     background: rgba(32, 163, 151, 0.85);
     /* Brand color with transparency */
     color: white;
     border: none;
     border-radius: 50%;
     cursor: pointer;
     z-index: 2;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     opacity: 0;
     visibility: hidden;
 }

 .scroll-arrow:hover {
     background: rgba(32, 163, 151, 1);
     /* Solid brand color on hover */
     transform: translateY(-50%) scale(1.1);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }

 .scroll-arrow:active {
     transform: translateY(-50%) scale(0.95);
 }

 .scroll-arrow i {
     font-size: 20px;
     color: white;
 }

 .scroll-left {
     left: 15px;
 }

 .scroll-right {
     right: 15px;
 }


 /* Show arrows with animation when visible */
 .scroll-arrow.visible {
     opacity: 1;
     visibility: visible;
 }



 /* Responsive design */
 @media (max-width: 768px) {
     .scroll-arrow {
         display: none !important;
     }
 }

 @media (hover: none) {
     .scroll-arrow {
         display: none !important;
     }
 }

 /* Also show arrows in mobile view */
 @media (max-width: 768px) {
     .scroll-arrow {
         width: 36px;
         /* Slightly smaller on mobile */
         height: 36px;
         display: flex !important;
         /* Force display on mobile */
         opacity: 0.8;
         /* Slightly more transparent on mobile */
     }

     .package-card {
         flex: 0 0 300px;
         min-width: 254px;
         background: #fff;
         border-radius: 8px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         transition: transform 0.2s;
     }

     .scroll-left {
         left: 5px;
         /* Closer to edge on mobile */
     }

     .scroll-right {
         right: 5px;
     }
 }

 @media (hover: none) {
     .scroll-arrow {
         display: flex !important;
     }
 }

 .show-only-mob {
     display: none;
 }

 .hotel-popup {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.8);
     z-index: 1000;
     justify-content: center;
     align-items: center;
 }

 .hotel-popup-content {
     background-color: #fff;
     padding: 20px;
     border-radius: 8px;
     text-align: center;
     max-width: 500px;
     width: 90%;
     position: relative;
 }

 .hotel-popup-img {
     width: 100%;
     height: 369px;
     border-radius: 8px;
 }

 .hotel-c-close {
     position: absolute;
     top: 10px;
     right: 20px;
     font-size: 30px;
     cursor: pointer;
     color: #fff;
 }

 .hotel-a-prev,
 .hotel-a-next {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(0, 0, 0, 0.5);
     color: white;
     font-size: 18px;
     border: none;
     cursor: pointer;
     border-radius: 50%;
     padding: 10px;
 }

 .hotel-a-prev {
     left: 10px;
 }

 .hotel-a-next {
     right: 10px;
 }

 .read-more-btn {
     font-weight: 600;
     display: block;
     color: #2196f3;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     transition: background-color 0.2s;
 }


 /* light Box */

 .lightbox {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.9);
     z-index: 1000;
 }

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

 .lightbox img {
     max-width: 90%;
     max-height: 90vh;
     object-fit: contain;
     margin: auto;
 }

 .lightbox .close {
     position: absolute;
     top: 7%;
     right: 25px;
     color: #fff;
     font-size: 35px;
     cursor: pointer;
     z-index: 1001;
 }

 .lightbox-prev,
 .lightbox-next {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     color: white;
     font-size: 30px;
     cursor: pointer;
     padding: 16px;
     background: rgba(0, 0, 0, 0.5);
     border-radius: 50%;
 }

 .lightbox-prev {
     left: 20px;
 }

 .lightbox-next {
     right: 20px;
 }

 .lightbox-caption {
     position: absolute;
     bottom: 20px;
     left: 0;
     right: 0;
     text-align: center;
     color: white;
     padding: 10px;
     background: rgba(0, 0, 0, 0.5);
 }


 /* Responsive design  Form Css*/

 @media screen and (min-width: 768px) {
     .sticky-form {
         position: -webkit-sticky;
         position: sticky;
         top: 20px;
     }


     /* Container for form and content */
     .content-section {
         display: flex;
         gap: 30px;
         align-items: flex-start;
     }

     .package-details {
         flex: 2;
     }

     .sticky-form {
         flex: 1;
         max-width: 350px;
     }
 }

 /* end */

 /* package recently cards */



 /* Improved scroll arrows styling */
 .scroll-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 44px;
     height: 44px;
     background: rgba(32, 163, 151, 0.85);
     /* Brand color with transparency */
     color: white;
     border: none;
     border-radius: 50%;
     cursor: pointer;
     z-index: 2;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     opacity: 0;
     visibility: hidden;
 }

 .scroll-arrow:hover {
     background: rgba(32, 163, 151, 1);
     /* Solid brand color on hover */
     transform: translateY(-50%) scale(1.1);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }

 .scroll-arrow:active {
     transform: translateY(-50%) scale(0.95);
 }

 .scroll-arrow i {
     font-size: 20px;
     color: white;
 }

 .scroll-left {
     left: 15px;
 }

 .scroll-right {
     right: 15px;
 }


 /* Show arrows with animation when visible */
 .scroll-arrow.visible {
     opacity: 1;
     visibility: visible;
 }

 /* Responsive design */
 @media (max-width: 768px) {
     .scroll-arrow {
         display: none !important;
     }
 }

 @media (hover: none) {
     .scroll-arrow {
         display: none !important;
     }
 }

 /* Also show arrows in mobile view */
 @media (max-width: 768px) {
     .scroll-arrow {
         width: 36px;
         /* Slightly smaller on mobile */
         height: 36px;
         display: flex !important;
         /* Force display on mobile */
         opacity: 0.8;
         /* Slightly more transparent on mobile */
     }

     .scroll-left {
         left: 5px;
         /* Closer to edge on mobile */
     }

     .scroll-right {
         right: 5px;
     }
 }

 @media (hover: none) {
     .scroll-arrow {
         display: flex !important;
     }
 }


 /* review TExt OR Cards */


 /* Main section styling */
 .google-reviews {
     padding: 4rem 0;
     background: #f8fafc;
     overflow: hidden;
     position: relative;
 }

 .google-reviews h2 {
     text-align: center;
     color: #1e293b;
     font-size: 2.25rem;
     font-weight: 600;
     margin-bottom: 3rem;
 }

 /* Container with scrolling animation */
 .reviews-container {
     display: flex;
     gap: 2rem;
     padding: 1rem;
     width: fit-content;
     animation: scroll 30s linear infinite;
 }

 @keyframes scroll {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(calc(-350px * 5 - 6rem));
         /* Width of cards plus gaps */
     }
 }

 /* Add hover pause */
 .reviews-container:hover {
     animation-play-state: paused;
 }

 /* Individual review card */
 .review-card {
     background: #ffffff;
     border-radius: 1rem;
     padding: 1.5rem;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     width: 350px;
     flex-shrink: 0;
     /* Prevent cards from shrinking */
 }

 /* Review header styling */
 .review-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 1rem;
 }

 .reviewer-name {
     font-weight: 600;
     color: #1e293b;
     font-size: 21px;
 }

 /* Star rating styling */
 .review-rating {
     display: flex;
     gap: 0.25rem;
 }

 .star {
     color: #fbbf24;
     font-size: 17px;
 }

 /* Review text styling */
 .review-text {
     color: #4b5563;
     font-size: 18px;
     line-height: 1.6;
     margin: 1rem 0;
     min-height: 80px;
 }

 /* Add fade effect */
 .google-reviews::before,
 .google-reviews::after {
     content: "";
     position: absolute;
     top: 0;
     width: 150px;
     height: 100%;
     z-index: 2;
 }

 .google-reviews::before {
     left: 0;
     background: linear-gradient(to right, #f8fafc 0%, transparent 100%);
 }

 .google-reviews::after {
     right: 0;
     background: linear-gradient(to left, #f8fafc 0%, transparent 100%);
 }

 /* Responsive design */
 @media (max-width: 768px) {
     .google-reviews {
         padding: 3rem 0;
     }

     .google-reviews h2 {
         font-size: 1.875rem;
         margin-bottom: 2rem;
     }

     .review-card {
         width: 300px;
         padding: 1.25rem;
     }

     @keyframes scroll {
         0% {
             transform: translateX(0);
         }

         100% {
             transform: translateX(calc(-300px * 5 - 6rem));
         }
     }
 }