:root {

  /**
   * colors
   */

  --pale-purple-pantone: hsl(262, 63%, 92%);
  --medium-sea-green: hsl(152, 63%, 43%);
  --lavender-blush: hsl(336, 35%, 92%);
  --carolina-blue: hsl(204, 91%, 53%);
  --columbia-blue: hsl(204, 92%, 90%);
  --alice-blue-1: hsl(216, 38%, 95%);
  --alice-blue-2: hsl(216, 75%, 97%);
  --alice-blue-3: hsl(216, 38%, 95%);
  --alice-blue-4: hsl(217, 33%, 92%);
  --independence: hsl(219, 21%, 39%);
  --deep-cerise: hsl(329, 63%, 52%);
  --eerie-black: hsl(210, 11%, 15%);
  --space-cadet: hsl(240, 22%, 25%);
  --blue-jeans: hsl(204, 80%, 63%);
  --slate-blue: hsl(262, 60%, 57%);
  --beau-blue: hsl(208, 86%, 92%);
  --honey-dew: hsl(152, 48%, 89%);
  --mimi-pink: hsl(329, 63%, 90%);
  --red-salsa: hsl(0, 79%, 63%);
  --sapphire: hsl(211, 100%, 35%);
  --manatee: hsl(219, 14%, 60%);
  --white: hsl(0, 0%, 100%);

  --gradient: linear-gradient(to top, var(--alice-blue-2), var(--alice-blue-3));

  /**
   * typography
   */

  --ff-nunito: 'Nunito', sans-serif;
  --ff-open-sans: 'Open Sans', sans-serif;

  --fs-1: 2.125rem;
  --fs-2: 1.875rem;
  --fs-3: 1.5rem;
  --fs-4: 1.375rem;
  --fs-5: 1.125rem;
  --fs-6: 0.875rem;
  --fs-7: 0.625rem;

  --fw-400: 400;
  --fw-600: 600;

  /**
   * transition
   */

  --transition: 0.5s ease;

  /**
   * spacing
   */

  --section-padding: 50px;

  /**
   * radius
   */

  --radius-10: 10px;
  --radius-14: 14px;
  --radius-18: 18px;

  /**
   * shadow
   */

  --shadow-1: 3px 3px 9px hsla(240, 14%, 69%, 0.2);
  --shadow-2: 3px 3px 9px hsla(204, 92%, 59%, 0.3);

}





/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li { list-style: none; }

a { text-decoration: none; }

a,
img,
span,
label,
input,
button,
ion-icon { display: block; }

button,
input,select {
  background: none;
  border: none;
  font: inherit;
}

button { cursor: pointer; }

input { width: 100%; }

ion-icon { pointer-events: none; }

html {
  font-family: var(--ff-open-sans);
  color: var(--eerie-black);
  font-size: 1rem;
  line-height: 1.5;
  scroll-behavior: smooth;
}

body {
  background-color: #F8F8F7;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 15px;
  height: 10px;
}

::-webkit-scrollbar-track { background: var(--white); }

::-webkit-scrollbar-thumb {
  background: hsla(219, 14%, 60%, 0.3);
  border: 2px solid var(--white);
}

::-webkit-scrollbar-thumb:hover { background: hsla(219, 14%, 60%, 0.5); }





/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.container { padding-inline: 15px; }

button, a { transition: var(--transition); }

.btn {
  position: relative;
  background: #000;
  color: #fff;
  min-width: var(--width, 40px);
  min-height: var(--height, 40px);
  padding: 5px 10px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-14);
  font-family: var(--ff-nunito);
  font-size: var(--fs-6);
  font-weight: var(--fw-600);
  overflow: hidden;
}

.spacer{
  width: 100%;
  height: 100px;
}

.btn ion-icon {
  font-size: 22px;
  --ionicon-stroke-width: 40px;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, hsla(0, 0%, 100%, 0.4), transparent);
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
}

.btn:is(:hover, :focus) { box-shadow: var(--shadow-2); }

.btn:is(:hover, :focus)::before { opacity: 1; }

.section { padding-block: var(--section-padding); }

.h1,
.h2,
.h3 {
  color: var(--space-cadet);
  font-family: var(--ff-nunito);
  line-height: 1.4;
}

.h1 {
  font-size: var(--fs-1);
  text-transform: uppercase;
}

.h2,
.h3 { font-weight: var(--fw-400); }

.h2 { font-size: var(--fs-2); }

.h3 { font-size: var(--fs-4); }

.w-100 { width: 100%; }





/*-----------------------------------*\
  #HEADER
\*-----------------------------------*/

.header-contact { display: none; }

.header {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: var(--transition);
  z-index: 4;
  color: #000;
}

.header.active { box-shadow: var(--shadow-1); }

.header .container {
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-actions .btn span { display: none; }

.user-btn {
  --color: var(--independence);
  --background: var(--white);
  --shadow-2: var(--shadow-1);
  box-shadow: var(--shadow-1);
}

.nav-toggle-btn span {
  background: var(--independence);
  width: 22px;
  height: 2px;
  border-radius: 2px;
  margin-block: 8px;
  transform-origin: right;
  transition: var(--transition);
}

.nav-toggle-btn span.two { transform: scaleX(0.7); }

.nav-toggle-btn span.three { transform: scaleX(0.4); }

.nav-toggle-btn:is(:hover, :focus) span { background: var(--carolina-blue); }

.nav-toggle-btn.active span {
  transform: scaleX(1);
  background: var(--carolina-blue);
}

.navbar {
  background: var(--alice-blue-1);
  position: fixed;
  top: 70px;
  bottom: 0;
  right: -260px;
  max-width: 260px;
  width: 100%;
  padding: 20px 25px;
  border: 1px solid var(--white);
  box-shadow: var(--shadow-1);
  visibility: hidden;
  transition: 0.25s cubic-bezier(0.51, 0.03, 0.64, 0.28);
}

.navbar.active {
  visibility: visible;
  transform: translateX(-100%);
  transition: 0.5s cubic-bezier(0.33, 0.85, 0.56, 1.02);
}

.navbar-link {
  color: var(--independence);
  font-family: var(--ff-nunito);
  font-size: var(--fs-6);
  padding-block: 5px;
  margin-bottom: 15px;
}

.navbar-link:is(:hover, :focus) { color: var(--carolina-blue); }

.overlay {
  position: fixed;
  top: 70px;
  background: hsl(216, 38%, 95%);
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
}

.overlay.active {
  opacity: 0.7;
  pointer-events: all;
}





/*-----------------------------------*\
  #HERO
\*-----------------------------------*/

.hero { padding-top: 120px; }

.hero-title {
  max-width: 20ch;
  margin-bottom: 15px;
}

.hero-text {
  color: var(--independence);
  line-height: 1.8;
  margin-bottom: 30px;
}

.hero-banner { display: none; }

.hero-form {
  background: #fff;
  border: 1px solid var(--white);
  box-shadow: var(--shadow-1);
  border-radius: var(--radius-18);
  font-family: var(--ff-nunito);
}


.input-wrapper { padding: 15px 20px; }

.input-wrapper:not(:last-of-type) { border-bottom: 1px solid hsla(0, 0%, 0%, 0.08); }

.input-label {
  color: var(--manatee);
  font-size: var(--fs-6);
  margin-bottom: 10px;
}

.input-field {
  color: var(--space-cadet);
  outline: 2px solid transparent;
  outline-offset: 5px;
  border-radius: 4px;
  transition: var(--transition);
}

.input-field:focus { outline-color: var(--carolina-blue); }

.input-field::placeholder { color: var(--independence); }

.hero-form .btn {
  --width: calc(100% - 40px);
  --height: 50px;
  margin: 20px;
  text-transform: uppercase;
}






/*-----------------------------------*\
  #FEATURED CAR
\*-----------------------------------*/

.featured-car .title-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 15px;
  margin-bottom: 15px;
}

.title-wrapper h2 {
  text-decoration: underline;
  margin-top: 15px;
}

.featured-car-link {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--independence);
  font-size: var(--fs-6);
}

.featured-car-link span { transition: var(--transition); }

.featured-car-link:is(:hover, :focus) span { color: var(--space-cadet); }

.featured-car-link ion-icon {
  margin-top: 3px;
  transition: var(--transition);
}

.featured-car-link:is(:hover, :focus) ion-icon { color: var(--carolina-blue); }

