/*
Theme Name: Royal Elementor Kit Child
Theme URI: https://royal-elementor-addons.com/royal-elementor-kit/
Template: royal-elementor-kit
Author: WP Royal
Author URI: https://royal-elementor-addons.com/
Description: Truly all in one Solution For Elementor Lovers. 90+ Elementor Templates KIT, 100+ Professional Elementor Widgets, Elementor theme builder, Elementor Popup Builder, Elementor Premade blocks and many other cool features like Sticky Header, Particle effects, parallax backgrounds and many other elementor addons. Simple Install the theme, click on - Get Started with Templates Kit button and that's it. Very easy to use even for WordPress beginners or professionals. All In one Elementor Solution which outranks all other Elementor themes and Elementor addons. ########### TEMPLATES INCLUDED: Elementor Blog Template, Elementor Magazine Blog Template, Elementor Food Blog Template, Elementor Travel Blog Template, Elementor Portfolio Template, Elementor NFT Template, Elementor Pizza Restaurant Template, Elementor Travel Blogger & Influencer Template, Elementor Cybersecurity Template, Elementor Photographer Portfolio Template, Elementor Crypto Currency Template, Elementor Skin Care Template, Elementor Lawyer Template, Elementor Medical Template, Elementor Digital Agency Template, Elementor Drone Template, Elementro Architecture Template, Elementor Food Delivery Template, Elementor Construction Template, Elementor IT Technology Template, Elementor Real Estate Template, Elementor Restaurant Template, Elementor Wine Bar & Restaurant Template, Elementor Wedding Template & other beautiful elementor business templates. All these templates are created with elementor page builder. Theme Demo Page: https://royal-elementor-addons.com/royal-elementor-kit/
Tags: blog,e-commerce,one-column,custom-background,custom-colors,full-width-template,custom-menu,custom-logo,featured-images,sticky-post,theme-options,threaded-comments,translation-ready
Version: 1.0.133.1747323458
Updated: 2025-05-15 15:37:38

*/

/*––––––––––––––––––––––––––––––––––––––––––––––––––
   HEADER STICKY STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#main-header {top: 0;right: 0;left: 0;z-index: 999;}
#main-header.is-sticky {position: fixed;background-color: #00000070;box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);backdrop-filter: blur(10px);animation: slideDown 0.35s ease-out;}
#main-header.is-sticky img {max-width: 80%;}
#main-header.is-sticky button {font-size: 24px;padding: 7px 10px;}

@keyframes slideDown {
  from {transform: translateY(-100%);}
  to {transform: translateY(0);}
}
/*––––––––––––––––––––––––––––––––––––––––––––––––––
   Forminator Form
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#form-contact .forminator-label {display: none !important;}
#form-contact .forminator-input,
#form-contact .forminator-textarea,
#form-contact .forminator-select {border: 1px solid #00000014;background-color: #F2F2F2;border-radius: 25px;padding: 10px 20px;color: #000;height: 47px;width: 100%;}
#form-contact input::placeholder{color:#000;font-weight:300;font-size:14px;}
#form-contact textarea::placeholder{color:#000;font-weight:300;font-size:14px;}
#textarea-1 span{display:none;}
.forminator-input:focus,
.forminator-textarea:focus,
.forminator-select:focus {background-color: #f5f5f5 !important;box-shadow: 0px 0px 8px 3px #ffd70061 !important;}
#form-contact .forminator-button {background-color: #f5b754 ;color: #000;border: none;border-radius: 25px;padding: 15px 45px !important;font-weight: bold;cursor: pointer;font-size: 16px !important;letter-spacing: 1.1px;transition: background-color 0.3s ease;}
#form-contact .forminator-button:hover {background-color: #000;color:#fff;}


/*––––––––––––––––––––––––––––––––––––––––––––––––––
   Find Your car Frontpage
–––––––––––––––––––––––––––––––––––––––––––––––––– */

	#car-rental-box { display: flex; align-items: center; justify-content: center; padding: 20px 30px; background: #ffffff; border-radius: 60px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); gap: 30px; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; }
	#car-rental-box select { border: none; cursor: pointer; padding: 12px 20px; font-size: 16px; color: #2c3e50; min-width: 200px; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg fill='%23f5b041' height='12' viewBox='0 0 20 20' width='12' xmlns='http://www.w3.org/2000/svg'><polygon points='0,0 20,0 10,10'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; border-radius: 30px; background-color: #eff1f3; }
	#car-rental-box select:focus { outline: none; border: 2px solid #f5b041; }
	#car-rental-box button { padding: 12px 35px; background-color: #f5b041; color: #000; border: none; border-radius: 50px; font-weight: 400; font-size: 16px; cursor: pointer; transition: background 0.3s ease; }
	#car-rental-box button:hover { background-color: #000; color: #fff; }

	@media (max-width: 768px) {
	  #car-rental-box { flex-direction: column; gap: 15px; border-radius:20px;padding:20px;}
	  #car-rental-box select, #car-rental-box button { width: 100%; min-width: unset; }
	}



