@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');
:root
{
--mainColor :#d5d951;
--whiteColor:#fff
}
body{
margin:0px;
padding: 0px;
/*! overflow-x: hidden */
color: #333232 !important;
}
*{
box-sizing: border-box;
   font-family: 'Cairo', sans-serif;
}

.allds
{
   background: #fff !important;
   /*! position: absolute !important; */
   background: unset !important;
   width: 100%;
   border-bottom: 1px solid #ffffff14;
   z-index: 99999;
   position: relative;
}
img
{
object-fit: cover;
object-position: center
}

ul{
list-style: none;
}
.container
{
max-width: 90% !important;
}
a{
text-decoration: none;
}
a:hover
{
text-decoration: none;
}
.header
{
/*! background-color: #f4f2f2; */
position: relative;
}
.header nav
{
padding: 00px 0;
z-index: unset !important;
/*! background: white; */
background: #088254 !important;
}
.header .navbar-brand img
{
width: 145px;
/*! margin-left: 40px; */
margin: 6px 20px;
}
.topbar
{
background-color: var(--mainColor) !important;
/*! padding: 10px 0 */
z-index: 555;
position: relative;
padding: 5px 0;
}
.topbar p
{
margin: 0;
font-size: 13px;
color: rgba(0,0,0,.6)
}
header .navbar-nav
{
flex-direction: row-reverse !important;
}
.topbar ul li:nth-child(1)
{
/*! border-right: 1px solid rgba(0,0,0,.1) */
}
.topbar .pb
{
color:rgba(255,255,255,.8);;
font-size: 12px;
margin: 0;
}
.topbar a
{
color: #fff;
font-size: 12px;
padding: 3px 20px !important;
border-right: 1px solid rgba(255,255,255,.4);
margin: 0;
}
.topbar a:hover
{
color: var(--mainColor);
}
.bottombar
{
background-color: white;

}
.mdlbar
{
background: white;
pad: 20px 0;
padding: 20px 0;
}

.bottombar ul a
{
   background-color: white;
padding: 10px 23px !important;
color: rgba(255,255,255,.8);
font-size: 17px;
position: relative;
z-index: 6;
transition: .5s;
   color: #201f1f !important;
   padding: 15px 19px !important;
   font-size: 14px !important;
   z-index: 1;
   line-height: 3em;
   font-weight: bold;
}
.bottombar ul a::after
{
/*! position: absolute; */
width: 0%;
height: 100%;
right: 0;
top: 0;
content: '';
background-color: var(--mainColor);
z-index: -1;
transition: .5s
}
.bottombar ul a:hover::before
{
width: 100%;
transition: .5s;
right: 0;
color: black
}
.bottombar ul a:hover
{
color: black;
transition: .5s
}
.bottombar ul .active
{
background-color: var(--mainColor);
color: black
}
.search-space input
{
width: 100%;
border-radius: 20px;
text-align: right;
height:45px;
border:none;
padding-right:15px;
font-size: 14px
}
.search-space .btn
{
background-color: var(--mainColor);
color: black;
border: none;
border-radius: 20px;
width: 100px
}
.search-space input:focus
{
box-shadow: none !important;
}
.mdlbar form
{
width: 750px
}
.mdlbar .mb-3
{
margin: 0;
margin-bottom: 0 !important
}
.mdlbar .box
{
margin: 0px 15px;
text-align: center;
display: flex
}
.mdlbar .box .right-box
{
text-align: right;
}
.mdlbar .box svg
{
width: 45px;
height: 45px;
padding: 10px;
background-color: #FFD70054;
border-radius: 50%
}
.mdlbar .box svg path
{
stroke: white;
}
.mdlbar .box p
{
color: rgba(255,255,255);
font-size: 16px;
margin: 0;
margin-left: 10px;
}
.mdlbar li
{
position: relative
}
.mdlbar li:hover .bag-dropdownmenu
{
display: block
}
.mdlbar li .bag-dropdownmenu
{
position: absolute;
background-color: #fff;
width: 150%;
right: 0;
border: 1px solid rgba(0,0,0,.3);
box-shadow: 0px 10px 10px rgba(255,255,255,.1);
z-index: 88;
overflow: hidden;
border-radius: 5px;
display: none
}
.mdlbar li .bag-dropdownmenu li
{
margin: 10px;
  background-color: #f1f1f1;

}

.mdlbar li .bag-dropdownmenu .bag
{
display: flex;
flex-direction: row-reverse;
width: 100%;
text-align: right
}
.mdlbar li .bag-dropdownmenu  ul
{
padding: 0 !important;
}
.mdlbar li .bag-dropdownmenu  ul img
{
height: 50px;
margin-left: 10px
}

