/* @import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap'); */

/* @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Alice&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap'); */

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

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Quicksand:wght@300..700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');


:root {
    --dark: #005C65;
    --normal: #E1F0EE;
    --light: #effaf8;
    --border: #D6EDEA;
    --heading: "Lora", serif;
    --body_text: "Open Sans", sans-serif;
    --gradient: #54C0CA;
    --footer: #00262A;
    --test: linear-gradient(0deg, #effaf8 0%, rgba(239, 250, 248, 0) 100%);
    --test2: linear-gradient(180deg, #effaf8 0%, rgba(239, 250, 248, 0) 100%);
}


/* body.theme_1 {
    --dark: #6d3ee4;
    --normal: #C8BFDF;
    --light: #f3eeff;
    --border: #D3C2FE;
    --heading: "Quicksand", sans-serif;
    --body_text: "Raleway", sans-serif;
    --heading: "Lora", serif;
    --body_text: "Open Sans", sans-serif;
    --gradient: #9871FA;
    --footer: #241A3F;
    --test: #EFFAF8;
    --test: linear-gradient(0deg, #f3eeff 0%, rgba(243, 238, 255, 0) 100%);;
    --test2: linear-gradient(180deg, #f3eeff 0%, rgba(243, 238, 255, 0) 100%);
} */


.signature {
    width: 300px;
    height: 150px;
    object-fit: contain;
}

/* From Uiverse.io by ercnersoy */
/* The switch - the box around the slider */
.switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 1.5em;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--gradient);
    transition: 0.4s;
    border-radius: 1rem 0rem 1rem;
}

.slider:before {
    position: absolute;
    content: "";
    height: 1.5em;
    width: 1.4em;
    left: 0em;
    bottom: 0em;
    background-color: var(--dark);
    transition: 0.4s;
    border-radius: 1rem 0rem 1rem;
    border: 3px solid white;
}

.ch:checked+.slider {
    background-color: var(--dark);
}

.ch:focus+.slider {
    box-shadow: 0 0 1px var(--normal);
}

.ch:checked+.slider:before {
    transform: translateX(2.2em);
    background-color: #ededed;
    /* box-shadow: 0px 0px 40px 5px var(--dark); */
    border: 3px solid white;
}

.ch:checked+.slider::after {
    content: "|";
    color: white;
    position: absolute;
    right: 0.3rem;
    top: -3.3px;
    transform: rotate(45deg);
}


/* Theme 1 styles */
/* body.theme_1 {
            --dark: #A6455D;
            --normal: #FBCAD0;
            --light: #FEF7F8;
            --border: #FFDFE7;
            --heading: "Playfair Display", serif;
            --body_text: "Instrument Sans", sans-serif;
        } */

/* Theme 2 (Green/Nature) styles */
/* body.theme_2 {
            --dark: #005C65;
            --normal: #E1F0EE;
            --light: #F8FFFE;
            --border: #D6EDEA;
            --heading: "Lora", serif;
            --body_text: "Open Sans", sans-serif;
        } */

/* Theme 3 (Purple/Deep) styles */
/* body.theme_3 {
            --dark: #A75902;
            --normal: #FFE8CE;
            --light: #FFF7ED;
            --border: #FFF4E8;
            --heading: "Merriweather", serif;
             --body_text: "Raleway", sans-serif;
        } */

/* Theme 4 (Warm/Autumn) styles */




* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smotthing: antialiased;

}

html,
body {
    scroll-behavior: smooth;
    overflow-x: hidden;
    font-family: var(--body_text);
    width: 100%;
    height: 100%;
}


section {
    overflow: hidden !important;
}

/* width */
::-webkit-scrollbar {
    width: 3px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #ffffff;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--dark);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #000000;
}

.navbar-toggler:focus,
.navbar-toggler,
.navbar-toggler:active,
.navbar-toggler .navbar-toggler-icon:focus,
.navbar-toggler-icon {
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 0 !important;
}




