@font-face {
    font-family: rubik-black;
    src: url(../font/Rubik-Black.ttf);
  }
  @font-face {
    font-family: rubik-bold;
    src: url(../font/Rubik-Bold.ttf);
  }
  @font-face {
    font-family: rubik-extra-bold;
    src: url(../font/Rubik-ExtraBold.ttf);
  }
  @font-face {
    font-family: rubik-light;
    src: url(../font/Rubik-Light.ttf);
  }
  @font-face {
    font-family: rubik-medium;
    src: url(../font/Rubik-Medium.ttf);
  }
  @font-face {
    font-family: rubik-regular;
    src: url(../font/Rubik-Regular.ttf);
  }
  @font-face {
    font-family: rubik-semi-bold;
    src: url(../font/Rubik-SemiBold.ttf);
  }

  body{
    /*font-family: rubik-regular;*/
    font-family:'DM Sans',sans-serif;
  }
  span.bold_italic {
    text-decoration: underline;
    font-weight: 600;
}
.navbar-expand-sm .navbar-nav {
    margin-left: auto;
    gap: 20px;
    padding-right: 15px;
}
  .annoucement_bar {
    background-color: #000000;
    color: #ffffff;
    font-size: 14px;
    padding: 10px 15px;
    text-align: center;
}
.paris_container {
    margin: 0 auto;
    max-width: 1299px;
    padding: 0 50px;
}
.paris_btn {
    display: inline-block;
    background-color: #14213d;
    text-decoration: none;
    color: #ffffff;
    font-size: 14px;
      font-family:'DM Sans',sans-serif;
    padding: 12px 15px;
    border-radius: 5px;
    border: 0;
}
a.nav-link {
    font-size: 18px;
    font-family: 'rubik-medium';
    color: #1C1C1C;
    text-shadow: 2px 0px 2px rgba(0,0,0,0.3);
    display:inline-block;
    position:relative;
    padding-left:0 !important;
}
span.form_input_icon {
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 14px;
}
span.form_input_icon img {
    width: 22px;
}
.input_icon {
    position: relative;
}
.banner_content_main {
    border: 1px solid #D9D9D9;
    padding: 15px 10px;
    border-radius: 4px;
    background: #59679670;
}
.paris_booking_form {
    /* background-color: #00000099; */
    padding: 30px;
    border-radius: 4px;
}
.paris_booking_form a{
    color:#fff;
    text-decoration:underline !important;
}
.paris_booking_form .step h4{
    color:#fff !important;
    border-bottom: 2px solid #fff;
}
.radio_group_form {
    display: flex;
    gap: 30px;
    padding-bottom: 25px;
}
h4.form_radio_hd {
    font-size: 20px;
    color: #14213d;
    margin: 0px;
    padding-bottom: 20px;
}
.paris_booking_form .input_icon{
    padding-bottom: 25px;
}
.paris_booking_form .form-control {
    padding: 0.9rem .75rem;
    background-image: none;
}
.paris_booking_form select{
    color: #cfcfcf;
}
.paris_booking_form select:valid{
    color: #000;
}
span.imp_info {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #1C1C1C;
}
.banner_text_right h6 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'rubik-medium';
}
.banner_text_right {
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}
.banner_text_right img{
    border-radius:4px;
}



.banner_text_right {
  position: relative;
  display: inline-block; /* or block, depending on layout */
  width: 100%;
  
}

.banner_text_right img {
     width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.banner_text_right .content {
  position: absolute;
  top: 0;
  left: 0;
  padding: 30px;
  color: white;
  background: rgba(0, 0, 0, 0.65); /* optional for contrast */
  width: 100%;
  height: 100%; /* optional if you want full overlay */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
      border-radius: 4px;
}









.banner_slider_main {
    position: relative;
}
.banner_slider_main .banner_background img{
    filter: brightness(0) saturate(100%) invert(98%) sepia(5%) saturate(227%) hue-rotate(235deg) brightness(113%) contrast(87%);
}
.banner_info {
    position: absolute;
    top: 50%;
    right: 0;
    width: 100%;
    z-index: 2;
    transform: translateY(-50%);
}
.banner_text_right h2 {
    font-size: 45px;
    font-family: rubik-semi-bold;
    margin: 0;
    padding: 15px 0px;
}
.banner_text_right p {
    font-size: 18px;
    font-family: rubik-light;
    margin: 0;
    padding-bottom: 30px;
}
.paris_booking_form input.form-control::placeholder {
    font-size: 16px;
    color: #C8C8C8;
    font-family: 'rubik-light';
}
button.form_submit_btn {
    width: 100%;
}
button.Know_more_btn {
    max-width: 125px;
}
a.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0px;
}
/*.cmpy_name{*/
/*    display: none;*/
/*}*/
.cmpy_name h1 {
       margin: 0;
    font-size: 28px;
    text-transform: uppercase;
    font-family: 'rubik-medium';
    color: #000;
        text-shadow: 2px 2px 2px rgb(252 163 17 / 50%);
      font-weight: 900 !important;
}
.input_icon input.form-control {
    padding-right: 35px;
    background-image: none;
}
.luxury_img img {
    width: 100%;
        border-radius: 7px;
}
.paris-HD {
    position: relative;
}
h5.parisHdBlack {
    font-size: 47px;
    font-family:'DM Sans',sans-serif;    font-weight: 600; 
    color: #000000;
    margin: 0;
    position: absolute;
    bottom: 15px;
    text-transform: uppercase;
    margin-bottom:25px;
}
h2.parisHdGrey {
    font-size: 96px;
    font-family:'DM Sans',sans-serif;    font-weight: 600; 
    color: #E5E5E5;
    text-transform: uppercase;
    line-height: 90px;
    visibility: hidden;
    display:none;
}
p.parisPara {
    color: #8C8B92;
    font-size: 18px;
    max-width: 450px;
}
.sectionPadding {
    padding-top: 50px;
    padding-bottom: 30px;
}
.luxury_vehicle_text {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}
.headingCenter {
    text-align: center;
}
.headingCenter h5.parisHdBlack {
    left: 0;
    right: 0;
}
.serviceImg img {
    width: 100%;
    border-radius: 7px;
}
.servicesBoxesMain {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    padding-left: 50px;
}
.serviceBox {
    width: calc(50% - 15px);
    border: 1px solid #E8E8E9;
    border-radius: 30px;
    padding: 5px;
    text-align: center;
}
.serviceIcon {
    padding-bottom: 15px;
}
.serviceIcon img {
    width: 100%;
    max-width: 50px;
    margin: 0 auto;
}
p.serviceHD {
    font-size: 18px;
    margin: 0px;
    color: #191825;
}
.servicesMain {
    padding-top: 30px;
}
.ourServices {
    padding-bottom: 30px;
}
.placeImg {
    position: relative;
}
.placeImg img {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    object-fit: cover;
    object-position: center;
    padding: 2.5px;
}
.parisGrid {
    display: flex;
    flex-wrap: wrap;
    padding-top: 30px;
}
.place66 {
    max-width: 66.66%;
    height: auto;
    flex: 0 0 66.66%;
    padding-top: 30%;
    display: grid;
}
.place33 {
    max-width: 33.33%;
    height: auto;
    flex: 0 0 33.33%;
    padding-top: 30%;
    display: grid;
}
.place50 {
    max-width: 50%;
    /* max-width: 33.33%; */
    height: auto;
    flex: 0 0 50%;
    padding-top: 30%;
    display: grid;
}
.clientImg img {
    width: 100%;
}
.testimonialSection  .carousel-inner {
    padding: 10px 10px;
    max-width: 800px;
    margin: 0 auto;
}
.testimonialSection .carousel-inner .carousel-item {
    padding: 30px;
    background-color: #ffffff;
    border-radius: 30px;
    box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.2);
}
.testimonialSection .carousel-control-prev-icon {
    background-image: url("../images/leftArrow.png");
}
.testimonialSection .carousel-control-next-icon, 
.testimonialSection .carousel-control-prev-icon {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.5);
    background-size: 20px;
}

