.carousel-btn {
    background: rgba(0, 0, 0, 0.5);
    /* Semi-transparent dark background */
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* transition: background 0.3s ease, transform 0.2s ease; */
}

.carousel-btn:hover {
    background: rgba(0, 0, 0, 0.7);
    /* Darker on hover */
    /* transform: scale(1.1); */
    /* Slightly enlarge on hover */
}

svg {
    stroke: #A83B5E;
    /* White arrow */
}

svg:hover {
    stroke: #A83B5E;
    /* Gold color on hover */
}

.iconMenu svg {
    stroke: #A83B5E;
}

.carousel-indicator {
    background: #fff;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
    transition: background 0.3s ease;
}

.carousel-indicator.active {
    background: #A83B5E;
}

/* Hide scrollbar for horizontal scrolling */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.text-custom-color {
    color: #A83B5E;
}

.custom-bg-color {
    background-color: #A83B5E;
}

span.flatpickr-day.selected {
    background: #A83B5E;
    border-color: #A83B5E;
}

span.flatpickr-day.selected:hover {
    background: #A83B5E;
    border-color: #A83B5E;
}

.tags-container {
    display: flex;
    /* Aligns items in a row */
    gap: 10px;
    /* Optional: adds spacing between the tags */
    margin-bottom: 5px;
}

.tag {
    padding: 10px 20px;
    background-color: #f5a623;
    /* Example background color */
    color: white;
    border-radius: 5px;
    font-weight: bold;
} 

/* Container Styling */
.spa-container {
    display: flex;
    flex-wrap: wrap;
   
    justify-content: center;
    align-items: stretch; /* Ensures all cards stretch to the same height */
}
/* Ensure all columns have equal width */



/* Card Styling */
.spa-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: left;
    transition: 0.3s;
   
    display: flex;
    flex-direction: column;
 
}

/* Image Styling */
.spa-card img {
    width: 100%;
    height: 220px; /* Fixed height to maintain consistency */
    object-fit: cover;
    border-radius: 12px 12px 0 0;
}

/* Content Wrapper */
.spa-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Expands content area */
    justify-content: space-between; /* Distributes content evenly */
   
    overflow: hidden; /* Prevents content overflow */
}