.desktop {
    display: block;
}

.mobile {
    display: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ul,
li {
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
}


.main-font {
    font-family: var(--heading) !important;
}

/* section.slogan {
    font-family: "Alice", serif !important;
} */

/* .logo-font {
    font-family: "Playfair Display", serif;
    color: #fff;
} */

.text-bg-primary {
    background-color: var(--light) !important;
    color: var(--dark) !important;
    font-weight: 400;
    padding: 10px 12px;
}

/* .font {
    font-family: "Urbanist", sans-serif;
} */


.link-item.active {
    color: #000 !important;
}

#logo {
    transition: all 0.5s ease;
}


.logo_box {
    width: 50px;
    height: 50px;
    background: var(--dark);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.load {
    position: fixed;
    background-color: var(--light);
    z-index: 10000;
    height: 100vh;
    width: 100vw;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-in-out;

}

.load .logo_anim {
    width: 300px;
    animation: logo 1s ease-in-out;
    opacity: 0;
    transform: translateY(50px);
}

@keyframes logo {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    90% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(50px);
    }
}



.load.active {
    pointer-events: none;
    height: 0;
    bottom: 0;
}



header {
    top: 15px !important;
}

.btn-close {
    position: absolute;
    right: 0px !important;
    top: 14px !important;
}

select {
    font-size: 12px !important;
}

header .background {
    background-color: #fff;
    border-radius: 15px;
    color: #247BBC;
}

header .background1 {
    border-radius: 0;
}

/* header .background h2 {
    color: #002845;
    font-size: 25px;
} */

header .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 12px 23px;
    max-width: 1000px;
    -webkit-transition: max-width 0.5s ease-in-out;
    -o-transition: max-width 0.5s ease-in-out;
    transition: max-width 0.5s ease-in-out;
    -webkit-backdrop-filter: blur(111.34397888183594px);
    backdrop-filter: blur(111.34397888183594px);
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.06);
    background: #ffffff !important;
    max-width: 1000px;
    /* border: 1px solid rgb(222, 222, 222) !important; */
    border-radius: 50px;
}


