@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: "Cairo", sans-serif !important;

    direction: rtl !important;
}

a{
    text-decoration: none !important;
}

body,html{
    width: 100%;
}
#HomePage{
    width: 100%;
}

.header-page{
    width: 100%;
}
.header-page nav{
    width: 100%;

    padding: 15px 0px;
    background: #fff;
    box-shadow: 0px 10px 16px 0px #DCDCDC40;

}
.image-logo{
    width: 100px;
    height: 70px;
}
.box-Languages{
    width: 40px;
    height: 40px;
    background:  #075555;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
}
.header-page nav ul li{
    padding: 0px 10px;
}
.header-page nav ul li .active{
    font-weight: bold;
    color: #13E5C2 !important;
}
.auth-setp{
    width: 100%;
    z-index:  1000 !important;
    padding: 150px 20px;
    position: relative;

}
.pos-card-white{
    /* position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%); */
    margin: auto;
    width: 60%;
    margin-bottom: -300px;
    /* min-height: 400px; */
    background: #fff;
    padding: 25px;
    text-align: center;
    border-radius: 12px;
}
.pos-card-white h2{

    font-size: 40px;
    font-weight: 500;
    color: #13E5C2;


}
.pos-card-white .row{
    margin: 40px auto;
    width: 90%;

}
.custome-card-choose-user{
    width: 98%;
    border: 1px solid  #075555;
    height: 220px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
}
.custome-card-choose-user img{
    width: 60px;
    height: 60px;

}
.custome-card-choose-user h5{

    font-size: 24px;
    font-weight: 600;
    line-height: 44.98px;
    color: #13E5C2;
    margin-top: 10px;

}
.activeCard{
    background: #075555;
    border: none !important;
}
.activeCard h5{
    color: #fff;

}
.but-next{
    width: 250px;
    height: 60px;
    border-radius: 10px ;
    border: 2px ;
    margin: 30px 0px;
    background: #00FFD4;
    color: #000;
    position: relative;
    font-weight: 600;
    font-size: 20px;

}
.but-next::before {
    content: '';
    width: 0;
    height: 60px;
    /* border-radius: 30em; */
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(to right, #0fd850 0%, #0fd850 100%) !important;
    transition: .5s ease;
    display: block;

    opacity: .4;
    border-radius: 10px ;
}

.but-next:hover::before {
    width: 100%;
}


.footer-page{
    width: 100%;

    background: #075555;
    /* margin-top: 250px; */
    padding-top: 300px;
    padding-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.customeFooter{
    padding-top: 100px !important;
}
.image-footer-logo{
    width: 165px;
    height: 80px;


}
.nav-link-items-footer{
    margin: 20px auto;
    flex-wrap: wrap;
}
.nav-link-items-footer .dotes{
    margin: 0px 25px !important;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    margin-top: 6px !important;

}
.nav-link-items-footer {
    display: flex;
    justify-content: center;
}
.nav-link-items-footer a{
    color: #fff;
    font-family: Cairo;
    font-size: 18px;
    font-weight: 500;
    position: relative;

}
#Main{
    position: relative;
}
.active-link-footer{
    z-index: 1 !important;

}
/* .active-link-footer::after{
    content: "";
    position: absolute;
    min-width: 165px;
    height: 5px;
    background-color: #13E5C2;
    top: 19px;right: 50px;
    border-radius: 5px;
    z-index: -1;
    opacity: 0.7;
} */
.download-app-footer h5{
    color: #fff;
    margin-top: 80px;
    font-family: "El Messiri", sans-serif !important;
}
.flex-image-download img{
    margin:30px 10px;
    cursor: pointer;
}
.contact-footer{
    width: 15%;
    display: flex;

    flex-direction: column;

}
.contact-me{
    margin:5px 0px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
}
.contact-me span{
    color: #fff;

}
.contact-me i{
    font-size: 20px;
    color: #fff;
    margin: 0px 5px;
}
.flex-footer-bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.copy-right p{
    color: #828282;
    font-size: 16px;
    font-weight: 600;
    font-family: "Lato", sans-serif !important;
}
.form-auth{
    width: 80%;
    margin: 15px auto;
}
.all-input-failds-check{
    text-align: right;
    margin: 25px 0px;
    position: relative;
}
.all-input-failds-check label{
    display: block !important;
    font-size: 20px;
    font-weight: 500;
    line-height: 46.85px;


}
.all-input-failds-check input{

    border-radius: 4px;

    padding: 0px 16px;
    color: #B1B1B1;
    margin-top: 7px;

}

.all-input-failds{
    text-align: right;
    margin: 25px 0px;
    position: relative;
}
.all-input-failds label{
    display: block !important;
    font-size: 20px;
    font-weight: 500;
    line-height: 46.85px;


}
.all-input-failds input{
    width: 100%;
    height: 60px;
    border-radius: 4px;
    box-shadow: 0px 4px 16px 0px #CCCCCC40;
    border: none;
    outline: none;
    padding: 0px 16px;
    color: #B1B1B1;
    margin-top: 7px;

}
.all-input-failds textarea{
    width: 100%;
    height: 160px;
    border-radius: 4px;
    box-shadow: 0px 4px 16px 0px #CCCCCC40;
    border: none;
    outline: none;
    padding: 16px;
    color: #B1B1B1;
    margin-top: 7px;
}
.all-input-failds input::placeholder{
    color: #B1B1B1 !important;
}
.checkbox-and-forget-password{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.forget-password a{
    font-size: 18px;
    font-weight: 400;
    color: #B1B1B1;
}

.checkbox-wrapper-46 input[type="checkbox"] {
    display: none;
    visibility: hidden;
}

.checkbox-wrapper-46 .cbx {
    margin: auto;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}
.checkbox-wrapper-46 .cbx span {
    display: inline-block;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
    margin: 0px 5px;
}
.checkbox-wrapper-46 .cbx span:first-child {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    transform: scale(1);
    vertical-align: middle;
    border: 1px solid #9098a9;
    transition: all 0.2s ease;
}
.checkbox-wrapper-46 .cbx span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}
.checkbox-wrapper-46 .cbx span:first-child:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #075555;
    display: block;
    transform: scale(0);
    opacity: 1;
    border-radius: 50%;
}
.checkbox-wrapper-46 .cbx span:last-child {
    padding-left: 8px;
}
.checkbox-wrapper-46 .cbx:hover span:first-child {
    border-color: #075555;
}

.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child {
    background: #075555;
    border-color: #075555;
    animation: wave-46 0.4s ease;
}
.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child svg {
    stroke-dashoffset: 0;
}
.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child:before {
    transform: scale(3.5);
    opacity: 0;
    transition: all 0.6s ease;
}

@keyframes wave-46 {
    50% {
        transform: scale(0.9);
    }
}

.or-auth{
    position: relative;
}
.or-auth::after{
    content: "";
    position: absolute;
    top:10px;
    left: 35%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    border: 1px solid #CECECE;
}
.or-auth::before{
    content: "";
    position: absolute;
    top:10px;
    left: 65% !important;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    border: 1px solid #CECECE;
}
.create-auth-user{
    margin: 12px 0px;
}
.create-auth-user p{
    font-family: Cairo;
    font-size: 16px;
    font-weight: 400;
    line-height: 37.48px;
    text-align: center;
    color: #B8B8B8;
}
.create-auth-user a{
    color: #075555 !important;
    margin: 0px 5px !important;
}
.title-subtitle{
    color: #6C6C6C;
    font-size: 17px;
    font-weight: 400;
    margin: 15px 0px;
}

/* ----------------------------- */




.input-field {
    flex-direction: row;
    column-gap: 10px;
}
.input-field input {
    height: 50px;
    width: 50px;
    border-radius: 6px;
    outline: none;
    font-size: 1.125rem;
    text-align: center;
    border: 1.5px solid #A4A4A4;
    margin: 0px 5px;
    color: #B1B1B1;
}
.input-field input:focus {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.input-field input::-webkit-inner-spin-button,
.input-field input::-webkit-outer-spin-button {
    display: none;
}


/* .but-otp:hover {
  background: #0e4bf1;
} */
.input-field{
    margin: 20px 0px;
}

.hidden {
    display: none;
    color: #ff0000;
    margin-top: 10px;
    font-size: 1.2em;
}

#message {
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
}

#message.show {
    display: block;
    opacity: 1;
}