/* Heading Styling */
.spa-card h3 {
    color: #a52a5b;
    font-size: 18px;
	text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Text Styling */
.spa-card p {
    font-size: 18px;
    color: #444;
    
    flex-grow: 1; /* Ensures text expands evenly */
    overflow: hidden;
    
}

 @media (max-width: 768px) {
        .container_responsive {
            flex-direction: column;
            display: flex;
            align-items: center;
        }
      
           
    }


    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding-bottom: 20px;
    }
    
    .search-container {
        /* background-color: #f8f3df; */
        /* padding: 24px; */
        border-radius: 8px;
        /* box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); */
        display: grid;
        grid-template-columns: 1fr;
        /* gap: 24px; */ /*old*/
        gap:16px;
    }
    
    /* @media (min-width: 768px) {
        .search-container {
            grid-template-columns: 1fr auto 1fr;
        }
    } */
    
    .section-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        text-align: center;
        /* margin-bottom: 16px;  */  /*old*/
        margin-bottom: 8px;
    }
    
    .form-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        width: 100%;
    }
    
    .row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    @media (min-width: 770px) {
        .row {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    .input-group {
        width: 100%;
    }
    
    .label {
        display: block;
        font-size: 16px;
        font-weight: bold;
        color: black;
        margin-bottom: 4px;
    }

    .flatpickr-wrapper{
        width: 100%;
    }
    
    .input,
    .select {
        width: 100%;
        border: 2px solid #ccc;
        border-radius: 4px;
        padding: 8px;
        font-size: 16px;
        height: 40px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .input:hover,
    .select:hover {
        border-color: #A83B5E;
    }
    
    .input:focus,
    .select:focus {
        outline: none;
        border-color: #A83B5E;
    }
    
    .button {
        background-color: #A83B5E; /* Initial solid color */
        color: white;
        padding: 12px 24px;
        border-radius: 4px;
        font-weight: bold;
        cursor: pointer;
        text-align: center;
        font-size: 16px;
        position: relative;
        display: inline-block;
        overflow: hidden;
        border: none;
        outline: none;
        transition: transform 0.2s ease;
    }
    
    .button {
        background-color: #A83B5E; /* Initial solid color */
        color: white;
        padding: 12px 24px;
        border-radius: 4px;
        font-weight: bold;
        cursor: pointer;
        text-align: center;
        font-size: 16px;
        position: relative;
        display: inline-block;
        overflow: hidden;
        border: none;
        outline: none;
        transition: transform 0.2s ease;
    }
    
    /* Create animated gradient layer */
    .button::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, #A83B5E, #d17d95, #A83B5E, #d17d95);
        background-size: 300% 300%;
        animation: gradientAnimation 3s infinite linear;
        opacity: 0; /* Initially hidden */
        transition: opacity 0.5s ease-in-out;
        z-index: 0; /* Keeps it behind the text */
    }
    
    /* Make the animated gradient visible on hover */
    .button:hover::before {
        opacity: 1;
    }
    
    /* Ensure text stays on top */
    .button span {
        position: relative;
        z-index: 1; /* Keeps text above the gradient */
    }
    
    /* Infinite gradient animation */
    @keyframes gradientAnimation {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
        
    
    .divider {
        border-top: 1px solid #ccc;
    }
    
    /* @media (min-width: 768px) {
        .divider {
            border-left: 1px solid #ccc;
            border-top: none;
        }
    } */
    
    .right-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .description {
        font-size: 16px;
        /* color: #4a4a4a; */
        /* margin-bottom: 16px; */  /*old*/
        margin-bottom: 8px;
        /* word-break: keep-all; */  /*old*/
        word-break: break-word;
    line-break: strict;
    overflow-wrap: break-word;
    white-space: normal;
    }
    
    .highlight-text {
        color: #A83B5E;
    }


    /* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Grid Layout */
.gridCard-second {
        
        gap: 24px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: start; /* Align grid items to the left */
         /* Override auto centering */
    
}



.gridCard {
    display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
}

/* Card Styling */
.cardHome {
    background-color: white;
    overflow: hidden;
}


.cardHome {
    position: relative;
    background-color: white;
    overflow: hidden;
    opacity: 1;
    cursor: pointer;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    padding: 16px;
    /* box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); */
    border-radius: 8px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08), 0px -2px 4px rgba(0, 0, 0, 0.08), 2px 0px 4px rgba(0, 0, 0, 0.08), -2px 0px 4px rgba(0, 0, 0, 0.08);
}

/* Initially Hidden Glow Effect */
/* @media (min-width:769px){ */
.cardHome::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    width: 99999px;
    height: 99999px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: conic-gradient(rgba(0,0,0,0), #A83B5E, rgba(0,0,0,0) 25%);
    opacity: 0; /* Hidden by default */
    transition: opacity 0.5s ease-in-out;
    z-index: -2;
}

/* Inner Box to Maintain Border Effect */
.cardHome::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    background: white;
    border-radius: 7px;
    z-index: -1;
}

/* Show Glow Effect on Hover */
.cardHome:hover::before {
    opacity: 1; /* Make it visible */
    animation: rotate 4s linear infinite; /* Start rotation */
}
/* } */
/* Keyframe Animation for Rotating Glow */
@keyframes rotate {
    100% {
        transform: translate(-50%, -50%) rotate(1turn);
    }
}

/* Animation start */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Initially hide elements */
.cardHome {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Active class when element is in viewport */
.cardHome.show {
    opacity: 1;
    transform: translateY(0);
}
/* Animation end */

/* Card Image */
.card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* Card Content */
.card-content {
    padding: 16px 0px 0px 0px;
}

/* Card Title */
.card-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    color:#A83B5E;
}

/* Card Text */
.card-text {
    font-size: 1rem;
    color: #A9701C;
    margin-top: 8px;
}


/* Section Styling */
.news-section {
    /* padding-bottom: 40px; */
    text-align: center;
}

/* Section Title */
.news-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #A83B5E;
    margin-bottom: 32px;
    margin-top: 16px;
}