.featured-car-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
}

.featured-car-card {
  background: #fff;
  border: 1px solid var(--white);
  border-radius: var(--radius-18);
  padding: 10px;
  box-shadow: var(--shadow-1);
}

.featured-car-card .card-banner {
  background: hsla(0, 0%, 0%, 0.2);
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-18);
  overflow: hidden;
}

.featured-car-card .card-banner > img {
  height: 100%;
  object-fit: cover;
}

.featured-car-card .card-content { padding: 20px 10px 10px; }

.featured-car-card .card-title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  margin-bottom: 15px;
}

.featured-car-card .card-title { width: calc(100% - 60px); }

.featured-car-card .card-title > a {
  color: inherit;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.featured-car-card .card-title > a:is(:hover, :focus) { color: var(--carolina-blue); }

.featured-car-card .year {
  font-family: var(--ff-nunito);
  font-size: var(--fs-6);
  font-weight: var(--fw-600);
  padding: 3px 12px;
  border: 2px dashed hsla(204, 91%, 53%, 0.4);
  border-radius: var(--radius-14);
}

.featured-car-card .card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
  margin-bottom: 15px;
}

.featured-car-card .card-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.featured-car-card .card-list-item ion-icon {
  font-size: 20px;
  color: var(--carolina-blue);
  --ionicon-stroke-width: 38px;
}

.featured-car-card .card-item-text {
  color: var(--independence);
  font-size: var(--fs-6);
}

.featured-car-card .card-price-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

.featured-car-card .card-price {
  font-family: var(--ff-nunito);
  font-size: var(--fs-6);
  color: var(--space-cadet);
}

.featured-car-card .card-price strong {
  font-size: var(--fs-3);
  font-weight: var(--fw-400);
}

.featured-car-card .btn:last-child {
  --height: 36px;
  min-width: 100%;
}

.featured-car-card .fav-btn {
  --background: var(--beau-blue);
  --color: var(--blue-jeans);
  --height: 36px;
  --width: 36px;
  --shadow-2: none;
}

.featured-car-card .fav-btn ion-icon { font-size: 18px; }

.featured-car-card .fav-btn:is(:hover, :focus) {
  --background: var(--lavender-blush);
  --color: var(--red-salsa);
}





/*-----------------------------------*\
  #GET START
\*-----------------------------------*/

.get-start .section-title { margin-bottom: 25px; }

.get-start-list {
  display: grid;
  gap: 20px;
}

.get-start-card {
  background: var(--white);
  padding: 20px;
  border-radius: var(--radius-18);
  border: 1px solid var(--white);
  transition: var(--transition);
}

.get-start-card:hover {
  background: var(--alice-blue-2);
  box-shadow: var(--shadow-1);
}

.get-start-card .card-icon {
  background: var(--icon-card-bg, var(--columnia-blue));
  color: var(--icon-card-color, var(--carolina-blue));
  height: 50px;
  width: 50px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-14);
  margin-bottom: 20px;
}

.get-start-card .card-icon ion-icon {
  font-size: 26px;
  --ionicon-stroke-width: 45px;
}

.get-start-card .icon-1 {
  --icon-card-bg: var(--mimi-pink);
  --icon-card-color: var(--deep-cerise);
}

.get-start-card .icon-2 {
  --icon-card-bg: var(--columbia-blue);
  --icon-card-color: var(--carolina-blue);
}

.get-start-card .icon-3 {
  --icon-card-bg: var(--honey-dew);
  --icon-card-color: var(--medium-sea-green);
}

.get-start-card .icon-4 {
  --icon-card-bg: var(--pale-purple-pantone);
  --icon-card-color: var(--slate-blue);
}

.get-start-card .card-title {
  color: var(--space-cadet);
  font-family: var(--ff-nunito);
  font-weight: var(--fw-400);
  margin-bottom: 15px;
}

.get-start-card .card-text { color: var(--independence); }

.get-start-card .card-link {
  position: relative;
  color: var(--carolina-blue);
  width: max-content;
}

.get-start-card .card-link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--carolina-blue);
  transition: var(--transition);
}

.get-start-card .card-link:is(:hover, :focus)::before { width: 100%; }





/*-----------------------------------*\
  #BLOG
\*-----------------------------------*/

.blog .section-title { margin-bottom: 15px; }

.blog-card {
  background: #fff;
  border-radius: var(--radius-18);
  border: 1px solid var(--white);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.blog-card .card-banner {
  aspect-ratio: 3 / 2;
  position: relative;
  overflow: hidden;
}

.blog-card .card-banner a:first-child { height: 100%; }

.blog-card .card-banner img {
  height: 100%;
  object-fit: cover;
}

.blog-card .card-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  --height: 30px;
  --width: 92px;
}

.blog-card .card-content { padding: 20px; }

.blog-card .card-title { margin-bottom: 10px; }

.blog-card .card-title > a { color: inherit; }

.blog-card .card-title > a:is(:hover, :focus) { color: var(--carolina-blue); }

.blog-card .card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-card :is(.publish-date, .comments) {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-6);
  color: var(--independence);
}

.blog-card :is(.publish-date, .comments) ion-icon {
  font-size: 15px;
  --ionicon-stroke-width: 50px;
}

.blog .has-scrollbar {
  display: flex;
  gap: 20px;
  scroll-snap-type: inline mandatory;
  overflow-x: auto;
  padding-bottom: 20px;
}

.blog .has-scrollbar > li {
  flex-shrink: 0;
  max-width: 330px;
  width: 100%;
  scroll-snap-align: start;
}

.has-scrollbar::-webkit-scrollbar-track {
  background: #000;
  outline: 2px solid #fff;
  border-radius: 10px;
}

.has-scrollbar::-webkit-scrollbar-thumb {
  border-color: #000;
  background: #fff;
  border-radius: 10px;
}

.has-scrollbar::-webkit-scrollbar-button { width: calc(25% - 40px); }





/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

.footer {
  background: #fff;
  color: var(--independence);
}

.footer a { color: inherit; }

.footer-top {
  padding-block: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  row-gap: 50px;
}

.footer-top .logo { margin-bottom: 20px; }

.footer-text {
  font-size: var(--fs-6);
  line-height: 1.8;
}

.footer-list { font-family: var(--ff-nunito); }

.footer-list:not(:last-of-type) { width: 50%; }

.footer-list:last-of-type {
  width: 100%;
  column-count: 2;
}

.footer-list-title {
  color: var(--space-cadet);
  font-weight: var(--fw-600);
  margin-bottom: 8px;
}

.footer-link {
  font-size: var(--fs-6);
  padding-block: 6px;
}

.footer-link:is(:hover, :focus) { color: var(--carolina-blue); }

.footer-list:last-child > li:first-child { column-span: all; }

.footer-bottom {
  background: #F1EFEA;
  border: 1px solid var(--white);
  border-radius: var(--radius-18) var(--radius-18) 0 0;
  padding: 20px;
}

.social-list {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.social-link { font-size: 20px; }

.social-link ion-icon { --ionicon-stroke-width: 40px; }

.social-link:is(:hover, :focus) { color: var(--carolina-blue); }

.copyright { font-size: var(--fs-6); }

.copyright > a { display: inline-block; }

.copyright > a:is(:hover, :focus) { color: var(--carolina-blue); }





/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

/**
 * responsive for large than 350px screen
 */

@media (min-width: 350px) {

  /**
   * FEATURED CAR
   */

  .featured-car-card .card-list { grid-template-columns: 1fr 1fr; }

  .featured-car-card .card-price { margin-right: auto; }

  .featured-car-card .btn:last-child {
    min-width: max-content;
    padding-inline: 15px;
  }

}





/**
 * responsive for large than 580px screen
 */

@media (min-width: 580px) {

  /**
   * REUSED STYLE
   */

  .container {
    max-width: 540px;
    margin-inline: auto;
  }



  /**
   * HEADER
   */

  .header-actions .btn span {
    display: block;
    font-weight: var(--fw-400);
    padding-inline: 15px;
  }

  .header-actions .btn:first-of-type ion-icon { display: none; }

}





/**
 * responsive for large than 768px screen
 */

@media (min-width: 768px) {

  /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
     * typography
     */

    --fs-1: 2.625rem;

  }



  /**
   * REUSED STYLE
   */

  .container { max-width: 720px; }



  /**
   * HEADER
   */

  .header-actions { gap: 30px; }

  .header-contact {
    display: block;
    text-align: center;
  }

  .header-contact .contact-link {
    color: var(--space-cadet);
    font-family: var(--ff-nunito);
    font-size: var(--fs-5);
    line-height: 1.3;
  }

  .header-contact .contact-link:is(:hover, :focus) { color: var(--carolina-blue); }

  .header-contact .contact-time {
    color: var(--independence);
    font-size: var(--fs-7);
  }



  /**
   * HERO
   */

  .hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    z-index: 1;
  }

  .hero-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 0.8fr;
  }

  .input-wrapper:not(:last-of-type) {
    border-bottom: none;
    border-right: 1px solid hsla(0, 0%, 0%, 0.08);
  }

  .input-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-banner {
    display: block;
    background: url("../images/banners/hero-banner.jpg") no-repeat;
    background-size: cover;
    background-position: left;
    position: absolute;
    top: 100px;
    bottom: 50px;
    left: 65%;
    width: 500px;
    border-radius: 30px;
    z-index: -1;
  }


  .full-screen-bg {
    width: 100%;
    height: 100vh; 
    background-position: center;
    background-size: cover; 
    background-repeat: no-repeat;
    display: flex;
    align-items: center; 
    justify-content: center; 
    text-align: center;
    color: white; 
}