header .link-item {
    padding-right: 30px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

header .link-item:hover {
    color: var(--dark) !important;
}


header .menu {
    display: block;
}

header .bar {
    display: none;
}


/* .bg {
    background-color: #FFC9FB;
} */

/* body {
    background-color: #F9FEEE;
} */

/* header .container.scrolled {
    max-width: 900px;
} */

header .container.scrolled .link-item:hover {
    color: var(--dark);
}

header .logo {
    transition: all 0.5s ease forwards;
    width: 280px;
}

/* header .container.scrolled .logo {
    width: 240px;
    transition: all 0.5s ease forwards;
} */

.btn-close {
    position: absolute;
    right: 20px;

}

/* .color_text {
    color: #247BBC;
} */

section.hero_1 {
    min-height: 100vh;
    overflow: hidden;
}

section.hero_1 img {
    animation: img_1 14s ease-in-out infinite;
}

@keyframes img_1 {
    0% {
        scale: 1;
    }

    50% {
        scale: 1.06;
    }

    100% {
        scale: 1;
    }
}

/* section.slogan {
    padding: 100px 0 0px 0;
    text-align: center;
} */

section.slogan h2 {
    font-size: 58px;
    line-height: 63px;
}


.btn-primary {
    border-radius: 50px;
    padding: 16px 20px;
    background: var(--dark);
    border: 0;
    color: #fff;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.btn-primary:hover {
    box-shadow: 0 0 16px 0 var(--dark);
    background: var(--dark);
}


.color {
    color: var(--dark);
}

.color2 {
    color: #000;
}


section.about {
    padding-top: 100px;
}


section.about .box1 {
    border: 2px dashed var(--dark);
    padding: 28px;
    border-radius: 30px;
    transition: all 0.5s ease forwards;
}

section.about .box2 {
    border: 1px solid #ededed;
    padding: 28px;
    border-radius: 30px;
    background-color: var(--normal);

}

section.about .box_3 {

    padding: 28px;
    border-radius: 30px;
    background: url('../Images/fill.webp') no-repeat;
    background-position: top center;
    background-size: cover;
    transition: all 0.5s ease-in;
}

section.about .box_3:hover {

    padding: 28px;
    border-radius: 30px;
    background: url('../Images/heart.webp') no-repeat;
    background-position: center;
    background-size: cover;
    transition: all 0.5s ease-out;
}


section.about .number .main_box {
    background-color: #fff;
    color: var(--dark);
    text-align: center;
    padding: 20px;
    margin-top: -23px;
    border-radius: 30px;
    position: relative;
    z-index: 1;
}


/* 

section.numbers .blur {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-color: var(--dark);
    filter: blur(50px);
    color: #b7e0ff;
    position: absolute;
    top: -150px;
    left: 0px;
    z-index: 1;
    animation: number 50s ease-in-out 0s infinite;
}

section.numbers .blur2 {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-color: var(--dark);
    filter: blur(50px);
    color: #b7e0ff;
    position: absolute;
    bottom: -150px;
    right: 0px;
    z-index: 1;
    animation: number2 50s ease-in-out 1s infinite;
} */

/* section.numbers .blur3 {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-color: #6a994eb2;
    filter: blur(50px);
    color: #b7e0ff;
    position: absolute;
    bottom: -100px;
    left: -100px;
    z-index: 1;
    animation: side 30s ease-in-out 0s infinite;
} */

@keyframes number {
    0% {
        background-color: var(--dark);
        left: 0;
        scale: 1;
    }

    50% {
        left: 100%;
        scale: 1.5;
        background-color: var(--dark);
    }

    100% {
        scale: 1;
        left: 0;
        background-color: var(--dark);
    }
}

@keyframes number2 {
    0% {

        right: 0px;
        scale: 1;
        background-color: var(--dark);
    }

    50% {
        right: 100%;
        scale: 1.2;
        background-color: var(--dark);
    }

    100% {
        scale: 1;
        right: 0px;
        background-color: var(--dark);

    }
}









@keyframes side {
    0% {

        left: -100px;

    }

    50% {
        left: 700px;
    }

    100% {

        left: -100px;

    }
}

@keyframes side2 {
    0% {
        top: -100px;
        right: -100px;

    }

    50% {
        top: 150px;
        right: 500px;
    }

    100% {
        top: -100px;
        right: -100px;

    }
}

/* 
section.about .blur {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-color: var(--light);
    filter: blur(50px);
    color: #b7e0ff;
    position: absolute;
    bottom: -150px;
    right: 0px;
    z-index: 1;
    animation: side 30s ease-in-out 0s infinite;
}

section.about .blur2 {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-color: var(--light);
    filter: blur(50px);
    color: #b7e0ff;
    position: absolute;
    bottom: -150px;
    right: 0px;
    z-index: 1;
    animation: side2 30s ease-in-out 1s infinite;
}

section.about .blur3 {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-color: var(--light);
    filter: blur(50px);
    color: #b7e0ff;
    position: absolute;
    bottom: -150px;
    right: 0px;
    z-index: 1;
    animation: side 30s ease-in-out 1s infinite;
} */



/* section.numbers {
      background-color: var(--dark);
    color: #ffffff;
}

section.numbers .main_box {
    text-align: center;
    padding: 30px 0;
} */

.work-text::after {
    content: "+";
    display: inline-block;
    position: relative;
    bottom: 3px;
}

.work-text1::after {
    content: "k";
    display: inline-block;
    position: relative;
    bottom: 3px;
}


.form-container {
    background-color: #ffffff;
    /* White background for the form */
    border-radius: 1.5rem;
    /* More rounded corners */
    width: 100%;
    /* Full width on smaller screens */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 14px 10px;
}

section.feel {
    background-color: var(--light);
    padding: 100px 0;
}



section.feel .card {
    -webkit-box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.09);
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.09);
    background: #fff;
    border-radius: 10px;
}