.retun-status{
    font-size: 17px;
    font-weight: 400;
    color: #075555 !important;
}
.timeers{
    color: #999999;
    font-size: 20px;
    font-weight: 400;
    margin-top: 25px !important;
}
.iti {
    width: 100% !important;
    z-index: 5000 !important;
}

.iti input {
    width: 100% !important;
    box-sizing: border-box; /* لضمان عدم تجاوز العناصر الحد الخارجي */
}

.iti__flag {
    width: 20px; /* عرض العلم، يمكنك تغييره حسب الحاجة */
    height: 20px; /* ارتفاع العلم، يمكنك تغييره حسب الحاجة */
}

.iti__flag-container {
    padding: 0 10px !important; /* لتوفير مساحة حول العلم، يمكنك ضبط هذه القيمة */
    border-right: 2px solid #00FFD4 !important;
}

.iti__selected-flag {
    width: auto; /* عرض العلم بشكل تلقائي بناءً على التعديلات */
}

.iti webkit .iti__arrow,
.iti__selected-flag .iti__arrow {
    width: 6px; /* عرض السهم */
    height: 6px; /* ارتفاع السهم */
    border: solid black; /* لون السهم */
    border-width: 0 2px 2px 0; /* سماكة الحدود التي تشكل السهم */
    display: inline-block;
    /* padding: 3px; */
    transform: rotate(45deg); /* دوران السهم */
    margin-right: 8px; /* مسافة بين العلم والسهم */
}

/* لتغيير لون السهم عند التركيز على حقل الإدخال */
.iti__selected-flag:hover .iti__arrow {
    border-color: #121617; /* يمكنك اختيار اللون الذي يناسبك */
}

.iti__arrow {
    background-image: url('your-arrow-image.png'); /* رابط الصورة */
    background-size: contain;
    background-repeat: no-repeat;
    width: 16px; /* عرض الصورة */
    height: 16px; /* ارتفاع الصورة */
    border: none; /* إزالة الحدود الافتراضية للسهم */
    margin-left: 6px !important;
}
.iti {
    position: relative;
    width: 100% !important;
    z-index: 5000 !important; /* لضمان ظهور القائمة ضمن الحاوية */
}

.iti__country-list {
    position: absolute !important;
    top: 100%; /* لجعل القائمة تظهر أسفل الحقل */
    left: 0; /* لمحاذاة القائمة إلى اليسار */
    min-width: 100% !important; /* لجعل عرض القائمة يتناسب مع عرض حقل الإدخال */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ظل أنيق */
    z-index: 5000; /* لضمان ظهور القائمة فوق العناصر الأخرى */
}

.footer-shap{
    width: 150px;
    height: 150px;
    background: #fff;
    border-radius: 50%;
    filter: blur(50px);
    opacity: .3;
}
.pos-1{
    position: absolute;
    top: 0px;
    left: -60px;
}
.pos-2{
    position: absolute;
    bottom: 0px;
    left: 120px;
}
.pos-3{
    position: absolute;
    bottom: 0px;
    right: 0px;

}
@keyframes anmite{
    0%{
        transform: scale(1);
    }
    25%{
        transform: scale(1.2);
        filter: blur(60px);
        right:30%;
    }
    50%{
        transform: scale(1.5);
        filter: blur(70px);
        right:50%;
    }
    100%{
        transform: scale(1.7);
        filter: blur(90px);
        right:70%;
    }
}
.pos-4{
    position: absolute;
    right: 25%;
    transition: all .2s ease-in ;
    animation: anmite 3s infinite alternate;
}

/* ------------ Start Page Offer */
.part-left-header-action{
    display: flex;
    align-items: center;
}
.box-search-header{
    width: 40px;
    height: 40px;
    background:  #075555;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    margin: 0px 8px;
}
.box-search-header span{
    color: #fff;
    font-size: 20px;

}
.offer{
    padding: 150px 0px;
    overflow: hidden;
}
.box-offer{
    border-right: 3px solid #075555;
    border-bottom:  3px solid #075555;
    padding: 25px 35px;
    box-shadow: 0px 16px 32px 0px #0000001A;
    position: relative;
    margin: 20px 0px;
    min-height: 400px;
}
.flex-items-card{
    display: flex;
    align-items: center;
    margin: 12px 0px;
}
.flex-items-card span{
    font-size: 24px;

}
.flex-items-card img{
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.flex-items-card h6{
    margin: 0px 10px;
    color: #000;
    font-weight: 400;
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* عدد الأسطر: سطر ونصف */
    -webkit-box-orient: vertical;

}
.flex-items-card h6 a{
    margin: 0px 10px;
    color: #000;
    font-weight: 400;
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* عدد الأسطر: سطر ونصف */
    -webkit-box-orient: vertical;

}
.flex-items-card a{
    margin: 0px 10px;
    color: #000 !important;
    font-weight: 400;
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* عدد الأسطر: سطر ونصف */
    -webkit-box-orient: vertical;

}
.data-offer{
    color: #FF0000;

}
.flex-items-card h5{
    margin: 0px 10px;
    color: #7D7D7D;
    font-weight: 400;
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* عدد الأسطر: سطر ونصف */
    -webkit-box-orient: vertical;

}
.box-offer .title-sub-offer , .box-offer p{
    text-align: center;
}
.box-offer .title-sub-offer{
    color: #000000;
    font-weight: 600;
    margin-top:20px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* عدد الأسطر: سطر ونصف */
    -webkit-box-orient: vertical;
    line-height: 1.5em;
    height: 3em; /* يعادل سطر ونصف */
    white-space: normal;

}
.box-offer p{
    color: #000;
    font-size: 14px;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* عدد الأسطر: سطر ونصف */
    -webkit-box-orient: vertical;
    line-height: 1.5em;
    height: 3em; /* يعادل سطر ونصف */
    white-space: normal;
}
.custome-prage-offer{
    color: #000;
    font-size: 14px;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* عدد الأسطر: سطر ونصف */
    -webkit-box-orient: vertical;
    line-height: 2em;
    height: 6em; /* يعادل سطر ونصف */
    white-space: normal;
}
.price-offer{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 70px;
}
.price-offer h2{
    font-size: 35px;
    color: #00FFD4;
    font-weight: bold;
}
.price-offer  .old-price{
    margin: 0px 12px;
    margin-bottom: -10px;
    color: #B4B4B4;
    position: relative;
    font-size: 17px;
}
.price-offer  .old-price::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 30px;
    height: 1.5px;
    background: #E21D21;
}
.shape-pos-offer{
    min-width: 58px;
    height: 84px;
    background: #075555;
    position: absolute;
    top: 0px;
    left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px !important;
    color: #fff;
    font-weight: 700;
    padding: 10px !important;
    overflow: hidden;
    font-family: "Lato", sans-serif !important;
}
.shape-pos-offer::after{
    content: "";
    position: absolute;
    top: 75px;
    left: -10px;
    width: 80px;
    height: 80px;
    background: #fff;
    transform: rotate(45deg);
}
/* Start Page Contact Us ----------- */
.contactUs{
    padding: 150px 0px;
    overflow: hidden;
}
.page-contact-us{
    width: 65%;
    margin: auto;
}
.title-contactUs{

    font-size: 40px;
    font-weight: 500;
    line-height: 74.96px;
    color: #075555;
    text-align: center;
}
.box-contact{
    box-shadow: 0px 6px 16px 0px #CCCCCC40;
    background: #fff;
    border-radius: 5px;
    padding: 20px;

    display: flex;
    justify-content: flex-end;
    align-items: center;
    cursor: pointer;
    margin-top: 20px;
}
.box-contact span{
    font-weight: bold;
    font-size: 20px;
    margin: 0px 4px;
}
/*  Strat Page About Us */
.aboutUs{
    width: 100%;
    padding: 150px 0px;
    overflow: hidden;
}
.image-about-one{
    width: 100%;
    height: 400px;

}
.about-Content h4{

    font-size: 32px;
    font-weight: 600;
    line-height: 59.97px;
    color: #00B4B5;

}
.about-Content p{

    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    color: #000;

}
.about-items h5{

    font-size: 27px;
    font-weight: 600;
    line-height: 59.97px;
    color: #00B4B5;

}
.flex-about-items{
    display: flex;
    align-items: center;
    margin:12px 0px;
}
.flex-about-items img{
    width: 25px;
    height: 25px;
}
.flex-about-items h6{
    margin: 0px 10px;
}
.image-about-bg img{
    width: 100%;
    height: 450px;
    object-fit: cover;
}
.bg-about-us{
    padding: 50px 0px;
}

