:root {

  --ClashDisplay-Extralight: ClashDisplay-Extralight;

  --ClashDisplay-Light: ClashDisplay-Light;

  --ClashDisplay-Regular: ClashDisplay-Regular;

  --ClashDisplay-Medium: ClashDisplay-Medium;

  --ClashDisplay-Semibold: ClashDisplay-Semibold;

  --ClashDisplay-Bold: ClashDisplay-Bold;

  --ClashDisplay-Variable: ClashDisplay-Variable;

  

  --theme: #726bdf;

  --theme-black: #212121;

  --theme-black-50: rgba(33, 33, 33, 0.1);

  --theme-white: #ffffff;

  --theme-yellow: #edd35f;

  --theme-yellow-50: rgba(237, 211, 95, 0.6);

  --theme-yellow-transparent: rgba(235, 210, 95, 0);

  --theme-border: #4C4C4C;

}



.font-CD-Extralight{font-family: var(--ClashDisplay-Extralight);}

.font-CD-Light{font-family: var(--ClashDisplay-Light);}

.font-CD-Regular{font-family: var(--ClashDisplay-Regular);}

.font-CD-Medium{font-family: var(--ClashDisplay-Medium);}

.font-CD-Semibold{font-family: var(--ClashDisplay-Semibold);}

.font-CD-Bold{font-family: var(--ClashDisplay-Bold);}

.font-CD-Variable{font-family: var(--ClashDisplay-Variable);}



.bg-theme{background-color: var(--theme);}

.bg-theme-black{background-color: var(--theme-black);}

.bg-theme-white{background-color: var(--theme-white);}

.bg-theme-yellow{background-color: var(--theme-yellow);}

.bg-theme-border{background-color: var(--theme-border);}



.text-theme{color: var(--theme);}

.text-theme-black{color: var(--theme-black);}

.text-theme-white{color: var(--theme-white);}

.text-theme-yellow{color: var(--theme-yellow);}

.text-theme-border{color: var(--theme-border);}





body{

  color: var(--theme-black);

  font-family: var(--ClashDisplay-Regular);

  line-height: 1.2;

  background-color: var(--theme-yellow-50);

}



.container, .container-fluid{

  --bs-gutter-x: 40px;

}

header,

main,

footer{max-width: 430px;margin: auto;position: relative;overflow-x: hidden;}

.row {

  --bs-gutter-x: 10px;

  --bs-gutter-y: 10px;

}

header{padding: 18px 0px;}

header .container-fluid{}

header .container-fluid h1{line-height: 25px;}

.book-now{background-color: var(--theme-black);color: var(--theme-white);font-size: 11px;padding: 4px 8px;border-radius: 4px;box-shadow: 1px 1px 0 0 var(--theme-white);margin-inline-end: 20px;line-height: 14px;transition: .5s;}



.btn:first-child:active, 

:not(.btn-check)+.btn:active,

.book-now:focus,

.book-now:hover{filter: brightness(1.3);background-color: var(--theme-black);color: var(--theme-white)}





.hero-section{position: relative;}

.hero-section img{height: 260px;object-fit: cover;width: 100%;}

.hero-section:after {content: '';position: absolute;bottom: 0;left: 0;right: 0;height: 75px;background: linear-gradient(to top, var(--theme-yellow),var(--theme-yellow-transparent));}





.choose-your-ride h2{}

.choose-your-ride .ride-box{background-color: var(--theme-black);color: var(--theme-white);padding: 10px;border-radius: 10px;border: 1px solid var(--theme-border);}

.choose-your-ride .ride-box img{height: 100px;object-fit: cover;width: 100%;border-radius: 6px;}

.choose-your-ride .ride-box .arrow-icon{width: 20px;height: 20px;}

.choose-your-ride .ride-box a{color: #fff;text-decoration: none;}

.choose-your-ride .ride-box a:hover{text-decoration: underline;}





.latest-blogs .blog-box{padding: 6px;border-radius: 10px;border: 1px solid var(--theme-black);}

.latest-blogs .blog-box img{height: 120px;object-fit: cover;width: 100%;border-radius: 6px;}

.latest-blogs .blog-box .title-blog{font-size: 12px;line-height: 15px;}

.latest-blogs .blog-box p{font-size: 10px;margin-top: 3px;font-family: var(--ClashDisplay-Light);margin: 0;margin-top: 3px;}

.latest-blogs .blog-box .date-blog{position: absolute;left: 6px;top: 6px;font-size: 10px;line-height: 12px;backdrop-filter: blur(20px);border: 0.5px solid var(--theme-white);background: rgba(244, 242, 255, 0.102);color: var(--theme-white);padding: 3px 2.5px;border-radius: 4px;font-family: var(--ClashDisplay-Light);}



.sidebar-overlay{position: fixed;left: 0;top: 0;right: 0;margin: auto;content: '';background-color: rgba(0,0,0,.3);width: 430px;height: 100%;z-index: 1049;opacity: 0;visibility: hidden;transition: .5s;}

.sidebar{position: fixed;left: 0px;top: 0px;height: 100%;overflow-y: auto;overflow-x: hidden; width: 300px;background-color: var(--theme-yellow);box-shadow: 3px 3px 10px rgba(0,0,0,.2);z-index: 1050;opacity: 0;visibility: hidden;transition: .5s;}

.sidebar h1{height: 61px;background: var(--theme-black-50);color: var(--theme-black);display: flex;align-items: center;padding-left: 20px;padding-right: 20px; margin-bottom: 0;}

.sidebar ul {padding: 20px 0;}

.sidebar ul li a{font-size: 14px;font-family: var(--ClashDisplay-Medium);padding: 12px 20px;margin: 5px 20px;color: var(--theme-black);display: block;text-decoration: none;background-color: var(--theme-black-50);border-radius: 4px;transition: .5s;}

.sidebar ul li a:hover{background-color: var(--theme-black);color: var(--theme-white);}



.sidebar-active .sidebar-overlay,

.sidebar-active .sidebar

{opacity: 1;visibility: visible;}





.form-control{

  border-radius: 10px;

}



.table{

  border-collapse: separate !important;

  border-spacing: 0px;

}



.table th,

.table tr:not(:last-child) td{border-bottom: 0 !important;}

.table th:not(:last-child),

.table td:not(:last-child){border-right: 0 !important;}

.table th:first-child{border-radius: 10px 0 0 0;}

.table th:last-child{border-radius: 0 10px 0 0;}

.table tr:last-child td:first-child{border-radius: 0 0 0 10px;}

.table tr:last-child td:last-child{border-radius: 0 0 10px 0;}



.btn_style_1{color: var(--theme-white);background-color: var(--theme-black);padding: 10px 15px;text-decoration: none;border-radius: 8px;display: flex;align-items: center;justify-content: center;gap: 5px;font-size: 13px;}

.btn_style_1:hover{filter: contrast(1.9) brightness(1.1);}

.btn_style_1.active{background-color: var(--theme);color: var(--theme-white);}

.btn_style_1.active:hover{filter: contrast(1.9) brightness(1.1);}





@media(min-width:430px){

  .sidebar{left: -130px;right: 0;margin: auto;}

}

@media(max-width:400px){

  .container, .container-fluid {

    --bs-gutter-x: 20px;

}.row {

  --bs-gutter-x: 5px;

  --bs-gutter-y: 5px;

}

}