@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');


:root {
    --main-color: #0A2342;
    --tow_color: #44515E;
    --second-color: #000;
    --whiet-color: #fff;
    --border-color: #E5E5E5;
    --select-icon-size: 10px;
    /* Icon size */
    --select-icon-margin: 1rem;
    /* Icon left/right positioning */
    --select-text-icon-gap: 0.5rem;
    /* Space between text and icon */

}

/*start scrollbar */
*::-webkit-scrollbar {
    width: 7px;
}

*::-webkit-scrollbar-track {
    background-color: #FDFBF7;
}

*::-webkit-scrollbar-thumb {
    background: var(--main-color);
    border-radius: 20px;
    border-width: 3px;
}

::selection {
    background: var(--main-color);
    color: #ffffff;
    text-shadow: none;
}

.btn:focus,
.btn:focus-visible {
    outline: none;
    border: none;
    box-shadow: none;
}

* {
    margin: 0;
    padding: 0;
    font-family: "Tajawal", sans-serif;
}

body {
    background-color: #FDFBF7;
}


.shrka_box {
    position: relative;
}

.shrka_box .owl-prev span,
.shrka_box .owl-next span {
    position: absolute;
    font-size: 25px;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #FEFEFE;
    bottom: 8%;
    right: 2%;

}

.shrka_box .owl-prev span:hover,
.shrka_box .owl-next span:hover {
    background-color: var(--main-color);
    transition: all 0.4s ease-in-out;

}

.shrka_box .owl-next span {
    right: 8%;
}

/*end scrollbar */
/* start slact flg*/
.select__input {
    /* Reset default dropdown style */
    appearance: none;
    border: 0;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    width: 100%;
    height: 100%;
    /* Custom dropdown styling */
    border: 1px solid #E7E9EC;
    border-radius: 0.375em;
    transition: box-shadow 0.2s;
    user-select: none;
    margin-left: 30px;
}

.select {
    position: relative;
}

.select__arrow,
.select__flag {
    display: inline-block;
    position: absolute;
    /* Center both icons vertically */
    top: 50%;
    transform: translateY(-50%);
    width: var(--select-icon-size);
    height: var(--select-icon-size);
    pointer-events: none;
}

.select__arrow {
    color: inherit;
    left: var(--select-icon-margin);
}

.select__flag {
    right: var(--select-icon-margin);

}

.select__input {
    padding-inline-end: 50px;
    padding: 0.5rem calc(var(--select-icon-size) + var(--select-icon-margin) + var(--select-text-icon-gap));
}

.select__flag {
    background-position: center;
    background-repeat: no-repeat;
    background-size: var(--select-icon-size);
    /* Default world icon as SVG dataURI */

}

.select__flag {
    left: var(--select-icon-margin);
    background-position: center;
    background-repeat: no-repeat;
    background-size: var(--select-icon-size);
}

.select:has(option[value="0"]:checked) .select__flag {
    background-image: url(../img/flag.svg);
}