/*––––––––––––––––––––––––––––––––––––––––––––––––––
   Cars page filter
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.car-posts-wrapper {display: flex; gap: 10px; justify-content: space-between;}
.search-wrapper {width: 100%; position: relative; background: #f5b754; text-align: center; padding: 30px; border-radius: 20px 20px 0 0;}
.car-filter {background: #f2f2f2;}
.tax-padding, .sort-filter,.clear-filter {padding: 20px 30px 0;}
h3.filter-heading {font-weight: 700; font-size: 18px; letter-spacing: 1.2px;}
.clear-filter a {background: #f5b754;color: #000;padding: 9px 20px;border-radius: 12px;width: 100%;text-align: center;font-size: 14px;font-weight: 300;}
.sort-filter select {width: 100%;padding: 8px 12px;font-size: 16px;border: 2px solid #f5b754;border-radius: 6px;background-color: #fff;color: #333;
outline: none;font-size:15px;transition: all 0.3s ease;cursor: pointer;}
.sort-filter select:focus,
.sort-filter select:hover {border-color: #e6a93b;box-shadow: 0 0 6px rgba(245, 183, 84, 0.5);}
.sort-filter select option {padding: 8px;font-size: 15px;}
.clear-filter a:hover {background: #000; color: #fff;}
.car-filter form {display: flex; flex-direction: column; gap: 0;}
.search-wrapper input[type="text"] {width: 100%; padding: 10px 15px; border: 1px solid #ccc; border-radius: 30px; height: 58px;}
.search-wrapper button {position: absolute; right: 34px; top: 50%; transform: translateY(-50%); background: #f5b754; border: none; border-radius: 30px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;}
.search-wrapper button i {font-size: 18px; color: #fff;}
.car-posts-wrapper .car-filter {width: 25%;height: min-content;padding-bottom: 3em;border-radius: 20px;}
.car-posts-wrapper .car-posts {width: 75%; display: flex; flex-wrap: wrap;}
.car-post-meta {margin: 10px 0; font-size: 14px; color: #555; width: 100%; display: flex; gap: 13px; flex-direction: column;}
.car-post-meta span {display: flex; width: 100%; justify-content: space-between;}
.car-post-item {width: 30%; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 10px; transition: transform 0.3s;}
.car-post-item:hover {transform: translateY(-5px);}
.car-post-image {width: 100%; height: 270px !important; object-fit: contain; display: block;}
.car-post-content {padding: 16px;}
.car-post-item .car-post-content h3 {text-transform: capitalize; margin-top: 0; font-size: 22px; font-weight: 600; color: #000; display: flex; justify-content: space-between;}
.car-post-content .price-tag {color: #fbbd08;font-size:22px;font-weight: 500;}
.car-post-content .day-tag {padding-left: 5px; color: #555; font-size: 14px;}
.car-post-buttons {margin-top: 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px;}
.book-now-btn, .whatsapp-btn {text-decoration: none; flex: 1; text-align: center; padding: 10px 12px; border-radius: 30px; font-weight: 300; font-size: 14px; transition: background 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px;}
.book-now-btn {background: #fbbd08; color: #000;}
.book-now-btn:hover, .whatsapp-btn:hover {background: #000; color: #fff;}
.whatsapp-btn {background: #25D366; color: #fff;}
.categories-list {display: flex; flex-direction: column; gap: 15px; padding: 0;}
.categories-list div {display: flex; align-items: center; margin-bottom: 5px;}
.categories-list input[type="radio"] {display: none;}
.categories-list .custom-radio {position: relative; padding-left: 30px; cursor: pointer; font-size: 15px; color: #555; user-select: none; transition: color 0.2s;}
.categories-list .custom-radio::before {content: ""; position: absolute; left: 0; top: 2px; width: 12px; height: 12px; border: 1px solid #fbb034; border-radius: 50%; transition: border-color 0.2s;}
.categories-list input[type="radio"]:checked + .custom-radio::after {content: ""; position: absolute; left: 3px; top: 5px; width: 6px; height: 6px; background: #fbb034; border-radius: 50%;}
.categories-list input[type="radio"]:checked + .custom-radio {font-weight: 600; color: #fbb034;}
.categories-list .custom-radio:hover {font-weight: 600; color: #fbb034;}
.clear-btn {display: inline-block; margin-top: 10px; text-decoration: underline; color: #0073aa;}
.categories-list .custom-radio:hover {font-weight: 600; color: #fbb034;}

	@media screen and (max-width: 1420px) {
		.car-post-item {width: 47%;} 
		.car-post-image {height: 270px !important;}
	}
	@media screen and (max-width: 1024px) {
			.car-post-item {width: 45%;}
		.car-posts-wrapper .car-filter {width: 30%;} 
		.car-posts-wrapper .car-posts {width: 70%;} 
		.search-wrapper{padding: 30px 15px;}
		.car-post-image {height: 230px !important;}
		.car-post-item .car-post-content h3{flex-direction: column;gap: 10px;}
		.car-post-image {height: 175px !important;        object-fit: contain;}
		.car-post-content .price-tag{font-size:20px;}
		.search-wrapper button {right: 18px;}
	}
	@media screen and (max-width: 768px) {
		.car-post-item {width: 100%;}
	}
	@media screen and (max-width: 700px) {
		.car-posts-wrapper{flex-direction: column;}
		 .car-posts-wrapper .car-filter {width: 100%;}
		 .car-posts-wrapper .car-posts {width: 100%;}
	}

/*––––––––––––––––––––––––––––––––––––––––––––––––––
   Cars page filter
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Container for the form */
#adm-panel form {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: Arial, sans-serif;
}