.mdlbar li .bag-dropdownmenu .bag .name
{
margin: 0;
font-size: 14px;
}
.mdlbar li .bag-dropdownmenu .bag .price
{
font-weight: bold
}

.mdlbar li .bag-dropdownmenu .bag .ttprice
{
font-weight: bold;
font-size: 18px;
color: #ce5e27;
margin: 0px 10px;
}
.mdlbar .box span
{
font-size: 12px;
color: rgba(255,255,255,.7)
}
.main
{
padding: 0px 0 !important;
background-size: cover;
position: relative;
z-index: 9999;
margin: 90px auto !important;
/*! position: relative; */
}
.main .content
{
text-align: right;
margin: 130px 0;
margin-bottom: 200px
}
.main .content h3
{
color: var(--mainColor)
}
.main .content h1
{
color: white;
font-weight: bold;
letter-spacing: 2px;
font-size: 50px
}
.main .content p
{
color: rgba(255,255,255,.8);
font-size: 19px;
margin: 15px 0
}
.main .content a
{
line-height: 4em;
border: 1px solid var(--mainColor);
padding: 10px 35px;
color: var(--mainColor);
font-size: 20px;
border-radius: 50px;
transition: .5s
}
.main .content a:hover
{
background-color: var(--mainColor);
color: black;
transition: .5s
}
.content-header
{
padding: 30px;
margin: 20px 0;
text-align: right;
/*! background-color: #f1f1f1; */
position: relative;
}
.content-header::before
{
background: linear-gradient(to right,var(--mainColor),#0000);
position: absolute;
width: 20%;
height: 2px;
content: '';
right: 40%;
top:21px;
margin: auto;
}
.content-header span
{
font-weight: bold;
position: relative;
padding: 10px 0px;
color: rgba(0,0,0,.8);
font-size:30px;
}
/*
Theme Name:       ClassiXER - Classified Ads Website Template
Author:           UIdeck
Author URI:       http://uideck.com
Text Domain:      UIdeck
Domain Path:      /languages/
*/
/*TABLE OF CONTENT */
/* CORE: */
/* ____Bootstrap */
/* ____Color */
/* ____Form */
/* ____Logo */
/* ____Icon */
/* ____Button */
/* ____Background */
/* ____Typography */
/* ____Nav */
/* ____Header */
/* ____Footer */
/* MODULES: */
/* ____Service */
/* ____Counter */
/* ____Google-maps */
/* ____Pagination */
/* ____Pricing-table */
/* ____Blog */
/* ____Single Blog */
/* ____Search */
/* ____Testimonial */
/* Google Fonts */
@import url("https://fonts.googleapis.com/css?family=Montserrat:500,700|Open+Sans");
html {
overflow-x: hidden;
}


h1, h2, h3, h4 {
font-size: 29px;
font-weight: 700;
/*! font-family: 'Montserrat', sans-serif; */
}

a {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}

a:hover {
text-decoration: none;
}

a a:focus {
outline: none;
}

p {
font-weight: 400;
/*! font-family: 'Open Sans', sans-serif; */
margin: 0px;
/*! font-size: 14px; */
}

ul, ol {
list-style: outside none none;
margin: 0;
padding: 0;
}

ul li, ol li {
list-style: none;
}

.hero-heading {
font-size: 40px;
font-weight: 700;
color: #fff;
text-transform: capitalize;
line-height: 70px;
letter-spacing: 0.1rem;
}

.hero-sub-heading {
font-size: 20px;
font-weight: 400;
color: #e6e6e6;
line-height: 45px;
letter-spacing: 0.1rem;
}

.section-titile-bg {
display: inline;
font-size: 115px;
font-weight: 700;
height: 100%;
left: -173px;
opacity: 0.1;
position: absolute;
top: -14px;
width: 100%;
text-align: center;
}

.section-title-header p {
text: center;
font-weight: 400;
line-height: 26px;
padding-bottom: 36px;
}

.section-title {
font-size: 30px;
color: #333;
line-height: 52px;
font-weight: 700;
/*! padding-bottom: 15px; */
/*! margin-bottom: 30px; */
text-align: center;
text-transform: uppercase;
position: relative;
}


.section-subcontent {
font-size: 16px;
text: center;
font-weight: 400;
line-height: 26px;
padding-bottom: 36px;
}

.section-sub {
text-transform: uppercase;
font-size: 24px;
line-height: 52px;
padding-bottom: 15px;
margin-bottom: 30px;
position: relative;
}

.section-sub:before {
position: absolute;
content: '';
height: 1px;
width: 45px;
left: 50%;
bottom: 10px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: var(--mainColor);
}

.subtitle {
font-size: 15px;
margin-top: 20px;
font-weight: 500;
margin-bottom: 10px;
}

.inner-title {
font-size: 24px;
font-weight: 700;
text-tranform: capitalize;
}

.page-tagline {
font-size: 24px;
font-weight: 400;
color: #ddd;
}

.page-title {
font-size: 62px;
font-weight: 700;
color: #fff;
}

.btn {
font-size: 14px;
padding: 7px 20px;
cursor: pointer;
font-weight: 400;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
display: inline-block;
background: var(--mainColor);
}

.btn:focus,
.btn:active {
box-shadow: none;
outline: none;
color: #fff;
}

.btn-common {
background-color: var(--mainColor);
position: relative;
color: #fff;
z-index: 1;
border-radius: 50px;
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
}

.btn-common:hover {
color: #fff;
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.1);
}