/* Grid Layout */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    justify-content: center;
    margin: 0 auto;
}

@keyframes glowingBorder {
    0% {
        border-color: #FFD700; /* Start with Yellow */
        box-shadow: 0 0 10px #FFD700;
    }
    50% {
        border-color: #FF6347; /* Tomato (or pick another complementary color) */
        box-shadow: 0 0 20px #FF6347;
    }
    100% {
        border-color: #FFD700; /* Back to Yellow */
        box-shadow: 0 0 10px #FFD700;
    }
}

/* Card Styling */
.news-card {
    background-color: white;
    border: 1px solid #FFD700; /* Yellow border */
    border-radius: 8px;
    text-align: center;
    padding: 24px;
}

.news-card:hover {
    border-color: transparent; /* Hide the static border */
}

.news-card::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #A83B5E,#d17d95, #A83B5E,#d17d95 );
    background-size: 300% 300%;
    border-radius: 8px;
    z-index: -1;
    opacity: 0; /* Hidden initially */
    transition: opacity 0.3s ease-in-out;
}

.news-card:hover::before {
    opacity: 1; /* Show glowing effect on hover */
    animation: borderAnimation 3s linear infinite;
}

@keyframes borderAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Initially hide elements */
.news-card {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Active class when element is in viewport */
.news-card.show {
    opacity: 1;
    transform: scale(1);
}
/* Animation end */

/* Card Icon */
.news-icon svg {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    fill: #605F5F; /* Default icon color */
    stroke: none; /* Ensure no unwanted strokes */
    transition: fill 0.3s ease-in-out; /* Smooth transition */
}

.news-card:hover .news-icon svg {
    fill: white !important; /* Change fill color to white on hover */
    stroke: white !important; /* Ensures full white effect */
}

/* Card Title */
.news-card-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #000;
    margin-bottom: 8px;
}

/* Card Text */
.news-card-text {
    font-size: 1rem;
    text-align: center;
    margin-bottom: 16px;
}

/* Link */
.news-link {
    color: #A83B5E;
    text-decoration: underline;
    margin-top: 16px;
    font-size: 14px;
}

.news-card:hover .news-card-title,
.news-card:hover .news-card-text, 
.news-card:hover .news-link {
    color: white;
    transition: color 0.3s ease-in-out; /* Smooth color transition */
}


.news-icon{
    display: flex;
    justify-content: center;
}

.headerHome{
    text-align: center;
    font-size: 1.5rem;
    line-height: 2rem;
    margin-top:1rem;
    margin-bottom:2rem;
    color:#A83B5E;
    font-weight: 700;
}