/* Style inputs and textareas */
#adm-panel form input[type="text"],
#adm-panel form input[type="number"],
#adm-panel form input[type="file"],
#adm-panel form select,
#adm-panel form textarea {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

/* Focus effect for inputs */
#adm-panel form input[type="text"]:focus,
#adm-panel form input[type="number"]:focus,
#adm-panel form input[type="file"]:focus,
#adm-panel form select:focus,
#adm-panel form textarea:focus {
  border-color: #0073aa;
  outline: none;
}

/* Label styling */
#adm-panel form h4 {
  margin-top: 25px;
  margin-bottom: 10px;
  font-weight: 600;
  color: #333;
  font-size: 18px;
}

/* Checkbox container */
#adm-panel form label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #555;
}

/* Checkbox and radio input alignment */
#adm-panel form input[type="checkbox"] {
  margin-right: 8px;
  vertical-align: middle;
}

/* Submit button style */
#adm-panel form button[type="submit"] {
  background-color: #0073aa;
  color: white;
  padding: 12px 25px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#adm-panel form button[type="submit"]:hover {
  background-color: #005177;
}

/* Success message styling */
div[style*="color:green"] {
  max-width: 600px;
  margin: 10px auto 0 auto;
  padding: 10px 15px;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
  border-radius: 5px;
  font-weight: 600;
  font-family: Arial, sans-serif;
  text-align: center;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––
    Best Selling Cars Frontpage 
–––––––––––––––––––––––––––––––––––––––––––––––––– */


    .car-slick-slider { margin: 0 auto; padding: 0; }
    .car-slide { outline: none; }
    .slick-slide { transform: scale(0.95); transition: all 0.4s ease-in-out; padding: 13px; }
    .slick-center { transform: scale(1.035); opacity: 1; z-index: 2; }
    .slick-slide img { max-width: 100%; height: 30em; object-fit: cover; width: 100%; border-radius: 20px; box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
    .slick-center .car-content { visibility: visible !important; opacity: 1 !important; }
    .slick-slide .car-content { position: relative; display: flex; justify-content: space-between; align-items: flex-start; background-color: #f2f2f2; padding: 30px 20px; margin: -55px 150px 0; overflow: hidden; transition: all 500ms ease; z-index: 2; visibility: visible; opacity: 0; border-radius: 20px; flex-direction: row; gap: 10px; box-shadow:0px 0px 10px 0px rgba(0,0,0,0.17);}
    .car-meta h3 { margin: 0; text-transform: capitalize; font-weight: 600; font-size: 25px;color: #333333;margin-bottom: 0.5em; }
    .car-meta span { display: inline-block; padding-right: 5px; font-size: 13px; color: #333; font-weight: 300; }
    .car-bottom { display: flex; justify-content: space-between; align-items: flex-end; flex-direction: column; gap: 10px; }
    .car-image { overflow: hidden; border-radius: 20px; }
    .car-image img { transition: transform 0.4s ease-in-out; }
    .car-image:hover img { transform: scale(1.1); }
	.car-bottom .car-btn-main{display: flex;gap: 5px;}
    .car-btn, .wa-float-btn { text-align:center;background: #f5b754; color: #000; padding: 10px 20px; border-radius: 17px; font-size: 14px; font-weight: 300; text-decoration: none; display: inline-block; transition: background 0.3s; }
	.wa-float-btn{background: #25D366;color: #fff;}
    .car-btn:hover, .wa-float-btn:hover { background: #000; color:#fff;}
    .car-price { font-size: 16px; }
    .car-price strong { color: #f5b754;font-size: 25px;font-weight: 600;letter-spacing: 2px; }
    .car-price span { font-size: 12px; color: #333333; }
	.car-slick-slider .slick-prev,
	.car-slick-slider .slick-next {position: absolute;top: 37%;transform: translateY(-50%);z-index: 10;color: #333333;font-size: 22px;background: none;border: none;opacity: 0;transition: opacity 0.3s ease;cursor: pointer;padding: 0;background-color: #f5b754;width: 50px;height: 50px;border-radius: 30px;}
	.car-slick-slider:hover .slick-prev,
	.car-slick-slider:hover .slick-next {opacity: 1;color: #000;background: #f5b754;}
	.car-slick-slider .slick-prev:before, .car-slick-slider .slick-next:before{content:"";}
	.car-slick-slider .slick-prev {left: 10%;}
	.car-slick-slider .slick-next {right: 10%;}
	.car-meta h3 .car-price{display:none;}	


		
	@media screen and (max-width: 1620px) {
		.slick-slide img{height: 27em;}
		.slick-slide .car-content{margin: -30px 85px 0;}
	}
		
	@media screen and (max-width: 1420px) {
		.slick-slide .car-content{margin: -30px 35px 0;}
		.slick-slide img{height: 23em;}
	}
	@media screen and (max-width: 1024px){
		.car-bottom .car-btn-main{flex-direction: row;width: 100%;padding-top: 1em;} 
		.slick-slide .car-content{flex-direction: column;}
		.car-bottom .car-price{display:none;}
		.car-meta h3 .car-price {display: flex;align-items: center;}
		.car-meta,.car-bottom{width: 100%;}
		.car-meta h3{display: flex;justify-content: space-between;align-items: center;}
		.car-btn, .wa-float-btn{width:100%;}
	}
	@media screen and (max-width: 768px) {
		.car-btn, .wa-float-btn{padding: 6px 10px;}
		.slick-slide .car-content{margin: -20px 10px 0;padding: 8px;align-items: flex-start;}
		.slick-slide img{height: 15em;object-fit: contain;}
		.car-bottom .car-btn-main{flex-direction: row;padding-top: 0.5em;}
		.car-slick-slider .slick-next{right: -2%;}
		.car-slick-slider .slick-prev{left: -2%;}
		.car-meta h3{flex-direction: column;}
		.car-meta h3 p{text-align:center;font-size:21px;}
		.car-price strong{font-size:21px;}
		.slick-slide{padding: 5px;}
		.car-meta, .car-bottom{text-align:center;}
	}