/* Start Page privacy-section */
.privacy-section{
    padding: 150px 0px;
    overflow: hidden;
}
.content-privacy h3{
    text-align: center;
    font-family: Cairo;
    font-size: 40px;
    font-weight: 500;
    color:  #075555;
    margin: 30px 0px;

}
.art-content h5{

    font-size: 22px;
    font-weight: 500;
    line-height: 35px;


}
.art-content p{

    font-size: 17px;
    font-weight: 400;
    line-height: 30px;


}
.doctors-sec{
    padding: 150px 0px;
    overflow: hidden;
}
.tabs-filter-docters{
    width: 85%;
    margin: 30px auto;
    text-align: center;
}
.tabs-filter-docters{
    display: none;
}
.customeToggleClassFilerWeb{
    display: block;
}
.tabs-filter-docters button{

    font-size: 17px;
    font-weight: 400;
    min-width: 148px;
    height: 49px;
    border: none;
    outline: none;
    background: transparent;
    color: #000;
    position: relative;
}
.activeBut{
    color: #13E5C2 !important;
    font-weight: bold !important;
    position: relative;
}
.activeBut::after{
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #13E5C2;
    position: absolute;
    top: 40px;

    left: 50%;
    transform: translateX(-50%);
}
.card-filter{
    background: #FDFDFD;
    padding: 25px;
    box-shadow: 0px 16px 14px 4px #0000000F;
    margin-top: 100px !important;

}
.card-filter .checkbox-wrapper-46{
    margin: 15px 0px;
}
.lines{
    border: 1px solid #EDEDED;
    width: 100%;
    height: 1px;
    margin: 20px 0px;
}
.card-filter h5{

    font-size: 20px;
    font-weight: 600;
    line-height: 37.48px;

}
.addres-inputs{
    width: 100%;
    height: 56px;

    border-radius: 5px;
    border: 1px ;
    border: 1px solid #CACACA;
    outline: none;
    padding: 0px 10px;
}
.checkbox-wrapper-46 .bxs-star{
    color: #ffb400 !important;
    margin: 0px 5px !important;
}
.flex-end-inputFilter{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-end-inputFilter button{
    width: 48%;
    height: 48px;
    border-radius: 5px;
    opacity: 0px;
    margin: 15px 0px;
}
.flex-end-inputFilter .but-search{
    background: #00FFD4;
    color: #000000;
    border: none;
    outline: none;
    font-weight: bold;
}
.flex-end-inputFilter .but-rest{
    background: #FDFDFD;
    border: 1px solid  #00FFD4;
}
.box-docter{
    width: 95%;
    margin: 15px auto;
    position: relative;

}
.image-bg-circle{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: #EDFFFF;
    /* position: absolute;
    top: 0px;
    left: 0px; */
    z-index: -2 !important;
}
.pos-info-image img{
    width: 100%;
    height: 275px;
    position: absolute;
    top: -50px;

}
.custme-row-docter{
    margin-top: 80px ;
}
.tags{
    position: absolute;
    top: 30px;
    left: 0px;
    width: 91px;
    height: 24px;
    border: none;outline: none;
    border-radius: 4px;
    background:  #075555;
    color: #fff;

}
.contnet-pos-docter{
    box-shadow: 4px 4px 16px 8px #c8cbca4d;
    padding: 20px;
    /* position: absolute;
    top: 250px;
    left: 0px; */
    width: 100%;
    z-index: 9999 !important;
    margin-top: -120px;
}


/* ------- */


.card-docter , .card-docter2 {
    /* background-color: #fff; */
    border-radius: 10px;

    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
    margin: auto;
    position: relative;
    margin-top: 100px;
    cursor: pointer !important;
}
.card-docter2{
    /* background-color: #fff; */
    border-radius: 10px;

    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
    margin: auto;
    position: relative;
    margin-top: 0px;

}
.pos-tag{
    position: absolute;
    top: 200px;
    left: 100px;
    width: 88px;
    height: 127.45px;
    z-index: 2000 !important;
    background: #00FFD4;
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 17px;
    font-weight: 600;


}
.pos-tag::after{
    content: "";
    position: absolute;
    bottom: -30px;
    left: 17%;
    transform: translateX(-50%);
    transform: rotate(45deg);
    width: 60px;
    height: 60px;
    background: #fff;
}
.card-header ,.card-headers2{
    position: relative;
    text-align: center;
    padding-top: 50px; /* Adjust this value to align the image with the circle */
}

.circle-background {
    position: relative;
    width: 300px;
    height: 300px;
    background-color: #e0f7fa;
    border-radius: 50%;
    margin: auto;
    z-index: 1;

}
.circle-background2{
    position: relative;
    width: 300px;
    height: 300px;
    background-color: #e0f7fa;
    border-radius: 50%;
    margin: auto;
    z-index: 1;
}
.circle-background img {

    width: 314px;
    height: 314px;


}
.circle-background2 img {

    width: 314px;
    height: 314px;


}
.doctor-img,.doctor-img2 {
     /*width: 120px;*/
    height: 350px;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
    top: -25px; /* Adjust to center the image vertically in the circle */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.badge{
    position: absolute;
    top: 20px !important;
    right: 70% !important;
    background:  #075555;

    color: white;
    padding: 0px !important;
    border-radius: 5px;
    font-size: 12px;
    z-index: 3;
    width: 91px !important;
    height: 24px;
    line-height: 24px;


}
.badge2{
    position: absolute;
    top: 100px;
    left: -20px;
    background-color: #00897b;
    color: white;

    border-radius: 20px;
    font-size: 12px;
    z-index: 3;
    width: 91px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cards-body , .cards-body2 {
    position: relative;
    padding: 25px; /* Adjust to overlap with the circle */
    margin-top: -100px; /* Adjust to overlap with the circle */
    text-align: right;
    z-index: 2;
    background: #fff;
    box-shadow: 4px 4px 16px 8px #E0FFF34D;
    width: 100% !important;
    min-height: 240px !important;
}
.cards-body2{
    height: 250px !important;
}
.cards-body2{
    box-shadow: 4px 4px 16px 8px #C9C9C933 !important;


}
.rating span {
    color: #ffb400;
    font-size: 14px;
    margin: 0px 2px;
}

.docter-name{

    font-size: 19px;
    font-weight: 600;
    line-height: 39.35px;
    color: #111 !important;

}
.docter-price{

    font-size: 21px;
    font-weight: 700;
    color: #111 !important;
}
.gellery.hide{
    display: none;
}
.gellery.show{
    animation: animate 0.4s ease;
}
@keyframes animate {
    0%{
        transform: scale(0.5);
    }
    100%{
        transform: scale(1);
    }
}
.card-center{
    text-align: center;
    margin: 20px 0px;

}
.image-center-card{
    width: 100%;
    height: 220px;
    margin: auto !important;
    border-radius: 10px 10px 10px 10px;
    z-index: 1 !important;
}
.content-center-card{
    width: 100%;
    padding: 25px;
    background: #fff;
    box-shadow: 4px 4px 24px 8px #DADADA4D;
    margin-top: -20px;
    z-index: 3 !important;
    min-height: 260px !important;
}
.content-center-card h4{
    text-align: right;
    margin: 15px 0px;

    font-size: 20px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* عدد الأسطر: سطر ونصف */
    -webkit-box-orient: vertical;
    line-height: 1.5em;
    height: 3em; /* يعادل سطر ونصف */
    white-space: normal;

}
.profile-docter{
    padding: 150px 0px;
    width: 70%;
    margin: auto;
    overflow: hidden;
}
.profile-docter .card-docter{
    width: 100% !important;


}
.profile-docter .circle-background{
    background: #00897b !important;
}
.profile-docter .cards-body{
    box-shadow: 0px 16px 32px 20px #07555514;
    padding: 30px;
    border-radius: 12px !important;
}
.groups-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    width: 60%;

}
.bg-grays{
    background: #FCFCFC !important;
    min-height: 200px;
    padding: 50px 25px;
    margin: 25px 0px;
    position: relative;
}
.bg-grays .pos-active-docter{
    position: absolute;
    top: 60px;
    left: 50px;
    color: #00C835;
    font-size: 17px;
}
.bg-grays .pos-active-docter i{
    font-size: 10px !important;
}
.bg-grays h5{

    font-size: 26px;
    font-weight: 600;
    line-height: 48.72px;
    color: #075555;


}
.bg-grays p{

    line-height: 27px;
    margin: 12px 0px;
}
.flex-rating-grays{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-rating-grays article{
    display: flex;
    align-items: center;
}
.flex-rating-grays article span{

    font-size: 17px;
    font-weight: 600;
    color: #A3A3A3;


}
.icon-stars span{
    color: #ffb400;
    cursor: pointer;
}
.art-info-rating-user{
    display: flex;
    align-items: center;
}
.art-info-rating-user img{
    width: 50px;
    height: 50px;
    border-radius: 8px;
}
.infroamtion-name-rating{
    margin: 0px 15px;
}
.infroamtion-name-rating h6{
    font-weight: bold;
}
.infroamtion-name-rating span{
    color: #ffb400;
}
.detalis-rating-user p{

    font-size: 15px;
    font-weight: 400;
    line-height: 25px;


}
.card-rating-user{
    border-bottom: 1px solid #C4C4C4;
    padding-bottom: 20px;
    margin: 25px 0px;
}
.card-rating-user:last-child{
    border: none !important;
}
.but-action-rating{
    display: flex;
    justify-content: center;
    align-items: center;
}
.but-action-rating button{
    min-width: 200px;
    height: 50px;
    background: #00FFD4;
    border-radius: 8px;
    border: none;
    outline: none;
    color: #111;
    font-weight: bold;
}
.pop-up-models .modal{
    z-index: 8000 !important;
}
.pop-up-models .modal-content{
    background: #f9f9f9 !important;

}
.ratings {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
    gap: 0.3rem;
    --stroke: #666;
    --fill: #ffc73a;
}

.ratings input {
    appearance: unset;
}

.ratings label {
    cursor: pointer;
}

.ratings svg {
    width: 2rem;
    height: 2rem;
    overflow: visible;
    fill: transparent;
    stroke: var(--stroke);
    stroke-linejoin: bevel;
    stroke-dasharray: 12;
    animation: idle 4s linear infinite;
    transition: stroke 0.2s, fill 0.5s;
}

@keyframes idle {
    from {
        stroke-dashoffset: 24;
    }
}

.ratings label:hover svg {
    stroke: var(--fill);
}

.ratings input:checked ~ label svg {
    transition: 0s;
    animation: idle 4s linear infinite, yippee 0.75s backwards;
    fill: var(--fill);
    stroke: var(--fill);
    stroke-opacity: 0;
    stroke-dasharray: 0;
    stroke-linejoin: miter;
    stroke-width: 8px;
}

@keyframes yippee {
    0% {
        transform: scale(1);
        fill: var(--fill);
        fill-opacity: 0;
        stroke-opacity: 1;
        stroke: var(--stroke);
        stroke-dasharray: 10;
        stroke-width: 1px;
        stroke-linejoin: bevel;
    }

    30% {
        transform: scale(0);
        fill: var(--fill);
        fill-opacity: 0;
        stroke-opacity: 1;
        stroke: var(--stroke);
        stroke-dasharray: 10;
        stroke-width: 1px;
        stroke-linejoin: bevel;
    }

    30.1% {
        stroke: var(--fill);
        stroke-dasharray: 0;
        stroke-linejoin: miter;
        stroke-width: 8px;
    }

    60% {
        transform: scale(1.2);
        fill: var(--fill);
    }
}


.pop-up-models .modal-footer{
    border-top: none !important;
}
.pop-up-models .modal-footer button{
    min-width: 120px;
    height: 50px;
    border-radius: 25px;
}
.pop-up-models .modal-footer .but-colse{
    background: #ff0000;
    color: #fff;
}
.pop-up-models .modal-footer .but-send{
    background: #00897b;
    color: #fff;
}
 .modal-footer .but-colse{
    background: #ff0000;
    color: #fff;
}
 .modal-footer .but-send{
    background: #00897b;
    color: #fff;
}
.card-docter2 .docter-name{
    font-family: Cairo;
    font-size: 18px !important;
    font-weight: 600;
    line-height: 33.73px;

    color: #000 !important;
}
.image-center{
    width: 100%;
    text-align: center;
}
.image-center img{
    width: 60% !important;
    height: 350px;
}
/* --- Staert Page Index */
.header-page-index{
    width: 100%;
    min-height: 100vh;
    background: #075555;
    position: relative;
    overflow: hidden;
}
.header-page-index nav ul li{
    padding: 0px 10px;
}
.header-page-index nav ul li a{
    color: #fff !important;
}
.header-page-index nav ul li .active{
    color: #00FFD4 !important;
    font-weight: bold;
}
.header-page-index nav ul li a:hover{
    color: #00FFD4 !important;

}
.button-headers button{
    width: 120px;
    height: 48px;
    border-radius: 10px;
    margin: 0px 5px;
}
.but-create-acount{
    background: #13E5C2 !important;
    color: #111 !important;
    border: none;
    outline: none;
    font-size: 17px;
    font-weight: 600;
}
.button-headers .box-Languages{
    background: #004d40 !important;

}

.but-sign-in{
    border: 2.5px solid  #13E5C2 !important;
    background: transparent;
    outline: none;
    color: #fff !important;
    font-weight: 600;
}
.content-header-center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    width: 60%;
}
.content-header-center h1{

    font-size: 50px;
    font-weight: 500;
    line-height: 93.7px;
    color: #fff;
    font-family: "El Messiri", sans-serif !important;


}
.content-header-center h4{

    font-size: 25px;
    font-weight: 500;
    line-height: 48px;
    text-align: center;
    color: #fff;

}




.box-header-search-and-filter{
    background: #F4F4F4;
    width: 100%;
    margin: 30px 0px;
    border-radius: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 20px;

}
.box-header-search-and-filter .box-serach ,  .box-header-search-and-filter .box-location  , .box-section{
    width: 27%;
    height:50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 0px 10px;
    border-radius: 8px;
    cursor: pointer;

}
.box-header-search-and-filter .box-serach  input{
    width: 90%;
    height: 50px;
    background: transparent;
    border: none;outline: none;
    margin: 0px 10px;
    color: #C6C6C6;
}
.box-header-search-and-filter .box-serach  select{
    width: 95%;
    height: 50px;
    background: transparent;
    border: none;outline: none;
    margin: 0px 10px;
    color: #C6C6C6;
}
.box-header-search-and-filter .box-location input{
    width: 90%;
    height: 50px;
    background: transparent;
    border: none;outline: none;
    margin: 0px 10px;
    color: #C6C6C6;
}
.box-header-search-and-filter .box-location select{
    width: 95%;
    height: 50px;
    background: transparent;
    border: none;outline: none;
    margin: 0px 10px;
    color: #C6C6C6;
}
/* .box-header-search-and-filter .box-section{
  margin: 0px 10px;
} */
.box-header-search-and-filter .box-section input{
    width: 90%;
    height: 50px;
    background: transparent;
    border: none;outline: none;
    margin: 0px 10px;
    color: #C6C6C6;
}
.box-header-search-and-filter .box-section select{
    width: 95%;
    height: 50px;
    background: transparent;
    border: none;outline: none;
    margin: 0px 10px;
    color: #C6C6C6;
}
.box-header-search-and-filter span{
    color: #075555;
    font-size: 20px;
}
.box-header-search-and-filter .but-search{
    width: 15%;
}
.box-header-search-and-filter .but-search button{
    width: 100%;
    height: 50px;
    border-radius: 8px;
    background: #00FFD4;
    border: none;
    outline: none;
    color: #111;
    font-weight: bold;
    margin: 0px 5px;
}
.sec-docter-silder{
    padding-top: 100px !important;
    padding-bottom: 50px !important;
    width: 100%;

}
.flex-header-title{
    display: flex;
    justify-content: space-between;
    align-items: center;

}
.flex-header-title h5{

    font-size: 30px;
    font-weight: 600;
    color: #000;

}
.flex-header-title  a{
    color: #000;
}

.row-docter-silder{
    height: 700px;

}
.sec-center-media-silder{
    height: 700px;

}
.swiper{
    height: 700px;

}
.sec-center-media-silder .swiper{
    height: 600px !important;
}
/* .swiper-wrapper .swiper-slide{
  height: 800px !important;

} */
.row-docter-silder .badge{
    left: 0px !important;
    top: 20px !important;
    width: 80px;
    height: 24px;
    border-radius: 4px;
    background:  #075555;
    padding: 0px !important;
    line-height: 24px !important;
}
.swiper-pagination {
    margin-bottom: 80px;
    width: 200px !important;

}


.swiper-pagination span{
    width: 10px; /* تكبير حجم الدوائر */
    height: 10px;
    background-color: #ddd; /* لون الدوائر */
    opacity: 1;
}

.swiper-pagination-bullet-active {
    width: 60px !important;
    height: 8px !important;
    border-radius: 8px !important;
    background: #00897b !important;
}

/* ----- */
.sec-center-media-silder{
    padding-top: 0px !important;
    padding-bottom: 50px !important;
    width: 100%;
}
/* sec-service */
.sec-service{
    padding-bottom: 50px;
    overflow: hidden;
}
.title-service{

    font-size: 30px;
    font-weight: 600;
    color: #000;
}
.card-service{
    width: 100%;

    position: relative;
    margin: 20px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cricle-card-service{
    width: 250px;
    height: 250px;
    background: #F8F8F8;
    box-shadow: 0px 10px 20px 0px #B4B4B440;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.cricle-card-service img{
    width: 80px !important;
    height: 80px !important;
}
.cricle-card-service h5{
    margin: 12px 0px;
    font-family: Cairo;
    font-size: 22px;
    font-weight: 600;
    color: #075555;
    text-align: center;

}
.pos-image-service-tow{
    position: absolute;
    top: 10px;
    right: 15px;
    transform: rotate(13deg);
}
.pos-image-service-one{
    position: absolute;
    top: 30px;
    left: 15px;
    transform: rotate(7deg);
}
.pos-image-service-three{
    position: absolute;
    bottom: 10px;
    right: 10px;

}
.sec-pricing{
    padding: 50px 0px;
}
.title-pricing{
    text-align: center;

    font-size: 30px;
    font-weight: 600;
    line-height: 30px;

}
.pricing-card {

    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #00bfa5;

    margin: 20px auto;
    position: relative;
}

.header {
    background-color: #004d40;
    color: #ffffff;
    padding: 20px;
    position: relative;
    text-align: center;
}

.header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
}

.wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 40px;
    background: url('http://www.w3.org/2000/svg') no-repeat center bottom;
    background-size: cover;
}

.pricing-content {
    padding: 20px;
}

.price {
    font-size: 1.8rem;
    color: #004d40;
    margin: 0;
    text-align: center;
}



.subscribe-btn {
    display: inline-block;
    background-color: #00bfa5;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 1.1rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
    margin: 20px auto !important;
    border: none;
}

.subscribe-btn:hover {
    background-color: #004d40;
}
.pricing-card ul{
    list-style-type: none !important;
    margin-top: 30px !important;
}
.pricing-card ul li{
    margin: 15px 0px;
    display: flex;
    align-items: center;

}
.pricing-card ul li i{
    width: 10%;
    font-size: 24px;
}
.pricing-card ul li span{
    width: 80%;
}
.pricing-card ul li .bxs-check-circle{
    color: #13E5C2;
}
.step-appointment{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

}
.step-cards{
    width: 40%;
    border-radius: 10px;
    position: relative;
    padding: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.step-one{
    background: #00FFD4;


    order: 2 !important;
}
.step-cards img{
    width: 60px;
    height: 60px;
    margin: 10px 0px;
}
.step-cards h4{

    font-size: 24px;
    font-weight: 500;
    line-height: 25px;
    margin: 10px 0px;

}
.step-cards p{

    font-size: 16px;
    font-weight: 400;
    color: #075555;

}
.step-cards h2{
    position: absolute;
    left: -25px;
    top: 30px;

    font-size: 70px;
    font-weight: 700;
    Opacity:10%;
    font-family: "Inter", sans-serif !important;

}
.step-tow{
    background: #00B4B517;

    order: 1 !important;
    margin: 0px 80px;
}
.step-three{
    background: #E3FFFA;
    order: 4 !important;
    margin: 80px 80px;
}
.step-four{
    background:  #075555;
    margin: 80px 0px;
    order: 3 !important;

}
.step-four h4{
    color: #fff;
}
.step-four p{
    color: #fff;
}
.book-appointment{
    overflow: hidden;
}
.content-book-appointment h5{

    font-size: 30px;
    font-weight: 600;
    line-height: 30px;


}
.content-book-appointment p{
    width: 85%;
    line-height: 30px;
    margin: 12px 0px;
}
.search-result{
    padding: 150px 0px;
}
.card-search-page .box-header-search-and-filter {
    width: 85%;
    margin:40px auto;
    background: #EDEDED !important;

}
.card-search-page h5{
    font-family: Cairo;
    font-size: 30px;
    font-weight: 500;
    color:  #075555;


}
.card-search-page .box-header-search-and-filter input{
    color: #111 !important;
}
.title-cat{

    font-size: 32px;
    font-weight:500;
    margin: 15px 0px;
}
.result-massage{

    font-size: 24px;
    font-weight: 400;
    line-height:30px;
    margin: 20px 0px;
    color: #ff0000;
}
.sec-FAQ{
    padding: 150px 0px;
}
.title-faq{

    font-size: 30px;
    font-weight: 600;
    line-height: 45px;
    text-align: center;
    color: #075555;
}

/* -------- */
.accordion-group {
    width: 80%;
    margin:50px auto;
}

.items-accordion {
    border: 1px solid #D8D8D8;
    background: #fff;
    margin: 20px 0;
    padding: 20px 70px;
    position: relative;
    border-radius: 5px;
    min-height: 50px;
    cursor: pointer !important;
    cursor: pointer;
}

.items-accordion label {
    position: relative;
    color: #101011;
    font-family: "El Messiri", sans-serif !important;
    font-size: 19px;
    font-weight: 500;
    width: 100%;
    /* padding: 0px 70px; */
    cursor: pointer !important;
}

.items-accordion label::before {
    content: "\f067"; /* رمز الأيقونة "+" */
    font-family: "Font Awesome 6 Free"; /* اسم العائلة يجب أن يكون مطابقًا */
    font-weight: 900; /* تأكد من استخدام الوزن الصحيح */
    display: inline-block;
    margin-left: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -30px;
    color: #000;
}

.items-accordion.activeItems label::before {
    content: "\f068"; /* رمز الأيقونة "-" */
}

.content-accordion {
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease;
}

.items-accordion.activeItems .content-accordion {
    height: 250px;
    padding-top: 10px;
    /* overflow-y: auto; */
}

.items-accordion.activeItems {
    border: 1px solid  #13E5C2;
    box-shadow: 0px 0px 5px rgba(230, 236, 239, 0.3); /* إضافة تأثير ظل */
}


/* ---------------- */
/* From Uiverse.io by Yaya12085 */

.user-type-card .icon {
    font-size: 30px;
    color: #075555; /* Default icon color */
}

.card-user input[type="radio"] {
    display: none; /* Hide radio buttons */
}

.card-user input[type="radio"]:checked + label {
    background-color: #00796B; /* Active background color */
    border-color: #00796B;
    color: white; /* Active text color */
}

.card-user input[type="radio"]:checked + label .icon {
    color: white; /* Active icon color */
}
.card-user input[type="radio"]:checked + label  h5{
    color: #fff;
}
.user-type-selection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.card-user {
    width: 30%;
    height: 150px;
    border: 1px solid  #075555;
    background: #fff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.card-user h5 {
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    color: #075555;
    margin: 12px 0px;
}

.card-user label {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    border-radius: 5px;
}

.card-user label  .icon{
    color: #004d40;
}

/* -------------- */
/* From Uiverse.io by alexruix */
.loading{
    background: #fff;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    z-index: 7000 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loader {
    width: 48px;
    height: 48px;
    margin: auto;
    position: relative;
}

.loader:before {
    content: '';
    width: 48px;
    height: 5px;
    background: #9b9898;
    position: absolute;
    top: 60px;
    left: 0;
    border-radius: 50%;
    animation: shadow324 0.5s linear infinite;
}

.loader:after {
    content: '';
    width: 100%;
    height: 100%;
    background: #004d40;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    animation: jump7456 0.5s linear infinite;
}

@keyframes jump7456 {
    15% {
        border-bottom-right-radius: 3px;
    }

    25% {
        transform: translateY(9px) rotate(22.5deg);
    }

    50% {
        transform: translateY(18px) scale(1, .9) rotate(45deg);
        border-bottom-right-radius: 40px;
    }

    75% {
        transform: translateY(9px) rotate(67.5deg);
    }

    100% {
        transform: translateY(0) rotate(90deg);
    }
}

@keyframes shadow324 {

    0%,
    100% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1);
    }
}