.centered-bg-text {
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent layer for readability */
    border-radius: 8px;
}

.main-heading {
    font-size: 2.5rem;
}

.sub-text {
    font-size: 1.2rem;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .main-heading {
        font-size: 2rem;
    }

    .sub-text {
        font-size: 1rem;
    }
}

  /**
   * FEATURED CAR
   */

  .featured-car-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }



  /**
   * GET START
   */

  .get-start-list { grid-template-columns: 1fr 1fr; }



  /**
   * FOOTER
   */

  .footer-brand { width: 100%; }

  .footer-text { max-width: 400px; }

  .footer-bottom {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    padding-block: 30px;
    box-shadow: var(--shadow-1);
  }

  .social-list { margin-bottom: 0; }

}





/**
 * responsive for large than 992px screen
 */

@media (min-width: 992px) {

  /**
   * REUSED STYLE
   */

  .container { max-width: 960px; }



  /**
   * HERO
   */

  .hero .container { width: 100%; }



  /**
   * BLOG
   */

  .blog .has-scrollbar { padding-bottom: 50px; }

  .blog .has-scrollbar > li { max-width: 450px; }



  /**
   * FOOTER
   */

  .footer-list:not(:last-of-type) { width: 25%; }

  .footer-list:last-of-type { width: 50%; }

}





/**
 * responsive for large than 1200px screen
 */

@media (min-width: 1200px) {

  /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
     * typography
     */

    --fs-1: 2.875rem;
    --fs-2: 2rem;

  }



  /**
   * REUSED STYLE
   */

  .container { max-width: 1170px; }




  /**
   * HEADER
   */

  .overlay,
  .nav-toggle-btn { display: none; }

  .navbar,
  .navbar.active { all: unset; }

  .navbar-link {
    margin-bottom: 0;
    font-weight: var(--fw-600);
  }

  .navbar-list {
    display: flex;
    gap: 50px;
  }



  /**
   * HERO
   */

  .hero { min-height: 100vh; }

  .hero-banner {
    left: auto;
    right: 50px;
    width: 630px;
  }

  .hero-form { max-width: 900px; }

  .hero-form .btn {
    --width: calc(100% - 40px);
    --height: 50px;
    margin: 20px;
    text-transform: uppercase;
  }



  .search-form {
    background: #fff;
    border: 1px solid var(--white);
    box-shadow: var(--shadow-1);
    border-radius: var(--radius-18);
    font-family: var(--ff-nunito);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 0.8fr;
  }
  
  .search-form .btn {
    --width: calc(100% - 40px);
    --height: 50px;
    margin: 20px;
    text-transform: uppercase;
  }
  
  

  /**
   * FEATURED CAR 
   */

  .featured-car-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }



  /**
   * GET START
   */

  .get-start-list { grid-template-columns: repeat(4, 1fr); }



  /**
   * BLOG
   */

  .blog .has-scrollbar > li {
    max-width: 340px;
    scroll-snap-align: center;
  }



  /**
   * FOOTER
   */

  .footer-brand { width: 33.33%; }

  .footer-text { max-width: 35ch; }

  .footer-list:not(:last-of-type) { width: 16.66%; }

  .footer-list:last-of-type { width: 33.33%; }

}


/* auth */


.auth-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding: 20px;
  margin: 100px 0;
}

.left-section {
  width: 45%;
  padding: 20px;
  border-radius: 10px;
}

.right-section {
  width: 45%;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
}

h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
}