.testimonialSection .carousel-control-next-icon{
    background-image: url("../images/leftArrow.png");
    rotate: -180deg;
}
.testimonialSection .carousel {
    padding-top: 30px;
}
.testimonialSection .carousel-indicators [data-bs-target] {
    background-color: #14213d;
}
.testimonialSection .carousel-indicators {
    position: unset;
}
.testimonialSection .clientDetails h4 {
    text-align: center;
    font-size: 24px;
    color: #080D20;
    font-family:'DM Sans',sans-serif;    font-weight: 600; 
}
.testimonialSection .clientDetails p {
    font-size: 12px;
    color: rgba(0,0,0,0.8);
    text-align: center;
    margin: 0;
}
.clientReview p {
    font-size: 14px;
    color: #000;
    margin: 0px;
    position: relative;
    padding-left: 50px;
}
.clientReview p:before {
    content: "";
    background-image: url(../images/quotesLeft.png);
    background-size: 49px;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: -40px;
    left: 0px;
    width: 49px;
    height: 49px;
}
.clientReview p:after {
    content: "";
    background-image: url(../images/quotesLeft.png);
    background-size: 49px;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom: -40px;
    right: 0px;
    width: 49px;
    height: 49px;
    rotate: 180deg;
}
.star_rating {
    padding-top: 20px;
    text-align: center;
}
.star_rating img {
    width: 100%;
    max-width: 178px;
}
.clientReview {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
}
.paymentCardsSectionInner {
    background-color: #E5E5E5;
}
.paymentCardsMain {
    display: flex;
}
.payCard1 img {
    width: 100%;
    max-width: 100px;
}
.payCard2 img {
    width: 100%;
    max-width: 90px;
}
.paymentCardsMain {
    display: flex;
    gap: 15px;
    justify-content: space-between;
    align-items: center;
}
.parisFooter {
    display: flex;
    gap: 15px;
    padding-bottom: 20px;
}
.footerLogoInfo {
    width: 100%;
    max-width: 380px;
}
.footerLogoInfo p {
    font-size: 14px;
    color: #383838;
    margin: 0;
    padding-top: 20px;
}
.footerSocialIcons {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 30px;
}
h4.footerHd {
  position: relative;
  padding-bottom: 10px;
  font-size: 20px;
  color: #fff;
  display: inline-block;
}

h4.footerHd::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #fff; /* or your preferred color */
  transition: background-color 0.3s ease;
}
h4.footerHd:hover::before {
  background-color: #00c6ff;
}



.footerUL {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footerUL li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #333;
  transition: all 0.3s ease;
  cursor: pointer;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}

.footerUL li svg {
  fill: #007bff;
  transition: transform 0.3s ease, fill 0.3s ease;
}

.footerUL li:hover {
  color: #007bff;
  transform: translateX(5px);
  border-bottom: 1px solid #007bff;
}

.footerUL li:hover svg {
  fill: #007bff;
  transform: scale(1.1);
}