/* Anamtion All Web site */
/* تأثير التلاشي التدريجي على النصوص */
.toggle-menu-header{
    width: 50px;
    height: 50px;
    background: #00FFD4;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.toggle-menu-header span{
    color: #111;
    font-size: 25px;
}


.header-mobile{
    display: none;
    position: relative;
}
.tops-header-mobile{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    min-height: 80px;
    background: #fff;
    box-shadow: 0px 10px 16px 0px #adaaaa40;
    padding: 20px 30px;
    z-index: 5000 !important;
}
.flex-logo-and-menu{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-logo-and-menu .logo img{
    width: 80px;
    height: 80px;
}
.menu-mobile{
    background: #004d40;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.menu-mobile span{
    font-size: 25px;
    color: #fff;
}
.menu-list-header-mobile{
    position: fixed;
    top: 0px;
    left: 0px !important;
    z-index: 6000 !important;
    width:100%;
    height: 100vh;
    background: #004d40;
    box-shadow: 0px 10px 16px 0px #DCDCDC40;
    padding: 0px 50px;
    display: none;
}
.groups-list{
    position: relative;
    padding-top: 150px !important;
}
#CloseMenu{
    position: absolute;
    top: 40px;
    left: 20px;
    background: #fff !important;
    color: #004d40 !important;
}
#CloseMenu span{
    color: #004d40 !important;
}
.menu-list-header-mobile ul li{
    list-style-type: none;
    padding: 12px 0px;

}
.menu-list-header-mobile ul li a{
    color: #fff;

}
.active-link-mobile{
    color: #0fd850 !important;
    font-weight: 600;
}
.menu-mobile .close-menu{
    display: none;
}
.no-scroll {
    overflow: hidden;
}
.button-action-mobile{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.button-action-mobile .but-create-acount  , .button-action-mobile .but-sign-in{
    width: 120px;
    height: 45px;
    margin: 20px 10px;
    text-align: center;
    line-height: 45px !important;

}
.button-action-mobile .but-create-acount {
    background: #075555;
    color: #fff ;
}
.button-action-mobile .but-sign-in{
    color: #111 !important;
    margin: 0px 15px;
    border: 2.5px solid #075555;
}
.button-action-mobile .but-sign-in{
    color: #111;
}
.part-left-header-action .but-create-acount  , .part-left-header-action .but-sign-in{
    width: 120px;
    height: 45px;
    /* margin: 20px 10px; */
    text-align: center;
    line-height: 45px ;
    padding: 0px ;
    border-radius: 5px;
}
.part-left-header-action .but-create-acount{
    background: #075555;
    color: #fff ;
}
.part-left-header-action .but-sign-in{
    color: #111 !important;
    margin: 0px 15px;
    border: 2.5px solid #075555;
}
.part-left-header-action .dropdown{
    margin: 0px 15px !important;
}
.part-left-header-action .dropdown .dropdownBg{
    background:#00796B !important;
    min-height: 45px;
    padding: 5px 0px;
    border: none;
    outline: none;
    width: 200px !important;
    border-radius: 5px;
    display: block;
    text-align: center;
    line-height: 45px;
    color: #fff !important;
}
.dropdownBg img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.dropdownBg  .username{
    margin: 0px 5px;
}
.part-left-header-action  .dropdown-menu{
    background: #00796B !important;
    padding: 0px 0px !important;
    width: 200px !important;
}
.part-left-header-action  .dropdown-menu li a{
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;

}
.part-left-header-action  .dropdown-menu li{
    height: 45px !important;
    border-bottom: 1px solid #b2b0b0;
    display: flex;
    align-items: center;

    width: 100% !important;
}
.part-left-header-action  .dropdown-menu li a:hover{
    background: transparent !important;
}
.part-left-header-action  .dropdown-menu li:last-child{
    border: none !important;
}
.part-left-header-action  .dropdown-menu li a span{

    font-size: 17px;
    font-weight: 400;


}
.part-left-header-action  .dropdown-menu li a  i{
    font-size: 18px;
}

/* ----- Start Page Patient */
.profile-patient{

    padding: 200px 0px;
    padding-bottom: 100px !important;
}
.input-english{
    text-align: left !important;
}
.all-input-failds-custome label{
    font-size: 18px !important;
    font-weight: 500;
    line-height: 46.85px;
}
.all-input-failds-custome .box-input{
    width: 100%;
    height: 60px;
    border-radius: 4px;
    box-shadow: 0px 4px 16px 0px #CCCCCC40;
    border: none;
    outline: none;
    padding: 0px 16px;
    color: #B1B1B1;
    margin-top: 7px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.all-input-failds-custome .box-input input{
    width: 85% !important;
    height: 60px;
    border: none;
    outline: none;
}
.all-input-failds-custome .box-input  span{
    color: #075555;
    font-size: 25px;
    cursor: pointer;
}
/* --------- */
.custom-select {
    position: relative;
    display: inline-block;
    width: 100% !important;

}

/* style the select element */
.custom-select select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    appearance: none; /* Remove default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 5px;
    background-image: url('../img//Vector\ \(1\).png'); /* Add custom icon */
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 16px;
    height: 60px;
    border-radius: 4px;
    box-shadow: 0px 4px 16px 0px #CCCCCC40;
    border: none;
    outline: none;
    padding: 0px 20px;
    color: #B1B1B1;
    margin-top: 7px;
    cursor: pointer;
}

/* style the options inside the select */
.custom-select select option {
    padding: 10px; /* Height of each option */
    width: 100%; /* Ensure option width matches select */
    font-size: 16px;
    height: 50px !important;
    appearance: none !important;
}

/* Optional: for handling the dropdown list on focus */
.custom-select select:focus {
    outline: none;
    border-color: #999;
}
.custom-select select option:hover {
    background-color: #f1f1f1; /* Custom hover color */
    color: #000; /* Optional: change text color on hover */
}


.card-profile-patient{
    width: 85%;
    margin: 80px auto;
    background: #fff;
    box-shadow: 0px 16px 32px 20px #07555514;
    padding: 25px;
    position: relative;

}
.part-upload-image img{
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    border-radius: 50%;

}
.but-upload-image{
    margin-top: 50px;
    text-align: center;
}
.but-upload-image button{
    width: 200px;
    height: 45px;
    background: transparent;
    border-radius: 8px ;
    border: 2px dashed  #075555;

    font-size: 17px;
    font-weight: 400;
    color:#075555;


}
.part-upload-image h6{

    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    color:  #777777;
    margin: 20px auto;
    text-align: center;

}
.but-form-profile{
    margin: 50px auto;
    text-align: center;
}
.but-form-profile button , .but-form-profile a{
    width: 20%;
    height: 45px;
    background:  #00FFD4;
    color: #000;
    margin: auto;
    border: none;
    outline: none;
    border-radius: 5px;
    font-weight: 600;
}
.but-form-profile a{
    line-height: 45px;
}
.part-left-header-action .customeMenu li a{
    color: #fff !important;
}
.profile-patient .all-input-failds label{
    color: #777777 !important;
    font-size: 17px !important;
}
.custone-profile-patient input{
    color:#111;
    font-weight: 600 !important;
    font-size: 15px;
}
.custome-button-profile-docter .but-add-appointment{
    margin: 0px 10px;
    background: #00B4B5;
}

.time-buttons {
    display: grid;
    grid-template-columns: repeat(3,1fr);

    gap: 5px;
}

.time-btn {
    padding: 10px 20px;
    border: 1px solid #77777780;
    background-color: #fff;
    color: #77777780;

    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.time-btn.active {
    background-color: #004d40;
    color: #fff;
}

.time-btn:hover:not(.active) {
    background-color: #004d40;
    color: #fff !important;
}

.result-time{
    color: #004d40 !important;
    margin: 10px 0px !important;
}
.customeWidthModel .modal-dialog {
    max-width: 40% !important;
}
.toast-body{
    width: 100% !important;
    display: block !important;
}
.flex-toast{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100% !important;
    height: 60px !important;

}
.flex-toast span{
    font-size: 20px;
    color: #004d40;
}
.book-appintment{
    padding: 150px 0px;
}
.title-book{
    text-align: center;
    font-family: Cairo;
    font-size: 30px;
    font-weight: 500;
    color: #075555;

}
.card-white-book{
    width: 65%;
    background: #fff;
    box-shadow: 0px 16px 32px 20px #07555514;
    border-radius: 20px;
    margin: 60px auto;
    /* padding: 30px; */
}
.card-white-book ul{
    display: flex;
    justify-content: space-between;
    align-items: center;



}
.tabs-appintment{
    width: 65%;
    background: #fff;
    box-shadow: 0px 16px 32px 20px #07555514;
    border-radius: 20px;
    margin: 60px auto;
}
.tabs-appintment .tabs-items{
    display: flex;
}
.tabs-appintment .tabs-items button{
    width: 33.33%;
    height: 60px;
    border: none;outline: none;
    border-bottom: 1px solid #BFBFBF;
    background: transparent;
    text-align: center;
    padding: 20px;
    color: #BFBFBF;
}

.tabs-appintment .tabs-items .tabs-active{
    color: #13E5C2;
    font-weight: 600;
    border-bottom: 2px solid #13E5C2;
}
.content-tabs-appintment{
    padding: 20px 40px;
}
.sec-tab{
    display: none;
}
#contentOne{
    display: block;
}

.list-appointment{
    display: flex;
    justify-content: space-between;
    align-items: center;

    background: #F5F5F5;
    border-bottom: 2px solid #075555;
    padding: 25px;
    border-right: 2px solid #075555;
    overflow: hidden;
    height: 120px;
    border-radius: 10px;
    margin: 15px 0px;
}
.flex-iamge-and-info{
    display: flex;
    align-items: center;
}
.image-cricle{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #075555;
    margin-top: 120px;
    position: relative;
}
.image-cricle img{
    position: absolute;
    top: -30px;
    right: 10px;

    width: 100px;
    height: 100px;
}
.tst-info{
    margin: 0px 15px;
}
.tst-info h5{

    font-size: 17px;
    font-weight: 400;
    line-height: 30px;


}
.tst-info h6{

    font-size: 16px;
    font-weight: 400;

}
.inf-data-and-colck article{
    display: flex;
    align-items: center;
    margin: 12px 0px;
}
.inf-data-and-colck img{
    width: 20px;
    height: 20px;
}
.inf-data-and-colck h6{
    margin: 0px 8px;
}
.but-group-action-appontment button{
    display: block;
    margin: 10px 0px;
}
.but-group-action-appontment .but-cancle{
    border: 1px solid  #075555;
    background: #F7F7F7;
    width: 110px;
    height: 40px;

    border-radius: 5px ;
    color:#075555;
    font-weight: 600;
    font-size: 16px;
}
.retun-but{
    width: 170px;
    height: 40px;

    border-radius: 4px;
    background:  #00FFD4;

    border: none;
    outline: none;

    font-size: 16px;
    font-weight: 600;


}
.add-but{
    width: 170px;
    height: 40px;

    border-radius: 4px;
    border: 2px solid #00FFD4 !important;
    background: transparent;

    outline: none;

    font-size: 16px;
    font-weight: 600;

}
.but-group-action-appontment a{
    height: 40px;
    display: block;
    line-height: 40px;
    text-align: center;
    color: #111 !important;
}
#progress {
    position: fixed;
    bottom: 20px;
    right: 20px;
    height: 70px;
    width: 70px;
    display: none;
    place-items: center;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all .2s ease-in-out;
    z-index: 5000 !important;
}
#progress-value {
    display: block;
    height: calc(100% - 15px);
    width: calc(100% - 15px);
    background-color: #ffffff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 35px;
    color: #00B4B5;
}