.btn-border {
color: #484848;
background-color: transparent;
border: 2px solid #484848;
border-radius: 4px;
padding: 7px 20px;
}

.btn-border:hover {
color: #fff;
background-color: rgba(255, 255, 255, 0.2);
}

.btn-lg {
padding: 14px 33px;
text-transform: uppercase;
font-size: 16px;
}

.btn-rm {
padding: 8px 16px;
text-transform: capitalize;
}

button:focus {
outline: none !important;
}

.icon-close, .icon-check {
color: var(--mainColor);
}

.bg-drack {
background: #fafafa;
}

.bg-white {
background: #fff;
}

.mb-30 {
margin-bottom: 30px;
}

.mt-30 {
margin-top: 30px;
}

/* ScrollToTop */
a.back-to-top {
display: none;
position: fixed;
bottom: 18px;
right: 15px;
text-decoration: none;
}

a.back-to-top i {
display: block;
font-size: 22px;
width: 40px;
height: 40px;
line-height: 40px;
color: #fff;
background: var(--mainColor);
border-radius: 50px;
text-align: center;
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}

a.back-to-top:hover, a.back-to-top:focus {
text-decoration: none;
}

.owl-carousel .item {
margin: 5px;
}

.owl-carousel.item img {
display: block;
width: 50%;
height: auto;
}

.owl-carousel .owl-controls .owl-page {
display: inline-block;
}

.owl-carousel .owl-controls .owl-page span {
background: none repeat scroll 0 0 #fff;
border-radius: 2px;
display: block;
height: 12px;
margin: 5px 7px;
opacity: 0.5;
width: 12px;
}

/* Preloader */
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fbfbfb;
z-index: 9999999;
}
#preloader .logo
{
   text-align: center !important;
   margin-top: 90px;
}
#preloader img
{
   margin: auto;
   width: 60% !important;
}
.loader {
top: 50%;
width: 50px;
height: 50px;
border-radius: 100%;
position: relative;
margin: 0 auto;
}

#loader-1:before, #loader-1:after {
content: "";
position: absolute;
top: -10px;
left: -10px;
width: 100%;
height: 100%;
border-radius: 100%;
border: 7px solid transparent;
border-top-color: var(--mainColor);
}

#loader-1:before {
z-index: 100;
animation: spin 2s infinite;
}

#loader-1:after {
border: 7px solid #fafafa;
}

@keyframes spin {
0% {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
100% {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}
}

.section-padding {
padding: 60px 0;
}

.page-header {
padding: 115px 0px 45px;
position: relative;
}

.page-header:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #333333d9;
}

.page-header .breadcrumb-wrapper {
text-align: center;
}

.page-header .breadcrumb-wrapper .product-title {
font-size: 30px;
line-height: 38px;
font-weight: 700;
letter-spacing: 1px;
color: #fff;
}

.page-header .breadcrumb-wrapper .breadcrumb {
font-size: 14px;
color: var(--mainColor);
border-radius: 0px;
background: transparent;
padding: 5px 0px;
z-index: 1;
}

.page-header .breadcrumb-wrapper .breadcrumb li {
display: inline-block;
}

.page-header .breadcrumb-wrapper .breadcrumb li a {
color: #fff;
padding-right: 5px;
}

#color-style-switcher .bottom a.settings {
color: var(--mainColor);
}

@-webkit-keyframes fadeIn {
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}

@keyframes fadeIn {
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}

.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}

#roof {
background: #ddd;
padding: 15px 0;
}

#roof .info-bar-address {
font-size: 14px;
}

#roof .quick-contacts span {
margin-right: 10px;
}

#roof .quick-contacts span a {
color: #333;
}