.select:has(option[value="IT"]:checked) .select__flag {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg%3E%3Cpath fill='%23fff' d='M10 4H22V28H10z'%3E%3C/path%3E%3Cpath d='M5,4h6V28H5c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z' fill='%2341914d'%3E%3C/path%3E%3Cpath d='M25,4h6V28h-6c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z' transform='rotate(180 26 16)' fill='%23bf393b'%3E%3C/path%3E%3Cpath d='M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z' opacity='.15'%3E%3C/path%3E%3Cpath d='M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z' fill='%23fff' opacity='.2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

.select:has(option[value="ES"]:checked) .select__flag {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg%3E%3Cpath fill='%23f1c142' d='M1 10H31V22H1z'%3E%3C/path%3E%3Cpath d='M5,4H27c2.208,0,4,1.792,4,4v3H1v-3c0-2.208,1.792-4,4-4Z' fill='%23a0251e'%3E%3C/path%3E%3Cpath d='M5,21H27c2.208,0,4,1.792,4,4v3H1v-3c0-2.208,1.792-4,4-4Z' transform='rotate(180 16 24.5)' fill='%23a0251e'%3E%3C/path%3E%3Cpath d='M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z' opacity='.15'%3E%3C/path%3E%3Cpath d='M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z' fill='%23fff' opacity='.2'%3E%3C/path%3E%3Cpath d='M12.614,13.091c.066-.031,.055-.14-.016-.157,.057-.047,.02-.15-.055-.148,.04-.057-.012-.144-.082-.13,.021-.062-.042-.127-.104-.105,.01-.068-.071-.119-.127-.081,.004-.068-.081-.112-.134-.069-.01-.071-.11-.095-.15-.035-.014-.068-.111-.087-.149-.028-.027-.055-.114-.057-.144-.004-.03-.047-.107-.045-.136,.002-.018-.028-.057-.044-.09-.034,.009-.065-.066-.115-.122-.082,.002-.07-.087-.111-.138-.064-.013-.064-.103-.087-.144-.036-.02-.063-.114-.075-.148-.017-.036-.056-.129-.042-.147,.022-.041-.055-.135-.031-.146,.036-.011-.008-.023-.014-.037-.016,.006-.008,.01-.016,.015-.025h.002c.058-.107,.004-.256-.106-.298v-.098h.099v-.154h-.099v-.101h-.151v.101h-.099v.154h.099v.096c-.113,.04-.169,.191-.11,.299h.002c.004,.008,.009,.017,.014,.024-.015,.002-.029,.008-.04,.017-.011-.067-.106-.091-.146-.036-.018-.064-.111-.078-.147-.022-.034-.057-.128-.046-.148,.017-.041-.052-.131-.028-.144,.036-.051-.047-.139-.006-.138,.064-.056-.033-.131,.017-.122,.082-.034-.01-.072,.006-.091,.034-.029-.047-.106-.049-.136-.002-.03-.054-.117-.051-.143,.004-.037-.059-.135-.04-.149,.028-.039-.06-.14-.037-.15,.035-.053-.043-.138,0-.134,.069-.056-.038-.137,.013-.127,.081-.062-.021-.125,.044-.104,.105-.05-.009-.096,.033-.096,.084h0c0,.017,.005,.033,.014,.047-.075-.002-.111,.101-.055,.148-.071,.017-.082,.125-.016,.157-.061,.035-.047,.138,.022,.154-.013,.015-.021,.034-.021,.055h0c0,.042,.03,.077,.069,.084-.023,.048,.009,.11,.06,.118-.013,.03-.012,.073-.012,.106,.09-.019,.2,.006,.239,.11-.015,.068,.065,.156,.138,.146,.06,.085,.133,.165,.251,.197-.021,.093,.064,.093,.123,.118-.013,.016-.043,.063-.055,.081,.024,.013,.087,.041,.113,.051,.005,.019,.004,.028,.004,.031,.091,.501,2.534,.502,2.616-.001v-.002s.004,.003,.004,.004c0-.003-.001-.011,.004-.031l.118-.042-.062-.09c.056-.028,.145-.025,.123-.119,.119-.032,.193-.112,.253-.198,.073,.01,.153-.078,.138-.146,.039-.104,.15-.129,.239-.11,0-.035,.002-.078-.013-.109,.044-.014,.07-.071,.049-.115,.062-.009,.091-.093,.048-.139,.069-.016,.083-.12,.022-.154Zm-.296-.114c0,.049-.012,.098-.034,.141-.198-.137-.477-.238-.694-.214-.002-.009-.006-.017-.011-.024,0,0,0-.001,0-.002,.064-.021,.074-.12,.015-.153,0,0,0,0,0,0,.048-.032,.045-.113-.005-.141,.328-.039,.728,.09,.728,.393Zm-.956-.275c0,.063-.02,.124-.054,.175-.274-.059-.412-.169-.717-.185-.007-.082-.005-.171-.011-.254,.246-.19,.81-.062,.783,.264Zm-1.191-.164c-.002,.05-.003,.102-.007,.151-.302,.013-.449,.122-.719,.185-.26-.406,.415-.676,.73-.436-.002,.033-.005,.067-.004,.101Zm-1.046,.117c0,.028,.014,.053,.034,.069,0,0,0,0,0,0-.058,.033-.049,.132,.015,.152,0,0,0,.001,0,.002-.005,.007-.008,.015-.011,.024-.219-.024-.495,.067-.698,.206-.155-.377,.323-.576,.698-.525-.023,.015-.039,.041-.039,.072Zm3.065-.115s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0Zm-3.113,1.798v.002s-.002,0-.003,.002c0-.001,.002-.003,.003-.003Z' fill='%239b8028'%3E%3C/path%3E%3Cpath d='M14.133,16.856c.275-.65,.201-.508-.319-.787v-.873c.149-.099-.094-.121,.05-.235h.072v-.339h-.99v.339h.075c.136,.102-.091,.146,.05,.235v.76c-.524-.007-.771,.066-.679,.576h.039s0,0,0,0l.016,.036c.14-.063,.372-.107,.624-.119v.224c-.384,.029-.42,.608,0,.8v1.291c-.053,.017-.069,.089-.024,.123,.007,.065-.058,.092-.113,.083,0,.026,0,.237,0,.269-.044,.024-.113,.03-.17,.028v.108s0,0,0,0v.107s0,0,0,0v.107s0,0,0,0v.108s0,0,0,0v.186c.459-.068,.895-.068,1.353,0v-.616c-.057,.002-.124-.004-.17-.028,0-.033,0-.241,0-.268-.054,.008-.118-.017-.113-.081,.048-.033,.034-.108-.021-.126v-.932c.038,.017,.073,.035,.105,.053-.105,.119-.092,.326,.031,.429l.057-.053c.222-.329,.396-.743-.193-.896v-.35c.177-.019,.289-.074,.319-.158Z' fill='%239b8028'%3E%3C/path%3E%3Cpath d='M8.36,16.058c-.153-.062-.39-.098-.653-.102v-.76c.094-.041,.034-.115-.013-.159,.02-.038,.092-.057,.056-.115h.043v-.261h-.912v.261h.039c-.037,.059,.039,.078,.057,.115-.047,.042-.108,.118-.014,.159v.873c-.644,.133-.611,.748,0,.945v.35c-.59,.154-.415,.567-.193,.896l.057,.053c.123-.103,.136-.31,.031-.429,.032-.018,.067-.036,.105-.053v.932c-.055,.018-.069,.093-.021,.126,.005,.064-.059,.089-.113,.081,0,.026,0,.236,0,.268-.045,.024-.113,.031-.17,.028v.401h0v.215c.459-.068,.895-.068,1.352,0v-.186s0,0,0,0v-.108s0,0,0,0v-.107s0,0,0,0v-.107s0,0,0,0v-.108c-.056,.002-.124-.004-.169-.028,0-.033,0-.241,0-.269-.055,.008-.119-.018-.113-.083,.045-.034,.03-.107-.024-.124v-1.29c.421-.192,.383-.772,0-.8v-.224c.575,.035,.796,.314,.653-.392Z' fill='%239b8028'%3E%3C/path%3E%3Cpath d='M12.531,14.533h-4.28l.003,2.572v1.485c0,.432,.226,.822,.591,1.019,.473,.252,1.024,.391,1.552,.391s1.064-.135,1.544-.391c.364-.197,.591-.587,.591-1.019v-4.057Z' fill='%23a0251e'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

.select:has(option[value="PT"]:checked) .select__flag {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg%3E%3Cpath d='M5,4H13V28H5c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z' fill='%232b6519'%3E%3C/path%3E%3Cpath d='M16,4h15V28h-15c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z' transform='rotate(180 21.5 16)' fill='%23ea3323'%3E%3C/path%3E%3Cpath d='M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z' opacity='.15'%3E%3C/path%3E%3Cpath d='M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z' fill='%23fff' opacity='.2'%3E%3C/path%3E%3Ccircle cx='12' cy='16' r='5' fill='%23ff5'%3E%3C/circle%3E%3Cpath d='M14.562,13.529l-5.125-.006v3.431h0c.004,.672,.271,1.307,.753,1.787,.491,.489,1.132,.759,1.805,.759,.684,0,1.328-.267,1.813-.75,.485-.484,.753-1.126,.753-1.808v-3.413Z' fill='%23ea3323'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}



Resources
/*start nav */

.ul_nav_end {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-toggler:focus,
.navbar-toggler:focus-visible {
    outline: none;
    border: none;
    box-shadow: none;
}

.form-control:focus {
    outline: none;
    box-shadow: none;
    border: 1px solid var(--main-color);
}

.form-check-input:focus {
    outline: none;
    box-shadow: none;
    border: 1px solid var(--main-color);
}

.nav-item a {
    position: relative;
    display: inline-block;
    font-weight: 300;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0.07px;
    color: var(--tow_color);
}

.nav-item>.active {
    color: var(--main-color);
    font-weight: 500;
    font-size: 16px;
}

.nav-item a::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--main-color);
    transform: scale(0);
    z-index: 1;
    transform-origin: left;

}

.nav-item a:hover:before {
    transform: scale(1);
    transition: all 0.3s ease-in-out;
}

.nav-item a:hover {
    color: var(--main-color);
    transition: all 0.4s ease-in-out;
    cursor: pointer;
}

.btn_logn {
    background-color: var(--main-color);
    border-radius: 8px;
    color: #fff;
    font-weight: 300;
    font-size: 14px;
    line-height: 26px;
    border-radius: 8px;
    text-decoration: none;
}

.btn_logn_2 {
    border-radius: 8px;
    border: 1px solid var(--main-color);
    color: var(--main-color);
    font-weight: 300;
    font-size: 14px;
    line-height: 26px;
    border-radius: 8px;
    text-decoration: none;
}

.btn_logn:hover {
    background-color: #fff;
    border: 1px solid var(--main-color);
    transition: all 0.3s ease-in-out;
    color: var(--main-color);


}

.btn_logn_2:hover {
    background-color: var(--main-color);
    transition: all 0.3s ease-in-out;
    color: #fff;


}

/*end nav */
/* start index*/
.card_Section {
    border-radius: 8px;
    border: 1px solid #E7E9EC;
}

.card-title_2 {
    font-size: 18px;
    font-weight: 400;
    color: #0D0D0D;
}

.img_Sac img {
    max-height: 8vh;
}

.card_Section:hover {
    background-color: #959da6;
    transition: all 0.3s ease-in-out;

}

.card_Section:hover .card-title_2 {
    color: #fff;
    transition: all 0.3s ease-in-out;

}

.card_Section:hover {
    fill: #fff;
    transition: all 0.3s ease-in-out;

}

.btn_index_2 {
    font-size: 14px;
    font-weight: 400;
    border-radius: 100px;
    color: #000;
    background-color: #B3BBC4;
    border: none;
}

.btn_index_2:hover {
    background-color: var(--main-color);
    color: #fff;
    transition: all 0.3s ease-in-out;

}

.mm {
    overflow: auto;
    max-width: 100%;
    flex-wrap: nowrap;
}

/*start hader */
.icon_card {
    background-color: #E7E9EC;
    border-radius: 16px;
}

.icon_card img {
    object-fit: cover;

}

a {
    text-decoration: none;
    color: #000;

}

.card-title {
    color: var(--main-color);
    font-size: 25px;
    font-weight: 500;
    font-size: 16px;
}

.h1_hader {
    font-size: 22px;
    font-weight: 700;
    color: var(--main-color);
}

.h1_hader_2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--main-color);
}