.colse{
    width: 100px !important;
}
.pos-icon-website{
    position: fixed;
    bottom: 50px;
    left: 200px;
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0px 10px 16px 0px #DCDCDC40;
    cursor: pointer;
    z-index: 5000 !important;
}
.pos-icon-website i{
    font-size: 50px;
    color: #00B306;
}
.pos-icon-loction{
    position: fixed;
    bottom: 50px;
    left: 100px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #004d40;
    box-shadow: 0px 10px 16px 0px #DCDCDC40;
    cursor: pointer;
    z-index: 5000 !important;
}
.pos-icon-loction i{
    color: #fff !important;
    font-size: 30px;
}
.center-name{
    color:  #075555;
    font-size: 20px;
    font-weight: 600;
    margin: 15px 0px;

}
.row-image-center{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap !important;

}
.colum-image{
    flex-basis: 18%;
    margin: 10px 0px;
}
.colum-image img{
    width: 100%;
    height: 120px;
    border-radius: 8px;
}
.icon-social-media{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    cursor: pointer;
}
.icon-social-media a{
    font-size: 28px;
    color: #075555;
    margin: 0px 3px;
    text-decoration: none;
}
.but-appointment-offer button{
    border: none;outline: none;
    width: 100%;
    height: 45px;
    background: #004d40;
    color: #fff;
    border-radius: 5px;
    margin: 10px 0px;
}
.sign-auth-with-google{
    width: 40%;
    margin: 20px auto;
    min-height: 50px;
    border-radius: 5px;
    border: 1px solid #B5B5B5;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
}
.sign-auth-with-google img{
    width: 30px;
    height: 30px;
}
.sign-auth-with-google h6{
    color: #393939;
    font-family: Cairo;
    font-size: 17px;
    font-weight: 400;

    margin: 0px 10px;

}
.veriy-mobile-number a{
    text-align: center;

    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
    text-align: center;
    color: #00FFD4;
    font-weight: 600;
}
.customeRatingBg{
    background: transparent !important;
    border: 2px solid #00FFD4 !important;
    font-weight: bold !important;
}
.but-book button{
    border: none;
    outline: none;
    width: 100%;
    height: 50px;
    background: #004d40;
    color: #fff;
    border-radius: 5px;
    margin-top: 40px;
}