#roof .quick-contacts span a:hover {
color: #E91E63;
}

#roof .quick-contacts span i {
margin-right: 5px;
vertical-align: middle;
font-size: 15px;
}

.menu-bg {
background: #fff;
box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.06);
}

.menu-bg .navbar-nav .nav-link {
color: #333 !important;
}

.bg-black {
background: #111011;
}

.navbar-brand {
position: relative;
padding: 0px;
}

.navbar-brand img {
width: 120px !important;
margin: 10px 0;
}

.top-nav-collapse {
/*! background: #fff; */
z-index: 999999;
top: 0px !important;
/*! min-height: 58px; */
/*! box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.06); */
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
/*! background: #fff !important; */
}

.top-nav-collapse .navbar-brand {
top: 0px;
   overflow:hidden
}
.top-nav-collapse .navbar-brand::before
{
   position: absolute;
   width: 100%;
   height: 100%;
   /*! background: var(--mainColor); */
   content: '';
   z-index: ;
   left: 0 !important;
}
.top-nav-collapse .navbar-brand::after
{
   position: absolute;
   width: 100%;
   height: 100%;
   /*! background: red; */
   content: '';
   z-index: ;
   left: 0 !important;
   top: 60px;
   /*! transform: rotate(40deg) */
}
.top-nav-collapse .navbar-nav .nav-link {
color: black;
}
.top-nav-collapse .navbar-brand img
{
   z-index: 999999999999999 !important;
   position: relative
}
.top-nav-collapse .navbar-nav .nav-link:hover {
color: var(--mainColor) !important;
}

.top-nav-collapse .navbar-nav li.active a.nav-link {
color: #fff !important;
}

.indigo {
background: transparent;
}

.navbar-expand-lg .navbar-nav .nav-link {
font-size: 14px;
color: #ece4e4;
/*! padding: 8px 20px; */
/*! letter-spacing: 0.5px; */
/*! margin-top: 20px; */
/*! margin-bottom: 20px; */
/*! border-radius: 30px; */
/*! line-height: 37px; */
text-transform: uppercase;
/*! background: transparent; */
font-weight: 400;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
/*! border-left: 1px solid rgba(0,0,0,.1); */
}

.navbar-expand-lg .navbar-nav li a:hover,
.navbar-expand-lg .navbar-nav li .active > a,
.navbar-expand-lg .navbar-nav li a:focus {
color: var(--mainColor);
outline: none;
}

.navbar {
padding: 0;
}

.navbar li.active a.nav-link {
color: #fff !important;
background: var(--mainColor);
border-radius: 30px;
}

.dropdown-toggle::after {
display: none;
}

.dropdown-menu {
margin: 0;
padding: 10px;
display: none;
position: absolute;
z-index: 99;
min-width: 190px;
border: none;
background-color: #fff;
white-space: nowrap;
border-radius: 4px;
-webkit-box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.08);
-moz-box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.08);
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.08);
animation: fadeIn 0.4s;
-webkit-animation: fadeIn 0.4s;
-moz-animation: fadeIn 0.4s;
-o-animation: fadeIn 0.4s;
-ms-animation: fadeIn 0.4s;
}


.footer-chat *::-webkit-input-placeholder {
  color: #C0C0C0;
  font-size: 13pt;
}
.footer-chat input *:-moz-placeholder {
  color: #C0C0C0;
  font-size: 13pt;
}
.footer-chat input *::-moz-placeholder {
  color: #C0C0C0;
  font-size: 13pt;
  margin-left:5px;
}
.footer-chat input *:-ms-input-placeholder {
  color: #C0C0C0;
  font-size: 13pt;
}

.clickable {
  cursor: pointer;
}
.content-fd
{
   text-align: center !important;
}
.content-fd h1
{
   text-align: center;

}
.content-fd p{
   color: #0fb065;
   text-align: center
}
.content-fd .ert
{
   text-align: center;
   margin-top: 80px; !

}
.content-fd .ert a{
   background: #e8d437 !important;
   color: white;
   padding: 8px 150px;
   font-size: 25px;
}
.dre
{
   background: #09233ea3;
   padding: 80px 10px;
   text-align: center;
   border-radius: 50px;
}
.tool
{
   text-align: left;
   padding: 40px
}
.tool p{
   margin-bottom: 20px
}
.tool a
{
   background: yellow;
   padding: 8px 120px;
   border-radius: 50px;
   text-transform: capitalize;
   color: black

}
.tool h3{
   color: yellow
}
.ret
{
   position: relative
}