.footerMenu {
    min-width: 160px;
}
.footerContact {
    width: 100%;
    max-width: 260px;
}
.contactUl li {
    position: relative;
    padding-left: 30px;
}
.contactUl li svg {
      position: absolute;
    left: 0;
    top: 10px;
    width: 20px;
    height: 20px;
}
.MapImage img {
    width: 100%;
}
.copyrightSection {
    background-color: #000000;
    padding: 10px;
}
.copyrightSection p {
    margin: 0;
    text-align: center;
    color: #ffffff;
    font-family: 'rubik-light';
    font-size: 12px;
}
.contactUl li:last-child svg {
    left: 3px;
}
.placeImg:hover:after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}
.placeLocation {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-family: 'rubik-medium';
    color: #fff;
    font-size: 14px;
    z-index: 1;
    display: none;
}
.placeImg:hover .placeLocation{
    display: block;
}
.modal-backdrop {
    z-index: 0;
}
.modal_popup_vehicle .modal-content {
    background-color: #F7F7F7;
    border: 0px;
    border-radius: 30px;
}
.CloseModelPopup {
    position: fixed;
    top: -78px;
    right: 0;
    border-radius: 50%;
    padding: 20px;
    z-index: 3;
    width: 100%;
    text-align: center;
}
.modal_popup_vehicle button.btn-close {
    background-color: rgba(255,255,255);
    border-radius: 50%;
    padding: 20px;
}
.modal_popup_vehicle .modal-dialog {
    transform: none;
    max-width: 700px;
    margin-top: 80px;
}
.carImg img {
    width: 100%;
    max-width: 100px;
}
.carImgName p {
    margin: 0;
    font-size: 14px;
    color: #1C1C1C;
}
.carDesciption h5 {
    font-size: 18px;
    font-family:'DM Sans',sans-serif;    font-weight: 600; 
}
ul.keyFeatures {
    display: block;
    padding: 0;
    margin: 0;
    list-style-type: none;
}
span.featureIcon {
    display: inline-block;
}
span.featureIcon img {
    width: 100%;
    max-width: 15px;
}
ul.keyFeatures li {
    display: inline-flex;
    margin-right: 10px;
    font-size: 12px;
    align-items: center;
    gap: 5px;
}
.carDetials {
    display: flex;
    background-color: #ffffff;
    border-radius: 30px;
    padding: 20px;
    gap: 10px;
    margin-bottom: 20px;
}
.carDesciption {
    padding: 0px 10px;
    border-left: 1px solid #ececec;
    border-right: 1px solid #ececec;
}
ul.carPills {
    padding: 0;
    margin: 10px 0;
    list-style-type: none;
}
ul.carPills li {
    border: 1px solid #D9D9D9;
    padding: 5px;
    border-radius: 10px;
    display: inline-flex;
    margin-bottom: 10px;
    align-items: center;
    font-size: 12px;
    gap: 5px;
}
.carImgName {
    width: 100%;
    max-width: 130px;
}
.carPricing {
    text-align: right;
    width: 100%;
    max-width: 160px;
}
p.onWay {
    font-size: 12px;
    margin: 0;
    color: #383838;
}
p.realPrice {
    margin: 0;
    font-size: 13px;
    font-family:'DM Sans',sans-serif;    font-weight: 600; 
    display: inline-block;
    color: #383838;
    position: relative;
}
p.realPrice:after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #383838;
    position: absolute;
    left: 0;
    top: 8px;
}
p.discountPrice {
    font-size: 30px;
    margin: 0;
    font-family:'DM Sans',sans-serif;    font-weight: 600; 
    color: #14213d;
}
p.taxVAT {
    margin: 0;
    font-size: 12px;
    color: #383838;
}
.carSelect {
    display: block;
    width: 100%;
    margin-top: 10px;
}
div#myModal {
    padding: 15px;
}



/*************** Booking Page CSS *******************/
.fullBannerImg {
    background-image: url('../images/bookingBanner.jpg');
    width: 100%;
    height: calc(100vh - 119px);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.contactBanner{
    background-image: url('../images/contactBanner.jpg');
      position: relative;
}
.fullBannerImg{
   position: relative;  
}
.contactBanner::before ,.fullBannerImg::before{
  position: absolute;
  content: "";
      background-color: #fca311;
  opacity: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index:0;
}


.bookingBannerParis {
    display: flex;
    height: 100%;
    justify-content: center;
}
.bannerText {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #000;
    text-align: center;
    max-width: 600px;
        /*z-index: 1000;*/
    position: relative;
}
.bannerText h6 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'rubik-medium';
}
.bannerText h2 {
    font-size: 45px;
    font-family: rubik-semi-bold;
    margin: 0;
    padding: 15px 0px;
}
.bannerText p {
    font-size: 18px;
    margin: 0;
    padding-bottom: 30px;
}
.contentMobile{
    display: none;
}
.contactPageBoxes {
    display: flex;
    gap: 50px;
    max-width: 900px;
    margin: 0 auto;
}
.contactInfoImg {
    text-align: center;
}
.contactInfoImg img {
    width: 100%;
    max-width: 60px;
}
.contactBox {
    width: calc(33.33% - 25px);
    background-color: #ffffff;
    padding: 30px;
    border-radius: 30px;
    box-shadow: 2px 2px 10px -1px rgba(0,0,0,0.5);
    text-align: center;
    max-width: 250px;
    margin: 0 auto;
        position: relative;
}
.contactBox h5 {
    margin: 0px;
    font-size: 16px;
    font-family:'DM Sans',sans-serif;    font-weight: 600; 
    padding: 15px 0px;
}
.contactBox p {
    margin: 0px;
    font-size: 13px;
    color: #8C8B92;
}
.contactInfoBox {
    margin-top: -100px;
}

form#contact_form .success {
    display: none;
    color: green;
    font-weight: 600;
    font-size: 16px;
}

form#contact_form .error {
    display: none; 
    color: red;
    font-weight: 600;
    font-size: 14px;
}