.hov_card:hover {
    background-color: var(--tow_color);
    transition: all 0.3s ease-in-out;
    border-radius: 16px;
    color: #fff !important;
}

.hov_card:hover a h5 {
    transition: all 0.3s ease-in-out;
    color: #fff !important;
}

.hov_card:hover .icon_card {
    background-color: var(--main-color);
    transition: all 0.3s ease-in-out;
}

.hov_card:hover .icon_card path {
    fill: rgb(255, 255, 255);
    transition: all 0.3s ease-in-out;

}

.slide-arrow,
.prev-arrow,
.next-arrow {
    color: #000000;

}

.slick-prev,
.slick-next {
    width: 40px;
    height: 40px;
    color: #fff;
}

.next-arrow i {
    color: black;
    font-size: 16px;
    background: white;
    border-radius: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.prev-arrow i {
    color: black;
    font-size: 16px;
    background: white;
    border-radius: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

}

.card_slider:hover {
    background-color: #E7E9EC;
}

.date_input {
    background-color: var(--main-color);
    border-radius: 8px;

}


.btn_filter {
    background-color: #E7E9EC;
}

.plus-main {
    zoom: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}


.minus,
.plus {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 12px;
    height: 12px;
    background-color: #ffffff;
    color: #000000;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
}

.num {
    padding: 0 10px;
    font-size: 1rem;
    font-size: 12px;
    border-radius: 4px;

}

.bg_counter {
    background-color: #E7E9EC;
}

/*end heder */
.button_map {
    background-color: var(--main-color);
    color: #fff;
    font-weight: 500;
    font-size: 22px;
    border-radius: 8px;
}

.button_map:hover {
    background-color: #fff;
    border: 1px solid var(--main-color);
    color: var(--main-color);
    transition: all 0.4s ease-in-out;

}

.button_map:hover path {
    fill: var(--main-color);
    transition: all 0.4s ease-in-out;


}

.card {
    border-radius: 16px;
    border: none;
}

.card-img-top {
    border-radius: 16px 16px 0px 0px;
}

.circle {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #6E7E89 !important;
    padding: 20px !important;
}

.mm img {
    max-height: 27vh;
    object-fit: cover;
}

.heart_svg.filled path {
    fill: #F33737;

}

.heart_svg.stroked path {
    stroke: none;

}

.prise,
.map_name {
    font-weight: 400;
    font-size: 14px;
    color: #B2B2B2;
}

.custom_card:hover {
    box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
    transform: scale(1.001);
    transition: all 0.4s ease-in-out;

}

.star_up,
.copon_up {
    position: relative;

}

.star_one {
    position: absolute;
    top: 1rem;
    left: 1rem;
    border-radius: 100px;
    background: linear-gradient(90deg, #ff9d00, #ff6400);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.copon_one {
    position: absolute;
    top: 1rem;
    left: 7rem;
    border-radius: 100px;
    background-color: #E1CBA8;
    color: #000;
    font-size: 14px;
    font-weight: 800;
}

.btn_more {
    background-color: #fff;
}

.text_btn_more {
    font-size: 16px;
    font-weight: 500;
}

.btn_more:hover path {
    background-color: var(--main-color);
    fill: white;
    transition: all 0.4s ease-in-out;

}

.btn_more:hover {
    background-color: var(--main-color);
    color: #fff;
    transition: all 0.4s ease-in-out;
    color: #fff;
}

/**************** footer style ***************************/
.text_footer_hero {
    color: white;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.5rem;
}

.text_footer {
    color: white;
    font-size: 12px;
    font-weight: 300;
    line-height: 2.5rem;
}

footer a {
    text-decoration: none;

}

footer {
    background-color: #3B4F68;
}

footer>.copy-write {
    background-color: #07192F;
}

/** start login**/
.form_login label {
    font-size: 18px;
    font-weight: 500px;
    color: #0D0D0D;

}

.form_login input {
    font-size: 16px;
    font-weight: 400px;
    color: #686868;

}

.btn_submit_1 {
    background: var(--main-color);
    font-weight: 700;
    font-size: 14px;
    color: #fff !important;
    border-radius: 8px;

}

.btn_submit_1:hover {
    background-color: white;
    color: var(--main-color) !important;
    border: 1px solid var(--main-color);
    transition: all 0.4s ease-in-out;
}

.hedaer_login {
    font-size: 20px;
    font-weight: 700px;
    color: #0D0D0D;
    text-align: start;
}

.act .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background-color: var(--main-color);
    background-color: var(--main-color);
    border-radius: 8px;
    color: #fff;
    font-weight: 300;
    font-size: 14px;
    line-height: 26px;
    border-radius: 8px;
    text-decoration: none;
}

.btn_nav_login {
    display: block;
    padding: .5rem 1rem;
    color: #0D0D0D;
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.btn_nav_login:hover {
    color: #fff;
    background-color: var(--main-color);
    border-radius: 8px;
    transition: all 0.4s ease-in-out;


}

.code_input {
    border-radius: 11px;
    height: 55px;
}

.inp_tel input {
    max-width: 100% !important;
}

.img_login img {
    max-height: 50vh;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.sleact_flag {
    border-radius: 8px;
    border: 1px solid #E7E9EC;
}

.sleact_flag option {
    font-size: 12px;
    font-weight: 700;
    color: var(--main-color);

}

.btn_logn_3 {
    background: var(--main-color);
    display: none !important;

}

/* start Add your property*/
.tag_nonactive {
    font-size: 14px;
    font-weight: 400;
    color: #B3BBC4;
}

.tag_nonactive:hover {
    color: #0A2342;
    transition: all 0.4s ease-in-out;

}

.tag_active {
    font-size: 14px;
    font-weight: 400;
    color: #0A2342;
}

.tag_active:hover {
    color: #B3BBC4;
    transition: all 0.4s ease-in-out;

}

.payment-way_2 {
    width: 50px;
    height: 50px;
    cursor: pointer;
    overflow: hidden;
    border-radius: 100px;
    background-color: #5B6C80;
}

.input-hidden {
    display: none;
}


.way_2 input[type="checkbox"]:checked+div label.payment-way_2 {
    background-color: var(--main-color);
}

.name_servies {
    font-size: 14px;
    font-size: 400;
    text-align: center;
    color: var(--main-color);
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 28px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider_on_off {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: -7px;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 4px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--main-color);
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--main-color);
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.togglePassword {
    cursor: pointer;
}

.next-btn {
    border-radius: 8px;
    border: 1px solid var(--main-color);
    font-size: 14px;
    color: var(--main-color);

}

.next-btn:hover {
    background-color: var(--main-color);
    color: white;
    transition: all .4s ease-in-out;

}

.next-btn:hover line,
.next-btn:hover path {
    stroke: white;
    transition: all .4s ease-in-out;
}

/*  test  */
input[type="file"] {
    display: none;
}

.fileName {
    font-size: 13px;

}

.uploadlabel {
    border-radius: 6px;
    color: var(--gray);
    border: 2px solid;
    font-size: 14px;
    font-weight: 300;
    cursor: pointer;
}

.form_Add_your_property label+h5 {
    font-size: 16px;
    font-weight: 500;
    color: #0D0D0D;
}

.form_Add_your_property input {
    background-color: #E7E9EC;
    font-size: 18px;
    font-weight: 400;
    color: #686868;
    border-radius: 8px;
}

.hr_add {
    border: 1px solid #c9c9c9;
}

.input_form_add {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #686868 !important;
}

/* start srvies_Details*/
.prise_srvies {
    font-size: 14px;
    font-weight: 300;
    color: #8E9AA8;
}

.prise_srvies strong {
    font-size: 16px;
    font-weight: 800;
    color: #0A2342;
}

.prise_srvies_2 {
    font-size: 14px;
    font-weight: 500;
    color: #0A2342;
}

.prise_srvies_3 {
    font-size: 16px;
    font-weight: 700;
    color: #0A2342;
}

.payment-way-box input[type="radio"]:checked+label.payment-way {
    background-color: rgb(var(--main-color-2), 0.2);
    box-shadow: 0px 3px 30px rgb(var(--main-color-2), 0.3);
    border-color: var(--main-color);
}

.payment-way {
    text-align: center !important;
    cursor: pointer;
    height: 75px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
}

.input-hidden {
    display: none;
}

.form-control:focus {
    border: 1px solid #dee2e6;
    box-shadow: none;
}

.way input[type="radio"]:checked+label.payment-way {
    border: 1px solid var(--main-color);
    border-radius: 1rem;
}

.fatura {
    position: relative;
}

.sheep {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 20px 0px 20px 0px;
    background-color: #E1CBA8;
    color: #000;
    font-size: 14px;
    font-weight: 800;
}

.g_circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #6E7E89;
}

.under_text {
    font-size: 10px;
    color: #484848;
    font-weight: 400;
}

.heart_div {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 50px 0 rgba(0, 116, 217, 0.09);
    cursor: pointer;

}

.White_card {
    border-radius: 16px;
    background: #FFF;
    box-shadow: 0 0 50px 0 rgba(0, 116, 217, 0.09);

}

.nav_service {
    background-color: #fff;
    border-radius: 8px;
}

.nav_service .nav-item.show .nav-link,
.nav_service .nav-link.active {
    background-color: var(--main-color);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 23px;
    padding: 9px;
}

.nav_service .nav-item.show .nav-link,
.nav_service .nav-link {
    color: var(--main-color);
    font-size: 14px;
    font-weight: 700;
}

.checked {
    color: #FEBA02;
}

.btn_add_service {
    border: 1px solid #000;
    font-size: 14px;
    font-weight: 400;
    color: #000;
}

.btn_add_service:hover {
    background-color: var(--main-color);
    color: #fff;
}

.Before_After_div {
    position: relative;
    z-index: 0;
    display: block;
}

.Before_After_div::before {
    content: "";
    border-radius: 8px;
    border: 1px solid #000;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    position: absolute;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.40);
    top: 0;
    right: 0;


}

.Before_After_div::after {
    content: " 35+";
    position: absolute;
    z-index: 10000;
    top: 46%;
    right: 38%;
    color: white;
    font-size: 20px;

    font-weight: 400;
}

.text_add {
    font-size: 14px;
    font-weight: 400;
    color: #000;
}

/* start profiel*/
.div-img-profile {

    position: relative;
}

.list_link {
    color: #5B6C80;
    font-size: 12px;
    font-weight: 300;
}

.hero-profile-pic {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    object-fit: cover;
}

.white_card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 0 50px 0 rgba(0, 116, 217, 0.09);
}

/* from sal7ly  */
.upload_profile_input {
    display: none;
}

.custom-file-upload {
    background-color: black;
    border-radius: 100%;
    position: absolute;
    padding: 11px;
    cursor: pointer;
    border: 4px solid white;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;


}

.upload_profile_div {
    border-radius: 50%;
    width: 25px;
    height: 25px;
    background-color: var(--backGround-color);
    border: 2px solid white;
    position: absolute;
    top: 72%;
    right: 0;
    cursor: pointer;
    z-index: 2;

}

.clicked {
    color: var(--main-color);
    fill: var(--main-color);
    font-weight: 800;
}

.white_card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 0 50px 0 rgba(0, 116, 217, 0.09);
}