/* --------- */
.date-picker {
    position: relative;
    width: 100% !important;

}

#calendar {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    border: 1px solid #ccc;
    background-color: white;
    z-index: 1000;
}

#calendar table {
    width: 100%;
    border-collapse: collapse;
}

#calendar td {
    padding: 10px;
    text-align: center;
    cursor: pointer;
}

#calendar td.active {
    background-color: #4caf50;
    color: white;
}

#selectedDate {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
}

.pika-single {
    background-color: transparent !important; /* لون الخلفية */
    border-radius: 0px; /* حواف مستديرة */
    box-shadow: 0 4px 8px transparent !important /* إضافة ظل */;
    border:none;

}

.pika-lendar {
    background-color: #fff; /* خلفية الشبكة */
    width: 100% !important;
}

.pika-button {
    background-color: #fff; /* خلفية الأزرار (أيام الشهر) */
    color: #111; /* لون النص في الأزرار */
    border-radius: 5px; /* استدارة الأزرار */
    width: 50px !important;
}
.date-icon {
    background-color: #075555 !important; /* لون خلفية الأيقونة */
    padding: 10px; /* مساحة داخلية حول الأيقونة */
    border-radius: 50%; /* تحويل الأيقونة لدائرة */
    cursor: pointer; /* تغيير المؤشر عند المرور على الأيقونة */
}
.pika-single .pika-button {
    font-size: 16px; /* حجم الخط */
    font-family: "Cairo", sans-serif !important;

    /* نوع الخط */
    color: #111; /* لون النص */
}