section.feel .card .img-icon {
    width: 50px;
}

section.feel .size {
    height: max-content;
    margin-bottom: 70px;
}

section.feel .size2 {
    height: max-content;
    margin-bottom: 70px;
}

section.feel .vector_img {
    position: absolute;
    mix-blend-mode: multiply;
    bottom: 0;
    left: 28%;
}

section.service .swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 5px;
    top: var(--swiper-pagination-top, auto);
    left: 0;
    width: 100%;
    z-index: 1;
}


section.service .swiper-pagination-bullet-active {
    background-color: var(--dark);
}

/* .color3 {
    color: #002947;
} */




section.service .service-img {
    border-radius: 13px;
    margin-bottom: 14px;
}

section.service .swiper-slide {
    height: auto;
}

section.service p {
    margin-bottom: 14px;
}

section.service .content {
    height: 120px;
    margin-bottom: 25px !important;

}

section.service .card {
    border-color: var(--border);
}



section.about .card {
    background-color: var(--light);
    border-color: var(--border);
}



.carousel-control-next,
.carousel-control-prev {
    width: 100px;
}


section.feel .icon-box {
    background-color: var(--dark);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-top: -60px;
}



section.testimonials {
    padding: 70px 0;
    background-color: var(--light);
}

section.testimonials .card {
    padding: 25px;
    border: 0;
    position: relative;
}

/* section.testimonials .arrow {
    position: absolute;
    bottom: 0px;
    left: 45%;
} */

/* section.testimonials .resize {
    position: absolute;
    bottom: 0px;
    left: 45%;
}
 */

section.testimonials .swiper-pagination-bullet-active {
    background-color: var(--dark) !important;
}

section.process {
    padding: 30px 0 30px 0;
}

section.process .box {
    background: var(--dark);
    width: 50px;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 100%;
}
section.process .flex {
    display: grid;
    margin-bottom: 20px;
    grid-template-columns: 50px 1fr;
    align-items: start;
    gap: 11px !important;
}


.up {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 100px;
    right: 25px;
    z-index: 998;
    background-color: var(--dark);
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s ease;
}


.up.scrolled {
    opacity: 1;
    pointer-events: all;
}

footer {
    background-color: var(--footer);
    padding: 80px 0 0 0;
}




section.about_banner {
    background: url('../Images/about_us_banner.webp') no-repeat;
    background-position: center;
    background-size: cover;
    height: 280px;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: end;
    padding-bottom: 40px;
}


section.about_me .card_-color {
    background-color: var(--dark) !important;
    color: var(--normal);
}

section.about_me .card_color {
    background-color: var(--normal) !important;
    color: var(--dark);
}







/* Floating button to open/close chat */
.floating-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;

    background: var(--dark);
    /* Blue color from image */
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 28px;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Subtle shadow */
    transition: transform 0.2s ease-in-out;
    /* Smooth hover effect */
    display: flex;
    justify-content: center;
    align-items: center;
}