.label-form {
    font-size: 14px;
    font-weight: 500;
    color: black;

}

.all {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 500px;
}

.btn-order-active {
    font-weight: 400;
    font-size: 13px;
    color: #FFFFFF;
    border: none;
    background-color: var(--main-color);
    border-radius: 8px;
    padding-top: 0;
}

.btn-order.active {
    background: var(--main-color);
    color: white;
}

/* to determine which button fill and which one stock */
.radius_all {
    background-color: #fff;
    border-radius: 32px;
}

.radius_all>li:nth-child(1) .btn-order.active path {
    stroke: white;
    fill: none;
}

.radius_all>li:nth-child(2) .btn-order.active path {
    stroke: white;
    fill: none;
}

.radius_all>li:nth-child(3) .btn-order.active path {

    fill: white;
    stroke: none;

}

.price-num {
    font-size: 12px;
    font-weight: 700
}

.price-text {
    font-size: 14px;
    color: var(--main-color);
}

.btn-order {
    font-weight: 400;
    font-size: 13px;
    border: none;
    background-color: transparent;
    border-radius: 23px;
    width: 100%;
    padding: 9px;
    color: #0B3D74;
}

.img-card-waiting {
    object-fit: cover;
    border-radius: 0 16px 16px 0;
    width: 100%;
}