.title-form{

    font-size: 22px;
    font-weight: 600;
    color: #075555;

}
.box-flex-input-edit{
    width: 100%;
    height: 60px;
    border-radius: 4px;
    box-shadow: 0px 4px 16px 0px #CCCCCC40;
    border: none;
    outline: none;
    padding: 0px 16px;
    color: #B1B1B1;
    margin-top: 7px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.box-flex-input-edit span{
    font-size: 22px;
    font-weight: bold;
    color: #075555;
    cursor: pointer;
}
.box-flex-input-edit h6{

    font-size: 16px;
    font-weight: 400;
    color: #000;

}
.sec-modle .modal{
    z-index: 8000 !important;
}
.sec-modle .modal-dialog{
    max-width: 40% !important;

}
.sec-modle .modal-content{
    padding: 50px 20px !important;
    overflow-y: hidden !important;

}
.sec-modle .modal-footer{
    border: none !important;
}
.sec-modle .modal-footer button
{
    width: 120px;
    height: 45px;
    border-radius: 5px;
    margin: 0px 3px;
}
.sec-modle .modal-footer .bg-but-gray{
    background: #eee;
}
.sec-modle .modal-footer .bg-but-green{
    background: #00B4B5;
    color: #fff;

}
.sec-modle .iti {
    width: 100% !important;
}

.sec-modle .iti input {
    width: 100% !important;
    box-sizing: border-box; /* لضمان عدم تجاوز العناصر الحد الخارجي */
}

.sec-modle .iti__flag {
    width: 20px; /* عرض العلم، يمكنك تغييره حسب الحاجة */
    height: 20px; /* ارتفاع العلم، يمكنك تغييره حسب الحاجة */
}

.sec-modle .iti__flag-container {
    padding: 0 10px !important; /* لتوفير مساحة حول العلم، يمكنك ضبط هذه القيمة */
    border-right: 2px solid #00FFD4 !important;
}

.sec-modle .iti__selected-flag {
    width: auto; /* عرض العلم بشكل تلقائي بناءً على التعديلات */
}

.sec-modle .iti webkit .iti__arrow,
.sec-modle .iti__selected-flag .iti__arrow {
    width: 6px; /* عرض السهم */
    height: 6px; /* ارتفاع السهم */
    border: solid black; /* لون السهم */
    border-width: 0 2px 2px 0; /* سماكة الحدود التي تشكل السهم */
    display: inline-block;
    /* padding: 3px; */
    transform: rotate(45deg); /* دوران السهم */
    margin-right: 8px; /* مسافة بين العلم والسهم */
}

/* لتغيير لون السهم عند التركيز على حقل الإدخال */
.sec-modle iti__selected-flag:hover .sec-modle .iti__arrow {
    border-color: #121617; /* يمكنك اختيار اللون الذي يناسبك */
}

.sec-modle .iti__arrow {
    background-image: url('your-arrow-image.png'); /* رابط الصورة */
    background-size: contain;
    background-repeat: no-repeat;
    width: 16px; /* عرض الصورة */
    height: 16px; /* ارتفاع الصورة */
    border: none; /* إزالة الحدود الافتراضية للسهم */
    margin-left: 6px !important;
}
.sec-modle .iti {
    position: relative; /* لضمان ظهور القائمة ضمن الحاوية */
}

.sec-modle .iti__country-list {
    position: absolute;
    top: 100%; /* لجعل القائمة تظهر أسفل الحقل */
    left: 0; /* لمحاذاة القائمة إلى اليسار */
    min-width: 530px !important; /* لجعل عرض القائمة يتناسب مع عرض حقل الإدخال */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ظل أنيق */
    z-index: 1000; /* لضمان ظهور القائمة فوق العناصر الأخرى */


}

.hidden {
    display: none;
}

.family-form {

    padding: 15px;
    margin-top: 15px;
    border-radius: 8px;
    background-color: #F8F8F8;
    padding: 25px;
    border-radius: 5px;
}

.family-member {
    margin-bottom: 0px;
}

#addMemberBtn {
    background-color: #075555;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 150px;
}

