*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: "Fira Code", monospace !important;
}
a{text-decoration:none !important;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font: 300 14px;
}
strong{font-weight:bold; font-family:'Noto Serif', serif; font-size:inherit;line-height:inherit;color: #13294a; }
em{font-family:inherit; font-size:inherit; line-height:inherit; font-style:italic;font-family:inherit;}
span{font-family:inherit; font-size:inherit; line-height:inherit;font-family: inherit;}
h1{font-family:inherit; font-size:inherit; line-height:inherit; font-weight:bold; font-family: inherit; font-size: 28px; color: #13294a;}
h2{font-family:inherit; font-size:inherit; line-height:inherit; font-weight:bold; font-family: inherit; font-size: 26px; color: #13294a; }
h3{font-family:inherit; font-size:inherit; line-height:inherit; font-weight:bold; font-family: inherit; font-size: 24px; color: #13294a; }
h4{font-family:inherit; font-size:inherit; line-height:inherit; font-weight:bold; font-family: inherit; font-size: 22px; color: #13294a; }
h5{font-family:inherit; font-size:inherit; line-height:inherit; font-weight:bold; font-family: inherit; font-size: 20px; color: #13294a; }
h6{font-family:inherit; font-size:inherit; line-height:inherit; font-weight:bold; font-family: inherit; font-size: 18px; color: #13294a; }
body, html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;	
	--light-blue:#4396d2;
	--grey-color:#414141; 
	overflow: hidden; overflow-y: auto;
	
}

@media screen and (min-width: 1240px) {

    #reservation{background:white; padding:11px; border:solid thin black; border-radius:22px; display: flex; justify-content: flex-start; align-items: center; gap:11px;}
    #reservation input{width:150px; height:44px;}
    #reservation select{width:150px; height:44px;}
    #reservation h4{font-size: 10px; font-weight: 400; display: block; position: relative; margin:0;}
    #reservation select{color:#ccc;}
    #reservation option{color:#ccc;}
    #reservation input{color:#ccc;}
    .locations{display: flex; justify-content: flex-start; align-items: flex-start; gap:11px;}
    .select_datetime{display: flex; justify-content: flex-start; align-items: flex-start; gap:11px;}
    #reservation button {height:55px; width:150px; background:black; color:white;}

    .car_list_results {display:grid; grid-template-columns: repeat(3,1fr); gap:2rem;}
    .single_car_result{ padding:5px; background: #6684AA; flex-direction: column; height:400px; background-image:url('https://hellas-rent.gr/wp-content/uploads/2025/07/hellas-bg.png'); background-position: center center; background-size: 100% 100%;  display: flex; justify-content: flex-start; align-items: center; width:calc(100%); border:solid thin black; border-radius:22px;}
    .single_car_result .car_title { height:10%; border:solid thin red; width:100%;font-size:11px; line-height:calc(11px * 1);}
    .single_car_result h4{ display: flex; justify-content: flex-start; align-items: center; width:calc(100%); color:white;}
    .single_car_result .car_title span{ padding-left:5px; font-size:11px; line-height:calc(11px * 1); color:white;}
    .single_car_result .car_image{display: flex; justify-content: center; align-items: center; height:70%; border:solid thin red; width:100%;}
    .single_car_result .car_image img{height:250px; width:250px; object-fit: contain; display: flex; justify-content: center; align-items: center;}
    
    .single_car_result .costs_select{display: flex; justify-content: flex-start; align-items: flex-start; width:100%; height:20%;}
    .single_car_result .car_category{width:100%; display: flex; justify-content: flex-start; align-items: flex-start;}
    .single_car_result .car_category p{color:white;}
    .single_car_result .costs{width:70%; border:solid thin red; height:100%;}
    .single_car_result .day_cost{}
    .single_car_result .total_cost{}
    .single_car_result .selects{width:30%; height:100%; display: flex; justify-content: center; align-items: center;}
    .single_car_result .selects img {width:44px; height:44px;}
    
    .single_car_result {
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.4s ease, transform 0.4s ease;
        height: auto;
    }

    .single_car_result.hidden {
        opacity: 0;
        transform: scale(0.95);
        position: absolute;
        pointer-events: none;
    }

    .category-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.category-btn {
    background: #f0f0f0;
    border: 1px solid #ccc;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}
.category-btn.active {
    background: #13294a;
    color: #fff;
    border-color: #13294a;
}

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

.dropdown-trigger {
    padding: 1rem 0.75rem;
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 0.75rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    min-width: 180px;
    text-align: left;
}

.dropdown-options {
    display: none;
    position: absolute;
    top: 110%;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 10px;
    z-index: 1000;
    flex-direction: column;
    gap: 8px;
}

.dropdown-wrapper.active .dropdown-options {
    display: flex;
}

.dropdown-option {
    background: #f0f0f0;
    border: 1px solid #ccc;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.dropdown-option:hover {
    background: #ddd;
}

.dropdown-option.active {
    background: #13294a;
    color: #fff;
    border-color: #13294a;
}

.stepper_wrapper{position:fixed; height:132px; z-index: 100000; top:0; left:0; width:100%; border:solid thin red;}
.stepper_wrapper .arrow img{ width:11px; height:11px; }
.stepper_cont{width:100%; height:100%; display: flex; justify-content: flex-start; align-items: flex-start;}
.stepper_step{width: calc(100% / 4); height: 100%; border: solid thin red; display: flex ; justify-content: center; align-items: center; flex-direction: column; background:#ccc;}
.from_to_times{display: flex; justify-content: flex-start; align-items: flex-start; gap:11px;}
.from_time{display: flex; justify-content: flex-start; align-items: flex-start; gap:11px;}
.from_time .from{}
.from_time .to{}

.from_to_locations{display: flex; justify-content: flex-start; align-items: flex-start; gap:11px;}
.from_location{}
.from_to{}

.stepper_step .step_1{}
.stepper_step .step_2{}
.stepper_step .step_3{}
.stepper_step .step_4{}



}

@media screen and (max-width: 1279px) and (min-width: 768px) {



}

@media screen and (max-width: 767px){



}