.div-img-profile {

    position: relative;
}

.card_waiting_img {
    border-radius: 11px;
}

.text {
    color: #0A2342;
    font-size: 14px;
    font-weight: 500;

}

.gray_text {
    color: #484848;
    font-size: 12px;
    font-weight: 300;
    line-height: 22px;
}

.fav-card {
    background-color: #fff;
}

.fav-card:hover {
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.15);
    transform: scale(1.001);
    transition: all 0.4s ease-in-out;
}

.re-order-btn {
    border-radius: 33px;
    border: 1px solid #272265;
    background: #F8F8F8;
}

.re-order-btn span {
    color: #272265;
}

.re-order-btn:hover span {
    color: white;
    transition: all 0.4s ease-in-out;
}

.re-order-btn:hover {
    transition: all 0.4s ease-in-out;
    background-color: #272265;

}

.re-order-btn:hover path {
    fill: white;
    transition: all 0.4s ease-in-out;
}

.service_rating_btn {
    border-radius: 4px;
    border: 1px solid #F3AD39;
    background: #F8F8F8;
    color: #F3AD39;
    font-size: 12px;
}

.service_rating_btn:hover {
    transition: all 0.4s ease-in-out;
    background-color: #F3AD39;
    color: white;

}

.gray-inp {
    background: #FAFAFA;
    border: none;
    border-radius: 8px;
}