.chat_anim {
    width: 30px;
    aspect-ratio: 2;
    --_g: no-repeat radial-gradient(circle closest-side, #ffffff 90%, #0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100% / 3) 50%;
    animation: l3 3s infinite ease-in-out;
}

@keyframes l3 {
    20% {
        background-position: 0% 0%, 50% 50%, 100% 50%;
    }

    40% {
        background-position: 0% 100%, 50% 0%, 100% 50%;
    }

    60% {
        background-position: 0% 50%, 50% 100%, 100% 0%;
    }

    80% {
        background-position: 0% 50%, 50% 50%, 100% 100%;
    }
}



.floating-btn:hover {
    transform: scale(1.05);
}

.pop_mgs {
    position: absolute;
    width: 340px;
    bottom: 90px;
    right: 20px;
    height: max-content;
    padding: 19px 13px;
    border-radius: 20px 20px 0px 20px;
    position: fixed;
    z-index: 10000;
    background-color: var(--dark);
    color: #fff;
    opacity: 0;
}

.pop_mgs.active{
animation: pop 0.5s ease-in forwards;
}

@keyframes pop {
    0% {
      scale: 1.1;
      opacity: 0;
    }

   100%{
   scale: 1;
      opacity: 1;
   }
}


/* Main chat container */
.chat-container {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 416px;
    height: 505px;
    z-index: 99990;
    display: none;
    flex-direction: column;
    overflow: hidden;
    border-radius: 30px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

/* Chat header styling */
.chat-header {

    /* Blue color from image */

    color: white;
    font-weight: bold;
    font-size: 16px;
    border-radius: 15px 15px 0 0;
    /* Rounded top corners */
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.chat_bg {
    background: var(--dark);
    padding: 12px 15px;
}

.chat-header .title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Space between avatar and text */
}

.chat-header .doctor-avatar {
    width: 30px;
    height: 30px;
    background-color: #fff;
    /* Light grey background for avatar circle */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--dark);
    /* Icon color */
    font-size: 18px;
}

/* Style for the new clear data button (trash icon) */
.chat-header .clear-data-btn {
    background: transparent;
    border: none;
    /* No border for icon button */
    color: white;
    font-size: 18px;
    /* Larger icon size */
    cursor: pointer;
    padding: 5px;
    /* Padding for click area */
    transition: opacity 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chat-header .clear-data-btn:hover {
    opacity: 0.7;
    /* Slightly dim on hover */
}

/* Chat body (message display area) */
.chat-body {
    flex: 1;
    /* Takes remaining vertical space */
    padding: 12px;
    overflow-y: auto;
    /* Enable vertical scrolling */
    background: #f8f8f8;
    /* Light grey background for chat area */
}

.chat-body::-webkit-scrollbar {
    width: 7px !important;
}

/* Individual chat message styling */
.chat-msg {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    /* Align avatar and message content */
    opacity: 0;
    /* Start invisible for fadeIn animation */
    animation: fadeIn 0.5s ease forwards;
    /* Fade in animation */
}

/* Keyframe animation for messages fading in */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.chat-buttons {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    border-top: 1px solid #ddd;
    background: #fff;
}

.chat-buttons button {
    flex: 1;
    margin: 0 5px;
    padding: 10px 15px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background 0.2s ease;
}


.chat-buttons button.yes-btn {
    background: var(--dark);
    /* Green for Yes */
    color: white;
}

.chat-buttons button.yes-btn:hover {
    background: var(--light);
    color: var(--dark);
}

.chat-buttons button.no-btn {
    background: var(--border);
    /* Light grey for No */
    color: var(--dark);
    border: 1px solid var(--gradient);
}

.chat-buttons button.no-btn:hover {
    background: var(--normal);
    color: var(--dark);
    border: 1px solid transparent;
}

.chat-msg .avatar {
    width: 30px;
    height: 30px;
    background-color: #e0e0e0;
    /* Default avatar background */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #666;
    flex-shrink: 0;
    /* Prevent shrinking */
    margin-top: 5px;
    /* Adjust vertical alignment with text */
}

.chat-msg .message-content {
    padding: 8px 12px;
    font-size: 14px;
    word-wrap: break-word;
    max-width: calc(100% - 45px);
    /* Max width considering avatar and margin */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for all bubbles */
}

/* Bot message bubble */
.bot {
    justify-content: flex-start;
    /* Align bot avatar and message to the left */
}

.bot .avatar {
    margin-right: 8px;
    /* Space between avatar and message */
    background-color: var(--dark);
    /* Light background for bot avatar */
    color: #ffffff;
    /* Blue icon */
}

.bot .message-content {
    background: #fff;
    /* White for bot messages */
    border-radius: 15px 15px 15px 0;
    /* Rounded corners for bot bubble */
}

/* User message bubble */
.user {
    justify-content: flex-end;
    /* Align user message and avatar to the right */
}

.user .avatar {
    order: 2;
    /* Place avatar after message content */
    margin-left: 8px;
    /* Space between message and avatar */
    background-color: #c9f7d3;
    /* Lighter green for user avatar */
    color: #25d366;
    /* Green icon */
}

.user .message-content {
    background: #dcf8c6;
    /* Light green for user messages */
    border-radius: 15px 15px 0 15px;
    /* Rounded corners for user bubble */
}

/* Typing indicator styling */
.typing-indicator {
    font-style: italic;
    color: gray;
    margin-left: 5px;
    animation: blink 1s infinite;
    /* Blinking animation */
}

/* Keyframe animation for blinking effect */
@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Chat footer (input and send buttons) */
.chat-footer {
    display: flex;
    align-items: center;
    padding: 10px;
    border-top: 1px solid #ddd;
    /* Separator line */
    background: #fff;
}

/* Input field styling */
.chat-footer input {
    flex: 1;
    /* Takes most of the space */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 20px;
    /* Rounded input field */
    margin-right: 8px;
    font-size: 14px;
    outline: none;
    /* Remove outline on focus */
    transition: border-color 0.2s ease;
}

.chat-footer input:focus {
    border-color: var(--dark);
    /* Highlight border on focus, matching header */
}

/* Send button styling */
.chat-footer button {
    background: var(--dark);
    /* Blue send button */
    color: white;
    border: none;
    border-radius: 50%;
    /* Circular buttons */
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 18px;
    margin-left: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease, transform 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chat-footer button:hover {
    background: var(--normal);
    /* Darker blue on hover */
    transform: scale(1.05);
}

section.slogan2 {
    height: 100vh;
    display: flex;
    align-items: center;
}



section.booking .button-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    /* Equivalent to gap-4 */
}



section.booking .button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    /* Equivalent to px-6 py-3 */
    border-radius: 9999px;
    /* Equivalent to rounded-full */
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* Equivalent to shadow-lg */
    transition: transform 0.3s ease-in-out;
    /* Equivalent to transition duration-300 ease-in-out transform */
    text-decoration: none;
    /* Remove underline for anchor tags if used instead of buttons */
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    /* Equivalent to text-xl */
    font-weight: 600;
    /* Equivalent to font-semibold */
}


section.booking .instagram-button {
    /* Changed from radial-gradient to linear-gradient for Instagram */
    background-color: var(--normal);
    color: var(--dark);
}

section.booking .instagram-button:focus {
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.5);
    /* Equivalent to focus:ring-4 focus:ring-purple-300 */
}