button.navbar-toggler {
    border: 0;
    padding: 0;
}
.navbar-toggler-icon:focus-visible, .navbar-toggler:focus-visible, .navbar-toggler:focus {
    border: 0px;
    box-shadow: none;
    outline: 0px;
}
.conFormImg {
    background-image: url('../images/contactBgForm.png');
}
.ConFormText {
    width: calc(50% - 10px);
}
.conFormImg {
    background-image: url('../images/contactBgForm.png');
    width: calc(50% - 10px);
    min-height: 690px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
       border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.contactFormArea {
    display: flex;
    gap: 20px;
    box-shadow: 2px 2px 16px 0px rgba(0,0,0,0.5);
        border-radius: 4px;
}
.ConFormText h5.formHD {
    font-size: 36px;
    font-family:'DM Sans',sans-serif;    font-weight: 600; 
    color: #1C1C1C;
}
.ConFormText p.formText {
    margin: 0;
    font-size: 20px;
    color: #8C8B92;
    padding-bottom: 30px;
}
.ConFormText form {
    padding-top: 30px;
}


.ConFormText form {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  font-family: 'Segoe UI', sans-serif;
}

/* Form Fields */
.ConFormText form .contFormFields {
  margin-bottom: 20px;
}

.ConFormText form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 400;
    color: #333;
    font-size: 17px;
    margin: 0;
        padding-bottom: 3px;
}

.ConFormText form .form-control {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ccc;
      border-radius: 3px;
  font-size: 15px;
  transition: border-color 0.3s;
}

.ConFormText form .form-control:focus {
  border-color: #007bff;
  outline: none;
  background-color: #f5faff;
}

/* Submit Button */
.ConFormText form .contactFormBtnDiv {
  text-align: center;
  margin-top: 20px;
}

.ConFormText form .contactFormBtn {
  background-color: #007bff;
  color: #fff;
  padding: 12px 30px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.ConFormText form .contactFormBtn:hover {
  background-color: #0056b3;
}

/* Success and Error Messages */
.ConFormText form .success,
.ConFormText form .error {
  font-size: 14px;
  padding: 12px;
  border-radius: 6px;
  margin-top: 10px;
  display: none;
}

.ConFormText form .success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.ConFormText form .error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Responsive */
@media (max-width: 576px) {
  .ConFormText form .col-sm-6,
  .ConFormText form .col-sm-12 {
    width: 100%;
    display: block;
  }

  .ConFormText form .contactFormBtn {
    width: 100%;
  }
}






.contFormFields {
    margin-bottom: 25px;
}
.contFormFields label {
    font-size: 14px;
    font-family:'DM Sans',sans-serif;    font-weight: 600; 
    padding-bottom: 10px;
}
.contactFormBtnDiv {
    text-align: right;
}
.conFormTextInner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 30px;
}
.contactFormBgImg {
    height: 100%;
}
.contactFormText {
    max-width: 350px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding-left: 40px;
}
.contactFormText h5 {
    font-size: 30px;
    font-family:'DM Sans',sans-serif;    font-weight: 600; 
    color: #fff;
}
.contactFormText p {
    font-size: 16px;
    color: #fff;
}

button:disabled {
  background-color: #767676; 
  color: #fff;
  cursor: not-allowed; 
  opacity: 0.6; 
}











@media screen and (max-width: 1200px) {
    h4.form_radio_hd {
        padding-bottom: 10px;
    }
    .radio_group_form {
        padding-bottom: 15px;
    }
    .paris_booking_form {
        padding: 15px 30px;
    }
    .paris_booking_form .input_icon {
        padding-bottom: 15px;
    }
    .paris_container {
        padding: 0 20px;
    }
    .servicesBoxesMain {
        padding-left: 0;
    }
}

@media screen and (max-width: 1000px) {
.paris_booking_form .form-control {
    padding: 0.5rem .75rem;
    background-image: none;
}
.banner_text_right h2 {
    font-size: 32px;
    padding: 8px 0px;
}
.banner_text_right p {
    font-size: 14px;
    padding-bottom: 15px;
}
.footerLogoInfo {
    max-width: 200px;
}
.footerMenu {
    min-width: 100px;
}
}


@media screen and (min-width: 991px) {
    .navbar .nav-link{
        color: #000 !important;
    }
}
@media screen and (max-width: 991px) {
.banner_info {
    position: unset;
    transform: translateY(-100px);
}
.paris_booking_form .form-control {
    padding: 0.9rem .75rem;
}
.banner_text_right {
    color: #1c1c1c;
    padding-top: 20px;
    text-align: center;
}
button.Know_more_btn {
    margin: 0 auto;
}
.carousel-indicators {
    z-index: 0;
}
.luxuryVehiclesMain {
    /*padding-top: 0 !important;*/
}
.navbar-expand-sm .navbar-nav {
    margin-left: auto;
    gap: 5px;
    padding-right: 15px;
}
a.nav-link {
    font-size: 14px;
}
.cmpy_name h1 {
    margin: 0;
    font-size: 22px;
}
h2.parisHdGrey {
    font-size: 60px;
    line-height: 55px;
}
h5.parisHdBlack {
    font-size: 30px;
    bottom: 15px;
}
.luxury_vehicle_text {
    padding-bottom: 30px;
}
.servicesBoxesMain {
    padding-top: 30px;
}
.who_we_our_text {
    text-align: center;
}
.who_we_our_text h5.parisHdBlack {
    left: 0;
    right: 0;
    bottom: 5px;
}
.who_we_our_text p.parisPara {
    max-width: unset;
}
.contactPageBoxes {
    gap: 20px;
}
.contactBox {
    width: calc(33.33% - 10px);
}
.contactBox {
    padding: 15px;
}

 .sidebar-wrapper{
         width: 350px !important;
    }

.buttons{
         margin-top: 100px;
    text-align: center;
    border-bottom: 3px solid;
    padding-bottom: 15px;
}
.Side-btn{
    display:flex !important;
}
.navbar{
    flex-wrap:nowrap;
            padding: 10px 0px !important;
                justify-content: space-between;
}
.cmpy_name h1{
        margin-left: 4px !important;
}

.carousel-item video{
    display:none;
}
.banner_content_main{
    margin-bottom: 30px;
}
.banner_slider_main .col-lg-7{
        order: 2;
}
.banner_slider_main .col-lg-5{
        order: 1;
}
h5.parisHdBlack::before{
        top: -6px !important;
}

}