.rounded-inp {
    border-radius: 30px;
    background: var(--main-color);
    color: white;
    font-size: 14px;
    border: 1px solid var(--main-color);
}

.rounded-inp:hover {
    background: white;
    color: var(--main-color);
    border: 1px solid var(--main-color);
    transition: all .4s ease-in-out;

}

.rounded-inp:hover path {
    fill: var(--main-color);
    transition: all .4s ease-in-out;

}

.up_btn {
    position: relative;
    transform: translateY(40%);
}

/**********  setting style ******************/
.lang_switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 28px;
}

.lang_switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider_lang {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: -7px;
    right: 0;
    bottom: 0;
    background-color: #F8F8F8;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.slider_lang:before {
    position: absolute;
    content: attr(data-on);
    height: 24px;
    width: 24px;
    left: 4px;
    bottom: 2px;
    background-color: black;
    -webkit-transition: all 0.4s ease-in-out;
    ;
    transition: all 0.4s ease-in-out;
    text-align: center;
    /*line-height: 24px;*/
    color: white;
    font-weight: 300;

}

input:checked+.slider_lang:before {
    content: attr(data-off);
}

input:checked+.slider_lang {
    background-color: #F8F8F8;
}

input:focus+.slider_lang {
    box-shadow: 0 0 1px #F8F8F8;
}