#addMemberBtn:hover {
    background-color: #00B4B5;
}
#showClickMarried{
    opacity: 0;
}




.flex-headr-calander{
    display: flex;
    align-items: center;
    padding: 25px 30px 10px;
    justify-content: space-between;
}
.flex-headr-calander .icons-calander{
    display: flex;
}
.flex-headr-calander .icons-calander span{
    height: 38px;
    width: 38px;
    margin: 0 1px;
    cursor: pointer;
    color: #878787;
    text-align: center;
    line-height: 38px;
    font-size: 1.9rem;
    user-select: none;
    border-radius: 50%;
}
.icons span:last-child{
    margin-right: -10px;
}
.flex-headr-calander .icons-calander span:hover{
    background: #f2f2f2;
}
.flex-headr-calander .current-date{
    font-size: 1.45rem;
    font-weight: 500;
}
.calendar{
    padding: 20px;
}
.calendar ul{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    text-align: center;
}
.calendar .days{
    margin-bottom: 20px;
}
.calendar li{
    color: #333;
    width: calc(100% / 7);
    font-size: 1.07rem;
}
.calendar .weeks li{
    font-weight: 500;
    cursor: default;
}
.calendar .days li{
    z-index: 1;
    cursor: pointer;
    position: relative;
    margin-top: 30px;
}
.days li.inactive{
    color: #aaa;
}
.days li.active{
    color: #fff;
}
.days li::before{
    position: absolute;
    content: "";
    left: 50%;
    top: 50%;
    height: 36px;
    width: 80px;
    z-index: -1;
    border-radius: 5px;
    transform: translate(-50%, -50%);
    font-size: 14px;
}
.days li.active::before{
    background: #004d40;
}
.days li:not(.active):hover::before{
    background: #f2f2f2;
}
.art-ifno-detalis-user{
    display: flex;
    align-items: center;
}
.art-ifno-detalis-user .dropdownBg{
    width: 40px;
    height: 40px !important;

    border-radius: 50%;
    padding: 5px;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    margin: 0px 10px;
}
.art-ifno-detalis-user .dropdownBg img{
    width: 45px;
    height: 45px;
}
.art-ifno-detalis-user .dropdown-menu{
    top: 10px !important;
    width: 200px !important;
    background: #004d40 !important;
    padding:10px 0px !important;
}
.art-ifno-detalis-user .dropdown-menu a{
    display: flex;
    justify-content: space-between;
    align-items: center !important;
    color: #fff !important;
}
.art-ifno-detalis-user .dropdown-menu li{
    height: 50px;
    padding: 5px;
    border-bottom: 1px solid #f9f9f9;
}
.art-ifno-detalis-user .dropdown-menu li a:hover{
    background: transparent !important;
}
.art-ifno-detalis-user .dropdown-menu a i{
    font-size: 22px;
}
.art-ifno-detalis-user .dropdown-menu li:last-child{
    border: none !important;
}

/* ----------- */
/* تنسيق القائمة المنسدلة */
.custom-selects {
    width: 100%;
    position: relative;
}

.select-box {

    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    transition: border-color 0.3s ease;
    width: 100%;
    height: 60px;
    border-radius: 4px;
    box-shadow: 0px 4px 16px 0px #CCCCCC40;
    border: none;
    outline: none;
    padding: 0px 16px;
    color: #B1B1B1;
    margin-top: 7px;
}

/* .select-box:hover {
  border-color: #888;
} */

.select-text {
    font-size: 16px;
    color: #B1B1B1;
}

.icons {
    width: 8px;
    height: 8px;
    border-left: 2px solid #B1B1B1;
    border-bottom: 2px solid #B1B1B1;
    transform: rotate(-45deg);
    transition: transform 0.3s ease;
}

/* إخفاء الخيارات */
.options {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;

    width: 100%;
    box-shadow: 0px 4px 16px 0px #CCCCCC40;
    background-color: #fff;
    /* border: 2px solid #ccc; */

    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    z-index: 100;
    top: 65px;

}

.options.show {
    max-height: 150px; /* الحد الأقصى لارتفاع القائمة */
    overflow-y: auto;  /* السماح بالتمرير العمودي */
}

.option {
    padding:10px 20px !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.option:hover {
    background-color: #f1f1f1;
    color: #111;
}


.options.show::-webkit-scrollbar {
    width: 4px; /* عرض شريط التمرير */
    background: #eee !important;
    cursor: pointer;
}

.options.show::-webkit-scrollbar-thumb {
    background-color: #00FFD4 !important; /* لون المقبض */
    border-radius: 10px; /* حواف دائرية */
    /* إضافة حواف للمقبض */
}
.but-add-fornm{
    text-align: left;
}
.but-add-fornm button{
    margin: 20px 0px;
    width: 140px;
    height: 45px;
    background: #00FFD4;
    border-radius: 5px;
    color: #111;
    border: none;
    outline: none;
}


 .backs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: #6c757d;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid #6c757d;
}

 .backs:hover {
    background-color: #5a6268;
    border-color: #545b62;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}