.auth-container [type="text"],
input[type="email"],
input[type="password"] {
  width: calc(50% - 10px);
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.checkbox-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.checkbox-label {
  margin-right: 8px; 
  flex: 0 0 auto;
}


.create-account-btn,
.google-btn {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.outline-btn {
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  border: 1px solid #007bff;
  background-color: transparent;
  color: #007bff;
  margin-bottom: 10px;
}

.create-account-btn {
  background-color: #000;
  color: #fff;
  border: none;
  margin-top: 10px;
}

.google-btn {
  background-color: #db4437;
  color: #fff;
  border: none;
  margin-bottom: 20px;
}

.google-btn:hover {
  background-color: #c1351d;
}

ul {
  list-style-type: none;
  padding: 0;
}

.new-class-before-auth li {
  border: none;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
}

.new-class-before-auth li img {
  border-radius: 50%;
  margin-right: 20px;
  width: 55px;
  height: 50px;
  object-fit: cover;
  background-position: center;

}

.new-class-before-auth li h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

@media only screen and (max-width: 768px) {
  .auth-container {
      flex-direction: column;
      align-items: center;
  }

  .left-section,
  .right-section {
      width: 100%;
  }
}

/* chips */

.chip {
  display: none;
}

.chip + label {
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  font-size: 11px;
  cursor: pointer;
  border-radius: 50px;
  background-color: #fff;
  border:solid 1px #7d7d7d;
  padding: 0.2rem 0.5rem;
  display: inline-block;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 5px;
}


.chip:checked + label {
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  background-color: #000; color: #fff; border-color:#fff;
}


/* detail*/

.detail-banner {
  width: 100%;
  height: 80vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 30px;
  margin: 30px auto;
  position: relative;
  border: 1px solid hsla(0, 0%, 0%, 0.08);
}

.detail-txt{
  position: absolute;
  color: #000;
  top: 50vh;
  right: 5vh;
}

.detail-txt h2 {
  font-size: 35px;
}


/* Media query variables */
/* Media query variables */
:root {
  --gl-ms: screen and (max-width: 23.5em);
  --gl-xs: screen and (max-width: 35.5em);
  --gl-sm: screen and (max-width: 48em);
  --gl-md: screen and (max-width: 64em);
  --gl-lg: screen and (max-width: 80em);
}

/* Table style */
.detail-table {
  border-spacing: 1;
  border-collapse: collapse;
  background: white;
  border-radius: 6px;
  overflow: hidden;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.detail-table * {
  position: relative;
}

.detail-table td,
.detail-table th {
  padding-left: 8px;
}


.detail-table thead tr {
  height: 60px;
  background: #e7e7e4;
  font-size: 15px;
  font-weight: 600;
}

.detail-table tbody tr {
  height: 48px;
  border-bottom: 1px solid #e3f1d5;
}

.detail-table tbody tr:last-child {
  border: 0;
}

.detail-table td,
.detail-table th {
  text-align: left;
}

.detail-table td.l,
.detail-table th.l {
  text-align: right;
}

.detail-table td.c,
.detail-table th.c {
  text-align: center;
}

.detail-table td.r,
.detail-table th.r {
  text-align: center;
}

/* Media query */
@media (max-width: 35.5em) {
  .detail-table {
    display: block;
  }

  .detail-table > *,
  .detail-table tr,
  .detail-table td,
  .detail-table th {
    display: block;
  }

  .detail-table thead {
    display: none;
  }

  .detail-table tbody tr {
    height: auto;
    padding: 8px 0;
  }

  .detail-table td {
    padding-left: 45%;
    margin-bottom: 12px;
  }

  .detail-table td:last-child {
    margin-bottom: 0;
  }

  .detail-table td:before {
    position: absolute;
    font-weight: 700;
    width: 40%;
    left: 10px;
    top: 0;
  }

  .detail-table td:nth-child(1):before {
    content: "Caractéristique";
  }

  .detail-table td:nth-child(2):before {
    content: "Valeur";
  }

  .detail-table td:nth-child(3):before {
    content: "Caractéristique";
  }

  .detail-table td:nth-child(4):before {
    content: "Valeur";
  }

  .detail-table td:nth-child(5):before {
    content: "Caractéristique";
  }
}

.t-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 25px;
}

.resa-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.resa-links a {
  padding: 7px;
  border-radius: 25px;
  color: #000;
  border: 1px solid #d3d3d3;
  font-size: 13px;
}

.resa-links .selected {
  border: 2px solid #000;
}

.resa-links .selected a {
  font-weight: 600;
}

/* reservation list*/

.booking-container {
  width:80%;
  margin: auto;
  display: flex;
  align-items: flex-start;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.booking-image {
  flex: 0 0 200px; /* Fixed width for the image */
  margin-right: 20px;
  border-radius: 8px;
}

.booking-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.booking-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.booking-description {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

.booking-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}

.booking-chip {
  background-color: #f0f0f0;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 14px;
  color: #555;
}

.booking-dates {
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.booking-price {
  font-size: 20px;
  font-weight: bold;
  color: #ff5a5f;
  margin-bottom: 10px;
}

.more-info-btn {
  background-color: #ff5a5f;
  color: #fff;
  padding: 10px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
  margin-bottom: 10px;
}

.more-info-btn:hover {
  background-color: #e04d52;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  margin-top: auto;
}

.user-name {
  font-weight: bold;
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}

.user-bio {
  font-size: 14px;
  color: #666;
}

@media (max-width: 768px) {
  .booking-container {
      flex-direction: column;
      width:100%;
  }

  .booking-image {
      margin-bottom: 20px;
      width: 100% !important;
  }
}

/* pagination*/
.pagination {
  margin-top: 20px;
  text-align: center;
}

.pagination ul {
  display: inline-block;
  padding: 0;
  margin: 0;
}

.pagination ul li {
  display: inline;
  list-style-type: none;
}

.pagination ul li a,
.pagination ul li.disabled {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #ccc;
  color: #333;
  text-decoration: none;
  cursor: pointer;
  margin-right: 5px;
}

.pagination ul li.active a {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

/* calendar */

.fc-day {
  padding: 10px;
  border: 1px solid #ddd;
}

.fc-event {
  background-color: #3788d8;
  color: white;
  padding: 5px;
  border-radius: 3px;
  cursor: pointer;
}

.fc-event:hover {
  background-color: #3071b9;
}

.p-block {
  margin-top: 10px;
  padding-top: 10px;
}

/* client dropdown */

.dropdown {
  display: none;
  position: absolute;
  background-color: #fff;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 10px;
  z-index: 1;
  min-width: 200px; 
  top: calc(100% + 30px); 
  left: -120px; 
  border-radius: 25px;
}

.dropdown a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
  width: 100%; /* Expand the link horizontally */
}

.dropdown a:hover {
  background-color: #f9f9f9;
}

.separator {
  height: 1px;
  background-color: #ccc;
  margin: 5px 0;
}

.drop-container {
  position: relative;
}


/* categories */

.categories-container {
  width: 100%;
  overflow-x: auto; /* Enable horizontal scrolling */
  white-space: nowrap; /* Prevent items from wrapping */
  padding: 20px 0;
  position: fixed;
  position: relative;
  margin: auto;
  text-align: center;
}

.category {
  display: inline-block;
  width: 95px;
  padding: 5px;
  margin-right: 30px;
  border-radius: 10px;
  background-color: #f0f0f0;
  text-align: center;
}

.category img {
  width: 100%;
  border-radius: 10%; 
}

.category p {
  margin-top: 7px;
  font-weight: bold;
  font-size: 12px;
  color: #000;
}

.btn-sec {
  position: relative;
  background: #e4bb07;
  color: #fff;
  min-width: var(--width, 40px);
  min-height: var(--height, 40px);
  padding: 5px 10px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-14);
  font-family: var(--ff-nunito);
  font-size: var(--fs-6);
  font-weight: var(--fw-600);
  overflow: hidden;
}


/* notifs */

.notif-container {
  width: 50%;
  margin: auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 20px;
}

@media (max-width: 767px) {
  .notif-container {
      width: 95%; 
  }
}

.notification-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #ccc;
}

.notification-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 15px;
}

.notification-content {
  flex: 1;
}

.notification-message {
  font-size: 16px;
  margin: 0;
}

.notification-date {
  font-size: 14px;
  color: #888;
  margin: 5px 0 0;
}

.close-btn {
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 20px;
  color: #888;
}

/* detail modal */

.resa-det {
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.r-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.dec-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.reqauthpop-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.r-modal {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  z-index: 9999;
  width: 60%;
  margin: 30px auto;
  max-height: 540px;
  overflow-y: scroll;
}

.r2-modal {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  z-index: 9999;
  width: 30%;
  margin: 30px auto;
  max-height: 300px;
  overflow-y: scroll;
}

.resa-det .close-modal {
  background-color: #ff5a5f;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.resa-det .close-modal:hover {
  background-color: #ff3336;
}

.resa-det p {
  font-size: 15px;
  color: #888;
}

/* chat */




.chat-container {
        display: flex;
        height: 85vh;
        width: 70%;
        margin: auto;
        border-radius: 15px;
        overflow-x: scroll;
    }

    
    .conversation-list {
        flex-basis: 300px;
        background-color: #fff;
        border-right: 1px solid #ddd;
        overflow-y: auto;
    }
    .conversation-list h2 {
        margin: 0;
        padding: 10px 10px;
        font-size: 20px;
        border-bottom: 1px solid #ddd;
    }
    .conversation-list ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    .conversation-list li {
        padding: 5px;
        border-bottom: 1px solid #ddd;
        cursor: pointer;
        transition: background-color 0.3s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .conversation-list li:hover {
        background-color: #f9f9f9;
    }
    .conversation-list li:last-child {
        border-bottom: none;
    }
    .username {
        font-weight: bold;
        margin-bottom: 5px;
    }
    .last-message {
        color: #777;
        margin-bottom: 5px;
    }
    .last-datetime {
        color: #999;
        font-size: 12px;
    }
    .chat-area {
        flex: 1;
        background-color: #fff;
        overflow-y: auto;
    }
    .messages {
        display: flex;
        flex-direction: column;
        padding: 20px;
        height: 430px;
        overflow: scroll;
    }
    .message {
        background-color: #f0f0f0;
        border-radius: 10px;
        padding: 10px 15px;
        margin-bottom: 10px;
        word-wrap: break-word;
        align-self: flex-start;
    }
    .message.sent {
        background-color: #0077b6;
        color: #fff;
        align-self: flex-end;
    }
    .message.sent:last-child {
        margin-bottom: 10px;
    }
    .type-box {
        background-color: #fff;
        padding: 20px;
        border-top: 1px solid #ddd;
        position: relative;
    }
    .type-box input[type="text"] {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 20px;
        outline: none;
    }
    .type-box input[type="text"]::placeholder {
        color: #999;
    }
    .type-box button {
        padding: 10px;
        border: none;
        background-color: #0077b6;
        color: #fff;
        border-radius: 20px;
        cursor: pointer;
        transition: background-color 0.3s;
        position: absolute;
        right: 10px;
    }
    .type-box button:hover {
        background-color: #005689;
    }

    @media (max-width: 700px) {
      .chat-container {
       width: 100%;
       overflow-x: scroll;
      }
      .chat-area {
        overflow: scroll;
        width: 100%;
      }
   }
    
   .book-left {
    width: 52%;
   }

   .promo-badge {
    width: 120px;
    padding:3px;
    margin-bottom: 10px;
    color: #fff;
    background-color: rgb(240, 9, 9);
    font-size: 11px;
    border-radius: 10px;
    text-align: center;
   }

   .option-card {
    width: 100%;
    background-color: #f9f9f9;
    border-radius: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 15px;
  }

  .toggle-i-desc {
    display: none;
    margin-top: 10px;
 }

 .stripe-button-el {
  width: 100%;
  border-radius: 14px;
  margin-bottom: 10px;
 }

   .book-right {
    width: 40%;
   }

   #VRevForm {
    display: none;
   }

   @media (max-width: 700px) {
    .book-left {
      width: 100%;
     }
  
     .book-right {
      width: 100%;
      margin-top: 50px;
     }
 }

 .pDet > li{
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .card {
  width: 100%;
  max-width: 700px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  box-sizing: border-box;
}

.ycard {
  width: 100%;
  max-width: 700px;
  background-color: transparent;
  padding: 20px;
  box-sizing: border-box;
}


.xcard {
  width: 100%;
  background-color: #f9f9f9;
  border-radius: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  box-sizing: border-box;
}



.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.title {
  font-weight: bold;
}

.description {
  color: #555;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.toggle-switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: #2196F3;
}

input:checked + .toggle-slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.toggle-slider.round {
  border-radius: 34px;
}

.toggle-slider.round:before {
  border-radius: 50%;
}

/**/

.card-header {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.card-body {
  padding: 20px;
}

.dve-list li{
  list-style-type:circle;
  margin: 15px;
}

.circle {
  width: 50px;
  height: 50px;
  margin: auto;
  padding: 25px;
  border-radius: 50%;
  background-color: #d3d3d3;
  color: white;
  font-size: 16px; /* Adjust font size as needed */
  line-height: 1; /* Ensure text stays centered vertically */
  white-space: nowrap; /* Prevent text from wrapping */
  overflow: hidden; /* Hide overflow text */
  text-overflow: ellipsis; /* Show ellipsis for overflow text */
}
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 5px;
}
.alert-success {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}
.alert-danger {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

.star {
  cursor: pointer;
  font-size: 25px;
  color: #ccc;
  display: inline-block;
}


.selected-star {
  color: gold; /* Change to the color you want to indicate selected stars */
}


/* hero*/

.dop-hero {
  background-color:#1C1F20;
 /* height: 500px;*/
  border-radius: 30px;
  padding: 60px;
}

.dop-row{
  display:flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}



.drpl {
  width: 50%;
  color: #fff;
}

.drpr {
  width: 40%;
  color: #fff;
}

.drpr img {
  height: 400px;
  border-radius: 30px;
  margin: auto;
}

.dpboxwrapper{
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.rec-links-wrapper {
  border-right: 1px solid #E5E5E2;
  position: fixed;
  top: 100px;
}

.rec-links-wrapper a {
  padding: 15px;
  color: #36393a;
  text-decoration: underline;
}

.dpbox {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 50%;
  margin-top: 40px;
}

.icbox {
  background-color: #35393A;
  padding: 10px;
  border-radius: 7px;
  font-size: 20px;
}

.dpbox p {
  font-size: 14px;
  color: #f1efea;
}

.divider-light{
  height: 1px;
  width: 100%;
  background-color: #656565;
  margin-top: 40px;
  margin-bottom: 30px;
}

.divider-s{
  height: 1px;
  width: 100%;
  background-color: #d3d3d3;
  margin: 10px 0;
}

.app-s-box {

}

@media (max-width: 768px) {
  .auth-pro-cont {
    flex-direction: column !important;
  }
  .auth-pro-cont .ls {
    width: 100% !important;
  }
  .auth-pro-cont .rs {
    width: 100% !important;
  }
}
@media (max-width: 768px) {
  .drpl,.dpbox,.rec-content {
   width: 100%;
  }
  .rec-links-wrapper {
    position: relative;
  }
  
}

.hlink-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 50px;
  gap: 40px;
}

.hbl {
  width: 90%;
  margin-top: 15px;
}

.divider-link{
  height: 1px;
  background-color: #E5E5E2;
  margin-top: 20px;
}

.hlink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  color: #1c1f20;
}

.rec-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
  margin-top: 30px;
  position: relative;
}

.rec-content {
  width: 75%;
}

.cr-tech-table {
  border-collapse: collapse; 
  background-color: white;
  border-radius: 10px;
  width: 100%;
  margin-top: 15px;
}
.cr-tech-table th, .cr-tech-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.cr-tech-table th {
  background-color: #f2f2f2; 
}
.cr-tech-table tbody tr:last-child td {
  border-bottom: none; 
}

.auth-pro-cont {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.auth-pro-cont .ls {
 padding: 200px 50px;
 width: 50%;
}

.auth-pro-cont .rs {
  background-image: url("../images/banners/become_pesta.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 50%;
  height: 100vh;
 }

 
 .fisha {
  width:100%;
  display:flex;
  flex-wrap: wrap;
 }

 .fisha table {
  width: 70%;
 }

 .fisha .agent-fishe {
  width:30%;
 }

 @media (max-width: 700px) {
 .fisha table {
   width: 100%;
   margin-top: 30px;
 }
  .fisha .agent-fishe {
    width:100%;
  }
 }


 .avatar-container {
  width: 130px;
  height: 130px;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-initials p {
  font-size: 80px;
  font-weight: 900;
  text-transform: uppercase;
}

.comments-holder {
 display: flex;
 gap: 15px;
}

.info-client-card{
  width: 60%;
  margin-left: 60px;
}

.p-cmnth {
  width: 60%;
  margin-left: 60px;
}

.info-client-card a {
  width: 200px;
}

.divider {
  width: 100%;
  background-color: #d4edda;
  height: 2px;
  margin: 20px 0;
}

.profile-avatar-card {
  background: #fff;
  border: 1px solid var(--white);
  border-radius: var(--radius-18);
  padding: 20px;
  box-shadow: var(--shadow-1);
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.verification-card {
  background: transparent;
  border: 1px solid #d3d3d3;
  border-radius: var(--radius-18);
  padding: 20px;
  box-shadow: var(--shadow-1);
  width: 30%;
  height: 230px;
}

.check-verif ion-icon{
   font-size: 22px;
   font-weight: 700;
   color: green;
}

.rating-stars-cm {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  justify-content: start;
}

.rating-stars-cm ion-icon {
  color: gold;
}


.comment-card {
  background: #fff;
  border-radius: var(--radius-18);
  padding: 20px;
  box-shadow: var(--shadow-1);
  height: 180px;
  overflow: scroll;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.check-verif {
  display:flex;
  margin-top: 15px;
  font-size: 15px;
  gap: 10px;
  align-items: center;
}

.profile-header-holder, .profile-note-holder {
  display:flex;width:100%;
  margin-top: 20px;
}

@media (max-width: 700px) {
  .profile-header-holder, .profile-note-holder, .comments-holder {
    flex-direction: column;
  }
  .profile-avatar-card, .info-client-card, .verification-card, .comment-card, .comments-holder, .p-cmnth {
    width: 100%;
  }

  .info-client-card, .p-cmnth, .p-cmnth {
    margin: 15px 0;
  }
}

.profile-avatar-card p {
  font-size: 14px;
  font-weight: 600;
}
 

.cmnt-bot p{
  font-size: 13px;
  color: #d3d3d3;
}


.row::after {
  content: "";
  clear: both;
  display: table;
}

/* Row styling */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: -15px; /* Negative margin to counteract padding of columns */
}

/* Column styling */
.col-md-3, .col-md-6, .col-md-4, .col-md-8, .col-md-12 {
  padding: 15px; /* Padding for columns */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.col-md-3 {
  flex: 0 0 25%; /* Column width for medium devices */
  max-width: 25%;
}

.col-md-12 {
  flex: 0 0 100%; /* Column width for medium devices */
  max-width: 100%;
}

.col-md-8 {
  flex: 0 0 60%; /* Column width for medium devices */
  max-width: 60%;
}

.col-md-6 {
  flex: 0 0 50%; /* Column width for medium devices */
  max-width: 50%;
}

.col-md-4 {
  flex: 0 0 33.3333%; /* Column width for medium devices */
  max-width: 33.3333%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .col-md-3, .col-md-6, .col-md-4, .col-md-8, .col-md-12 {
    flex: 0 0 100%; /* Full width for smaller devices */
    max-width: 100%;
  }
}

.input-row {
  display: flex;
  justify-content: space-between;
  margin: 30px 0;
}

.input-container {
  flex: 1;
  margin-right: 20px;
}

.input-field {
  width: 100%;
  border: none;
  border-bottom: 1px solid #ccc;
  outline: none;
  padding: 5px 0;
}

.input-field::placeholder {
  color: #ccc;
  font-size: 15px;
}

.input-label {
  font-weight: bold;
  margin-bottom: 5px;
}



.language-container {
  display: inline-block;
  margin-right: 10px;
}

.language-container input[type="checkbox"] {
  display: none;
}

.language-container label {
  display: inline-block;
  padding: 0 10px;
  height: 35px;
  background-color: #ccc;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  line-height: 35px;
  font-size: 15px;
  color: #fff;
}

/* Change color of checked radio */
.language-container input[type="checkbox"]:checked + label {
  background-color: #009688;
}

.accept-t {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 13px;
}

.accept-t ion-icon {
  font-size: 23px;
}


.filter-wrapper {
  padding: 15px;
  border: 1px solid #E7E7E7;
  border-radius: 10px;
  background-color: #fff;
}

.filter-divider {
  height: 1px;
  background-color: #E7E7E7;
  margin: 15px 0;
}

.d-a {
  text-decoration: underline;
  font-size: 15px;
}

.filter-checkbox {
   font-size: 13px;
   color: #666;
   margin-top: 10px;
}

.filter-checkbox input {
    transform: scale(1.5);

}

.filter-item, .filter-checkbox {
  display:flex;align-items:center; justify-content:start;gap: 10px;

}

/**/

.dest {
  border: 2px solid #FFB700;border-radius:10px;margin:40px 0;padding:10px;
 
}


.filter-body{
  display:block;
}
.car-listing {
  display: flex;
  border: 1px solid #E7E7E7;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  height: 200px;
}

.car-image {
  flex: 2;
}

.car-image img {
  width: 100%;
  height: auto;
}

.car-details {
  flex: 2;
  padding: 20px;
}

.car-details h4 {
  margin-bottom: 10px;
  color: #333;
  font-weight: 700;
}

.car-details ul {
  list-style: none;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.car-details ul li {
  color: #666;
  display: flex;
  align-items: center;
  font-size: 13px;
  gap: 10px;
}

.car-price {
  flex: 3/2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: end;
  padding: 20px;
  background-color: #fff;
}

.price {
  margin-bottom: 15px;
}

.original-price {
  text-decoration: line-through;
  color: #ff5722;
  text-align: right;
}

.reduced-price {
  font-size: 20px;
  font-weight: 700;
  text-align: right;

}


@media (max-width: 768px) {
  .car-listing {
    flex-direction: column;
    height: auto;
  }
  .filter-body{
    display:none;
  }
  .detail-banner{
    height: 50vh;
  }
  .centered-bg-text {
    padding: 20px;
    color: #fff;
  }
  .sub-text{
    margin-top: 15px;
  }
  .popup{
    top: 50%;
    width:90%;
  }
  .drpr img {
    height: 300px;
    margin: 20px auto;
  }
  .r-modal, .r2-modal {
    width: 95% !important;
  }
  .conversation-list{
    flex-basis: 160px !important;
  }

  .car-details ul {
    justify-content: space-between;
  }
  .car-image,
  .car-details,
  .car-price {
    width: 100%;
  }
}

.add-v-astuce {
  display:flex;align-items:center;justify-content:center;gap:5px
}

.add-v-astuce ion-icon{
   color:#3AA4FF;
   font-size: 25px;
}

.muted {
  color: #666666;
  font-size: 15px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.muted-text {
  color: #272424;
  font-size: 13px;
  margin-bottom: 20px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}


.muted-2 {
  color: #666666;
  font-size: 15px;
  margin-top: 10px;
  margin-bottom: 5px;
}

.add-v-astuce-c {
  padding: 15px;
  background-color: #EAF0FF;
  margin-top: 15px;
  border-radius: 10px;
  font-size: 14px;
}

.mat-grp {
 margin-bottom: 10px;
}

.mat-grp label {
  margin-bottom: 5px;
}

.mat-input {
  border: 1px solid #d3d3d3;
  padding: 7px;
  border-radius: 10px;
  width: 100%;
}

.popup {
  display: none;
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.discount-field{
  background-color: #F2F6FD;
  padding: 8px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border: 1px solid #d3d3d3;
}

.discount-btn {
  position: relative;
  background: #000;
  color: #fff;
  min-width: var(--width, 40px);
  padding: 10px 20px;  
  display: grid;
  place-items: center;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  font-family: var(--ff-nunito);
  font-size: var(--fs-6);
  font-weight: var(--fw-600);
  overflow: hidden;
  text-align: center;
}

.p-links {
  margin-top: 10px;
}

.p-links a, .TOC1, .TOC2, .TOC3 {
  text-decoration: underline;
  margin-top: 5px;
}

.prlist {
  padding: 20px;
}
.prlist li{
  list-style-type: disc;
  margin-top: 10px;
}

.ps {
  margin: 15px 0;
}

.dropbtn {
  
  border: none;
  cursor: pointer;
}

.dropdown-cur {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown-cur:hover .dropdown-content {
  display: block;
}

.dropdown-cur:hover .dropbtn {
  color: #007bff;
}

.amex {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAeCAMAAABdem3zAAAAA3NCSVQICAjb4U/gAAACi1BMVEUAAAAAAAAAdKIAdqcGdqoDeqkDeKoDe6sFeqoFeqwCeqoGe6wGeasGeqwGe6wFeqwFeqwFeqsGe6oFeawEeqwEeqwFe6wHeaoFe6oFeasFe6wFeawHe6wIfKwJfKwKfa0Lfa0Mfq0Of64Pf64QgK8RgK8Sga8TgbAUgrAVgrAWg7EXg7EYhLEZhLIahbIbhbIdhrMfh7QgiLQhiLQjirUkirUli7YnjLYojLcqjbcsj7gtj7kukLkvkLkwkbkxkboykrozkro0k7s1k7s2lLs3lLw4lbw5lbw6lr07lr08l709l75Amb9Bmr9Dm8BFnMBHncFIncFJnsJKnsJLn8JMn8NNoMNOocRPocRQosRRosVUpMZVpMZWpcZXpcdYpsdZp8dap8dbqMheqclgqslhq8pjrMpkrMtnrsxpr8xqr81tsc5vss5wss9xs89ztNB0tdB1ttF6uNJ8udN9utN+utR/u9SAu9SBvNWCvNWDvdWEvdWGvtaHv9aIv9eKwNeMwdiPw9mQw9mRxNqTxdqUxtuVx9uWx9yXyNyYyNyZyd2ayd2byt2cyt6dy96fzN+gzN+hzd+izeCjzuCkzuCn0OGp0eKq0eKr0uOs0+Ot0+Ov1OSw1eSy1uWz1uW01+W32Oa62ui72+i82+i+3Om/3enC3urE3+vF4OvH4ezI4uzJ4u3K4+3L4+3N5O7O5e7P5e/R5u/S5/DT5/DV6PHW6fHX6fHY6vHa6/Lb7PPc7PPd7fPe7fTf7vTg7vTi7/Xj8PXk8fbm8vbn8vfo8/fp8/fq9Pjr9Pjs9fjt9fnu9vnv9vnw9/rx9/ry+Prz+Pv0+fv1+fv2+vz4+/z5+/37/P38/f7+/v7///+B6xdgAAAAHHRSTlMAARYaJ0FIT1pcYG6YmZyssrPDys3T2tvt9PX+1nJQbwAAAnFJREFUOMtjYOAWESMWiAqwMzBwyZAEOBn4SdMgzCBImgYJUjVI0UeDkoGBrq6BgZ6MhgECqAA56nJ6ICZIWN3AQAeuoevIrvOHDuy6ZLl1366ru3ft2nVl167dJ08cOXHo/P6Dl3Yd33Nm15mdJw+thGnQO2ei2nzDRaZp405Zmd2KxhYWW2TMTeUmJOWv0NOPKVJ1uNEi4329LByuoXKaabvZNZcQw8u5IUANrYuX7pA5eNSxJCk/OPfGBe2ZKotbnAw6kTSs8Axslpnh0mtRr74YqME7LGaHjI6G4uakfOfGG21q3c5hLf7TNDMQGhqUMjN9vFz6O2TCjgA11M+Zs13m4oXIvKT8bOs+i7DMNJks/xuhcggNKQ3b+vfGpS65kLTqVNyRpLi4uP1xl6d09jRPPF+blHC29WB+SsX5PXF1cA0lE/1lWiZOnFg2saZrIgxkgojiyr6JZTLxQFZ5ycSJpRTHdOAmMMiM2Agk103esGnTxiWzwELTVwOJyes29aFqiFtrCQR+x05FuVpaWqcfA3I8FlQDyandjpaWh5KtLI3RNCxTA8ZypHewb7vNrvWKk2QW7wiIzU3YteusXtXWrQvllm+diK5BRl6+4JyW2omJ2qkRiqtknN2VF+UCxWbmKCi5b3GU1fRE16B+4cK5RCe3pH6z6bP3nZOZsyYoMzftwsWrp4+skZt/4kA1mqfjVqgAgcORw/Z23kejg86r7JxXm1AIFOqzVdFLAEoahaNqiDgMBplZQGKNjC6QbD0MA3vmAomN5XTLcaQASQZe0jSIM3CQpoGPgZFHmgT1QkwMDAzMrOxEAjYWBgYAvI9h1MHdhQIAAAAASUVORK5CYII=") #fff;
}

.visa {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAeCAMAAABdem3zAAAAA3NCSVQICAjb4U/gAAABvFBMVEUAAADQ0NDa2tra2trZ2dnY2Nja2trt7e3t7e0mM3onNHspNXkqN30rN30sOH4tN3ovO4AwPIAyPoE1QYM3Q4Q4Q4U4RIU5RYY8R4g9SIhCTYtDToxGUY5HUo5JU49JVJBOWJJQW5RSXJVTXZZVX5dXYZhYYplaY5pfaJ1kbaBlbqFoaZFocaNpcqNqc6RtdqZvd6dzcpV0fKp2f6x5ga18g698hK99hK99hbB+hrCAh7GDi7OHjrWIj7aJkLeNk7mNlLqOlbqRl7yUmr6WnL6YnsCbocKepMSjqMekqceprsqrsMysscytss2uss2xts+xttC0uNG1udK1utK2utK3u9O6vdS7v9W8wNa9wda9wdfBxNnDx9rEx9vFyNzFydvHy93Kzd/Mz+DR0+LS1OPT1uTVnV/V1+XX2ebY2NjZuJbZ2+faoVza3Ojc3+rf4evf4ezi5O7j5e7n6fHp6/Lq6/Lr7PPsmC3snTfs7fPunjnu7/Tu7/Xw8fbx8vfy8/f09fj09fn19vn29/r3z5332LH39/r42LD42bL42bP5+fv76tX77dz7+/v7+/387dv9/f7+9ev//v3///9+dhG/AAAACXRSTlMAGxuq7e7u+vsOT6YMAAABbklEQVQ4y+WUV1cTYRQAlwSIsxoLltgLKgZ7AwV777FiL9gT1x4FGxpb0Gg0On/YBx83D+wz8z7nu+fe800QpNKtpTHSmk4FQUt7pu4YqWfaW4L0BBOQSQdt9SRCvS0omYjSOBZ+fB0d/f5T/VQoDHi6cF4b1/Zt6d9fUZ+cLFyMvfDny6vhN3/1EOwegW4/LAHgpb6bBpNr8ZE2PBz+rQvIvrgJ2+2DdaeOba7pXoBbceHAxHvfHIRNHoHjLobLqlZnkIeDcaHIlAeuh6Jb4bb9EG58rh6G4nTWNNnSHFYNZcnrcsKK1d4Qpl63MY9lrmRmE6GHcCdc0Q7mqt5ZAfM9C7uKvfA0LlyASSzUt7Daz+pIyGw7+c+JuPAxCxzV+7DHrq5tOzqhbxA6crlcSE+TS+dhVk0vwRk7AFhb64a76lIWva7EhKEoKqvvo6jqs6sD526UNYoeq5ajR78a4/k/JM5M4pAlTGUqSBrjf5znrWNE0ZcCAAAAAElFTkSuQmCC") #fff;
}

.mastercard {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAeCAMAAABdem3zAAAAA3NCSVQICAjb4U/gAAACc1BMVEUAAADQ0NDa2tra2trZ2dnY2Nja2trt7e3t7e3MAADMAQHMBATNCQnOCwvODAzODg7PDwnPERHRGxvSFgfSHh7SHx/SIB7THhDTJCTTJibTJyfUKSnVIAXVLS3VMDDWMjLWNTXWNjbXIQDXLyLXNS7XNzfXOzvYLxbYPT3YPj7Y2NjZOy/ZRUXaSEjaSUnbLQDbLgDbS0vbTU3cSj/cU1PdNADdSjTdVVXdVlbeNwDeW1vfYmLgUDPgZWXgZmbgaGjhXkvhamrhbW3ia2Lib2/jXDfja1njdXXkeHjkeXnke3vlgIDlgYHmg4PmhITmhobnh4fniIjni4voVgDojIzokJDqXADqaiTqlpbqmJjqmZnqmprrnJzrn5/tpqbuqqrura3urq7vsbHvsrLvs7PwbADwbQDwtLTwtbXwt7fxvLzycgDyjULyvr7yv7/zdQDzmVvzn2fzxMTzxcXzx8f2fwD21tb3gQD3x6/3ybL32Nj4hAD43t7439/44OD5iQD54eH54uL65ub65+f76+v7+/v88vL89PT99/f9+Pj9+fn+lwD+/f3/mQD/mgT/nQv/nw//oRT/oRX/oRb/ohj/qCf/qSn/qSr/qy3/rDH/rjX/rjb/sT7/sj//s0L/tEX/tUf/tUj/tkn/t0v/uVD/uVH/u1X/vFj/vVr/vl7/v2H/w2n/xGz/x3P/yHb/yXr/zob/z4j/0Iv/1Zj/1pr/153/2J7/26X/3q7/4LL/4LP/4bX/4bb/5cD/5sL/58P/58T/58X/6sz/7NH/7dL/8d7/8t//9OX/9eb/9ef/9ur/9+v/+vT/+/X//Pj//fz///90HdR0AAAACXRSTlMAGxuq7e7u+vsOT6YMAAABmElEQVQ4y2NgYGJm0SISsDAzMTAwsrG3XiAStLKzMTIwc1wgAbAzM7C2kqKhlZVB6wJJQItSDS3R5orSmo7pPUD2+d2r506bvWzLKdwaOr14OSFAMuXCzqm9ENC//hwODc2KnHDAVdCLALNOYNXQLo9QzylgGoykY+YZbBqckNSrpKamdSPpWINFQw03kgZhJSUlSyQNfUcxNfjzyfFISUDUi5WCQO+EOZOgGmZswNSgY3VBpyPOxJZf1d4uWdxZW9k45+SBtStWTVowffH8o/MxNUgHNsY0entmxrW5R6VnhNb6NlVu6p247uCOs3sOH941DYuG9MTa3JCiGp+S+CzdrrziBOuK5b1L9x8/tG3vko0bsWjQafCKaIhNqon0qyvzqApyKZMtPLZl8/bTR1Zv3Xd6JRYnBeiJChkJGqppWIgoKKi7mTnIVC9YPHnhnHlTJiyaM3EDgWANz87OLicQrCgRx6VvYJBPIOJQk4ZNWD3BpIGS+DhdCSc+0pM3JAOpkpCBaJOnSS5mSC7ISCwqgYUriYUxAINRRW57ksG5AAAAAElFTkSuQmCC") #fff;
}

.discover {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAeCAMAAABdem3zAAAAA3NCSVQICAjb4U/gAAACLlBMVEUAAADQ0NDa2tra2trZ2dnY2Nja2trt7e3t7e3vzbDvzbEBAQECAgIDAwMTExMUFBQWFhYYGBgZGRkeHh4jIyMmJiYnJycpKSksLCwtLS0uLi4wMDAzMzM0NDQ3Nzc6Ojo8PDw/Pz9CQkJDQ0NHR0dJSUlKSkpMTExOTk5PT09RUVFWVlZYWFhcXFxgYGBiYmJjY2Nra2tsbGxtbW1wcHBxcXF0dHR1dXV2dnZ3d3d4eHh8fHx9fX1+fn6AgICBgYGCgoKDg4OLi4uMjIyPj4+VlZWWlpabm5udnZ2enp6fn5+hoaGjo6OoqKirq6usrKyvr6+wsLCysrKzs7O4uLi7u7u8vLy9vb2/v7/AwMDBwcHExMTGxsbHx8fJycnLy8vQ0NDR0dHS0tLU1NTW1tbY2NjZ2dnb29vd3d3f39/h4eHi4uLn5+fo6Ojp6enr6+vs7Ozt7e3v7+/x8fHy8vL1giD1giH1gyP1hCT1iS31ii71izD1jDL2kTv2kjz2kz/2lED2lkP2lkT2l0X2mUn2pmH2pmL3m033n1X3oVf3pF73pV739/f4q2n4q2r4rWz4r3D4r3H4sXT4s3f5uoT5u4b5vov5+fn6xJb6yJ36yqD6zKT6+vr7zqj70a372Ln7+/v83sT838b84Mj84sv848785M/85dD89O78/Pz959X96Nb969z9/f3+8+r+9e7+9u/+9/H++PP++vb++vf+/Pn+/Pr+/fz+/v7////OeAUcAAAAC3RSTlMAGxuq7e7u+vv7+w/+RoMAAAGnSURBVDjLY2BgYmZJJRKwMDMxMDCysS/YSSRYwM7GyMDMsZMEwM7MwLqAFA0LWBlSd5IEUumkwc7A0HPBTuvcTAN13535FuqWJTsXdrdP2+IZuHOnR6iNgYHVDgMDsySEBin3QE2NnWJpKk6x8T1iDsku6UvKSktL+4Kld84RzBb3Co9ZyRPnJYikIXHnAr5ssTR9hYCVIfIg8UmlILBCOMFfa6e4jWvQWh5/e0kUDTuFMsTSpvvI6gUog8QngzVsdDRVC9spbu7st5bbmL8ASUNEipEi0ElRRQEyhYL+K/2Tl5cD1U/cmSMgsXOneHRe3krenSpuCA26ckp2xTu1s2xFZSJ3JqiJqKbvXNrbOWPrzp0m3jt36sjJyS2Q35ms0rNz53wSg3VRI2kaVlc1kKRhVU0pSRoWVZaSpGF2RSkpGjZNAMcM0RoW15aSomE9JOKJ1bB1VnUpCRq2z6srLSVew+ZZyMoJalgzpbq0lGgNG+Z2lGKAplQcxcy6uV3lpVhAKyuWgmzLwqktpTgAJzNaUblt2cz+xnocoLmNiw1YuJJYGAMAEKBGzN/0FVAAAAAASUVORK5CYII=") #fff;
}

.card-row {
  text-align: center;
  margin: 20px 25px 10px;
}

.card-row span {
  width: 48px;
  height: 30px;
  margin-right: 3px;
  background-repeat: no-repeat;
  display: inline-block;
  background-size: contain;
}

.card-image {
  background-repeat: no-repeat;
  padding-right: 50px;
  background-position: right 2px center;
  background-size: auto 90%
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* Optional: adds underline to indicate hoverable */
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 260px; 
  background-color: black;
  color: white;
  text-align: left; 
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -80px;
  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25); 
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}


.tab-container {
  display: flex;
  flex-direction: column;
  max-width: 1000px;
  margin: 20px auto;
  overflow:scroll;
}

.tab-header {
  display: flex;
}

.tab-header button {
  background-color: #f2f2f2;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 10px;
  font-size: 13px;
  transition: background-color 0.3s ease;
  text-decoration: underline;
  white-space: normal;
}



.tab-header button:hover {
  background-color: #ddd;
}

.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
  border-top: none;
}


.tab-content h3{
  font-size: 22px;
  text-decoration: underline;
  border: 1px dashed #7d7d7d;
  padding: 10px;
  border-radius: 14px;
}
.tab-content h3, .tab-content h4{
  margin: 20px 0;
}

.tab-content.active {
  display: block;
}

.news-app-promo {
  box-sizing: border-box;
  background-color: #fff;
  padding: 0.5em;
  margin-top: 1em;
}

.news-app-promo__section {
  display: inline-block;
  margin: 0 auto;
  position: relative;
  width: 100%;
  text-align: center;
  margin-top: 8px;
}

.news-app-promo-text {
  color: #000;
  font-family: helvetica;
  min-width: 300px;
  text-align: center;
  padding: 0 1em;
  width: 50%;
  margin: 1em auto;
  display: block;
}

.news-app-promo-text__tagline {
  font-size: 1.09em;
}

.news-app-promo-text__download {
  font-size: 2.25em;
  font-weight: 600;
}

.news-app-promo-buttons {
  margin: 0 auto;
  max-width: 50%;
  display: block;
}

.news-app-promo-buttons__buttons {
  display: block;
}

.news-app-promo-buttons__logo {
  display: inline-block;
}

.news-app-promo-subsection {
  display: inline-block;
  margin: 0 auto;
  margin-right: 10px;
}

.news-app-promo__ridein-logo {
  display: inline-block;
  width: 106px;
  margin-bottom: 8px;
}

.news-app-promo__play-store,
.news-app-promo__app-store {
  display: block;
  width: 200px;
  height: auto;
  margin-bottom: 8px;
  background: #000;
  border-radius: 10px;
}

.news-app-promo-subsection--link {
  text-decoration: none;
  border: 0;
}

/* activity style */

.actvSrch-card {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.actvSrch-card:hover {
  transform: translateY(-5px);
}

.actvSrch-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.actvCard-text {
  padding: 20px;
  text-align: center;
}

.actvCard-text h4 {
  margin: 0;
  font-size: 1.2em;
  color: #000;
}

.actvCard-text p {
  color: #777;
  margin-top: 10px;
}

/* home tabs form */



#rdn-tabs main {
  min-width: 320px;
  padding: 20px;
  margin: 0 auto;
  background: #fff;
  max-width: 900px;
  border: 1px solid var(--white);
  box-shadow: var(--shadow-1);
  border-radius: var(--radius-18);
  font-family: var(--ff-nunito);
  
}

#rdn-tabs section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #ddd;
}

#rdn-tabs .tab-input {
  display: none;
}

#rdn-tabs .tab-label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #bbb;
  border: 1px solid transparent;
}


#rdn-tabs .tab-label:before {
  font-family: Ionicons;
  font-weight: normal;
  margin-right: 10px;
}

/*
#rdn-tabs .tab-label[for*='1']:before { content: '\f101'; }
#rdn-tabs .tab-label[for*='2']:before { content: '\f17d'; }
*/

#rdn-tabs .tab-label:hover {
  color: #888;
  cursor: pointer;
}

#rdn-tabs input:checked + .tab-label {
  color: #555;
  border: 1px solid #ddd;
  border-top: 2px solid orange;
  border-bottom: 1px solid #fff;
}

#rdn-tabs #tab1:checked ~ #bookCarForm,
#rdn-tabs #tab2:checked ~ #bookActvForm {
  display: block;
}

@media screen and (max-width: 650px) {
  #rdn-tabs .tab-label {
    font-size: 13px;
  }
  
  /*#rdn-tabs .tab-label:before {
    margin: 0;
    font-size: 15px;
  }*/
}

@media screen and (max-width: 400px) {
  #rdn-tabs .tab-label {
    padding: 10px;
  }
  #rdn-tabs main{
    padding: 7px;
  }
}