@media screen and (max-width: 767px) {
    .clientImg {
        text-align: center;
    }
    .clientImg img {
        width: 100%;
        max-width: 100px;
        margin: 0 auto;
    }
    .clientReview p {
        font-size: 12px;
        padding-left: 50px;
        padding-top: 20px;
    }
    .testimonialSection .clientDetails h4 {
        font-size: 18px;
    }
    .star_rating img {
        width: 100%;
        max-width: 120px;
    }
    .clientReview p:before {
        background-size: 30px;
        top: 0px;
    }
    .clientReview p:after {
       display: none;
    }
    .bannerText h2 {
        font-size: 32px;
    }
    .bannerText p {
        font-size: 16px;
    }
.paris_container {
        padding: 0 10px;
}
.banner_info {
    position: unset;
    transform: translateY(50px);
}
.navbar-expand-sm .navbar-nav {
    gap: 0;
}
.annoucement_bar {
    font-size: 12px;
}
.paris_booking_form {
    padding: 15px 15px;
}
h4.form_radio_hd {
    font-size: 18px;
}
.radio_group_form {
    gap: 15px;
    font-size: 14px;
}
.cmpy_name h1 {
    font-size:16px !important;
}
a.navbar-brand {
    gap: 0px;
}
.navbar-expand-sm .navbar-nav {
    padding-right: 0px;
}
a.nav-link {
    font-size: 12px;
}
h2.parisHdGrey {
    font-size: 48px;
    line-height: 40px;
}
.sectionPadding {
    padding-top: 50px;
}
p.parisPara {
    max-width: 450px;
}
.servicesBoxesMain {
    gap: 20px;
}
.serviceBox {
    width: calc(50% - 10px);
}
.serviceBox {
    padding: 20px;
}
.place66 {
    max-width: 50%;
    flex: 0 0 50%;
    padding-top: 50%;
}
.place33 {
    max-width: 50%;
    flex: 0 0 50%;
    padding-top: 50%;
}
.footerLogoInfo {
    width: calc(50% - 10px);
    max-width: unset;
}
.footerMenu {
    min-width: unset;
    width: calc(50% - 10px);
}
.footerContact {
    width: calc(50% - 10px);
    max-width: unset;
    padding-top: 20px;
}
.footerMap {
    width: calc(50% - 10px);
    padding-top: 20px;
}
.parisFooter {
    flex-wrap: wrap;
}
ul.footerUL li {
    font-size: 12px;
}
.footerLogoInfo p {
    font-size: 12px;
}
.payCard1 img {
    max-width: 50px;
}
.payCard2 img {
    max-width: 45px;
}
.carDetials {
    flex-direction: column;
}
.carPricing {
    text-align: left;
}
.contentMobile{
    display: block;
}
.contentDesk{
    display: none;
}
.contactPageBoxes {
    flex-wrap: wrap;
}
.contactBox {
    width: calc(50% - 10px);
}
.contactFormText {
    max-width: 265px;
}
.contactFormText h5 {
    font-size: 22px;
}
.contactFormText p {
    font-size: 13px;
}
.ConFormText {
    width: 100%;
}
.contactFormArea {
    flex-direction: column-reverse;
}
.conFormTextInner {
    padding: 15px;
}
.conFormImg {
    background-image: url('../images/contactBgMobile.png');
    width: 100%;
    min-height: 150px;
    background-position: center;
    border-radius: 30px;
}
.contactFormText {
    max-width: unset;
    text-align: center;
    padding-top: 40px;
    padding-left: 15px;
    padding-right: 15px;
}
.ConFormText p.formText {
    font-size: 18px;
    padding-bottom: 0;
}
}

@media screen and (max-width: 480px) {
.servicesBoxesMain {
    gap: 10px;
}
.serviceBox {
    padding: 15px;
    width: calc(50% - 5px);
}
p.serviceHD {
    font-size: 14px;
}
.footerLogoInfo {
    width: 100%;
}
.footerMenu {
    width: 100%;
    padding-top: 20px;
}
.footerContact {
    width: 100%;
}
.footerMap {
    width: 100%;
}
.contactBox {
    width: 100%;
}
}

@media screen and (max-width: 370px) {
.radio_group_form {
    gap: 8px;
    font-size: 12px;
}
}










/*----------New style css-----*/