.ret a
{
   display: block;
   width: 100%;
   height: 100%;
   background: #d0d0d0;
   text-align: center;
   color: black;
   padding: 10px;
   border-radius: 14px

}
.rating-group {
         margin: 20px 0;
         border-bottom: 1px solid #0000004a;
         padding-bottom: 20px;
     }
     .stars {
         display: flex;
         justify-content: end;
         direction: ltr; /* Ensures stars align correctly */
     }
     .star {
         font-size: 35px;
         cursor: pointer;
         color: #ddd;
         transition: color 0.3s;
     }
     /* Highlight stars on hover */
     .stars:hover .star {
         color: #ddd; /* Reset all stars when hovering */
     }
     .star:hover,
     .star:hover ~ .star {
         color: gold;
     }
     /* Keep selected stars gold */
     .star.selected,
     .star.selected ~ .star {
         color: gold;
     }
     .star-count {
               margin-top: 10px;
               font-size: 11px;
               font-weight: bold;
               color: #555;
               text-align: right;
           }
.czp label{
   color: black;
   display: block;
   text-align: right;
   direction: rtl;
}
.czp textarea
{
   width: 100%;
   text-align: right !important;
}
.czp input, .czp select,  .account-page form input
{
   margin-bottom: 20px;
   text-align: right;
   height: 49px;
   font-size: 13px !important;
}
.czp form, .account-page form
{
   background: #f1f1f1;
   padding: 40px;
   border-radius: 10px
}
.czp form h1,  .account-page form h1
{
   color: #575555;
   text-align: center;
   margin-bottom: 40px
}
 .account-page form
{
   margin: 60px 0
}
.section-news .box
{
   background: #222121;
   text-align: center;
   padding: 40px;
   border-radius: 10px;
   transition: .5s
}
.section-news .box h3
{
   font-size: 20px;
   margin-bottom:20px
}
.section-news .box span{
   background: var(--mainColor);
   padding: 3px 20px;
   border-radius: 20px;
   color: black
}
.section-news .box:hover{
  transform: scale(1.1)
}
.noti-btn
{
  margin: 0px 10px;
  position: relative;
  font-size: 22px !important;
}
.noti-btn span{
  position: absolute;
  background: #df4747;
  padding: 4px 7px;
  border-radius: 50%;
  top: 12px;
  left: -15px;
  font-size: 12px !important;
  color: white;
}.cnt-spc
{
      max-width: 100% !important;
      padding-right: 278px;
      margin-top: 0 !important;
}
.content-header span
{
      color: black
}
.content-header
{
      margin-bottom: 50px !important;
}
.content-header span span
{
      background: var(--mainColor);
      color: white;
      padding: 3px 6px;
      border-radius: 8px;
      font-size: 12px
}
.bellnoti i
{
      color: var(--mainColor);
      background: #f5f8ff;
      padding: 8px;
      border-radius: 50%
}
.noti
{
      text-align: right;
      border: 1px solid rgba(0,0,0,.1);
      margin: 10px 0;
      overflow:hidden;;
      border-radius: 10px
}
.noti h3
{
      font-size: 18px;
      margin: 10px 0;
      margin-top: 15px !important;
      color: var(--mainColor);
}
.noti p
{
      color: rgba(0, 0, 0, 0.8);
      font-size: 12px;
      margin-top: 0;
      margin-bottom: 14px;
}
.noti .col-md-1
{
      text-align: center;
      background: #f1f1f1;
}
.noti .col-md-1 a
{
      color: black;
      padding-top: 24px;
      padding-right: 10px;
}
.noti .col-md-2
{
      text-align: center;
}
.noti .col-md-2 span
{
      color: rgba(0,0,0,.6);
      font-size: 11px;
      padding-top: 20px
}
.boxds
{
      background: #f1f1f1;
      margin: 10px 0;
      text-align: right;
      padding: 20px 10px;
      border-radius: 15px
}
.tticon i
{
      background: #0A1628;
      padding: 10px;
      border-radius: 50%;
      color: white;
}
.boxds h3
{
      font-size: 18px;
      font-weight:bold
}
.box h3
{
  color: white
}
.boxds p
{
      font-size: 14px;
      color: rgba(0,0,0,.6)
}
table
{
  margin: 20px 0;
}
table td
{
  font-size: 13px;
    text-align: center !important
}
table th{
  background-color: var(--mainColor);
  font-size: 13px;
  text-align: center !important
}
input
{
  text-align: right !important
}
footer
{
   padding: 20px;
   text-align:right;
   margin-top: 80px !important;
}
footer h1{color: white;
   font-size: 25px
}
footer a, footer p{
   color: white;
   font-size: 13px
}
.main p
{
   color: black !important;
  margin-bottom: 20px
}