/* blog */

.blog-container {
  display: grid;
  grid-template-columns: 4rem 3fr 1fr 2rem;
  margin-top: 2rem;
  grid-column-gap: 2rem;
}

.blog-header {
  grid-column: 2 / 5;
}

.blog-heading {
  font-family: Montserrat, sans-serif;
}

.blog-header .subheading {
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-size: smaller;
  color: #455A64;
}

.blog-content {
  grid-column: 2 / 3;
  text-align: justify;
  font-size: 1.1rem;
  line-height: 1.4;
  margin-top: 20px;
}

.blog-content .poster-image {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
     margin-bottom: 20px;
     border-radius: 10px;
}

.aside .blog-heading {
  margin: 0;
  font-weight: 600;
}



@media only screen and (max-width: 600px) {
  .blog-container {
    grid-template-columns: 2rem 3fr 1fr 2rem;
  }
  .blog-content {
    grid-column: 2 / 4;
  }
  .aside {
    grid-column: 2 / 4;
  }
}

.blog-card {
  height: 6rem;
  display: flex;
  align-items: center;
  text-transform: capitalize;
  margin: 1rem 0;
  cursor: pointer;
}

.blog-card img {
  height: 100%;
  width: 35%;
  margin-right: 0.5rem;
}

.blog-card p {
  margin: 10px 0;
}

.blog-card .title {
  font-size: 0.8rem;
}

.blog-card .author {
  font-size: small;
}