/* Tab Buttons */
.tab-buttons {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.tab-btn {
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background-color: #ddd;
    color: #333;
    transition: 0.3s ease-in-out;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tab-btn.active {
    background-color: #A83B5E;
    color: white;
}


/* Card Styling */
.cardServiceHome {
    position: relative;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    opacity: 1;
    cursor: pointer;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Initially Hidden Glow Effect */
.cardServiceHome::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    width: 99999px;
    height: 99999px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: conic-gradient(rgba(0,0,0,0), #A83B5E, rgba(0,0,0,0) 25%);
    opacity: 0; /* Hidden by default */
    transition: opacity 0.5s ease-in-out;
    z-index: -2;
}

/* Inner Box to Maintain Border Effect */
.cardServiceHome::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    background: white;
    border-radius: 7px;
    z-index: -1;
}

/* Show Glow Effect on Hover */
.cardServiceHome:hover::before {
    opacity: 1; /* Make it visible */
    animation: rotate 4s linear infinite; /* Start rotation */
}

/* Keyframe Animation for Rotating Glow */
@keyframes rotate {
    100% {
        transform: translate(-50%, -50%) rotate(1turn);
    }
}

/* Initially hide elements */
.cardServiceHome {
    opacity: 1;
}

/* Active class when element is in viewport */
.cardServiceHome.show {
    opacity: 1;
    transform: translateY(0);
}

/* Slight Opacity Change on Hover */
.cardServiceHome:hover {
    opacity: 0.9;
}

    /* Card Image */
    .card-service-img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

/* Card Content */
.card-service-content {
    padding: 16px 0px 16px 0px;
}

/* Card Title */
.card-service-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    color:#A83B5E;
    text-align: center;
}

/* Card Text */
.card-service-text {
    font-size: 1rem;
    margin-top: 8px;
    text-align: center;
}


.carousel-container {
    width: 100%;
    height: 500px;
    margin-top: 75px !important;
    position: relative;
}

.carousel-slides {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s;
}

.slide {
    width: 100%;
    height: 500px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top:34px;
}


/* .slide-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: white;
    text-align: center;
} */


.slide-content {
    position: absolute;
    top: 20px;
    left: 40px;
}

.slide-image {
    width: 400px; /* Adjust as needed */
    height: auto;
    object-fit: contain;
}
.slide-content h1 {
    font-size: 2rem;
    font-weight: bold;
}

.slide-content p {
    font-size: 1.5rem;
    margin-top: 0.5rem;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    cursor: pointer;
}

.carousel-btn.left {
    left: 1rem;
}

.carousel-btn.right {
    right: 1rem;
}

.carousel-btn svg {
    width: 24px;
    height: 24px;
    stroke:#A9701C;
}

#carouselIndicators {
    position: absolute;
    bottom: 15px; /* Adjust to move indicators higher or lower */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px; /* Space between indicators */
    z-index: 10; /* Ensure they appear above other elements */
}

/* Default Indicator Style */
.carousel-indicator {
    background: #fff;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    transition: background 0.3s ease-in-out;
    cursor: pointer;
}

/* Active Indicator */
.carousel-indicator.active {
    background:#A83B5E; /* Change to a distinct color */
    border: 2px solid white;
}


/* Right Side: Image Slider */
.sliderT-container {
    width: 55%;
    position: relative;
    overflow: hidden;
}

.sliderT-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.sliderT-slide {
    min-width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    border-radius: 5px;
}