input:checked+.slider_lang:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider_lang.round {
    border-radius: 34px;
}

.slider_lang.round:before {
    border-radius: 50%;
}

.modal-content {
    border: none;
    border-radius: 20px;
}

.add_plance_price {
    color: #FCFCFC;
    border-radius: 8px;
}

.red_order {
    background: #FAEBEC;
    color: #F33737;
    border: none;
    border-radius: 8px;
    font-size: 14px;
}

.red_order:hover {
    background: #F33737;
    color: #FAEBEC;
    transition: all 0.4s ease-in-out;
}

.red_order:hover path {
    stroke: #FAEBEC;
    transition: all 0.4s ease-in-out;
}

.white_card_collapse_top {
    border-radius: 16px 16px 0 0;
    background: #FFF;
    box-shadow: 0 0 50px 0 rgba(0, 116, 217, 0.09);
}

.btn_submit {
    background-color: var(--main-color) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.btn_submit:hover {
    background-color: #FFF !important;
    color: var(--main-color) !important;
    border: 1px solid var(--main-color) !important;
    transition: all 0.4s ease-in-out;

}

/* start inpt mobiel tel */
.iti {
    display: block;
}

.iti__arrow {
    display: none;
}

.iti__selected-flag {
    direction: ltr;
}

.iti--separate-dial-code .iti__selected-dial-code {
    margin-left: 0;
    padding-inline-start: 10px;
    padding-inline-end: 10px;
    font-size: 12px;
}

.iti__selected-dial-code {
    color: #777777;
    border-right: 1px solid #E7E7F5;
}

.iti--separate-dial-code .iti__selected-flag {
    background-color: inherit;
}

.iti__country-list {
    left: 0;
    direction: ltr;
}

[dir=rtl] .iti--allow-dropdown .iti__flag-container,
[dir=rtl] .iti--separate-dial-code .iti__flag-container {
    right: auto;
    left: 0;
}

[dir=rtl] .iti--allow-dropdown input,
[dir=rtl] .iti--allow-dropdown input[type=text],
[dir=rtl] .iti--allow-dropdown input[type=tel],
[dir=rtl] .iti--separate-dial-code input,
[dir=rtl] .iti--separate-dial-code input[type=text],
[dir=rtl] .iti--separate-dial-code input[type=tel] {
    padding-right: 100px !important;
    margin-right: 0;
}


@media(max-width: 767px) {
    .btn_logn_3 {
        background: var(--main-color);
        display: block !important;

    }

    .btn_logn {
        display: none;

    }

    .btn_logn_2 {
        display: none;

    }

    .form_Add_your_property label+h5 {
        font-size: 12px;
        font-weight: 500;
        color: #0D0D0D;
    }
}

@media(min-width: 768px) and (max-width: 991px) {

    [dir=rtl] .iti--allow-dropdown input,
    [dir=rtl] .iti--allow-dropdown input[type=text],
    [dir=rtl] .iti--allow-dropdown input[type=tel],
    [dir=rtl] .iti--separate-dial-code input,
    [dir=rtl] .iti--separate-dial-code input[type=text],
    [dir=rtl] .iti--separate-dial-code input[type=tel] {
        padding-right: 160px !important;
        margin-right: 0;
    }

}


.animated-icon {
    animation: float 2.5s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
}


.ad-image {
    height: 200px;
    width: auto;
    object-fit: contain;
    border-radius: 12px;
    margin: 5px;
}



.slider .slick-slide {
    padding: 0 8px;
    /* مسافة بسيطة بين البطاقات */
}

.slider-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    height: 200px;
    /* طول البطاقة ثابت */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.slider-card img {
    max-height: 200px;
    /* طول الصورة ثابت */
    width: auto;
    object-fit: contain;
    border-radius: 12px;
}

.card-img-top {
    height: 200px;
    object-fit: cover;
    object-position: center;
}


.circle.more-count {
    background: #eee;
    color: #333;
}


.icon-circle {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #0b3d74, #8693a2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover .icon-circle {
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(0, 214, 233, 0.4);
}

.feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}


.input-date-time {
  max-width: 200px;
  display: inline-block;
  font-size: 0.9rem;
  padding: 4px 8px;
}
.object-fit-cover{object-fit:cover}
.line-clamp-2{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hover-lift{transition:transform .2s ease, box-shadow .2s ease}
.hover-lift:hover{transform:translateY(-3px); box-shadow:0 .5rem 1rem rgba(0,0,0,.12)}


.map-box{ width:100%; height: calc(100% - 44px); } /* أو height: 70vh */