section.booking .button:hover {
    transform: scale(1.05);
    /* Equivalent to hover:scale-105 */
}

section.booking .button:focus {
    outline: none;
    /* Equivalent to focus:outline-none */
}


/* WhatsApp Button specific styles */
section.booking .whatsapp-button {
    background-color: #22C55E;
    /* Equivalent to bg-green-500 */
}

section.booking .whatsapp-button:focus {
    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.5);
    /* Equivalent to focus:ring-4 focus:ring-green-300 */
}

section.booking .button i {
    margin-right: 0.75rem;
    /* Equivalent to mr-3 */
}


section.chat_box_1 .chat-box {
    padding: 20px;
    border-radius: 12px;

    width: 300px;
}

section.chat_box_1 .chat-box h3 {
    margin-bottom: 15px;
    color: #333;
}

section.chat_box_1 .chat-box select,
section.chat_box_1 .chat-box textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

section.chat_box_1 .chat-box button {
    background: #25d366;
    color: white;
    border: none;
    padding: 10px;
    width: 100%;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

section.chat_box_1 .chat-box button:hover {
    background: #20b357;
}

.message-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 1.5rem;
    border-radius: 0.75rem;
    z-index: 1000;
    display: none;
    /* Hidden by default */
    text-align: center;
}

.message-box button {
    background-color: #25D366;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    margin-top: 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
}