/* Dots Navigation */
.sliderT-dots {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.sliderT-dot {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.sliderT-dot.active {
    background: #A83B5E;
}

/* Make images responsive */
.sliderT-slide img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    display: block;
}

/* Slider Container */
.slider-container {
    position: relative;
    width: 100%;
    padding:4rem 1rem;
}

/* Slider Wrapper */
.slider-wrapper {
    width: 100%;
    height: 150px;
    overflow: hidden;
    position: relative;
    padding-top: 10px;
}

/* Slider Track */
.slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

/* Slide */
.slides {
    flex-shrink: 0;
    width: 320px;
    height: 113px;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin: 0 8px;
    overflow: hidden;
}

/* Slide Images */
.slides img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Slider Indicators */
.slider-indicators {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

/* Indicator Dots */
.indicator {
    width: 12px;
    height: 12px;
    background-color: #ccc;
    border-radius: 50%;
    margin: 0 4px;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}

/* Active Indicator */
.indicator.active {
    background-color: #A83B5E; /* Custom active color */
}


.gridNews{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

}

.newsT-item {
    display: flex;
    align-items: flex-start;
    background: #fff;
    padding: 12px 0;
    border-bottom: 1px solid #ddd;
}

/* Date Box */
.newsT-date {
    text-align: center;
    padding: 10px;
    margin-right: 15px;
    width: 100px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
}

.newsT-button{
    background: #A83B5E;
    color: white;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
}

/* Date & Tag */
.newsT-day {
    font-size: 22px;
    font-weight: bold;
}

.newsT-month {
    font-size: 12px;
    margin-top: -5px;
}

.newsT-tag {
    font-size: 10px;
    background: #6A2226;
    color: white;
    padding: 2px 6px;
    display: block;
    margin-top: 5px;
    border-radius: 3px;
    width: 100%;
}

/* Content Area */
.newsT-content {
    flex: 1;
}

.newsT-content h3 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.newsT-content p {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}


@media (max-width: 769px) {
    .gridCard{
        grid-template-columns: repeat(1, minmax(0, 1fr));
       
    }
    .gridCard-second{
        grid-template-columns: repeat(1, minmax(0, 1fr));
        width: 100%;
    }

    .news-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .gridNews{
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .tab-buttons{
        display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    }

    /* .gridCard {
        display: flex;
        flex-direction: column;
        align-items: center;
    } */

    .cardHome {
        width: 100%;
        max-width: 100%;
        display: none; /* Hide all by default, JS will show one */
    }

    .cardHome.active {
        display: block;
    }

    .newsT-date {
        width: 75px;
    }

    .card-img {
        height: fit-content;
    }
}

.carousel-thumbnails {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    position: absolute;
    bottom: 15px;
    right: 10px;
    background: rgba(255, 255, 255, 0.7);
    /* background: rgba(0, 0, 0, 0.5);  */
    padding: 10px;
    border-radius: 15px;
}

.thumbnailHome {
    cursor: pointer;
    gap: 8px;
    padding: 5px;
    transition: opacity 0.3s ease-in-out;
    border: 2px solid transparent;
    background: white;
}

.thumbnailHome img{
    width: 60px;
    height: 50px;
}

.thumbnailHome:hover, .active-thumbnailHome {
    border: 2px solid #A83B5E;
}

.carousel-btn.left{
    display: none;
}

.carousel-btn.right{
    display: none;
}

@media(min-width:770px){
    #carouselIndicators{
        display: none;
    }
}

@media(max-width:769px){
    .carousel-thumbnails{
        display: none;
    }

    .slide-content {
        left: 10px;
    }

    .carousel-container{
        height: 300px;
        margin-top: calc(75px - 12px) !important;
    }

    .carousel-slides{
        height: 300px;
    }

    .slide{
        height: 300px;
    }

    /* .cardHome {
        padding: 0px;
    } */

    .slider-container {
        padding:0rem 0rem;
    }
}

@media (max-width:440px){
    .slide-image {
        width: 300px; /* Adjust as needed */
        height: auto;
        object-fit: contain;
    }
}


@media (max-width:380px){
#frmplanseek{
    max-width: calc(100vw - 48px);
}

.divider{
    max-width: calc(100vw - 48px);
}

.right-section{
    max-width: calc(100vw - 48px);
}

}

@media(max-width:830px){
    .slider-container{
        padding: 0rem 0rem;
    }
}


/* News sec Styling */
.news-sec {
    position: relative;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    opacity: 1;
    cursor: pointer;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.news-sec::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    width: 99999px;
    height: 99999px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: conic-gradient(rgba(0,0,0,0), #A83B5E, rgba(0,0,0,0) 25%);
    opacity: 0; /* Hidden by default */
    transition: opacity 0.5s ease-in-out;
    z-index: -2;
}

.news-sec::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    background: white;
    border-radius: 7px;
    z-index: -1;
}

.news-sec:hover::before {
    opacity: 1; /* Make it visible */
    animation: rotate 4s linear infinite; /* Start rotation */
}


@keyframes rotate {
    100% {
        transform: translate(-50%, -50%) rotate(1turn);
    }
}


.news-sec {
    opacity: 1;
}

.news-sec.show {
    opacity: 1;
    transform: translateY(0);
}

.news-sec:hover {
    opacity: 0.9;
}


/* Card Styling */
.form-booking {
    position: relative;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    opacity: 1;
    height:96.84%;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}


.form-booking::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    width: 99999px;
    height: 99999px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: conic-gradient(rgba(0,0,0,0), #A83B5E, rgba(0,0,0,0) 25%);
    opacity: 0; /* Hidden by default */
    transition: opacity 0.5s ease-in-out;
    z-index: -2;
}

.form-booking::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    background: white;
    border-radius: 7px;
    z-index: -1;
}

.form-booking:hover::before {
    opacity: 1; /* Make it visible */
    animation: rotate 4s linear infinite; /* Start rotation */
}


@keyframes rotate {
    100% {
        transform: translate(-50%, -50%) rotate(1turn);
    }
}


.form-booking {
    opacity: 1;
}

.form-booking.show {
    opacity: 1;
    transform: translateY(0);
}

.form-booking:hover {
    opacity: 0.9;
}