/*=============CSS Utilitty HEAR===========*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
    --primary-color: #2A323D;
    --secondary-color: #fd4c48;
    --button-color: #1abc9c;
}
* {font-family: 'Plus Jakarta Sans', sans-serif;}
a {text-decoration: none;}



.bg-color { background-color: var(--secondary-color)}
.bg-color2 {background: var(--button-color)}
.text-color {color: var(--primary-color)}
.text-color2 {color: var(--secondary-color)}
.text-color3{color: var(--button-color);}
.rtl-direction{ direction: rtl;}
.ltr-direction{direction: ltr;}

.link-hover:hover {color: var(--secondary-color) !important;}
.bg-hover:hover {background: var(--secondary-color) !important; color: #fff;}
.bg-hover2:hover{background: var(--primary-color)!important; color: #fff;}
.border-danger{border-color: var(--secondary-color)!important;}
.rounded-4 {border-radius: 30% !important;}
.rounded-5 {border-radius: 12px;}
.fs-normal {font-size: 14px;}
.box-shadow {-webkit-box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);}
.box-shadow2 {-webkit-box-shadow: 0 8px 15px -3px rgb(0 0 0 / 2%), 0 4px 6px -4px rgba(0, 0, 0, 0.1);box-shadow: 0 8px 15px -3px rgb(0 0 0 / 2%), 0 4px 6px -4px rgba(0, 0, 0, 0.1)}
.cursor { cursor: pointer;}
.profile { display: none;}

/*==================================
        START HEADER CSS DESIGN
=============================*/
.language:focus-visible { outline: 0;}
nav { -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.nav-up {top: -80px;}
.form-control {
    border: 1px solid #95989b;
}
.form-select{border: 1px solid #95989b;}
.form-control:focus, .form-select:focus {color: #212529;background-color: #fff;border-color: var(--secondary-color);outline: 0;-webkit-box-shadow: none;box-shadow: none;}
.dropdown-item:active {color: #080606;background-color: transparent;}

.btn:focus,
.btn-close:focus { -webkit-box-shadow: none; box-shadow: none;}
.nav-link { color: rgb(0 0 0 / 86%) !important;font-size: 13px;}
.breadcrumb-item.active { color: var(--button-color);}
.d-grid-inline { display: inline-grid; display: -ms-inline-grid;}
.site-logo {width: 190px}
.top-dropdown {background-color: #faebd721;min-width: 70px}
.toolbar > ul > li {color: #546476;font-size: 14px;cursor: pointer;}
.toolbar {-webkit-box-shadow: 0 0 9px rgba(0, 0, 0, .12);box-shadow: 0 0 9px rgba(0, 0, 0, .12);border-top-left-radius: 12px;border-top-right-radius: 12px; background-color: ghostwhite;}
.dropdown-toggle::after {content: url('../img/emiratesnumber/down-arrow.png'); vertical-align: sub;width: 5px; height: 5px;margin-right: 0.255em; border: 0;}

.navbar-toggler {border-radius: 6px;border-color: rgb(0 0 0 / 44%) !important;}
.navbar-toggler:focus {-webkit-box-shadow: none;box-shadow: none}
@-webkit-keyframes animate {from {-webkit-transform: scale(.9);transform: scale(.9);}to {-webkit-transform: scale(1);transform: scale(1);}}
@keyframes animate {from {-webkit-transform: scale(.9);transform: scale(.9);}to {-webkit-transform: scale(1);transform: scale(1);}}
.dropdown-menu {-webkit-transition: .3s ease !important;-o-transition: .3s ease !important;transition: .3s ease !important;}
.dropdown { -webkit-transition: .3s ease !important; -o-transition: .3s ease !important; transition: .3s ease !important;}
.menu-item {display: block;visibility: hidden;opacity: 0;-webkit-transition: .3s ease !important;-o-transition: .3s ease !important;transition: .3s ease !important;overflow: hidden;}
.dropdown:hover .menu-item {opacity: 1;visibility: visible;-webkit-animation: animate .3s cubic-bezier(.68, -.55, .265, 1.55);animation: animate .3s cubic-bezier(.68, -.55, .265, 1.55);}

.navbar-toggler-icon {background-image: url('../img/menu.png') !important;}



/*==================================
        START HOME PAGE CSS
=============================*/
.em-service>.card>.card-body>i {right: -12px;}
.em-service>.card:hover {border-bottom: 4px solid;}
.slick-dotted.slick-slider {margin-bottom: 10px !important;}
.slick-dots li button:before {font-size: 40px !important;}
.next-btn:hover,
.prev-btn:hover {background-color: var(--primary-color);}
.card-content {-webkit-transition: .3s;-o-transition: .3s;transition: .3s;}
.card-content:hover { -webkit-box-shadow:0 0.5rem 1rem rgba(143, 141, 136, 0.15)!important; box-shadow:0 0.5rem 1rem rgba(143, 141, 136, 0.15)!important}
.identy{-webkit-box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px !important;box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px !important}
.card {border-radius: 16px;-webkit-transition: .2s;-o-transition: .2s;transition: .2s;}
.text-shadow{text-shadow: 3px 4px 7px #000000;}
.featured-badge {border-radius: 20px;-webkit-transition: .3s ease;-o-transition: .3s ease;transition: .3s ease;padding: 0px 5px;}
.dropdown-item{font-size: 14px;}
.card-title{-webkit-transition: .3s ease;-o-transition: .3s ease;transition: .3s ease;}
.featured-car:hover  .card{-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px!important;box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px!important;}
.view-more:hover button{background: var(--secondary-color)!important;color: white!important}
.card-text{font-size: 14px;}

/*==================================
 START LISTING DETAILS CSS DESIGN
=============================*/
.iti--inline-dropdown {
    direction: ltr;
}

.phone-call {
    background-color: #fd4c48;
}

.phone-call:hover {
    background-image: linear-gradient(180.38deg, #ff8079 -2.24%, #ff1e1e 59.38%);
}

.whatsapp-btn {
    background-color: #25d366;
}

.whatsapp-btn:hover {
    background-image: linear-gradient(to right top, #25d366, #23c760, #21bb5a, #20af55, #1ea34f);
}

.iti__search-input {
    outline: 1px solid tomato;
}


/*==================================
 START LICENCE PLATES LISTING SEARCH RESULT  CSS DESIGN
=============================*/
 
.form-check-input{padding: 10px;}
input[type=checkbox]:checked{background-color: var(--button-color); border: 1px solid var(--button-color);}

.page-item.active .page-link {
    background-color: var(--secondary-color); border: 0;
}
.page-item:last-child  .page-link, .page-item:first-child .page-link{border-radius: 10px;}
.page-link{padding: 6px 25px; border-radius: 10px; margin: 10px;}
#plate-search-result{ margin-top: 70px;}
.search-btn:hover{background-color: #1a355a!important;}


  .filter-label {
      position: absolute;
      top: 2px;
      left: 22px;
      background: white;
      padding: 0px 5px;
      z-index: 1;
      font-weight: 600;
  }
.filter-label-price{
        position: absolute;
            top: -6px;
            left: 15px;
            background: white;
            padding: 0px 5px;
            z-index: 1;
            font-weight: 600;
}

/*==================================
 END LICENCE PLATES LISTING SEARCH RESULT  CSS DESIGN
=============================*/

/*==================================
 START MOBILE NUMBERS  LISTING SEARCH RESULT  CSS DESIGN
=============================*/
#number-search-result {
    background-image: url('../img/mobile-number/mobile-bg.webp');
    margin-top: 70px;
    background-repeat: no-repeat;
    background-size: cover;
}




/*===========Tag input css*/
#license-plate {
    margin-top: 100px !important;
}
div.tagsinput {
    border: 1px solid #CCC;
    background: #FFF;
    padding: 5px;
    width: 300px;
    height: 100px;
    overflow-y: auto
}

div.tagsinput span.tag {
    border: 1px solid #a5d24a;
    display: block;
    float: left;
    padding: 5px;
    text-decoration: none;
    background: #cde69c;
    color: #638421;
    margin-right: 5px;
    margin-bottom: 5px;
    font-family: helvetica;
    font-size: 13px
}

div.tagsinput span.tag a {
    font-weight: 700;
    color: #82ad2b;
    text-decoration: none;
    font-size: 11px
}

div.tagsinput input {
    width: 80px;
    margin: 0 5px 5px 0;
    font-family: helvetica;
    font-size: 13px;
    border: 1px solid transparent;
    padding: 5px;
    background: 0 0;
    color: #000;
    outline: 0
}

div.tagsinput div {
    display: block;
    float: left
}

.tags_clear {
    clear: both;
    width: 100%;
    height: 0
}

.not_valid {
    background: #FBD8DB !important;
    color: #90111A !important
}


.red{color: red;}
.black{color: black;}
/*============================
 Start license plate desgin 
 ============================*/

 .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #f3f3f3 ;
    background-color: transparent;
    border-color: transparent transparent #f3f3f3 ;
    border-bottom: 3px solid !important;
    font-size: 16px;
    font-weight: bold;
}


.nav-pills .nav-link {
    border: 1px solid transparent;
    
    color: #eee;
    font-size: 16px;
}

.user-detelis-form input:hover{
 border: 4px solid #ea0303;
}

/* Start multi plate number one contant */

.number-selector input {
    appearance: none;
}

.number-selector input:checked+.number-select {
    background: var(--button-color);
    color: #ffff;
    border-radius: 8px;
}

.number-select {
    cursor: pointer;
    display: inline-block;
    width: 75px;
    height: 40px;
    padding: 10px;
    transition: all 100ms ease-in;
    border-radius: 6px;
    text-align: center;
    font-size: 12px;
    border: 1px solid var(--button-color);
    margin-bottom: 10px;
}

.number-select::after {
    content: "";
    padding: 5px;
    height: 16px !important;
    width: 16px !important;
    border-radius: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
}

.black::after {
    background: black;
}

.white::after {
    background: #ffff;
    border: 1px solid
}

/* Ends multi plate number one contant */
.form-control{
    padding-top: 6px;
    padding-bottom: 6px;
}

.add-new-btn{
    margin-right: -11px !important;
}

.add-new-btn button:hover{
    border: 1px solid #1abc9c !important;
}

/* input:hover{
border: 1px solid #1abc9c !important;
} */

.print-btn button{
    border: 1px solid #e32031;
    
}

.print-btn button:hover{
    border: 1px solid #1abc9c;
    background-color: #1abc9c;
    
}



/*Start tab two contact plate */


.color-plate input {
    appearance: none;
}

.color-plate input:checked+.color-digit {
    background: var(--button-color);
    color: #ffff;
    border-radius: 8px;
    
}

.color-digit {
    cursor: pointer;
    display: inline-block;
    width: 86px;
    height: 40px;
    padding: 10px;
    transition: all 100ms ease-in;
    border-radius: 6px;
    text-align: center;
    font-size: 12px;
    border: 1px solid var(--button-color);
    margin-bottom: 10px;
}

.color-digit::after {
    content: "";
    padding: 5px;
    height: 16px !important;
    width: 16px !important;
    border-radius: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
}

.black::after {
    background: black;
}

.red::after {
    background: var(--secondary-color);
    border: 1px solid
}

 /*Ends tab two contact plate */

 /*Start One tab two contact plate */


.color-plate-one input {
    appearance: none;
}

.color-plate-one input:checked+.color-digit-one {
    background: var(--button-color);
    color: #ffff;
    border-radius: 8px;
    
}

.color-digit-one {
    cursor: pointer;
    display: inline-block;
    width: 86px;
    height: 40px;
    padding: 10px;
    transition: all 100ms ease-in;
    border-radius: 6px;
    text-align: center;
    font-size: 12px;
    border: 1px solid var(--button-color);
    margin-bottom: 10px;
}

.color-digit-one::after {
    content: "";
    padding: 5px;
    height: 16px !important;
    width: 16px !important;
    border-radius: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
}

.black::after {
    background: black;
}

.red::after {
    background: var(--secondary-color);
    border: 1px solid
}

 /*Ends One tab two contact plate */


 /*Start Two tab two contact plate */


.color-plate-two input {
    appearance: none;
}

.color-plate-two input:checked+.color-digit-two {
    background: var(--button-color);
    color: #ffff;
    border-radius: 8px;
    
}

.color-digit-two {
    cursor: pointer;
    display: inline-block;
    width: 86px;
    height: 40px;
    padding: 10px;
    transition: all 100ms ease-in;
    border-radius: 6px;
    text-align: center;
    font-size: 12px;
    border: 1px solid var(--button-color);
    margin-bottom: 10px;
}

.color-digit-two::after {
    content: "";
    padding: 5px;
    height: 16px !important;
    width: 16px !important;
    border-radius: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
}

.black::after {
    background: black;
}

.red::after {
    background: var(--secondary-color);
    border: 1px solid
}

 /*Ends Two tab two contact plate */

 /*Start tab two contact plate */


.color-plate-three input {
    appearance: none;
}

.color-plate-three input:checked+.color-digit-three {
    background: var(--button-color);
    color: #ffff;
    border-radius: 8px;
    
}

.color-digit-three {
    cursor: pointer;
    display: inline-block;
    width: 86px;
    height: 40px;
    padding: 10px;
    transition: all 100ms ease-in;
    border-radius: 6px;
    text-align: center;
    font-size: 12px;
    border: 1px solid var(--button-color);
    margin-bottom: 10px;
}

.color-digit-three::after {
    content: "";
    padding: 5px;
    height: 16px !important;
    width: 16px !important;
    border-radius: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
}

.black::after {
    background: black;
}

.red::after {
    background: var(--secondary-color);
    border: 1px solid
}

 /*Ends Three tab two contact plate */


 /*Start tab two contact plate */


.color-plate-four input {
    appearance: none;
}

.color-plate-four input:checked+.color-digit-four {
    background: var(--button-color);
    color: #ffff;
    border-radius: 8px;
    
}

.color-digit-four {
    cursor: pointer;
    display: inline-block;
    width: 86px;
    height: 40px;
    padding: 10px;
    transition: all 100ms ease-in;
    border-radius: 6px;
    text-align: center;
    font-size: 12px;
    border: 1px solid var(--button-color);
    margin-bottom: 10px;
}

.color-digit-four::after {
    content: "";
    padding: 5px;
    height: 16px !important;
    width: 16px !important;
    border-radius: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
}

.black::after {
    background: black;
}

.red::after {
    background: var(--secondary-color);
    border: 1px solid
}

 /*Ends Four tab two contact plate */

 .hastag-btn button{
    border: 1px solid #1abc9c;

 }

 .hastag-btn button:hover{
    border: 1px solid #e32031;
    color: #e32031;
    
 }



      /* ==========Print Plate On Car Start================ */

      .checkbox-wrapper .checkbox-input {
        clip: rect(0 0 0 0);
        -webkit-clip-path: inset(100%);
                clip-path: inset(100%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
      }
      .checkbox-wrapper .checkbox-input:checked + .checkbox-tile {
        border-color: #e32031;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        color: #e32031;
      }
      .checkbox-wrapper .checkbox-input:checked + .checkbox-tile:before {
        transform: scale(1);
        opacity: 1;
        background-color: #1abc9c;
        border-color: #1abc9c;
      }
    
      .checkbox-wrapper .checkbox-input:focus + .checkbox-tile {
        border-color: #1abc9c;
      }
      .checkbox-wrapper .checkbox-input:focus + .checkbox-tile:before {
        transform: scale(1);
        opacity: 1;
      }
    
      .checkbox-wrapper .checkbox-tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        border: 2px solid #d7d9dd;
        transition: 0.15s ease;
        cursor: pointer;
        position: relative;
      }
      .checkbox-wrapper .checkbox-tile:before {
        content: "";
        position: absolute;
        display: block;
        width: 25px;
        height: 25px;
        border: 2px solid #b5bfd9;
        background-color: #fff;
        border-radius: 50%;
        top: 5px;
        left: 5px;
        opacity: 0;
        transform: scale(0);
        transition: 0.25s ease;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");
        background-size: 12px;
        background-repeat: no-repeat;
        background-position: 50% 50%;
      }
      .checkbox-wrapper .checkbox-tile:hover {
        border-color: #e32031;
      }
      .checkbox-wrapper .checkbox-tile:hover:before {
        transform: scale(1);
        opacity: 1;
      }
     /* ==========Print Plate On Car Ends================ */
 
/*============================
 Ends license plate desgin 
 ============================*/










/* ============================== 
CSS DESIGN FOR THE FOOTER
==============================*/
.footer {background: #2A323D;padding-top: 30px;}
.logo-shadow{text-shadow: 2px 2px 3px #d36980ad;
    font-weight: 600;}
.footer .copy-right {background-color: var(--secondary-color);font-size: 12px;}



/*====================
CUSTOME MEDIA QUERY
=====================*/
@media (min-width:992px){
         .site-logo {
             width: 15%
         }
                  
}

@media (max-width:576px){
    .mobile-title{font-size: 20px!important}
 .fs-normal{font-size: 12px;}
}

@media (max-width:768px) {
    .display-media {display: none!important}
.filter-label {
    top: -14px;
    left: 22px;
}
.filter-label-price {
    top: -13px;
    left: 15px;
}
.filter-shortin{width: 50%!important;}
.form-check-label{margin-top: 3px;}
}