.book-section{position:relative;background:linear-gradient(to bottom,#f8f8f8 20%,#fff 80%)}.book-content{margin:0 auto;margin-bottom:10rem}.book-content__box{background-color:#fff;width:100%;padding:4rem 4.5rem 5rem 5.5rem;box-shadow:0 10px 20px #0000001a;height:auto;position:relative;z-index:4;color:#fff;border-radius:5px;background-image:url(/src/images/book-car/book-bg.png);background-position:center center;background-repeat:no-repeat;background-size:cover;display:flex;flex-direction:column;color:#010103}@media (max-width: 400px){.book-content__box{padding:4rem 2.5rem 5rem}}.book-content__box h2{font-size:2.4rem;font-weight:700;margin-bottom:2.7rem;font-family:var(--font-secondary)}.book-content__box .box-form{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto auto;gap:2rem}.book-content__box .box-form b{color:var(--color-primary)}@media (max-width: 1000px){.book-content__box .box-form{grid-template-columns:1fr 1fr}}@media (max-width: 630px){.book-content__box .box-form{grid-template-columns:1fr}}.book-content__box .box-form__car-type{display:flex;flex-direction:column}.book-content__box .box-form__car-type label{font-size:1.3rem;font-weight:600;margin-bottom:1.2rem}.book-content__box .box-form__car-type label i{color:var(--color-primary)}.book-content__box .box-form__car-type input{font-size:1.5rem;color:#000;font-family:Rubik,sans-serif;border:1px solid #ccd7e6;border-radius:3px;font-weight:400;padding:1.2rem 1.3rem;outline:none}.book-content__box .box-form__car-type input::placeholder{color:#ababab}.book-content__box .box-form__car-time{display:flex;flex-direction:column;position:relative}.book-content__box .box-form__car-time input{outline:none;padding-right:3rem;border:1px solid #ccd7e6}.book-content__box .box-form__car-time label{font-size:1.6rem;font-weight:600;margin-bottom:1.2rem;font-family:var(--font-secondary)}.book-content__box .box-form__car-time label i{color:#ff4d30}.book-content__box .box-form__car-time ::-webkit-datetime-edit{padding:1.3rem}.book-content__box .box-form__car-time ::-webkit-calendar-picker-indicator{cursor:pointer;font-size:1.6rem}.book-content__box button{padding:1.3rem;height:-moz-fit-content;height:fit-content;align-self:self-end;border:none;font-family:Rubik,sans-serif;font-size:1.8rem;font-weight:500;color:#fff;background-color:var(--color-primary);box-shadow:0 10px 15px #ff533059;cursor:pointer;transition:all .3s}.book-content__box button:hover{box-shadow:0 10px 15px #ff53308c}@media (max-width: 450px){.hero-content__text__btns__book-ride{padding:1.8rem 8rem}}.booking-modal{opacity:0;display:none;flex-direction:column;position:fixed;overflow-x:hidden;z-index:999999999999;top:54%;left:50%;transform:translate(-50%,-50%);width:50rem;height:40vh;background-color:#fff;color:#010103}@media (max-width: 800px){.booking-modal{width:100%}}@media (max-width: 600px){.booking-modal{top:50%}}.booking-modal__title{display:flex;justify-content:space-between;padding:1rem 1.5rem;background-color:#ff4d30;color:#fff;align-items:center}.booking-modal__title h2{font-size:2.4rem;text-transform:uppercase}.booking-modal__title i{font-size:2.5rem;color:#ffffffea;cursor:pointer;transition:all .2}.booking-modal__title i:hover{color:#fff}.booking-modal__message{display:flex;flex-direction:column;gap:1.5rem;padding:2rem 3rem;background-color:#ffeae6}.booking-modal__message h4{font-size:1.9rem;font-weight:700;color:#ff4d30}.booking-modal__message h4 i{font-size:2.5rem}.booking-modal__message p{font-size:1.7rem;color:#777;font-weight:500;line-height:1.6}.booking-modal__car-info{background-color:#fff;padding:3rem;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid rgba(119,119,119,.6235294118)}@media (max-width: 650px){.booking-modal__car-info{grid-template-columns:1fr;text-align:center}}.booking-modal__car-info__dates{display:flex;flex-direction:column;gap:2rem}.booking-modal__car-info__dates h5{font-size:1.8rem;color:#ff4d30}.booking-modal__car-info__dates span{display:flex;gap:1rem}@media (max-width: 650px){.booking-modal__car-info__dates span{grid-template-columns:1fr;text-align:center;justify-content:center}}.booking-modal__car-info__dates span i{font-size:1.8rem;padding-top:.2rem;color:#777}@media (max-width: 650px){.booking-modal__car-info__dates span i{display:none}}.booking-modal__car-info__dates span h6{font-size:1.5rem;margin-bottom:.2rem}.booking-modal__car-info__dates span p{font-size:1.6rem;color:#777}.booking-modal__car-info__model{display:flex;flex-direction:column;gap:3rem}@media (max-width: 650px){.booking-modal__car-info__model{margin-top:3.5rem}}.booking-modal__car-info__model h5{font-size:1.8rem;color:#ff4d30}.booking-modal__car-info__model h5 span{color:#010103}.booking-modal__car-info__model img{width:100%;height:auto}.booking-modal__person-info{padding:3rem;background-color:#fff;display:flex;flex-direction:column}.booking-modal__person-info h4{font-size:1.8rem;text-transform:uppercase;color:#ff4d30;margin-bottom:2rem}:root{--primary-color: #ff4d30}.btn-primary{padding:.8rem 1.5rem;background:var(--primary-color);color:#fff;border:none;cursor:pointer;border-radius:5px;font-size:1.6rem;transition:background .3s ease}.btn-primary:hover{background:#e64528}.error-message{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;padding:1rem 1.4rem;margin-bottom:1.8rem;margin-top:-1rem;border:1px solid transparent;border-radius:.8rem;font-size:1.6rem;font-weight:500;display:none;justify-content:start;align-items:center;gap:10px;cursor:pointer}.note-message{color:#721c24;background-color:#fff3cd;border-color:#ffeeba;padding:1rem 1.4rem;margin-bottom:1.8rem;margin-top:-1rem;border:1px solid transparent;border-radius:.8rem;font-size:1.6rem;font-weight:500;display:flex;justify-content:start;gap:10px;align-items:center}body.dark-mode .book-section{background:linear-gradient(to bottom,#1a1a1a 20%,#111 80%)}body.dark-mode .book-content__box{background-color:#1c1c1c;background-image:none;color:#f5f5f5;box-shadow:0 10px 20px #ffffff0d}body.dark-mode .book-content__box h2{color:#fff}body.dark-mode .book-content__box .box-form__car-type label,body.dark-mode .book-content__box .box-form__car-time label{color:#f5f5f5}body.dark-mode .book-content__box .box-form__car-type input,body.dark-mode .book-content__box .box-form__car-time input{background-color:#2a2a2a;color:#fff;border:1px solid #444}body.dark-mode .book-content__box .box-form__car-type input::placeholder{color:#bbb}body.dark-mode .book-content__box button{background-color:var(--color-primary);color:#fff;box-shadow:0 10px 15px #ff533066}body.dark-mode .booking-modal{background-color:#1c1c1c;color:#f5f5f5}body.dark-mode .booking-modal__title{background-color:#ff4d30;color:#fff}body.dark-mode .booking-modal__message{background-color:#2a2a2a;color:#f5f5f5}body.dark-mode .booking-modal__message h4{color:var(--color-primary)}body.dark-mode .booking-modal__message p{color:#ccc}body.dark-mode .booking-modal__car-info{background-color:#1c1c1c;border-bottom:1px solid #333}body.dark-mode .booking-modal__car-info__dates h5,body.dark-mode .booking-modal__car-info__model h5{color:var(--color-primary)}body.dark-mode .booking-modal__car-info__dates span p{color:#bbb}body.dark-mode .booking-modal__car-info__dates span i{color:#999}body.dark-mode .booking-modal__car-info__model h5 span{color:#f5f5f5}body.dark-mode .booking-modal__person-info{background-color:#1c1c1c}body.dark-mode .booking-modal__person-info h4{color:var(--color-primary)}body.dark-mode .error-message{color:#f8d7da;background-color:#2c0b0e;border-color:#842029}body.dark-mode .note-message{color:#fff3cd;background-color:#332701;border-color:#92720a}