.whatsapp-form .send-button,
.whatsapp-form .send-button1 {
    background-color: #25D366;
    /* WhatsApp green */
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.whatsapp-form .send-button:hover,
.whatsapp-form .send-button1:hover {
    background-color: #1DA851;
}



section.booking .whatsapp-form {
    background-color: var(--dark);
    color: #fff;
    border: 0;
}

textarea {
    height: 100px;
}

section.pop .whatsapp-form {
    background-color: transparent;
    color: #000;
}

.dr_img_container {
    text-align: end;
    margin-top: -150px;
    position: absolute;
    right: 5%;
}


section.about_me {
    padding-top: 100px;
}

section.about_me span {
    top: 1px;
    position: relative;
}

section.about_me .color-box1 {
    background-color: var(--normal);
    color: var(--dark);
}

section.about_me .color-box {
    background-color: var(--dark);
    color: #fff;
}



.theme-selector {
    position: absolute;
    z-index: 9999999999;
    right: 0;
    width: max-content;
    background-color: #ffff;
}


/* 
section.about_me .blur {
    background-color: var(--light);
    animation: side 30s ease-in-out 0s infinite;
}

section.about_me .blur2 {
    background-color: var(--light);
    animation: side2 30s ease-in-out 0s infinite;
}

section.about_me .blur3 {
    background-color: var(--light);
    animation: side 30s ease-in-out 0.5s infinite;
} */

/* 
section.about_me .color-box .blur {
    background-color: var(--light);
    animation: side 30s ease-in-out 1s infinite;
}

section.about_me .color-box .blur2 {
    background-color: var(--light);
    animation: side2 30s ease-in-out 0.5s infinite;
}

section.about_me .color-box .blur3 {
    animation: side 30s ease-in-out 1s infinite;
    background-color: var(--light);
}

section.about_me .color-box .blur {
    background-color: var(--light);
}

section.about_me .color-box .blur2 {
    background-color: var(--light);
}

section.about_me .color-box .blur3 {
    background-color: var(--light);
} */

/* .text-mask-container {
    position: relative;
    overflow: hidden;
} */

/* .masked-text {
    font-size: clamp(2rem, 7vw, 5rem);
    font-weight: 900;
    line-height: 1;
    background-image: url('../Images/beyond.webp');
    background-size: 100% 100%;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: revealText 60s ease-in-out infinite; 
} */


.masked-text {
    font-family: var(--font-family);
    font-weight: 900;
    font-size: clamp(40px, 10vw, 76px);
    /* Responsive font size */
    line-height: 95%;
    letter-spacing: -0.04em;

    /* Apply a larger background size */
    background: linear-gradient(180deg, var(--dark) 0%, var(--gradient) 100%);
    background-size: 400% 400%;
    /* Make the background much larger */

    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Remove the redundant 'transition' property */
    animation: gradient_shift 4s ease infinite;

    /* Hint to the browser that this property will change, for optimization */
    will-change: background-position;

}

@keyframes gradient_shift {
    0% {
        background-position: 0% 50%;
        /* Start from left-center */
    }

    25% {
        background-position: 50% 100%;
        /* Move towards bottom-center */
    }

    50% {
        background-position: 100% 50%;
        /* Move towards right-center */
    }

    75% {
        background-position: 50% 0%;
        /* Move towards top-center */
    }

    100% {
        background-position: 0% 50%;
        /* Back to start for a seamless loop */
    }
}


/* .line {
    font-weight: 700;
    font-size: 64px;
    line-height: 1.1;
    background-image: url('https://img.freepik.com/free-photo/cloud-forest-landscape_23-2151794750.jpg?t=st=1751191920~exp=1751195520~hmac=650407c7ed38a3698b736f57a3b8e1d6ad2e96647a697a4feaf37b0abfd406aa&w=1380');
    background-size: cover;
    background-position: bottom;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* max-width: 74%; */
/* margin: 0 auto; */
/* animation: revealText 60s ease-in-out infinite; 
} */

@keyframes revealText {
    0% {

        background-size: 100% 100%;
    }

    50% {
        background-position: 100% 100px;
    }

    100% {

        background-size: 100% 100%;
    }
}


/* section.testimonials .swiper-slide {
    height: auto;
    /* Allow height to be determined by content initially */
/* display: flex; */
/* Make the slide a flex container */
/* flex-direction: column; */
/* Stack children vertically */
/* Add any padding/margin you want for the slide itself */
/* } */

/* Make the content wrapper grow to fill available height */

/* 
section.booking .blur {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-color: var(--blur);
    filter: blur(50px);
    color: #b7e0ff;
    position: absolute;
    top: -150px;
    left: 0px;
    z-index: 1;
    animation: side 50s ease-in-out 0s infinite;
}

section.booking .blur2 {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-color: var(--blur);
    filter: blur(50px);
    color: #b7e0ff;
    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: 1;
    animation: side2 50s ease-in-out 1s infinite;
}

section.booking .blur3 {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-color: var(--blur);
    filter: blur(50px);
    color: #b7e0ff;
    position: absolute;
    bottom: -200px;
    left: -100px;
    z-index: 1;
    animation: side 30s ease-in-out 0s infinite;
} */


/* section.testimonials .row {
    height: 750px;
    overflow: hidden;
    transition: all 1s ease-in-out;
} */

section.testimonials .one {
    animation: up_card 30s ease infinite;
}

section.testimonials .two {
    animation: up_card2 30s ease infinite;
}

@keyframes up_card {
    0% {
        transform: translateY(-600px);
    }

    50% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-600px);
    }
}