.serviceBox {
  background: linear-gradient(135deg, #fca311, #ffb3b3);
  border-radius: 20px;
  padding: 30px 20px;
  text-align: center;
  transition: all 0.4s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  max-width: 250px;
  margin: auto;
}

.serviceBox:hover {
  background: linear-gradient(135deg, #14213d, #778fb1);
  transform: translateY(-10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.serviceIcon img {
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(299deg) brightness(102%) contrast(102%);
  transition: transform 0.4s ease;
}

.serviceBox:hover .serviceIcon img {
  transform: scale(1.1) rotate(5deg);
}

.serviceHD {
  margin-top: 20px;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff !important;
  transition: color 0.4s ease;
}

.serviceBox:hover .serviceHD {
  color: #fff;
}



/* ------------ Section wrapper ------------ */
.luxuryVehiclesMain {
  background: linear-gradient(135deg, #f3f6ff 0%, #ffffff 60%);
  padding: 70px 0;
}

/* ------------ Two‑column grid ------------ */
.luxury-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

@media (max-width: 768px) {
  .luxury-wrapper {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* ------------ Text side ------------ */
.luxury-eyebrow {
  font-size: 15px;
  letter-spacing: 4px;
  font-weight: 700;
  color: #8f95a3;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.luxury-title {
  font-size: 34px;
  font-weight: 700;
  color: #0d2b87;
  margin: 0 0 22px;
  line-height: 1.25;
}

.luxury-copy {
  font-size: 16px;
  line-height: 1.75;
  color: #414a5d;
  max-width: 480px;
}

@media (max-width: 768px) {
  .luxury-title  { font-size: 28px; }
  .luxury-copy   { max-width: none; }
}

/* ------------ Image side ------------ */
.luxury-image {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.15);
}

.luxury-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.luxury-image::after {                       /* subtle overlay gradient */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    rgba(13, 43, 135, 0.25) 0%,
    rgba(13, 43, 135, 0) 70%
  );
  pointer-events: none;
}

.luxury-image:hover img {
  transform: scale(1.05);
}







h5.parisHdBlack{
      position: relative;
    display: inline-block;
    padding-left: 53px;
}
h5.parisHdBlack::before{
     position: absolute;
    left: 0;
    top: 4px;
    content: "";
    background-image: url(../images/eiffel-tower.png);
    background-repeat: no-repeat;
    width: 44px;
    height: 44px;
    background-size: 44px;
}




.paymentCardsSectionInner {
  padding: 40px 0;
  background: #f9f9f9;
}

.paymentCardsGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  align-items: center;
}

.payCard {
  width: 180px;
  height: 110px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.payCard:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.payCard img {
  max-width: 80%;
  max-height: 70%;
  object-fit: contain;
}


@media (max-width: 768px) {
  .payCard {
    width: 45%;
    height: 100px;
  }
}

@media (max-width: 480px) {
  .payCard {
    width: 80%;
    margin: 0 auto;
  }
}




/* -- basic card container ---------------------------------------------- */
.tile{
    position: relative;          /* anchor the absolute panel */
    overflow: hidden;            /* hide anything that slides outside */
}

/* -- the sliding info panel -------------------------------------------- */
.tile .tile-detail{
    position: absolute;
    bottom: 0;                   /* stick to the bottom edge */
    left: 0;
    width: 100%;

    /* start completely out of view */
    transform: translateY(100%);

    /* visual style while hidden */
    background: rgba(255,255,255,0.85);
    color: #212529;              /* Bootstrap’s default text colour */
    box-shadow: 0 -4px 12px rgba(0,0,0,.12);

    /* make the motion + colour change nice and smooth */
    transition:
        transform .45s cubic-bezier(.4,.0,.2,1),
        background-color .45s ease;
}

/* -- reveal on hover / keyboard focus ---------------------------------- */
.tile:hover .tile-detail,
.tile:focus-within .tile-detail{     /* accessibility for keyboard users */
    transform: translateY(0);        /* slides panel upward */
    background-color: #f8f9fa;       /* tweak to any colour you prefer */
}



.section-grey{
    background-color: #eeeeee85;
    padding: 50px 0;
}




.navbar{
    /* optional: tweak overall spacing & look */
    padding: .75rem 1.25rem;
}

.navbar-brand,
.cmpy_name h1{
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 1.35rem;          /* adjust to taste */
}

.cmpy_name h1{
    margin-left: 25px;  
        font-weight: 400;
    font-style: normal;
    font-family: "Walter Turncoat", cursive;/* keep your original gap */
}

/* ── STYLING THE NAV LINKS ───────────────────────────────────────────── */
.navbar .nav-link{
    position: relative;          /* create a containing block for ::after */
    padding:.5rem 1rem;          /* comfortable click target */
    color:#212529;               /* default text colour (Bootstrap gray‑900) */
    text-transform:capitalize;   /* optional, looks tidy */
    transition:color .2s ease;
}

.navbar .nav-link{
    padding-left:0 !important;
}



/* visual state for hover / focus / active */
.sidebar-popup .nav-link:hover,
.sidebar-popup .nav-link:focus,
.sidebar-popup .nav-link.active,nav .nav-link:hover, nav .nav-link:focus, nav .nav-link.active{
    color:#d78500 !important;               /* any highlight colour you prefer */
    padding-left:0 !important;
}

/* ▸ SLIDING UNDERLINE  – the magic */
.sidebar-popup .nav-link::after,nav .nav-link::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:3px;
    background:#d78500;          /* underline colour */
    transform:scaleX(0);         /* start hidden (shrunk) */
    transform-origin:left center;
    transition:transform .25s ease-out;
}

/* reveal underline on interaction */
.sidebar-popup .nav-link:hover::after,
.sidebar-popup .nav-link:focus::after,
.sidebar-popup .nav-link.active::after{
    transform:scaleX(1);
}

nav .nav-link:hover::after,
nav .nav-link:focus::after,
nav .nav-link.active::after{
    transform:scaleX(1);
}
.sidebar-popup ul.navbar-nav{
        padding: 57px 0 0 56px;
}

/* ── MOBILE MENU (optional tweaks) ───────────────────────────────────── */
/* Give the collapsed items a bit of breathing room on small screens */
@media (max-width:575.98px){
    .sidebar-popup .nav-link{
        padding:.75rem 1rem;
    }
}





/*--------form*--------*/
/* --- General form control --- */
.paris_booking_form .form-control {
  padding-left: 45px; /* space for icon */
  height: 48px;
  border-radius: 2px;
  border: 1px solid #ccc;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.paris_booking_form .form-control:focus {
  border-color: #fca311;
  box-shadow: 0 0 0 3px rgba(19, 65, 236, 0.2);
}

/* --- Icon inside input fields --- */
.input_icon {
  position: relative;
  margin-bottom: 20px;
}

.input_icon .form_input_icon {
  position: absolute;
  top: 22px;
  left: 15px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  filter: brightness(0) saturate(100%) invert(37%) sepia(44%) saturate(6756%) hue-rotate(345deg) brightness(104%) contrast(88%);
}

.input_icon .form_input_icon img {
  max-width: 100%;
  height: auto;
  filter: brightness(0) saturate(100%) invert(99%) sepia(84%) saturate(0%) hue-rotate(126deg) brightness(106%) contrast(100%);
}

/* --- Dropdown chevron for select input --- */
.select_icon .form_input_icon {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  pointer-events: none;
}

/* --- Vehicle Type field cursor pointer --- */
.vehicleSelectModel input {
  cursor: pointer;
}

/* --- Buttons --- */
.paris_btn {
  background-color: #14213d;
  color: white;
  border: none;
  padding: 12px 20px;
  font-weight: 600;
  transition: background-color 0.3s ease;
  border-radius: 4px;
}

.paris_btn:hover,
.paris_btn:focus {
  background-color: #fca311;
}

/* --- Disabled button style --- */
button[disabled] {
  background-color: #14213d !important;
  cursor: not-allowed;
}

/* --- Step headers (optional styling) --- */
.step h4 {
  margin-bottom: 20px;
  border-bottom: 2px solid #fca311;
  padding-bottom: 10px;
}









/*------carousel-------*/
/* ── Carousel / slide container ──────────────────────────────────────── */
.carousel-item{
    padding: 0;      
    position:relative;            /* breathing room around each slide */
}
.carousel-item video{
    width: 100%;
    object-fit: cover;
    /*filter: brightness(50%);*/
        /*filter: brightness(0) saturate(100%) invert(63%) sepia(85%) saturate(1167%) hue-rotate(351deg) brightness(102%) contrast(98%);*/
        filter: brightness(0) saturate(100%) invert(99%) sepia(100%) saturate(4%) hue-rotate(148deg) brightness(105%) contrast(100%);
            max-height: 600px;
}
.carousel-item:hover{
    background:#f7f9ff;                  /* soft highlight on hover */
    box-shadow:0 4px 18px rgba(0,0,0,.08);
    transition:background .3s,box-shadow .3s;
}

/* ── Client photo ───────────────────────────────────────────────────── */
.clientImg{
    width:110px;
    height:110px;
    border-radius:50%;
    overflow:hidden;
    margin:0 auto 1rem auto;             /* centred in its column */
    border:4px solid #ffffff;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
}

.clientImg img{
    width:100%;
    height:100%;
    object-fit:cover;                    /* keeps the face nicely framed */
}

/* ── Client name + role ─────────────────────────────────────────────── */
.clientDetails h4{
    font-size:1.15rem;
    margin:0;
    font-weight:600;
    text-align:center;
}

.clientDetails p{
    font-size:.85rem;
    color:#6c757d;
    margin:2px 0 0;
    text-align:center;
    letter-spacing:.3px;
}

/* ── Review text ────────────────────────────────────────────────────── */
.clientReview{
    position:relative;
    padding:1.25rem 1rem 1.75rem;        /* extra bottom space for stars */
    background:#ffffff;
    border-radius:6px;
    border:1px solid #e7eaf0;
    height:100%;
}

/* fancy opening quote */
.clientReview::before{
    content:'\201C';
    position:absolute;
    top:-10px; left:-5px;
    font-size:5rem;
    line-height:0;
    color:#fca31120;                     /* faint brand coloured quote mark */
}

/* review text itself */
.clientReview p{
    font-size:.95rem;
    line-height:1.55;
    margin-bottom:1.25rem;
    color:#343a40;
}

/* ── Star rating bar ────────────────────────────────────────────────── */
.star_rating{
    display:flex;
    gap:3px;
}

.star_rating img{
    width:22px;
    height:22px;
    object-fit:contain;
}

/* ── Responsive tweaks ─────────────────────────────────────────────── */
@media (max-width:767.98px){
    .clientImg{
        width:90px; height:90px;
    }
    .clientReview{
        margin-top:1rem;
    }
}


/* Style the prev/next background circle */
.carousel-control-prev,
.carousel-control-next {
  width: 45px;
  height: 45px;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5); /* semi-transparent dark */
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  background-color: #fca311; /* your brand color */
}

/* Optional: change default arrow color */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1) grayscale(100); /* turns white */
  width: 1.5rem;
  height: 1.5rem;
}







/*------footer-----*/
/* --- Footer Main Styles --- */
footer.sectionPadding {
    background-color: #14213d ;     /* 🔵 Background color */
  color: #ffffff;                     /* ⚪ Text color */
  padding: 60px 0 30px;
  font-family: 'Segoe UI', sans-serif;
}

.parisFooter {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.footerLogoInfo,
.footerMenu,
.footerContact,
.footerMap {
  flex: 1 1 230px;
}

/* --- Footer Heading Text --- */
.footerHd {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #ffd04a;                    /* 🟡 Heading color */
}

/* --- Footer Description Text --- */
.footerLogoInfo p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #ffffff;
}

/* --- Footer Links --- */
.footerLinks ul,
.footerUL.contactUl {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footerLinks ul li {
  margin-bottom: 10px;
}

.footerLinks ul li a {
  color: #ffffff;                    /* ⚪ Link color */
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.footerLinks ul li a:hover {
  color: #ffd04a;                    /* 🟡 Hover color */
}

/* --- Contact Info Section --- */
.footerUL.contactUl li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  margin-bottom: 10px;
  color: #ffffff;
}

.footerUL.contactUl li svg path {
  fill: #ffffff;
}

.footerUL.contactUl li:hover svg path {
  fill: #ffd04a;
}

/* --- Social Icons --- */
.footerSocialIcons {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 15px;
}

.footerSocialIcons svg,
.footerSocialIcons img {
  width: 24px;
  height: 24px;
  fill: #ffffff;
  transition: transform 0.3s, filter 0.3s;
}

.footerSocialIcons svg path {
  fill: #ffffff;
}

.footerSocialIcons a:hover svg,
.footerSocialIcons a:hover img {
  transform: scale(1.2);
  filter: brightness(0) saturate(100%) invert(78%) sepia(41%) saturate(468%) hue-rotate(3deg) brightness(103%) contrast(104%);
}

.footerSocialIcons a:hover svg path {
  fill: #ffd04a;
}

/* --- Footer Map Section --- */
.footerMap iframe {
  width: 100%;
  border-radius: 6px;
  border: none;
}

/* --- Copyright Section --- */
.copyrightSection {
  background-color: rgba(0, 0, 0, 0.15);
  text-align: center;
  padding-top: 20px;
  font-size: 0.9rem;
  color: #ffffff;
}

/* --- Responsive Design --- */
@media (max-width: 767px) {
  .parisFooter {
    flex-direction: column;
    gap: 40px;
  }

  .footerMap iframe {
    height: 200px;
  }
}




/* Style the Login and Register buttons */

/* Shine Effect Button */

.buttons .btn{
    position: relative;
    padding: 8px 31px;
    font-size: 1.1rem;
    color: white;
    background: linear-gradient(45deg, #2563eb, #4f46e5);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid beige;
}
.buttons .btn-success{
    background: linear-gradient(45deg, #076821, #076821);
}


.buttons .btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -70%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transform: rotate(45deg) translateY(-100%);
    transition: transform 0.5s ease;
}

.buttons .btn:hover::before {
    transform: rotate(45deg) translateY(100%);
}












.ms-auto .btn {
  /*padding: 8px 20px;*/
  /*font-size: 15px;*/
  /*font-weight: 500;*/
  border-radius: 30px;
  /*transition: all 0.3s ease-in-out;*/
}

/* Login button - outline */
.ms-auto .btn-outline-primary {
  /*border: 2px solid #fca311;*/
  /*color: #fff;*/
  /*background-color: #fca311;*/
}

.ms-auto .btn-outline-primary:hover {
  background-color: #fca311;
  color: #fff;
}

/* Register button - solid success */
.ms-auto .btn-success {
  background-color: #28a745;
  border: 2px solid #28a745;
  color: #fff;
}

.ms-auto .btn-success:hover {
  background-color: #218838;
  border-color: #218838;
}


.header{
    margin: 0;
    background-color: #dddddd00;
    max-width: 100%;
    box-shadow: 0 0 13px 2px #0803035e;
    /*    position: fixed;*/
    /*top: 0;*/
    /*z-index: 1000;*/
    /*width: 100%;*/
    /*display: none;*/
}

#whats_side_links{
    right:2px;
    left:inherit !important;
        z-index: 1000;
}
#whats_side_links li a{
            background-color: #000 !important;
    margin-bottom: 20px;
    padding: 8px;
    border-radius:3px;
}
#whats_side_links li a img{
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(357deg) brightness(103%) contrast(101%);
         width: 21px;
    height: 21px;
}