@keyframes up_card2 {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-1000px);
    }

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

.expand {
    position: relative;
    transition: all 1s ease-in-out;
}

.expand::before {
    content: "";
    position: absolute;
    background: var(--test);
    z-index: 1;
    top: auto;
    width: 100%;
    bottom: 0;
    height: 300px;
}

.expand::after {
    content: "";
    position: absolute;
    background: var(--test2);
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    bottom: auto;
    height: 300px;
}

.expand.expand_1::before,
.expand.expand_1::after {
    content: none;
    /* This will remove the pseudo-elements */
    /* Or you could set their opacity to 0 and pointer-events to none for a fade effect: */
    /* opacity: 0; */
    /* pointer-events: none; */
    /* transition: opacity 0.3s ease; /* Add a transition for smooth removal */
}

.expand .btn_1 {
    z-index: 7;
    bottom: 0;
    position: absolute;
    border-radius: 50px;
    padding: 16px 20px;
    background: var(--dark);
    border: 0;
    color: #fff;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

}

section.testimonials .row.expand_row {
    height: max-content;
    transition: all 1s ease-in-out;
}

section.testimonials .row {
    /* Set an initial height or max-height when collapsed */
    max-height: 750px;
    /* Or whatever height you want it to be initially */
    overflow: hidden;
    /* Hide content that overflows */
    transition: max-height 0.7s ease-out, padding 0.7s ease-out, margin 0.7s ease-out;
    /* Add transition properties */
    /* Add transitions for pb-5 and mb-5 too if they cause jumps */
}

/* State when expanded */
section.testimonials .row.expand_row {
    max-height: 2000px;
    /* A value much larger than content, to ensure it always shows */
    /* You might remove overflow hidden if you want scrollbars on very large content,
       but usually, you just want to reveal everything. */
    overflow: visible;
    /* Or just remove this line if it's not needed */
}

section.testimonials .row::before,
section.testimonials .row::after {
    /* existing styles */
    transition: opacity 0.7s ease-out;
    /* Add a transition for opacity */
}

section.testimonials .row.expand_row::before,
section.testimonials .row.expand_row::after {
    opacity: 0;
    /* Instead of content: none, fade them out */
    pointer-events: none;
    /* Make them not interactable when hidden */
}