/*------video-slide--------*/
.video-slide video{
    width: 100%;
}

.video-slide {
  position: relative;
  width: 100%;
  height: 100vh; /* Full screen height */
  overflow: hidden;
}

.video-slide video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Covers entire section */
  filter: brightness(25%); /* Adds shadow effect */
}

.video-slide .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* Optional extra dark layer */
  z-index: 1;
}

.video-slide .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: white;
  text-align: center;
  font-size: 3rem;
}












/*----------Side bar---------*/


.sidebar-popup {
    position: fixed;
    top: 0;
    left: 0;
    content: "";
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.sidebar-popup.open {
    visibility: visible;
    opacity: 1;
}

.sidebar-wrapper {
    position: fixed;
    top: 0;
    right: -100%;
    width: 450px;
    height:100vh;
    background: #eee;
    visibility: hidden;
    opacity: 0;
    /*padding: 40px;*/
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    z-index: 9999;
}

.sidebar-wrapper.open {
    right: 0;
    visibility: visible;
    opacity: 1;
}

.sidebar-content {
    position: relative;
    overflow-y: auto;
    /*height: calc(100vh - 75px);*/
}

.close-sidebar-popup {
        position: absolute;
    top: 12px;
    right: 20px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 55px;
    text-align: center;
    border: none;
    padding: 0;
    /* font-size: 20px; */
    background: var(--color-dark);
    color: #fff;
    box-shadow: var(--box-shadow);
    transition: all .5s ease-in-out;
}
.close-sidebar-popup i{
    font-size: 16px;
    font-weight: 900;
}

.close-sidebar-popup:hover {
    background: red;
}

.sidebar-logo img {
        width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
}

.sidebar-about {
    margin-top: 40px;
}

.sidebar-about h4 {
    margin-bottom: 10px;
}

/*.sidebar-contact {*/
/*    margin-top: 20px;*/
/*}*/

.sidebar-contact h4 {
    margin-bottom: 15px;
}

/*.sidebar-contact li {*/
/*    margin: 10px 0;*/
/*}*/

.sidebar-contact li i {
    margin-right: 5px;
    color: red;
}

.sidebar-contact li a:hover {
    color: red;
}

.sidebar-social {
    margin-top: 25px;
}

.sidebar-social h4 {
    margin-bottom: 20px;
}

.sidebar-social a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50px;
    margin-right: 8px;
    background: var(--color-dark);
    color: #fff;
    box-shadow: var(--box-shadow);
}

.sidebar-social a:hover {
    background: red;
}


.Side-btn{
    
        /*position: fixed;*/
    right: -4px;
    z-index: 100;
    background: #FF9800;
    top: 0;
    /*transform: rotate(90deg);*/
    color: #fff;
    padding: 6px 20px;
        border: 2px solid #5d4444;
    font-size: 18px;
        height: 34px;
    width: 37px;
   display:none;
    justify-content: center;
    align-items: center;
}
.Side-btn img{
        width: 22px;
    height: 22px;
    filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(2%) hue-rotate(210deg) brightness(101%) contrast(100%);
}

.close-sidebar{
        position: absolute;
    top: 12px;
    right: 16px;
    background-color: #000;
    color: #fff;
    width: 35px;
    height: 35px;
    font-weight: 900;
}