body {
	padding:0 !important;
	margin:0 !important;
	position:relative;
	overflow-x:hidden;
	width:100%;
}

.navBar {
	padding:2% 1%;
	display:flex;
	justify-content:center;
	align-items:center;
	font-family: Rubik,sans-serif;
	position:absolute;
	top:0;
	bottom:0;
	height:80px;
	width:100%;
	z-index:100;
	transition: all 0.3s ease-in-out;
}
.searchBar {
	position:fixed;
	z-index:1001;
	width:100%;
	text-align:center;
	align-items:center;
	height:100vh;
	background:white;
	display: flex;
    justify-content: center;
    flex-direction: column;
	transition:all 1s ease-in-out;
}

.companySocial {
	display:flex;
	flex-direction:row;
	justify-content:center;
}

.companySocial div{
	width:45% !important;
	padding-top:10px;
}

.companySocial div a{
	color:white;
	text-decoration:none;
}

.companySocial div a i{
	font-size:1vw;
}


.searchBar > .searchBarTitle {
	font-family: Rubik,sans-serif;
	font-size:1.5vw;
	font-weight:bold;
	margin-bottom:1%;
}

.searchBar > .searchBarSubTitle {
	font-family: Rubik,sans-serif;
	font-size:0.8vw;
	font-weight:bold;
	margin-bottom:3%;
	color:grey;
}

.searchBar > .closeSearchWindow {
	font-family: Rubik,sans-serif;
	font-size:1vw;
	font-weight:bold;
	margin-bottom:3%;
	cursor:pointer;
	position:absolute;
	top:5%;
	right:3%;
}

.searchBar > .closeSearchWindow:hover {
	color:red;
}


.searchBar > .searchInput{
	width:100%;
}

.searchBar > .searchInput > .searchBtnResult{
	width:10%;
	margin:2% auto;
	background:black;
	color:white;
	font-family: Rubik,sans-serif;
	font-size:0.8vw;
	padding:1% 2%;
	cursor:pointer;
}


.searchBar > .searchInput > input {
	font-family: Rubik,sans-serif;
	font-size:0.8vw;
	font-weight:bold;
	background:none;
	border:none;
	width:70%;
	margin:0 auto;
	text-align:left;
	border-bottom:1px solid black;
	padding:1%;
}

.searchBar > .searchInput > input:focus {
	outline:none;
}

.navBarFixed{
	position:fixed !important;
	background:white;
	animation: slideDown 0.5s ease-in-out;
	padding:1% 1% !important;
	filter: drop-shadow(0px 1px 8px rgba(0.0,0.0,0.0,0.5));
}

.navBar > div {
	width:30%;
	margin:0 auto;
	display:flex;
	justify-content:center;
}

.navBar a {
	text-decoration:none;
	color:black;
}

.navBar > div.leftSideNavBar {
	justify-content:start;
	gap:1%;
}

.navBar > div.rightSideNavBar {
	justify-content:end;
	gap:5%;
	padding-right:1%;
}

.navBar > div.centerSideNavBar {
	justify-content:center;
	
}

.navBar > div.centerSideNavBar > div.logo {
	text-align:center;
}

.navBar > div.centerSideNavBar > div.logo > img {
	width:50%;
	margin:0 auto;
	filter: brightness(0);
}

.navBar > div.leftSideNavBar > div.navItem {
	font-size:0.7vw;
	font-weight:bold;
	color:#292929;
}

.navBar > div.rightSideNavBar > a > div.loginRegisterNavBar span {
	
	font-size:0.7vw;font-weight:bold;color:#292929;
}

.navBar > div.rightSideNavBar > div.loginRegisterNavBar span {
	cursor:pointer;
	font-size:0.7vw;font-weight:bold;color:#292929;
}

.navBar > div.rightSideNavBar > div.loginRegisterNavBar:hover i {
	color:red;
}


.navBar > div.rightSideNavBar > a > div.loginRegisterNavBar i {
	font-size:0.8vw;color:#292929;
	
}
.navBar > div.rightSideNavBar > div.searchNavBar i {
	font-size:0.8vw;color:#292929;
	cursor:pointer;
	
}
.navBar > div.rightSideNavBar > a > div.favoritesNavBar i {
	font-size:0.8vw;color:#292929;
	
}
.navBar > div.rightSideNavBar > a > div.cartNavBar i {
	font-size:0.8vw;color:#292929;
	
}

.navBar > div.rightSideNavBar > a > div.favoritesNavBar span {
	font-size:0.6vw;color:#292929;
}

.navBar > div.rightSideNavBar > a > div.cartNavBar span {
	font-size:0.6vw;color:#292929;
	
}
.navBar > div.rightSideNavBar > div.settingsNavBar i {
	font-size:0.8vw;color:#292929;
	cursor:pointer;
}

.navBar > div.rightSideNavBar > a > div.loginRegisterNavBar:hover i {
	color:red;
}

.navBar > div.rightSideNavBar > div:hover {
}

.mobileHeader {
	display: none;
	background: white;
	padding: 10px;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 1001;
}

.mobileHeader .hamburger {
	display: block;
	width: 30px;
	height: 25px;
	cursor: pointer;
}

.carouselHome {
	position: relative; overflow: hidden; height: 100vh;
}

.carouselSlides {
	position: relative; height: 100%;
}

.carouselSlide {
	position: relative; height: 100%;
}

.carouselSlide img {
	width:100%; object-fit: cover; object-position: bottom; height: 100%;
}

.carouselSlide div {
	color:white !important;
}

@media (max-width: 768px) {
	/* Αφήνουμε το ύψος auto, ώστε η εικόνα να καθορίζει το ύψος */
	.carouselHome {
		height: auto;
	}
	.carouselSlides,
	.carouselSlide {
		height: auto;
	}
	.carouselSlide img {
		height: auto;   /* Έτσι η εικόνα θα κλιμακώνεται σωστά */
	}
	
	.topText, .middleText {
		font-size: 20px !important; 
		/* ή ό,τι χρειάζεται */
	}
	
	.middleText {
		top:55% !important;
	}
	
	.servicesForClients {
		flex-direction:column !important;
		gap:30px;
	}
	
	.servicesForClients > div.serviceForClient > div.serviceForClientIcon > i {
        font-size: 10vw !important;
        display: block !important;
        color: grey !important;
	}
	
	.servicesForClients > div.serviceForClient > div.serviceForClientTitle {
        font-size: 14px !important;
        display: block;
        font-weight: bold;
        font-family: Rubik, sans-serif;
        margin-top: 2%;
	}
	
	.servicesForClients > div.serviceForClient > div.serviceForClientSemiTitle {
        font-size: 10px !important;
        display: block;
        font-family: Rubik, sans-serif;
        color: grey;
        margin-top: 1%;
	}
	
	.servicesForClients > div.serviceForClient {
		width: 50% !important;
		margin: 0 auto;
		text-align: center;
	}
}


.mobileHeader .hamburger span {
	display: block;
	height: 3px;
	width: 100%;
	background: #333;
	margin-bottom: 5px;
}

.mobileHeader .mobileLogo img {
	height: 40px;
	filter: brightness(0) !important; 
}

/* Mobile menu styles */
.mobileMenu {
	display: none; /* Κρυφό αρχικά */
	background: white;
	position: absolute;
	top: 60px; /* Κάτω από το mobile header */
	left: 0;
	right: 0;
	z-index: 1000;
	padding: 10px 0;
}

.mobileMenu a{
	text-decoration:none;
	color:black;
	font-size:1vw;
}

.mobileMenuHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
	border-bottom: 1px solid #ccc;
}

.mobileMenuHeader .mobileLogo img {
	height: 40px;
	
}

.mobileClose {
	font-size: 24px;
	cursor: pointer;
}

.mobileNavItem {
	padding: 10px 20px;
	border-bottom: 1px solid #ccc;
	font-size: 16px;
}

/* Media Query για οθόνες κάτω από 768px */
@media screen and (max-width: 768px) {
	/* Απόκρυψη του desktop navigation */
	.navBar {
		display: none;
	}
	/* Εμφάνιση του mobile header */
	.mobileHeader {
		display: flex;
	}
}

.carouselHome {
	max-height:100vh;
	overflow-y:hidden;
	position:relative;
}

.carouselHome > div.carouselBullets {
	display:flex;justify-content:center;gap:0.7%;
	position:absolute;width:100%;
	height:12px;
	left:0;
	bottom:2%;
}

.carouselHome > div.carouselBullets > div.carouselBullet {
	width:7px;
	height:7px;
	background:#dcdcdc;
	border-radius:50%;
}

.carouselHome > div.carouselBullets > div.active {
	background:black !important;
}

.carouselHome > div.carouselSlides > div.carouselSlide {
	position:relative;
	display:none;
}

.carouselHome > div.carouselSlides > div.carouselSlide > div.topText {
	font-family: Rubik,sans-serif;
	position:absolute;
	width:100%;
	text-align:center;
	top:45%;
	font-size:1vw;color:#292929;
	transition: margin-right 2s ease-in-out;
	animation: fadeInUp 1s ease-in-out;
}

.carouselHome > div.carouselSlides > div.carouselSlide > div.middleText {
	font-family: Rubik,sans-serif;
	position:absolute;
	width:100%;
	text-align:center;
	top:50%;
	font-size:2vw;color:#292929;font-weight:bold;
	animation: fadeInUp 2s ease-in-out;
}

.carouselHome > div.carouselSlides > div.carouselSlide > div.bottomText {
	font-family: Rubik,sans-serif;
	position:absolute;
	width:100%;
	text-align:center;
	top:55%;
	font-size:0.8vw;color:#292929;
	text-decoration:underline;
	font-weight:bold;
	animation: fadeInUp 3s ease-in-out;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.activeSlide {
	display:block !important;
}

.servicesForClients {
	padding-top:5%;
	padding-bottom:5%;
	border-bottom:1px solid grey;
	display:flex;justify-content:center;
}

.servicesForClients > div.serviceForClient {
	width:28%;
	margin:0 auto;
	text-align:center;
}

.servicesForClients > div.serviceForClient > div.serviceForClientIcon > i{
	font-size:2vw;
	display:block;
	color:grey;
}
.servicesForClients > div.serviceForClient > div.serviceForClientTitle {
	font-size:1vw;
	display:block;
	font-weight:bold;
	font-family: Rubik,sans-serif;
	margin-top:2%;
}
.servicesForClients > div.serviceForClient > div.serviceForClientSemiTitle {
	font-size:0.8vw;
	display:block;
	font-family: Rubik,sans-serif;
	color:grey;
	margin-top:1%;
}

/* Νέα κλάση για το animation */
@keyframes slideDown {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(0);
	}
}

.ourEvents {
    display: block;
    padding: 5% 4%;
    text-align: center;
    position: relative;
    /* Μπορείς να ορίσεις κι ένα max-width αν θέλεις να μην “ξεχειλώνει” σε πολύ μεγάλες οθόνες */
    /* max-width: 1200px; 
	margin: 0 auto; */
}

/* Η γραμμή (border) στο κάτω μέρος */
.ourEvents:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 85%;            /* Μήκος της γραμμής */
    height: 1px;          /* Πάχος */
    background-color: grey;
    transition: width 0.5s ease;
    left: 7.5%;           /* Για να είναι κεντραρισμένη (85% + 7.5% + 7.5% = 100%) */
}

/* Τίτλος */
.ourEvents > .ourEventsTitle {
    font-weight: bold;
    color: black;
    font-family: Rubik, sans-serif;
    text-align: center;
    font-size: 1.7vw; /* Σε μεγάλες οθόνες βασίζεται στο πλάτος του viewport */
}

/* Περιγραφή */
.ourEvents > .ourEventsDescription {
    color: grey;
    font-family: Rubik, sans-serif;
    text-align: center;
    margin-top: 2%;
    font-size: 0.7vw;
}

/* =========== MEDIA QUERIES =========== */
/* Μπορείς να προσαρμόσεις όσες θες, π.χ. για κινητά και tablets */

/* Για οθόνες κάτω από 992px (π.χ. tablets) */
@media (max-width: 992px) {
    .ourEvents > .ourEventsTitle {
        font-size: 2rem !important;  /* ή ό,τι θες */
	}
    .ourEvents > .ourEventsDescription {
        font-size: 1rem !important;
	}
}

/* Για οθόνες κάτω από 768px (π.χ. κινητά) */
@media (max-width: 768px) {
    .ourEvents {
        padding: 8% 4% !important;
	}
    .ourEvents > .ourEventsTitle {
        font-size: 1.5rem !important;
	}
    .ourEvents > .ourEventsDescription {
        font-size: 0.9rem !important;
	}
    /* Αν θέλεις να μεγαλώνεις το πλάτος της γραμμής ή να την αφαιρείς τελείως */
    .ourEvents:after {
        width: 90% !important;
        left: 5% !important;
	}
	
	.eventOnView img {
		width: 100% !important;
		height: 100% !important;
		margin-top:10%;
	}
	.carousel-button i {
		font-size: 14px !important;
		color: black;
	}
	
	.trustedBy {
		text-align: center;
		margin-top: 2%;
		margin-bottom: 2%;
		font-size: 20px !important;
		font-weight: bold;
		color: black;
		font-family: Rubik, sans-serif;
	}
	
    .newArrivals > div.newArrivalsTitle {
        font-size: 20px !important;
        font-weight: bold;
        color: black;
        font-family: Rubik, sans-serif;
        text-align: center;
	}
	.newArrivals > div.newArrivalsDescription {
        font-size: 14px !important;
        color: grey;
        font-family: Rubik, sans-serif;
        text-align: center;
        margin-top: 2%;
	}
	
	div.newArrivalsProducts {
		display: flex !important
		;
		justify-content: center !important;
		flex-wrap: wrap !important;
		margin-top: 2%;
		gap: 5%;
		flex-direction: column !important;
	}
	
	.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct {
		width: 70% !important;
		margin-top: 2%;
		margin-left:auto;
		margin-right:auto;
	}
	
    .newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct > div.newArrivalCategories > div.categoriesContent {
        font-size: 10px !important;
        color: grey !important;
        font-family: Rubik, sans-serif !important;
	}
	
	.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct > div.newArrivalCategories > div.addToFavorite i {
        font-size: 15px !important;
        color: grey;
	}
	
	.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct > div.newArrivalTitle {
        font-size: 10px  !important;
        color: grey;
        font-family: Rubik, sans-serif;
        text-align: left;
        transition: color 0.5s;
        cursor: pointer;
	}
	
	.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct > div.newArrivalPrice {
        font-size: 8px  !important;
        font-weight: bold;
        font-family: Rubik, sans-serif;
        text-align: left;
        margin-top: 3%;
        position: relative;
        overflow: hidden;
        height: 25px;
	}
	
	.viewMoreProducts {
        display: block  !important;
        margin-top: 5%  !important;
        width: 30%  !important;
        margin-left: auto  !important;
        margin-right: auto  !important;
        padding: 5% 2.5%  !important;
        border: 2px solid grey  !important;
        font-size: 10px !important;
        font-family: Rubik, sans-serif  !important;
        cursor: pointer  !important;
        transition: margin-left 0.5sease  !important;
	}
	
	.ourCollections > div.ourCollectionsTitle {
        font-size: 20px !important;
        font-weight: bold;
        color: black;
        font-family: Rubik, sans-serif;
        text-align: center;
        margin-top: 5%;
	}
	
	.ourCollections > div.ourCollectionsDescription {
        font-size: 14px !important;
        color: grey;
        font-family: Rubik, sans-serif;
        text-align: center;
        margin-top: 2%;
	}
	
	.collectionOnView img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center !important;
		transition: opacity 0.5s ease !important;
		margin-top: 5% !important;
	}
	.left {
		transform: inherit !important;
	}
	
	.carousel1-button i {
		font-size: 14px !important;
		color: black;
	}
	
	.topCategories > div.topCategoriesTitle {
        font-size: 20px !important;
        font-weight: bold;
        color: black;
        font-family: Rubik, sans-serif;
        text-align: center;
	}
	
	.topCategories > div.topCategoriesDescription {
        font-size: 12px !important;
        color: grey;
        font-family: Rubik, sans-serif;
        text-align: center;
        margin-top: 2%;
	}
	
	.topCategories > div.topRowTC {
		display: flex
		;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		flex-direction: column;
	}
	
	.topCategories > div.topRowTC > .rowTC {
		background: #e9e9eb !important;
		width: 70% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: 5% !important;
		position: relative !important;
		overflow: hidden !important;
		height: 15vh !important;
		cursor: pointer !important;
	}
    .topCategories > div.topRowTC > div.rowTC > div.rowTCCategoryTitle {
        font-size: 12px !important;
        font-weight: bold;
        color: white;
        position: absolute;
        top: 10%;
        left: 5%;
        font-family: Rubik, sans-serif;
        text-align: center;
        transition: all .5sease-in-out;
	}
	
	.eventsSection > h1 {
        font-size: 12px !important;
        font-weight: 10;
        color: white !important;
        font-family: Rubik, sans-serif;
        text-align: center;
        position: relative;
        z-index: 1;
	}
	.eventsSection > p {
        font-size: 10px !important;
        color: white;
        font-family: Rubik, sans-serif;
        text-align: center;
        position: relative;
        z-index: 1;
	}
	
	.viewMoreProductsE {
        display: block  !important;
        margin-top: 5%  !important;
        width: 30%  !important;
        margin-left: auto  !important;
        margin-right: auto  !important;
        padding: 5% 2.5%  !important;
        border: 2px solid grey  !important;
        font-size: 10px !important;
        font-family: Rubik, sans-serif  !important;
        cursor: pointer  !important;
        transition: margin-left 0.5sease  !important;
	}
	
	    .blogPostsMainPageTitle {
        font-size: 20px !important;
        font-weight: bold;
        color: black;
        font-family: Rubik, sans-serif;
        text-align: center;
    }
	
	    .blogPostsMainPageDescription {
        font-size: 12px !important;
        color: grey;
        font-family: Rubik, sans-serif;
        text-align: center;
        margin-top: 2%;
    }
	
	.blogPostsSecondCointainer > .postMainPage {
    width: 100% !important;
    margin: 0 auto;
    display: block;
    position: inherit !important;
    top: 0;
    height: inherit !important;
}

.blogPostsSecondCointainer {
    width: 90% !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    position: relative !important;
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
	gap:30px;
}

.blogPostsSecondCointainer > .postMainPage:nth-child(2) {
    left: inherit !important;
}
.blogPostsSecondCointainer > .postMainPage:nth-child(3) {
    left: inherit !important;
}
}

/* Για οθόνες κάτω από 480px (πολύ μικρές συσκευές) */
@media (max-width: 480px) {
    .ourEvents > .ourEventsTitle {
        font-size: 1.2rem !important;
	}
    .ourEvents > .ourEventsDescription {
        font-size: 0.8rem !important;
	}
}


.newArrivals {
	display:block;
	padding:5% 4%;
	text-align:center;
	position:relative;
}

.newArrivals:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 85%; /* Μήκος του border-bottom ως ποσοστό του πλάτους του γονικού στοιχείου */
	height: 1px; /* Πάχος του border-bottom */
	background-color: grey;
	transition: width 0.5s ease;
	left:7.5%;
}

.newArrivals > div.newArrivalsTitle {
font-size:1.7vw;
font-weight:bold;
color:black;
font-family: Rubik,sans-serif;
text-align:center;
}

.newArrivals > div.newArrivalsDescription {
font-size:0.7vw;
color:grey;
font-family: Rubik,sans-serif;
text-align:center;
margin-top:2%;
}

.newArrivals > div.newArrivalsContent {
margin-top:2%;
text-align:center;
padding:1% 5%;
}

.newArrivals > div.newArrivalsContent > div.newArrivalsFilters {
display:flex;
justify-content:start;
gap:2%;
font-size:0.6vw;
font-family: Rubik,sans-serif;
}

.newArrivals > div.newArrivalsContent > div.newArrivalsFilters > div.newArrivalsFilter {
position: relative;
display: inline-block;
}

.newArrivals > div.newArrivalsContent > div.newArrivalsFilters > div.newArrivalsFilter::after {

content: "10"; /* Ο αριθμός που θέλετε να προσθέσετε */
position: absolute;
right: -15px;
top: -5px;
font-size: 12px;
line-height: 14px;
}

.newArrivals > div.newArrivalsContent > div.newArrivalsProducts {
display:flex;
justify-content:start;
flex-wrap:wrap;
margin-top:2%;
gap:5%
}

.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct {
width: 21.25%;
margin-top:2%;

}

.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct > div.newArrivalImg {
width: 100%;
position:relative;
overflow:hidden;
}

.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct > div.newArrivalImg > img.newArrivalTopImg {
position:relative;
opacity:1;
top:0;
left:0;
z-index:1;
transition:opacity 0.5s ease;
}

.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct > div.newArrivalImg > img.newArrivalBackImg {
position:absolute;
opacity:0;
top:0;
left:0;
z-index:0;
transition:opacity 0.5s ease;
}

.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct:hover img.newArrivalTopImg {
opacity:0 !important;
}

.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct:hover img.newArrivalBackImg {
opacity:1 !important;
}

.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct > div.newArrivalImg > div.new-tag {
width:15%;
top:15px;
padding:2% 1%;
font-size:0.6vw;
background:black;
color:white;
position:absolute;
left:5%;
top:5%;
border-radius:2px;
font-family: Rubik,sans-serif;
z-index:2;
}

.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct > div.newArrivalImg > div.sale-tag {
width:15%;
top:15px;
padding:2% 1%;
font-size:0.6vw;
background:red;
color:white;
position:absolute;
left:5%;
top:5%;
border-radius:2px;
font-family: Rubik,sans-serif;
z-index:2;
}

.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct > div.newArrivalImg > img{
width: 100%;
}

.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct > div.newArrivalCategories {
display:flex;
justify-content: space-between;
}

.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct > div.newArrivalCategories > div.categoriesContent {
font-size:0.6vw;
color:grey;
font-family: Rubik,sans-serif;
}

.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct > div.newArrivalCategories > div.addToFavorite i {
font-size:0.8vw;
color:grey;
}

.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct  > div.newArrivalTitle {
font-size:0.8vw;
color:grey;
font-family: Rubik,sans-serif;
text-align:left;
transition: color 0.5s; /* Χρόνος διάρκειας και ιδιότητα μετάβασης */
cursor: pointer; /* Προσθήκη cursor pointer για να δείξει ότι μπορεί να γίνει κλικ */
}

.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct  > div.newArrivalTitle:hover {
font-size:0.8vw;
color:#df0e0e;
}

.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct  > div.newArrivalPrice {
font-size:0.7vw;
font-weight:bold;
font-family: Rubik,sans-serif;
text-align:left;
margin-top:3%;
position:relative;
overflow:hidden;
height:25px;
}

.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct  > div.newArrivalPrice > .newArrivalPriceT {
position:absolute;
top:0;
left:0;
opacity:1;
transition: left 0.5s ease, opacity 0.3s ease;
}

.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct  > div.newArrivalPrice > .newArrivalButton {
position:absolute;
top:0;
left:-1000px;
transition: left 0.5s ease, opacity 0.3s ease, color 0.5s;
cursor:pointer;
opacity:0;
}
.addToFavorite:hover i{
color:red !important;
cursor:pointer !important;
}

.addToFavorites:hover i{
color:red !important;
cursor:pointer !important;
}

.newArrivalProduct:hover > div.newArrivalPrice > div.newArrivalPriceT  {
left:-100px !important;
opacity:0 !important;
}

.newArrivals > div.newArrivalsContent > div.newArrivalsProducts > div.newArrivalProduct:hover .newArrivalButton  {
left:0px !important;
opacity:1 !important;
}

div.newArrivalButton:hover  {
color:#df0e0e;
}

.newArrivalProduct {
opacity: 0;
transform: translateY(50px); /* Αρχική μετατόπιση κατά 50px προς τα κάτω */
transition: opacity 0.5s ease, transform 0.5s ease; /* Μετάβαση για opacity και transform */
}

.newArrivalProduct.visible {
opacity: 1;
transform: translateY(0); /* Καμία μετατόπιση κατά την εμφάνιση */
}

.viewMoreProducts {
display:block;
margin-top:5%;
width:12%;
margin-left:auto;
margin-right:auto;
padding:1.5% 2.5%;
border:2px solid grey;
font-size:0.8vw;
font-family: Rubik,sans-serif;
cursor:pointer;
transition: margin-left 0.5s ease;
}

.viewMoreProducts:hover {
animation: bounceLeftRight 1s ease-in-out;
}

@keyframes bounceLeftRight {
0% {
transform: translateX(5px);
}
25% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
75% {
transform: translateX(-5px);
}
100% {
transform: translateX(0);
}
}

.blogPostsMainPage {
display:block;
padding:5% 4%;
text-align:center;
position:relative;
}

.blogPostsMainPage:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 95%; /* Μήκος του border-bottom ως ποσοστό του πλάτους του γονικού στοιχείου */
height: 1px; /* Πάχος του border-bottom */
background-color: grey;
transition: width 0.5s ease;
left:15%;
}

.blogPostsMainPageTitle {
font-size:1.7vw;
font-weight:bold;
color:black;
font-family: Rubik,sans-serif;
text-align:center;
}

.blogPostsMainPageDescription {
font-size:0.7vw;
color:grey;
font-family: Rubik,sans-serif;
text-align:center;
margin-top:2%;
}

.blogPostsContainerMainPage {
width:95%;
margin:2% auto;
display:flex;
justify-content:center;
align-items:center;
}

.blogItems a {
color:inherit;
text-decoration:none;
}

.blogPostsContainerMainPage > .leftArrow, .blogPostsContainerMainPage > .rightArrow {
width:5%; margin:0 auto;
}

.blogPostsSecondCointainer {
width:90%;
margin:0 auto;
overflow:hidden;
position:relative;
height:750px;
}

.blogPostsSecondCointainer > .postMainPage {
width:30%;
margin:0 auto;
display:inline-block;
position:absolute;
top:0;
height:750px;
}

.blogPostsSecondCointainer > .postMainPage:nth-child(1) {
left:0;
}
.blogPostsSecondCointainer > .postMainPage:nth-child(2) {
left:35%;
}
.blogPostsSecondCointainer > .postMainPage:nth-child(3) {
left:70%;
}
.blogPostsSecondCointainer > .postMainPage:nth-child(4) {
left:105%;
}
.blogPostsSecondCointainer > .postMainPage:nth-child(5) {
left:140%;
}

.blogPostsSecondCointainer > .postMainPage > .postImg {
width:100%;
}
.blogPostsSecondCointainer > .postMainPage > .postImg > img{
width:100%;
}

.blogPostsSecondCointainer > .postMainPage > .postInformation {
text-align:left;
font-size:0.7vw;
color:grey;
font-family: Rubik,sans-serif;
margin-top:5%;

}
a.readMore {
width:50%;
color:black;
padding: 2% 1%;
border: 2px solid grey;
font-size: 0.8vw;
font-family: Rubik, sans-serif;
margin-top:20px;
display:block;
text-decoration:none;
margin-left:auto;margin-right:auto;
transition: margin-left 0.5s ease;
}

a.readMore:hover {
animation: bounceLeftRight 1s ease-in-out;
}



.blogPostsSecondCointainer > .postMainPage > .postTitle {
text-align:left;
font-size:0.9vw;
color:black;
font-weight:bold;
font-family: Rubik,sans-serif;
margin-top:2%;
}

.blogPostsSecondCointainer > .postMainPage > .postText {
text-align:left;
font-size:0.7vw;
color:grey;
font-family: Rubik,sans-serif;
margin-top:5%;
line-height:24px;
height:100px;
overflow:hidden;
}

.blogPostsSecondCointainer > .postMainPage > .postText:after {
content: "...";
position: absolute;
right: 3%;
bottom: 14.7%;
height: 24px; /* Πάχος του border-bottom */
transition: width 0.5s ease;
}

.leasingForCompanys {
display:block;
padding:5% 4%;
text-align:center;
position:relative;
}

.leasingForCompanysTitle {
font-size:1.7vw;
font-weight:bold;
color:black;
font-family: Rubik,sans-serif;
text-align:center;
}

.leasingForCompanysDescription {
font-size:0.7vw;
color:grey;
font-family: Rubik,sans-serif;
text-align:center;
margin-top:2%;
}

.leasingForCompanysContent {
background:#e9e9eb;
padding-top:0;
padding-left:5%;
padding-right:5%;
padding-bottom:5%;
margin-top:5%;
}

.leasingCompanysType {
margin:0 auto;
display:block;
width:50%;
margin:0 auto;
background:#fafafa;
display:flex;
justify-content:center;
}

.leasingCompanysTypeItem {
width:25%;
margin:0 auto;
padding:4%;
font-size:0.8vw;
color:#8a8a8a;
}

.leasingCompanysTypeItem i{
color:#8a8a8a;
font-size:1vw;
}

.leasingCompanysSamples {
background:white;
margin:0 auto;
display:block;
width:80%;
padding:2%;
}

.active {
background: white;
}


.newArrivals > div.newArrivalsTitle {
font-size:1.7vw;
font-weight:bold;
color:black;
font-family: Rubik,sans-serif;
text-align:center;
}

.newArrivals > div.newArrivalsDescription {
font-size:0.7vw;
color:grey;
font-family: Rubik,sans-serif;
text-align:center;
margin-top:2%;
}

.topCategories {
display:block;
padding:5% 4%;
position:relative;
}

.topCategories:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 85%; /* Μήκος του border-bottom ως ποσοστό του πλάτους του γονικού στοιχείου */
height: 1px; /* Πάχος του border-bottom */
background-color: grey;
transition: width 0.5s ease;
left:7.5%;
}

.topCategories > div.topCategoriesTitle {
font-size:1.7vw;
font-weight:bold;
color:black;
font-family: Rubik,sans-serif;
text-align:center;
}

.topCategories > div.topCategoriesDescription {
font-size:0.7vw;
color:grey;
font-family: Rubik,sans-serif;
text-align:center;
margin-top:2%;
}

.topCategories > div.topRowTC {
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
width:100%;
}

.topCategories > div.bottomRowTC{
display:flex;
align-items:center;
width:100%;
}

.topCategories > div.topRowTC > .rowTC {
background:#e9e9eb;
width:32%;
margin-left:auto;
margin-right:auto;
margin-top:5%;
position:relative;
overflow:hidden;
height:35vh;
cursor:pointer;

}

.topCategories > div.topRowTC > div.rowTC > img {
position:absolute;
width:100%;
left:0;
top:0;
transition: all .5s ease-in-out;;
}

.topCategories > div.topRowTC > div.rowTC > div.rowTCCategoryTitle {
font-size:0.8vw;
font-weight:bold;
color:white;
position:absolute;
top:10%;
left:5%;
font-family: Rubik,sans-serif;
text-align:center;
transition: all .5s ease-in-out;;
}

.topCategories > div.topRowTC > div.rowTC > div.rowTCPieces {
font-size:0.6vw;
font-weight:bold;
color:white;
position:absolute;
top:18%;
left:6%;
font-family: Rubik,sans-serif;
text-align:center;
transition: all .5s ease-in-out;;
}

.topCategories > div.topRowTC > div.rowTC:hover > div.rowTCCategoryTitle {
top:15%;
left:5%;
}

.topCategories > div.topRowTC > div.rowTC:hover > div.rowTCPieces {
top:23%;
left:6%;
}

.topCategories > div.topRowTC > div.rowTC:hover > img {
transform: scale(1.1);
}





.topCategories > div.bottomRowTC > .rowTC:nth-child(1) {
background:#e9e9eb;
width:65.34%;
margin-left:0.66%;
position:relative;
overflow:hidden;
height:35vh;
cursor:pointer;
margin-top:1.33%;
}

.topCategories > div.bottomRowTC > .rowTC:nth-child(2) {
background:#e9e9eb;
width:32%;
margin-top:1.33%;
margin-left:1.33%;
position:relative;
overflow:hidden;
height:35vh;
cursor:pointer;

}

.topCategories > div.bottomRowTC > div.rowTC:nth-child(1) > img {
position:absolute;
width:80%;
left:0;
top:0;
transition: all .5s ease-in-out;;
}

.topCategories > div.bottomRowTC > div.rowTC:nth-child(2) > img {
position:absolute;
width:100%;
left:0;
top:0;
transition: all .5s ease-in-out;;
}

.topCategories > div.bottomRowTC > div.rowTC > div.rowTCCategoryTitle {
font-size:0.8vw;
font-weight:bold;
color:white;
position:absolute;
top:10%;
left:5%;
font-family: Rubik,sans-serif;
text-align:center;
transition: all .5s ease-in-out;;
}

.topCategories > div.bottomRowTC > div.rowTC > div.rowTCPieces {
font-size:0.6vw;
font-weight:bold;
color:white;
position:absolute;
top:18%;
left:6%;
font-family: Rubik,sans-serif;
text-align:center;
transition: all .5s ease-in-out;;
}

.topCategories > div.bottomRowTC > div.rowTC:hover > div.rowTCCategoryTitle {
top:15%;
left:5%;
}

.topCategories > div.bottomRowTC > div.rowTC:hover > div.rowTCPieces {
top:23%;
left:6%;
}

.topCategories > div.bottomRowTC > div.rowTC:hover > img {
transform: scale(1.1);
}

.eventsSection {
position: relative;
background: url('/img/top12.jpg');
background-attachment: fixed;
background-size: cover;
padding: 10%;
text-align: center;
}

.eventsSection::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* Μαύρο με 50% διαφάνεια */
z-index: 1; /* Τοποθετήστε το πάνω από το background */
}

.eventsSection > h1 {
font-size:0.8vw;
font-weight:10;
color:white !important;
font-family: Rubik,sans-serif;
text-align:center;
position:relative;
z-index:1;
}

.eventsSection > h2 {
font-size:2vw;
color:white;
font-weight:bold;
font-family: Rubik,sans-serif;
text-align:center;
position:relative;
z-index:1;
}

.eventsSection > p {
font-size:0.8vw;
color:white;
font-family: Rubik,sans-serif;
text-align:center;
position:relative;
z-index:1;
}

.viewMoreProductsE {
display:block;
margin-top:5%;
width:12%;
margin-left:auto;
margin-right:auto;
padding:1.5% 2.5%;
border:2px solid white;
color:white;
font-size:0.8vw;
font-family: Rubik,sans-serif;
cursor:pointer;
transition: margin-left 0.5s ease;
position:relative;
z-index:1;
}

.viewMoreProductsE:hover {
animation: bounceLeftRight 1s ease-in-out;
}

.contactForm {
display:block;
padding:5% 5%;
text-align:center;
background:#e9e9eb;
}

.contactFormTitle {
font-size:1.7vw;
font-weight:bold;
color:black;
font-family: Rubik,sans-serif;
text-align:center;
}

.contactFormSubTitle {
font-size:0.7vw;
color:grey;
font-family: Rubik,sans-serif;
text-align:center;
margin-top:2%;
}

.contactFormElements {
width:60%;
margin:3% auto;
}

.formFirstPage {
display:block;
width:90%;
margin:0 auto;
}

.formFirstPage input {
display:block;
color:grey;
background:#e9e9eb;
}

.formFirstPage input:focus, .formFirstPage textarea:focus  {
outline:0;
}

.formFirstPage input[type=text],  .formFirstPage input[type=tel],  .formFirstPage input[type=email]{
width:40%;
display:inline-block;
margin:2% 2%;
border:0;
border-bottom:1px solid black;
line-height:50px;
}

.formButton,  textarea{
display:block;
}

textarea {
width:84%;
height:200px;
overflow-x:hidden;
resize:none;
margin:1% auto;
border:0;
border-bottom:1px solid black;
line-height:50px;
color:grey;
background:#e9e9eb;
}

.formButton {
width:25%;
margin:4% auto;
background:none;
padding:2% 5%;
text-align:center;
font-size:0.8vw;
border:0.5px solid black;
color:grey;
transition:all 0.5s ease-out;
cursor:pointer;
}

.formButton:hover {
background:black;
color:white;
}

.contactForm .divLine {
width:50% !important;
}

footer {
display:block;
width:100%;
background:#2c2c2c;
}

.footerContent {
padding:10% 5%;
display:flex;
justify-content:space-between;
}

.footerContent div {
width:23%;
margin:0 auto;
}

.footerContent .logoFooter img{
width:50%;
}

.logoFooter {
text-align:center;
}

.footerContent div ul {
list-style:none;
}

.footerContent div ul li{
color:white;
font-size:0.8vw;
line-height:25px;
width:fit-content;
display:block;
cursor:pointer;
font-family: Rubik,sans-serif;
}

.footerContent div ul a{
color:white;
font-size:0.8vw;
text-decoration:none;
}

.footerContent div ul li.activee {
border-bottom:0.5px solid white;
color:white;
}

.footerContent div ul li:hover {
border-bottom:0.5px solid white;
color:white;
}

.companyDetails {
display:block;
width:100% !important;
color:white;
text-align:center;
font-size:0.8vw;
margin-top:5% !important;
margin-bottom:5%;
font-family: Rubik,sans-serif;
}

.newsLetterRegister input[type=submit] {
width:80%;
margin:4% auto;
background:none;
padding:5% 5%;
text-align:center;
font-size:0.8vw;
border:0.5px solid white;
color:white;
transition:all 0.5s ease-out;
}

.newsLetterRegister input[type=submit]:hover {
background:white;
color:black;
}

.newsLetterRegister input[type=email]{
width:100%;
display:inline-block;
margin:2% 2%;
background:#2c2c2c;
border:0;
border-bottom:1px solid white;
line-height:50px;
color:white;
}
.newsLetterRegister input[type=email]:focus {
outline:none;
}

.nlTitle {
font-size:1vw;
display:block;
text-align:left !important;
color:white;
margin-left:auto !important;
}
.companyDetails span:nth-child(2) {
font-size:0.8vw !important;
}

.ourSign {
background:black;
padding:2% 5%;
text-align:left;
color:white;
}

.ourSign a{
text-decoration:none;
color:white;
font-family: Rubik,sans-serif;
}

/*Products Style*/

.products-header {
padding-top:10%;
padding-bottom:5%;
text-align:center;
}

.products-header  p:nth-child(1){
font-size:2.5vw;
color:#292929;
font-family: Rubik,sans-serif;
font-weight:bold;
margin-top:3%;
margin-bottom:1%;
}

.products-header  p:nth-child(2) {
font-size:0.7vw;
color:grey;
font-family: Rubik,sans-serif;
}

.productsContainer {
padding:1% 5%;
display:flex;
justify-content:center;
}

.productsFilter {
width:15%;
margin-right:auto;
}

.productsItems {
width:80%;
margin-left:auto;
}

/* Filter Price */
::selection{
color: #fff;
background: #17A2B8;
}
.wrapper{
width: 400px;
background: #fff;
border-radius: 10px;
}
.price-input{
width: 80%;
display: flex;
margin-top:1%;
margin-bottom:1%;
text-align:left;
}
.price-input .field{
display: flex;
width: 50%;
height: 45px;
align-items: center;
font-size: 0.7vw;
font-weight:bold;
font-family: Rubik,sans-serif;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.slider{
height: 5px;
position: relative;
background: #ddd;
border-radius: 5px;
}
.slider .progress{
height: 100%;
left: 0%;
right: 0%;
position: absolute;
border-radius: 5px;
background: #df0e0e;
}
.range-input{
position: relative;
}
.range-input input{
position: absolute;
width: 100%;
height: 7px;
top: -7px;
background: none;
pointer-events: none;
-webkit-appearance: none;
-moz-appearance: none;
}
input[type="range"]::-webkit-slider-thumb{
height: 17px;
width: 17px;
border-radius: 50%;
background: #df0e0e;
pointer-events: auto;
-webkit-appearance: none;
box-shadow: 0 0 6px rgba(0,0,0,0.05);
}
input[type="range"]::-moz-range-thumb{
height: 17px;
width: 17px;
border: none;
border-radius: 50%;
background: #17A2B8;
pointer-events: auto;
-moz-appearance: none;
box-shadow: 0 0 6px rgba(0,0,0,0.05);
}
/* Filter Price */

.settingsItem {
display:block;
text-align:left;
width:80%;
}

.settingsItem > .siTitle {
font-size: 1vw;
color:#0c0c0c;
font-weight:bold;
font-family: Rubik,sans-serif;
}

.siList {
display:block;
width:100%;
}

.siList > ul {
list-style:none;
padding:0;
}

.siList > ul > li > ul {
flex-direction:column;
list-style:none;
}

.siList > ul > li {
font-size: 0.8vw;
color:#666;
font-family: Rubik,sans-serif;
transition:all 0.5s ease-in-out;
margin-top:5%;
cursor:pointer;
}

.siList > ul > li > .titleMain:hover {
transition:all 0.5s ease-in-out;
color:#df0e0e;
}

.liClass2:hover {
transition:all 0.5s ease-in-out;
color:#df0e0e;
}

.liClass:hover {
transition:all 0.5s ease-in-out;
color:#df0e0e;
}

.siList > ul > li > ul {
transition:all 1s ease-in-out;
display:none;
opacity:0;
}

.siList > ul > li > .expand-btn {
margin-left:5%;
cursor:pointer;
}

.settingsItem > .filterBtn {
margin-top:5%;
width:25%;
padding:3%;
background:#0c0c0c;
text-align:center;
color:white;
font-size:0.8vw;
font-weight:bold;
font-family: Rubik,sans-serif;
}

li.expanded > ul{
display:block !important;
opacity:1 !important;
}

.flexView {
display:flex;justify-content:center;
flex-wrap:wrap;
}

.flexView > a {
width:32%;
text-decoration:none;
color:inherit;
margin:1% auto;
}

.flexView > a > div.productItem {
width:100%;
margin:0 auto;
display:block;
height:auto !important;
text-align:center;
position:relative;
overflow:hidden;
margin-top:5%;
cursor:pointer;
transition:all 0.5s ease-in-out;
}
.flexView > a > div.productItem > img {
width:100%;
}





.flexView > a > .productItem > .productInformations {
text-align:left;
width:100%;
margin:0 auto;
}

.flexView > a > .productItem > .productInformations > .productTitle {
color:#0c0c0c;
font-size:0.8vw;
font-weight:bold;
font-family: Rubik,sans-serif;
}

.flexView > a > .productItem > .productInformations > .productPrice {
color:#0c0c0c;
font-size:0.7vw;
font-weight:bold;
font-family: Rubik,sans-serif;
margin-top:2%;
}

.flexView > a > .productItem > .productInformations > .productDescription {
color:grey;
font-size:0.7vw;
line-height:1.2vw;
font-family: Rubik,sans-serif;
margin-top:2%;
overflow:hidden;
height:100px;
}

.flexView > a > .productItem > .productInformations > .productBtns {
display:flex;
font-family: Rubik,sans-serif;
margin-top:2%;
text-align:left;
align-items:center;
position:relative;
width:100%;
}

.flexView > a > .productItem > .productInformations > .productBtns > .addToCart {
border:1px solid grey;
padding:4% 3%;
width:40%;
text-align:center;
font-size:0.7vw;
cursor:pointer;
transition:all 0.5s ease-in-out;

}

.flexView > a > .productItem > .productInformations > .productBtns > .addToFavorites {
border:1px solid grey;
padding:3.5%;
width:10%;
margin-left:2%;
text-align:center;
align-items:center;
cursor:pointer;
transition:all 0.5s ease-in-out;
}

.flexView > a > .productItem > .productInformations > .productBtns > .addToFavorites > i{
font-size:0.8vw;
}

.flexView > a > .productItem > .productInformations > .productBtns > .addToFavorites > i:hover{
color:red;
}

.flexView > a > .productItem > .productInformations > .productBtns > .addToCart:hover {
color:white;
background:#0c0c0c;
}

.flexView > a > .productItem > .productInformations > .productBtns > .addToFavorites:hover {
color:white;
background:#0c0c0c;
}




























































































.productItem {
display:flex;
justify-content:center;
text-align:center;
height:35vh;
position:relative;
overflow:hidden;
margin-top:5%;
cursor:pointer;
transition:all 0.5s ease-in-out;
}

.productItem:hover {
transform:scale(1.02);
}

.productItem > img {
width:35%;
margin:0 auto;
}

.productItem > .productInformations {
text-align:left;
width:60%;
margin:0 auto;
}

.productItem > .productInformations > .productTitle {
color:#0c0c0c;
font-size:0.8vw;
font-weight:bold;
font-family: Rubik,sans-serif;
}

.productItem > .productInformations > .productPrice {
color:#0c0c0c;
font-size:0.7vw;
font-weight:bold;
font-family: Rubik,sans-serif;
margin-top:2%;
}

.productItem > .productInformations > .productDescription {
color:grey;
font-size:0.7vw;
line-height:1.2vw;
font-family: Rubik,sans-serif;
margin-top:2%;
}

.productItem > .productInformations > .productBtns {
display:flex;
font-family: Rubik,sans-serif;
margin-top:100%;
text-align:left;
align-items:center;
position:absolute;
bottom:0;
width:100%;
}

.productItem > .productInformations > .productBtns > .addToCart {
border:1px solid grey;
padding:2% 3%;
width:20%;
text-align:center;
font-size:0.8vw;
cursor:pointer;
transition:all 0.5s ease-in-out;
}

.productItem > .productInformations > .productBtns > .addToFavorites {
border:1px solid grey;
padding:1.95%;
width:4%;
margin-left:2%;
text-align:center;
align-items:center;
cursor:pointer;
transition:all 0.5s ease-in-out;
}

.productItem > .productInformations > .productBtns > .addToFavorites > i{
font-size:0.8vw;
}

.productItem > .productInformations > .productBtns > .addToFavorites > i{
font-size:0.8vw;
}

.productItem > .productInformations > .productBtns > .addToCart:hover {
color:white;
background:#0c0c0c;
}

.productItem > .productInformations > .productBtns > .addToFavorites:hover {
color:white;
background:#0c0c0c;
}

.productsItems > .viewSettings {
display:flex;
justify-content: space-between;
}

.productsItems > .productsContainerViewer > a {
text-decoration:none;
color:inherit;
}

.productsItems > .viewSettings > .countPiecesView {
font-size:0.8vw;
font-family: Rubik,sans-serif;
}

.productsItems > .viewSettings > .otherOptions {
display:flex;
justify-content:center;
align-items:center;
gap:20px;
font-size:0.8vw;
font-family: Rubik,sans-serif;
}

.productsItems > .viewSettings > .otherOptions > .sortingOption > select{
border:none;
font-size:0.8vw;
font-family: Rubik,sans-serif;
}
.productsItems > .viewSettings > .otherOptions > .sortingOption > select:focus{
outline:none;
}

.productsItems > .viewSettings > .otherOptions > .viewOnOption{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}

.productsItems > .viewSettings > .otherOptions > .viewOnOption > span > i{
cursor:pointer;
}

.productsItems > .viewSettings > .otherOptions > .viewOnOption > span > i:hover {
color:red;
}

.productsItems > .loadMoreBtn {
width:25%;
margin:5% auto;
border:1px solid #0c0c0c;
cursor:pointer;
padding:2%;
transition:all 0.5s ease-in-out;
text-align:center;
font-size:1vw;
font-family: Rubik,sans-serif;
}

.productsItems > .loadMoreBtn:hover {
background:#0c0c0c;
color:white;
}

iframe#map {
width:80%;
padding:2%;
margin:0 auto;
border-radius:5px;
}

.mapIframe {
display: flex;
justify-content: center;
align-items: center;
}

.contactContainerV2 {
display:flex;
padding:2% 10%;
justify-content:space-between;
}

.contactContainerV2 > .aboutUsV2 {
width:45%;
text-align:left;
}


.contactContainerV2 > .aboutUsV2 > .auTitleV2{
font-size:1vw;
font-family: Rubik,sans-serif;
font-weight:bold;
}

.contactContainerV2 > .aboutUsV2 > .auDescriptionV2{
font-size:0.8vw;
font-family: Rubik,sans-serif;
color:grey;
margin-top:5%;
}

.contactContainerV2 > .aboutUsV2 > .contactInformationV2 {
font-size:0.8vw;
font-family: Rubik,sans-serif;
color:grey;
margin-top:5%;
line-height:1.2vw;
}

.contactContainerV2 > .contactFormV2 {
width:53%;
text-align:left;
}

.contactContainerV2 > .contactFormV2 > .contactFormTitleV2 {
font-size:1vw;
font-family: Rubik,sans-serif;
font-weight:bold;
}
.contactContainerV2 > .contactFormV2 > form > .formElement {
font-size:0.7vw;
margin-top:3%;
}

.contactContainerV2 > .contactFormV2 > form > .formElement >  label {
font-size:0.8vw;
font-family: Rubik,sans-serif;
line-height:1vw;
}

.contactContainerV2 > .contactFormV2 > form > .formElement > input {
width:95%;
text-align:left;
border:1px solid #ebebeb;
padding:1.8%;
font-size:0.7vw;
margin-top:1%;
}

.contactContainerV2 > .contactFormV2 > form > .formElement > input:focus {
outline:none;
}

.contactContainerV2 > .contactFormV2 > form > .formElement > textarea:focus {
outline:none;
}

.contactContainerV2 > .contactFormV2 > form > .formElement > textarea {
width:95%;
text-align:left;
border:1px solid #ebebeb;
padding:1.8%;
font-size:0.7vw;
margin-top:1%;
background:none;
}

.contactContainerV2 > .contactFormV2 > form > .formElement > button {
width:25%;
background:#0c0c0c !important;
border:none;
color:white;
text-align:center;
padding:1.8%;
font-size:0.7vw;
margin-top:1%;
cursor:pointer;
}


.blogContainer {
padding:1% 15%;
display:flex;
justify-content:center;
}

.blogFiltersContainer {
width:30%;
margin-right:auto;
}

.blogItems {
width:75%;
margin-left:auto;
}

.blogItem {
display:flex;
justify-content:center;
text-align:center;
height:35vh;
position:relative;
overflow:hidden;
margin-top:5%;
cursor:pointer;
transition:all 0.5s ease-in-out;
}

.blogItem:hover {
transform:scale(1.02);
}

.blogItem > img {
width:35%;
margin:0 auto;
}

.blogItem > .blogInformations {
text-align:left;
width:60%;
margin:0 auto;
position:relative;
}

.blogItem > .blogInformations > .blogTitle {
color:#df0e0e;
font-size:0.9vw;
font-weight:bold;
font-family: Rubik,sans-serif;
}

.blogItem > .blogInformations > .blogPrice {
color:#0c0c0c;
font-size:0.7vw;
font-weight:bold;
font-family: Rubik,sans-serif;
margin-top:2%;
}

.blogItem > .blogInformations > .blogDescription {
color:grey;
font-size:0.7vw;
line-height:1.2vw;
font-family: Rubik,sans-serif;
margin-top:2%;
max-height:50%;
overflow:hidden;
}

.blogItem > .blogInformations > .blogBtns {
display:flex;
font-family: Rubik,sans-serif;
margin-top:5%;
text-align:left;
width:100%;
}

.blogItem > .blogInformations > .blogBtns > .read-more {
width:20%;
text-align:center;
font-size:0.8vw;
cursor:pointer;
color:#df0e0e;
font-family: Rubik,sans-serif;
transition:all 0.5s ease-in-out;
}
.blogFiltersContainer {
width:24%;
text-align:left;
}

.blogFiltersContainer > .searchBlog > form > input[type=text] {
padding: 6px;
font-size: 0.8vw;
width:90%;
border: none;
font-family: Rubik,sans-serif;
background:none;
}
.blogFiltersContainer > .searchBlog > form > input[type=text]:focus {
outline:0;
}

.blogFiltersContainer > .searchBlog > form > button {
float: right;
padding: 6px 10px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
width:10%;
border: none;
background:none;
cursor: pointer;
}

.blogFiltersContainer > .searchBlog > form > button:hover {
}

.blogFiltersContainer > .searchBlog > form {
width:100%;
border:1px solid #ebebeb;
display:flex;
padding:2%;
}

.blogCategoriesFilter {
margin-top:10%;
}

.blogCategoriesFilter > .bcfTitle {
font-family: Rubik,sans-serif;
font-size:0.9vw;
font-weight:bold;
}

.blogCategoriesFilter > ul {
list-style:none;
padding:0 !important;
}

.ulList li {
list-style:none;
padding:0;
font-family: Rubik,sans-serif;
font-size:0.8vw;
color:grey;
margin-top:3%;
cursor:pointer;
transition:all 0.5s ease-in-out;
}
.ulList li:hover {
color:#df0e0e;
}

.blogItems > .loadMoreBtn {
width:25%;
margin:5% auto;
border:1px solid #0c0c0c;
cursor:pointer;
padding:2%;
transition:all 0.5s ease-in-out;
text-align:center;
font-size:1vw;
font-family: Rubik,sans-serif;
}

.blogItems > .loadMoreBtn:hover {
background:#0c0c0c;
color:white;
}

.productContainer {
padding-top:10%;
padding-left:10%;
padding-right:10%;
}

/*productItem style*/
.relativeProducts {
display:block;
padding:5% 4%;
text-align:center;
position:relative;
}

.relativeProducts > div.relativeProductsTitle {
font-size:1.7vw;
font-weight:bold;
color:black;
font-family: Rubik,sans-serif;
text-align:center;
}

.relativeProducts > div.relativeProductsItems {
display:flex;
justify-content:center;
margin-top:2%;
}

.relativeProducts > div.relativeProductsItems > a {
color:inherit;
text-decoration:none;
width:100%;
}

.relativeProducts div.relativeProductsItems > a > div.relativeProductsProduct {
width: 90%;
cursor:pointer;
margin:0 auto;
}

.relativeProducts > div.relativeProductsItems > a > div.relativeProductsProduct > div.relativeProductsImg {
width: 100%;
position:relative;
overflow:hidden;
}

.relativeProducts > div.relativeProductsItems > a > div.relativeProductsProduct > div.relativeProductsImg > img.relativeProductsTopImg {
position:relative;
opacity:1;
top:0;
left:0;
z-index:1;
transition:opacity 0.5s ease;
}

.relativeProducts > div.relativeProductsItems > a > div.relativeProductsProduct > div.relativeProductsImg > img.relativeProductsBackImg {
position:absolute;
opacity:0;
top:0;
left:0;
z-index:0;
transition:opacity 0.5s ease;
}

.relativeProducts > div.relativeProductsItems > a > div.relativeProductsProduct:hover img.relativeProductsTopImg {
opacity:0 !important;
}

.relativeProducts > div.relativeProductsItems > a > div.relativeProductsProduct:hover img.relativeProductsBackImg {
opacity:1 !important;
}

.relativeProducts > div.relativeProductsItems > a > div.relativeProductsProduct > div.relativeProductsImg > img{
width: 100%;
}

.relativeProducts > div.relativeProductsItems > a > div.relativeProductsProduct > div.relativeProductsCategories {
display:flex;
justify-content: space-between;
}

.relativeProducts > div.relativeProductsItems > a > div.relativeProductsProduct > div.relativeProductsCategories > div.categoriesContent {
font-size:0.6vw;
color:grey;
font-family: Rubik,sans-serif;
}

.relativeProducts > div.relativeProductsItems > a > div.relativeProductsProduct > div.relativeProductsCategories > div.addToFavorite i {
font-size:0.8vw;
color:grey;
}

.relativeProducts > div.relativeProductsItems > a > div.relativeProductsProduct  > div.relativeProductsTitle {
font-size:0.8vw;
color:grey;
font-family: Rubik,sans-serif;
text-align:left;
transition: color 0.5s; /* Χρόνος διάρκειας και ιδιότητα μετάβασης */
cursor: pointer; /* Προσθήκη cursor pointer για να δείξει ότι μπορεί να γίνει κλικ */
}

.relativeProducts > div.relativeProductsItems > a > div.relativeProductsProduct  > div.relativeProductsTitle:hover {
font-size:0.8vw;
color:#df0e0e;
}

.relativeProducts > div.relativeProductsItems > a > div.relativeProductsProduct  > div.relativeProductsPrice {
font-size:0.7vw;
font-weight:bold;
font-family: Rubik,sans-serif;
text-align:left;
margin-top:3%;
position:relative;
overflow:hidden;
height:25px;
}

.relativeProducts > div.relativeProductsItems > a > div.relativeProductsProduct  > div.relativeProductsPrice > .relativeProductsPriceT {
position:absolute;
top:0;
left:0;
opacity:1;
transition: left 0.5s ease, opacity 0.3s ease;
}

.relativeProducts > div.relativeProductsItems > a > div.relativeProductsProduct  > div.relativeProductsPrice > .relativeProductsButton {
position:absolute;
top:0;
left:-1000px;
transition: left 0.5s ease, opacity 0.3s ease, color 0.5s;
cursor:pointer;
opacity:0;
}

.relativeProducts > div.relativeProductsItems > a > div.relativeProductsProduct:hover div.relativeProductsPrice > div.relativeProductsPriceT  {
left:-100px !important;
opacity:0 !important;
}

.relativeProducts > div.relativeProductsItems > a > div.relativeProductsProduct:hover .relativeProductsButton  {
left:0px !important;
opacity:1 !important;
}

div.relativeProductsButton:hover  {
color:#df0e0e;
}

div.productBreadcrumber {
color:grey;
text-align:left;
font-size:0.8vw;
font-family: Rubik,sans-serif;
padding-bottom:2%;
}

div.productTopSection {
display:flex;
justify-content:space-between;
}

div.productTopSection > .imageSection {
display:flex;
width:48%;
text-align:left;
position:relative;
}

div.productTopSection > .imageSection > .photoGallery {
height:50vh;
width:25%;
margin:0 auto;
overflow:hidden;

}

div.productTopSection > .imageSection > .up-arrow{
position:absolute;
width:15px;
height:15px;
left:10%;
top:0;
padding:1%;
background:white;
text-align:center;
border-radius:50%;
}

div.productTopSection > .imageSection > .down-arrow{
position:absolute;
width:15px;
height:15px;
left:10%;
bottom:0;
padding:1%;
text-align:center;
background:white;
border-radius:50%;
}

div.productTopSection > .imageSection > .up-arrow > i{
font-size:0.8vw;
}

div.productTopSection > .imageSection > .down-arrow > i{
font-size:0.8vw;
}

div.productTopSection > .imageSection > .photoGallery > img {
width:90%;
display:block;
margin-bottom:1%;
cursor:pointer;
}

div.productTopSection > .imageSection > .viewPhoto {
width:74%;
height:50vh;
margin:0 auto;
}

div.productTopSection > .imageSection > .viewPhoto > img {
width:100%;
}

div.productTopSection > .shortInformationSection {
width:48%;
text-align:left;
}

div.productTopSection > .shortInformationSection > .pcTitle {

font-size:1vw;
font-weight:bold;
color:black;
font-family: Rubik,sans-serif;
}

div.productTopSection > .shortInformationSection > .resultRating {
margin-top:3%;
}

div.productTopSection > .shortInformationSection > .resultRating > span {

font-size:0.8vw;
color:black;
font-family: Rubik,sans-serif;
margin-right:2%;
}

div.productTopSection > .shortInformationSection > .resultRating > i {

font-size:0.8vw;
color:#df0e0e;
}

div.productTopSection > .shortInformationSection > .pcPrice {
font-size:0.8vw;
color:black;
margin-top:3%;
font-weight:bold;
font-family: Rubik,sans-serif;
}

div.productTopSection > .shortInformationSection > .pcMonthsLeasing {
display:flex;
flex-direction:row;
gap:20px;
justify-content:start;
align-items:center;
font-size:0.8vw;
color:black;
margin-top:3%;
font-weight:bold;
font-family: Rubik,sans-serif;
margin-left:auto;
}

div.productTopSection > .shortInformationSection > .pcMonthsLeasing > .monthLeasing {
width:25px;
height:25px;
border-radius:50%;
color:white;
background:black;
padding:12.5px;
font-weight:normal;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}

div.productTopSection > .shortInformationSection > .pcMonthsLeasing > .monthLeasing:hover {
animation: bounce 0.5s;
}


@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}

div.relativeProductsPrice > .pcMonthsLeasing {
display:flex;
flex-direction:row;
gap:5px;
justify-content:start;
align-items:center;
font-size:0.8vw;
color:black;
margin-top:3%;
font-weight:bold;
font-family: Rubik,sans-serif;
margin-left:auto;
}

div.relativeProductsPrice > .pcMonthsLeasing > .monthLeasing {
width:10px;
height:10px;
border-radius:50%;
color:white;
background:black;
padding:5px;
font-weight:normal;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:0.5vw;
margin-top:5%;
}

div.relativeProductsPrice > .pcMonthsLeasing >  .pcMonthsLeasingTitle {
font-weight:normal;
font-size:0.8vw;
margin-top:5%;
}


div.productTopSection > .shortInformationSection > .shortDescription {
font-size:0.7vw;
color:grey;
margin-top:3%;
font-family: Rubik,sans-serif;
}

div.productTopSection > .shortInformationSection > .pcBtns {
display:flex;
width:100%;
text-align:left;
padding-top:5%;
padding-bottom:5%;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
margin-top:3%;
align-items:center;
}

div.productTopSection > .shortInformationSection > .pcBtns > .counter {
width:15%;
border:2px solid grey;
padding:2%;
text-align:center;
display:flex;
justify-content:center;
align-items:center;
}

div.productTopSection > .shortInformationSection > .pcBtns > .counter > span#plusCounter {
width:25%;
font-weight:bold;
font-size:1vw;
font-family: Rubik,sans-serif;
text-align:left;
cursor:pointer;
user-select:none;
}

div.productTopSection > .shortInformationSection > .pcBtns > .counter > span#minusCounter {
width:25%;
font-weight:bold;
font-size:1vw;
font-family: Rubik,sans-serif;
text-align:right;
cursor:pointer;
user-select:none;
}

div.productTopSection > .shortInformationSection > .pcBtns > .counter > span#numberCounter {
width:25%;
font-size:0.8vw;
font-family: Rubik,sans-serif;
text-align:center;
color:grey;
font-weight:0 !important;
}

div.productTopSection > .shortInformationSection > .pcBtns > .addToCartBtn {
font-family: Rubik,sans-serif;
font-size:0.8vw;
padding:2%;
width:25%;
margin-left:2%;
border-radius:2px;
text-align:center;
color:white;
background:#0c0c0c;
cursor:pointer;
}

div.productTopSection > .shortInformationSection > .pcBtns > .addToFavoritesBtn {
font-family: Rubik,sans-serif;
font-size:0.8vw;
padding:2%;
width:5%;
margin-left:2%;
border-radius:2px;
text-align:center;
border:1px solid grey;
cursor:pointer;
}

div.productTopSection > .shortInformationSection > .pcSku {
font-size:0.8vw;
color:black;
margin-top:3%;
font-family: Rubik,sans-serif;
}

div.productTopSection > .shortInformationSection > .pcCategories {
font-size:0.8vw;
color:black;
margin-top:3%;
font-family: Rubik,sans-serif;
}

div.productBottomSection {
display:block;
text-align:center;
margin-top:10%;
}

div.productBottomSection > .pbsBtns {
display:flex;
text-align:center;
margin-bottom:5%;
justify-content:center;
gap:5%;
}

div.productBottomSection > .pbsBtns > span {
display:block;
text-align:center;
font-size:1vw;
color:grey;
font-weight:bold;
cursor:pointer;
font-family: Rubik,sans-serif;
}

div.productBottomSection > .pbsBtns > span.show {
color:black !important;
}

div.productBottomSection > .longDescription {
margin-top:3%;
text-align:left;
font-size:0.8vw;
color:grey;
font-family: Rubik,sans-serif;
}

div.productBottomSection > .ratingSection {
margin-top:3%;
text-align:left;
font-family: Rubik,sans-serif;
}

div.productBottomSection > .ratingSection > .rateItem{
padding-top:3%;
padding-bottom:3%;
border-bottom:1px solid grey;
}

div.productBottomSection > .ratingSection > .rateItem > .rateItemInformation > .userRate {
text-align:left;
font-size:0.8vw;
font-family: Rubik,sans-serif;
}

div.productBottomSection > .ratingSection > .rateItem > .rateItemInformation > .marksRate {
text-align:left;
font-size:0.8vw;
}

div.productBottomSection > .ratingSection > .rateItem > .rateItemInformation > .marksRate i {
color:#df0e0e;
font-size:0.8vw;
}

div.productBottomSection > .ratingSection > .rateItem > .rateItemLogs {
color:grey;
margin-top:1%;
font-size:0.8vw;
}

div.productBottomSection > .ratingSection > .addReviewForm {
margin-top:3%;
display:block;
text-align:left;
}

div.productBottomSection > .ratingSection > .addReviewForm > .addReviewFormTitle {
font-size:0.8vw;
font-family: Rubik,sans-serif;
font-weight:bold;
}

div.productBottomSection > .ratingSection > .addReviewForm > .addReviewFormStars {
margin-top:3%;
}

div.productBottomSection > .ratingSection > .addReviewForm > .addReviewFormStars > span {
margin-right:1%;
font-weight:bold;
font-family: Rubik,sans-serif;
font-size:0.8vw;
}

div.productBottomSection > .ratingSection > .addReviewForm > .addReviewFormStars > i {
color:#df0e0e;
font-size:0.8vw;
}


div.productBottomSection > .ratingSection > .addReviewForm > .addReviewFormTextArea {
text-align:left;
margin-top:3%;
}

div.productBottomSection > .ratingSection > .addReviewForm > .addReviewFormTextArea > p{
font-weight:bold;
font-family: Rubik,sans-serif;
font-size:0.8vw;
}

div.productBottomSection > .ratingSection > .addReviewForm > .addReviewFormTextArea > textarea {
margin-right:auto;
width:100%;
background:none;
border:1px solid grey;
}

div.productBottomSection > .ratingSection > .addReviewForm > .addReviewFormTextArea > textarea:hover {
outline:0;
}

div.productBottomSection > .ratingSection > .addReviewForm > .addReviewFormBtn {
width:15%;
text-align:center;
padding:2%;
background:black;
cursor:btn;
color:white;
font-family: Rubik,sans-serif;
font-size:0.8vw;
}

.blogPost > .blogContainer {
padding-top:10%;
padding-bottom:5%;
}

.blogPost > .blogContainer > .blogItemsV2 {
display:block;
width:100%;
text-align:center;
}

.blogPost > .blogContainer > .blogItemsV2 > .blogItemV2 > .blogDate{
display:block;
width:100%;
font-family: Rubik,sans-serif;
font-size:0.8vw;
color:grey;
}

.blogPost > .blogContainer > .blogItemsV2 > .blogItemV2 > .blogTitleV2 {
display:block;
padding-top:2%;
padding-bottom:2%;
text-align:center;
font-family: Rubik,sans-serif;
font-size:2vw;
font-weight:bold;
}

.blogPost > .blogContainer > .blogItemsV2 > .blogItemV2 > img {
display:block;
padding-top:2%;
padding-bottom:2%;
width:70%;
margin:0 auto;
}

.blogPost > .blogContainer > .blogItemsV2 > .blogItemV2 > .blogInformationsV2 {
width:100%;
padding-top:2%;
padding-bottom:2%;
color:grey;
}

.blogPost > .blogContainer > .blogItemsV2 > .blogItemV2 > .blogInformationsV2 > .blogDescriptionV2 {
text-align:left;
font-size:0.8vw;
font-family: Rubik,sans-serif;
line-height:1.2vw;
}

.blogPost > .blogContainer > .blogItemsV2 > .sharePost {
padding-top:2%;
padding-bottom:2%;
margin-top:2%;
width:100%;
border-top:1px solid grey;
border-bottom:1px solid grey;
text-align:left;
}

.blogPost > .blogContainer > .blogItemsV2 > .sharePost > span {
font-size:0.8vw;
font-family: Rubik,sans-serif;
margin-right:1%;
}

.blogPost > .blogContainer > .blogItemsV2 > .sharePost > i {
font-size:0.8vw;
margin-right:1%;
width: 40px;
height: 40px;
line-height:38px;
text-align: center;
border: 1px solid #ebebeb;
border-radius: 50%;
transition:all 0.5s ease-in-out;
}

.blogPost > .blogContainer > .blogItemsV2 > .sharePost > i:hover {
border: 1px solid black;
}

.blogPost > .blogContainer > .blogItemsV2 > .categoryListOfPost {
padding-top:2%;
padding-bottom:2%;
width:100%;
text-align:left;
}

.blogPost > .blogContainer > .blogItemsV2 > .categoryListOfPost > span:nth-child(1) {
font-size:0.8vw;
font-family: Rubik,sans-serif;
}

.blogPost > .blogContainer > .blogItemsV2 > .categoryListOfPost > span.category {
font-size:0.8vw;
font-family: Rubik,sans-serif;
color:grey;
cursor:pointer;
transition:all 0.5s ease-in-out;
}

.blogPost > .blogContainer > .blogItemsV2 > .categoryListOfPost > span.category:hover {
color:#df0e0e;
}

.nlRegister {
padding:3%;
width:60%;
margin-left:auto;
margin-right:auto;
text-align:center;
}

.nlRegister > .nlRegisterTitle {
font-size:1.3vw;
font-weight:bold;
color:black;
font-family: Rubik,sans-serif;
}

.nlRegister > .nlRegisterSubTitle {
font-size:0.7vw;
color:grey;
font-family: Rubik,sans-serif;
margin-top:1%;
}

.nlRegister > form {
display:grid;
}

.nlRegister > form > input {
color:black;
font-family: Rubik,sans-serif;
font-size:0.7vw;
border:none;
border-bottom:1px solid grey;
padding:1% 1%;
margin:1% auto;
text-align:center;
width:50%;
}

.nlRegister > form > input:focus {
outline:none;
}

.nlRegister > form > button {
color:black;
font-family: Rubik,sans-serif;
font-size:0.7vw;
border:none;
background:black;
color:white;
padding:1.8% 1%;
margin:1% auto;
text-align:center;
width:15%;
cursor:pointer;
}

.cartContainer {
margin-top:2%;
display:block;
padding:5%;
background-color:#ebebeb;
text-align:center;
width:80%;
margin-left:auto;
margin-right:auto;
}

.cartItem {
display:flex;
justify-content:center;
align-items:center;
}

.cartItem > div {
width: 14%;
font-size:0.8vw;
font-family: Rubik,sans-serif;
}

.cartItem > div.product_image_cart > img {
width: 50%;
}

.cartItem.main {
font-size:0.8vw;
text-decoration:underline;
font-weight:bold;
font-family: Rubik,sans-serif;
}

.product_quantity_cart > span.plusCounter {
width:20%;
font-weight:bold;
font-size:1vw;
font-family: Rubik,sans-serif;
text-align:left;
cursor:pointer;
user-select:none;
}

.product_quantity_cart > span.minusCounter {
width:25%;
font-weight:bold;
font-size:1vw;
font-family: Rubik,sans-serif;
text-align:right;
cursor:pointer;
user-select:none;
}

.product_quantity_cart > span.numberCounter {
width:20%;
font-size:0.8vw;
font-family: Rubik,sans-serif;
text-align:center;
color:grey;
font-weight:0 !important;
}
.cartDetails {
width:80%;
margin:1% auto;
}

.cartDetails > form {
display:flex;
align-items:center;
justify-content:center;
}
#orderAddress {
width:25%;
margin:0 auto;
border:none;
border-bottom:1px solid black;
font-size:0.8vw;
font-family: Rubik,sans-serif;
text-align:center;
padding:2%;
}

#datePickup {
width:25%;
margin:0 auto;
border:none;
border-bottom:1px solid black;
font-size:0.8vw;
font-family: Rubik,sans-serif;
text-align:center;
padding:2%;
user-select:none;
}

#dateReturn {
width:25%;
margin:0 auto;
border:none;
border-bottom:1px solid black;
font-size:0.8vw;
font-family: Rubik,sans-serif;
text-align:center;
padding:2%;
user-select:none;
}

#orderAddress:focus, #datePickup:focus, #dateReturn:focus {
outline:none;
}

.table {
width:30%;
margin:0 auto;
text-align:center;
}

.table table {
width: 80%; /* Adjusted width to fill the parent container */

margin-left:auto;
margin-right:auto;
border: 1px solid #ebebeb;
font-size: 0.8vw;
font-family: Rubik, sans-serif;
padding: 2%;
text-align: center;
border-collapse: collapse;
}

.table table tr {
border: 1px solid #ebebeb;
font-size: 0.8vw;
font-family: Rubik, sans-serif;
padding: 2%;
}

.table table td,
.table table th {
border: 1px solid #ebebeb;
font-size: 0.8vw;
font-family: Rubik, sans-serif;
padding: 2%;
}

.cardDetailsFlex {
margin-top:5%;
margin-bottom:5%;
margin-left:auto;margin-right:auto;
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
}

.transportationDetails {
text-align:center;
width:30%;
margin-left:auto;
margin-right:auto;
font-size: 0.8vw;
font-family: Rubik, sans-serif;
}

.completeBtn {
text-align:center;
width:30%;
margin-left:auto;
margin-right:auto;
font-size: 0.8vw;
font-family: Rubik, sans-serif;
color:white;
cursor:pointer;
}

.completeBtn > span {
text-align:center;
width:40%;
margin-left:auto;
margin-right:auto;
font-size: 0.8vw;
font-family: Rubik, sans-serif;
padding:5% 7%;
background:black;
color:white;
cursor:pointer;
}

.loginContainer {
width:80%;
margin-left:auto;
margin-right:auto;
margin-top:2%;
margin-bottom:10%;
padding:0 5%;
text-align:center;
}

.loginContainer > form {
width:40%;
margin:0 auto;
text-align:center;
}

.loginContainer > form > input {
width:80%;
margin:0 auto;
text-align:center;
border:none;
border-bottom:1px solid black;
padding:5%;
font-size: 0.8vw;
font-family: Rubik, sans-serif;
}

.loginContainer > form > input:focus {
outline:0;
}

.loginContainer > form > button {
width:30%;
margin:4% auto;
text-align:center;
background:black;
color:white;
border:none;
padding:3%;
font-size: 0.8vw;
font-family: Rubik, sans-serif;
cursor:pointer;
}

.forgotPassword, .createAccount {
font-size: 0.8vw;
font-family: Rubik, sans-serif;
margin-bottom:2%;
}

.forgotPassword > a, .createAccount > a {
color:black;
}

.registerContainer {
width:80%;
margin-left:auto;
margin-right:auto;
margin-top:2%;
margin-bottom:10%;
padding:0 5%;
text-align:center;
}

.registerContainer > form {
width:40%;
margin:0 auto;
text-align:center;
}

.registerContainer > form > input {
width:80%;
margin:0 auto;
text-align:center;
border:none;
border-bottom:1px solid black;
padding:5%;
font-size: 0.8vw;
font-family: Rubik, sans-serif;
}

.registerContainer > form > input:focus {
outline:0;
}

.registerContainer > form > button {
width:30%;
margin:4% auto;
text-align:center;
background:black;
color:white;
border:none;
padding:3%;
font-size: 0.8vw;
font-family: Rubik, sans-serif;
cursor:pointer;
}

.registerContainer > .registerInstructions {
font-size: 0.8vw;
font-family: Rubik, sans-serif;
}

.registerContainer > form > input:required {
border-bottom:1px solid red;
color:black;
}

.registerContainer > form > input:required:focus {
border-bottom:1px solid black;
color:black;
}
.registerContainer > form > input:required:valid {
border-bottom: 1px solid black;
color: black;
}

.settingsNavBar {
position:relative;
}

.settingsNavBar > .settingsOptions {
text-align:center;
position:absolute;
height:0px;
top:150%;
left:-200px;
padding:0;
width:200px;
background:white;
border:0px solid #ebebeb;
filter: drop-shadow(0px 0px 4px rgba(0.0, 0.0, 0.0, 0.5));
cursor:inherit !important;
transition:all 1s ease-in-out;
overflow:hidden;
}

.settingsNavBar > .settingsOptions > div{
font-size: 0.8vw;
padding:2%;
font-family: Rubik, sans-serif;
text-align:left;
color:grey;
cursor:pointer;
}

.settingsNavBar > .settingsOptions > div.settingTitle{
font-size: 0.8vw;
font-family: Rubik, sans-serif;
font-weight:bold;
color:black
}

.settingsNavBar > .settingsOptions > div#greekLanguage:hover{
color:red;
}

.settingsNavBar > .settingsOptions > div#englishLanguage:hover{
color:red;
}

.myaccountContainer {
padding-top:10%;
display:flex;
}

.myaccountContainer > .myaccountNavigator {
display:flex;
flex-direction:column;
width:10%;
margin:0 auto;
text-align:left;
padding-left:5%;
}

.myaccountContainer > .myaccountNavigator > .myaccountNavigatorItem {
font-family: Rubik, sans-serif;
font-size:0.8vw;
padding:6%;
border-radius:5px;
margin-bottom:5%;
color:#4852e9;
font-weight:bold;
cursor:pointer;
}

.myaccountContainer > .myaccountNavigator > .activeLink {
background:#ecf3fe;
}

.linksContainer {
width:75%;
margin:0 auto;
}

.linksContainer > .Account{
width: 100%;
}

.linksContainer > .Account > table{
width: 80%;
margin: 2% auto;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
border-radius:15px;
border:1px solid #ebebeb;
table-layout: fixed;

}
.linksContainer > .Account > table > tbody > tr{
width: 100%;
display:block;
border-bottom:1px solid #ebebeb;
}

.linksContainer > .Account > table > tbody > tr:hover{
background:#eddfff;
cursor:pointer;
}

.linksContainer > .Account > table > tbody > tr > td{
width: 90% !important;
padding:2%;
font-family: Rubik, sans-serif;
font-size:0.8vw;
display:flex;
justify-content:space-between;
margin:0 auto;
text-align:left;

}
.linksContainer > .Account > table > tbody > tr > td > span{
width: 32% !important;
text-align:left;
color:grey;
}

.linksContainer > .Account > table > thead > tr > th{
width: 50%;
padding:5%;
font-family: Rubik, sans-serif;
font-size:0.8vw;
}


.linksContainer > .InvoiceInfo{
width: 100%;
}

.linksContainer > .InvoiceInfo > table{
width: 80%;
margin: 2% auto;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
border-radius:15px;
border:1px solid #ebebeb;
table-layout: fixed;

}
.linksContainer > .InvoiceInfo > table > tbody > tr{
width: 100%;
display:block;
border-bottom:1px solid #ebebeb;
}

.linksContainer > .InvoiceInfo > table > tbody > tr:hover{
background:#eddfff;
cursor:pointer;
}

.linksContainer > .InvoiceInfo > table > tbody > tr > td{
width: 90% !important;
padding:2%;
font-family: Rubik, sans-serif;
font-size:0.8vw;
display:flex;
justify-content:space-between;
margin:0 auto;
text-align:left;

}
.linksContainer > .InvoiceInfo > table > tbody > tr > td > span{
width: 32% !important;
text-align:left;
color:grey;
}

.linksContainer > .InvoiceInfo > table > thead > tr > th{
width: 50%;
padding:5%;
font-family: Rubik, sans-serif;
font-size:0.8vw;
}

.linksContainer > .Orders{
width: 100%;
position:relative;
height:50vw !important;
}

.linksContainer > .Orders > table{
width: 80%;
margin: 2% auto;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
border-radius:15px;
border:1px solid #ebebeb;
table-layout: fixed;
position:absolute;
transition:all 1s ease-in-out;
}
.linksContainer > .Orders table:nth-child(1) {
top:0 !important;
left:0;
}

.returnToOrdersTable {
font-size:1vw;
font-family: Rubik, sans-serif;
cursor:pointer;
color:grey;
}
.returnToOrdersTable:hover {
color:black;
}

.product_order_item {
font-size:0.8vw;
font-family: Rubik, sans-serif;
}

.odtProductsList h2, .odtProductsList p {
font-size:0.8vw;
font-family: Rubik, sans-serif;
}
.linksContainer > .Orders table:nth-child(2) {
top:0 !important;
left:1000%;
}
.linksContainer > .Orders > table > tbody > tr{
width: 100%;
display:block;
border-bottom:1px solid #ebebeb;
}

.linksContainer > .Orders > table > tbody > tr:hover{
background:#eddfff;
cursor:pointer;
}

.linksContainer > .Orders > table > tbody > tr > td{
width: 90% !important;
padding:2%;
font-family: Rubik, sans-serif;
font-size:0.8vw;
display:flex;
justify-content:space-between;
margin:0 auto;
text-align:left;

}
.linksContainer > .Orders > table > tbody > tr > td > span{
width: 18% !important;
text-align:left;
color:grey;
}

.linksContainer > .Orders > table > thead > tr > th{
width: 50%;
padding:5%;
font-family: Rubik, sans-serif;
font-size:0.8vw;
}

.linksContainer > .Invoices{
width: 100%;
}

.linksContainer > .Invoices > table{
width: 80%;
margin: 2% auto;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
border-radius:15px;
border:1px solid #ebebeb;
table-layout: fixed;

}
.linksContainer > .Invoices > table > tbody > tr{
width: 100%;
display:block;
border-bottom:1px solid #ebebeb;
}

.linksContainer > .Invoices > table > tbody > tr:hover{
background:#eddfff;
cursor:pointer;
}

.linksContainer > .Invoices > table > tbody > tr > td{
width: 90% !important;
padding:2%;
font-family: Rubik, sans-serif;
font-size:0.8vw;
display:flex;
justify-content:space-between;
margin:0 auto;
text-align:left;

}
.linksContainer > .Invoices > table > tbody > tr > td > span{
width: 18% !important;
text-align:left;
color:grey;
}

.linksContainer > .Invoices > table > thead > tr > th{
width: 50%;
padding:5%;
font-family: Rubik, sans-serif;
font-size:0.8vw;
}
.refreshCartBtn {
margin-top:5%;
width:10%;
margin:0 auto;
padding:1%;
font-family: Rubik, sans-serif;
font-size:0.8vw;
color:white;
background:black;
cursor:pointer;
}

.pagesNav {
display:flex;
flex-direction:row;
width:100%;
justify-content:space-between;
margin-top:10%;
}

.pagesSubNav {
display:flex;
flex-direction:row;
width:15%;
margin-right:auto;
justify-content:center;
}

.pageBtn {
display:23%;
font-size:0.8vw;
margin:0 auto;
color:black;
}

.pageNum {
display:23%;
font-size:0.8vw;
margin:0 auto;
color:black;
font-family: Rubik, sans-serif;
}

.pageSubNum {
display:23%;
text-align:right;
font-size:0.8vw;
color:black;
font-family: Rubik, sans-serif;
}

.pageSubNum a {
text-decoration:none;
font-size:0.8vw;
color:black;
font-family: Rubik, sans-serif;
}

.product_delete_btn_cart {
cursor:pointer;
}

.product_delete_btn_cart:hover {
color:red;
}

.ourEventsContent {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:2% 3%;
}

.eventOnView {
width: 80%;
height: 500px;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}

.eventOnView img {
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
transition: opacity 0.5s ease;
}

.eventOnViewBox {
position: absolute;
width: 100%;
height:500px;
top:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

.eventOnViewTopTitle, .eventOnViewDate, .eventOnViewBtn {
font-family: Rubik, sans-serif;
padding:1% 0;
transition: opacity 0.5s ease;
}

.eventOnViewTopTitle {
font-size: 2em;
color: #fff;
}

.eventOnViewDate {
font-size: 1.2em;
color: #fff;
}

.eventOnViewBtn {
margin-top:2%;
font-size: 1em;
padding: 1% 2%;
color: white;
cursor: pointer;
text-transform: uppercase;
border:1px solid white;
transition:all 0.5s ease-in-out;
}

.eventOnViewBtn:hover {
color: black;
background:white;
}

.carousel-container {
position: relative;
width: 80%;
margin: auto;
overflow: hidden;
display:flex;
flex-direction:row;
gap:10px;
justify-content:center;
align-items:center;
}

.carousel {
display: flex;
overflow: hidden;
}

.carousel-track {
display: flex;
transition: transform 0.5s ease;
}

.lastEvent {
flex: 0 0 33.33%; /* Display three items at a time */
box-sizing: border-box;
padding: 2% 1%;
text-align: center;

cursor:pointer;
}

.lastEvent img {
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
height:250px;
}

.lastEventTitle {
margin-top: 10px;
font-size: 1.2em;
color: black;
font-family: Rubik, sans-serif;
}

.carousel-button {
border:none;
background:none;
margin-bottom:2%;
}

.carousel-button i {
font-size:1vw;
color:black;
}

/*Collections*/
.ourCollectionsContent {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:2% 3%;
}

.collectionOnView {
width: 80%;
height: 500px;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}

.collectionOnView img {
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
transition: opacity 0.5s ease;
}

.collectionOnViewBox {
position: absolute;
width: 100%;
height:500px;
top:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

.collectionOnViewTopTitle, .collectionOnViewDate, .collectionOnViewBtn {
font-family: Rubik, sans-serif;
padding:1% 0;
transition: opacity 0.5s ease;
}

.collectionOnViewTopTitle {
font-size: 2em;
color: #fff;
}

.collectionOnViewDate {
font-size: 1.2em;
color: #fff;
}

.collectionOnViewBtn {
margin-top:2%;
font-size: 1em;
padding: 1% 2%;
color: white;
cursor: pointer;
text-transform: uppercase;
border:1px solid white;
transition:all 0.5s ease-in-out;
}

.collectionOnViewBtn:hover {
color: black;
background:white;
}

.carousel1-container {
position: relative;
width: 80%;
margin: auto;
overflow: hidden;
display:flex;
flex-direction:row;
gap:10px;
justify-content:center;
align-items:center;
}

.carousel1 {
display: flex;
overflow: hidden;
}

.carousel1-track {
display: flex;
transition: transform 0.5s ease;
}

.lastCollection {
flex: 0 0 33.33%; /* Display three items at a time */
box-sizing: border-box;
padding: 2% 1%;
text-align: center;

cursor:pointer;
}

.lastCollection img {
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
height:250px;
}

.lastCollectionTitle {
margin-top: 10px;
font-size: 1.2em;
color: black;
font-family: Rubik, sans-serif;
}

.carousel1-button {
border:none;
background:none;
margin-bottom:2%;
}

.carousel1-button i {
font-size:1vw;
color:black;
}

.ourCollections > div.ourCollectionsTitle {
font-size:1.7vw;
font-weight:bold;
color:black;
font-family: Rubik,sans-serif;
text-align:center;
margin-top:5%;
}

.ourCollections > div.ourCollectionsDescription {
font-size:0.7vw;
color:grey;
font-family: Rubik,sans-serif;
text-align:center;
margin-top:2%;
}

.eventsContainer {
display:flex;
flex-wrap:wrap;
justify-content:start;
align-items:center;
width:80%;
margin:5% auto;
gap:5%;
}

a.eventPost {
width:30%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
margin-top:2%;
text-decoration:none;
}

.eventPhoto {
width:100%;
}

.eventPhoto img{
width:100%;
}

.eventContainer {
display: flex;
flex-direction: row;
justify-content: flex-start;
width: 90%;
margin: 5% auto;
position: relative;
}

.eventPhotoSide {
flex-grow: 1; /* Αφήνει το grid να μεγαλώνει ανάλογα με το περιεχόμενο */
}

.grid-item {
width: 30%;
margin-bottom: 2.5px;
padding: 5px;
box-sizing: border-box;
}

.grid-item img {
width: 100%;
display: block;
height: auto;
}

.content {
padding-top: 100px; /* Για να αποφύγουμε την επικάλυψη από τη navbar */
position: relative;
}

/* Η στήλη με τις πληροφορίες */
.eventInformation {
position: sticky;
top: 100px !important; /* Μικρή απόσταση από την κορυφή του viewport */
width: 30%; /* Σταθερό πλάτος για την ευθυγράμμιση */
margin-left: 20px;
padding: 20px;
z-index: 10;
height:100px;
background-color: white; /* Βεβαιώσου ότι το background είναι ορατό */
}

.eventInformation h1 {
font-size: 1.2em;
color: black;
font-family: Rubik, sans-serif;
}

.eventInformation p span {
font-size: 1em;
color: black;
font-family: Rubik, sans-serif;
font-weight: bold;
}

.eventInformation p {
font-size: 0.9em;
color: black;
font-family: Rubik, sans-serif;
}

.pc3DFile {
margin-top: 20px;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #333;
display: flex;
align-items: center;
gap: 10px;
}

.pc3DFile-buttons {
display: flex;
gap: 10px;
}

.pc3DFile-button {
position: relative;
display: inline-block;
padding: 10px 15px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
text-align: center;
text-decoration: none;
color: #fff;
background-color: #000; /* Μαύρο background */
overflow: hidden;
border-radius: 5px;
cursor: pointer;
z-index: 1;
}

.pc3DFile-button::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 200%;
height: 200%;
background-color: rgba(255, 255, 255, 0.3); /* Λευκό, ημιδιαφανές κύμα */
border-radius: 40%;
transform: translateX(-50%) translateY(0);
transition: transform 0.5s ease;
z-index: 0;
}

.pc3DFile-button:hover::before {
transform: translateX(-50%) translateY(-150%);
transition: transform 0.5s ease;
}

.pc3DFile-button::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
background-color: rgba(255, 255, 255, 0.3); /* Λευκό, ημιδιαφανές κύμα */
border-radius: 40%;
transform: translateX(-50%) translateY(100%);
z-index: 0;
pointer-events: none;
transition: transform 0.6s ease;
}

.pc3DFile-button:hover::after {
transform: translateX(-50%) translateY(-50%);
transition: transform 0.6s ease;
}

.pc3DFile-button:hover {
color: #fff;
background-color: #000;
}

.pc3DFile-button span {
position: relative;
z-index: 1;
}

.pc3DFile span {
margin-right: 15px;
}
/* --- Γενικό Στυλ για το Modal --- */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgba(0,0,0,0.8);
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#3dViewer {
    width: 100%;
    height: 100%;
    display: block;
}

.close {
    color: white;
    position: absolute;
    top: 15px;
    right: 35px;
    font-size: 40px;
    font-weight: bold;
    z-index: 1001;
    text-shadow: 0 0 5px black;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* --- Οθόνη Προτροπής για Περιστροφή (ΜΟΝΟ ΓΙΑ ΚΙΝΗΤΑ) --- */
.orientation-lock-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    color: white;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: sans-serif;
}

.orientation-lock-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.orientation-lock-icon {
    font-size: 5em;
    animation: rotate-animation 1.5s ease-in-out infinite;
}

/* --- Η ΔΙΟΡΘΩΣΗ ΕΙΝΑΙ ΕΔΩ --- */
/* Εμφάνιση της οθόνης ΜΟΝΟ όταν το modal είναι ανοιχτό ΚΑΙ η συσκευή κάθετη */
@media (orientation: portrait) and (max-width: 800px) {
    body.modal-is-open .orientation-lock-overlay {
        display: flex;
    }
}

@keyframes rotate-animation {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(-90deg); }
    100% { transform: rotate(-90deg); }
}

#3dViewer canvas {
width: 100% !important;
height: 100% !important; /* Πλήρης ύψος του modal */
border-radius: 5px;
}

.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 80px;
height: 80px;
animation: spin 2s linear infinite;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}

@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}



.feature-box {
width:30%;
margin:5% auto;
background-color: #fff;
border-radius: 10px;
opacity: 0;
transform: translateX(50px);
transition: all 0.5s ease-in-out;
}

.feature-box img {
max-width: 100%;
border-radius: 10px;
}

.feature-box h3 {
margin-top: 15px;
font-size: 1vw;
color: #333;
}

.feature-box p {
margin-top: 10px;
color: #555;
font-size: 0.8vw;
}

.feature-box.show {
opacity: 1;
transform: translateX(0);
}

.left {
transform: translateX(-50px);
}

.timeline {
margin: 20px auto;
padding: 20px;

}

/* Card container */
.card {
position: relative;
max-width: 40%;
margin:0 auto;
}

.card * {
font-family: Rubik,sans-serif;
}

.card h3 {
color:#171717;
font-size:1vw;
}

.card p {
font-size:0.8vw;
}

/* setting padding based on even or odd */
.card:nth-child(odd) {
padding: 30px 0 30px 30px;
}
.card:nth-child(even) {
padding: 30px 30px 30px 0;
}
/* Global ::before */
.card::before {
content: "";
position: absolute;
width: 50%;
border: solid #d3d3d3;
}

.card .image img {
width:100%;
border-radius:15px;
}

.card .image {
width:40%;
border-radius:15px;
}

/* Setting the border of top, bottom, left */
.card:nth-child(odd)::before {
left: 0px;
top: -1.5px;
bottom: -1.5px;
border-width: 2px 0 2px 2px;
border-style:dashed;
border-radius: 50px 0 0 50px;
}

.info .content {
width:40%;
padding:0 !important;
}

/* Setting the top and bottom to "-5px" because earlier it was out of a pixel in mobile devices */
@media only screen and (max-width: 400px) {
.card:nth-child(odd)::before {
top: -5px;
bottom: -5px;
}
}

/* Setting the border of top, bottom, right */
.card:nth-child(even)::before {
right: 0;
top: 0;
bottom: 0;
border-width: 2px 2px 2px 0;
border-style:dashed;
border-radius: 0 50px 50px 0;
}

/* Removing the border if it is the first card */
.card:first-child::before {
border-top: 0;
border-top-left-radius: 0;
}

/* Removing the border if it is the last card  and it's odd */
.card:last-child:nth-child(odd)::before {
border-bottom: 0;
border-bottom-left-radius: 0;
}

/* Removing the border if it is the last card  and it's even */
.card:last-child:nth-child(even)::before {
border-bottom: 0;
border-bottom-right-radius: 0;
}

/* Information about the timeline */
.info {
display: flex;
flex-direction: row;
color: gray;
border-radius: 10px;
padding: 10px;
justify-content:space-evenly;
align-items:center !important;
}

/* Title of the card */
.title {
color: orangered;
position: relative;
}

/* Timeline dot  */
.title::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 999px;
border: 3px solid orangered;

}

/* text right if the card is even  */
.card:nth-child(even) > .info > .title {
text-align: right;
}

/* setting dot to the left if the card is odd */
.card:nth-child(odd) > .info > .title::before {
left: -45px;
}

/* setting dot to the right if the card is odd */
.card:nth-child(even) > .info > .title::before {
right: -45px;
}

.card {
opacity: 0;
transform: translateY(50px);
transition: all 0.6s ease-out;
}

.card.show {
opacity: 1;
transform: translateY(0);
}

.categories-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #dedede;
margin-top: 5%;
padding: 2% 15%;
}

.categories-box-title {
margin: 0 auto;
font-size: 2vw;
color: black;
font-family: Rubik, sans-serif;
text-align: left !important;
width: 100%;
position: relative;
display: inline-block; /* Προσθέτει εμφάνιση "inline-block" για σωστή ευθυγράμμιση */
}

.categories-box-title::after {
content: "";
display: inline-block;
width: 50px; /* Μήκος της γραμμής */
height: 3px; /* Πάχος της γραμμής */
background-color: #4CAF50; /* Χρώμα της γραμμής */
position: absolute;
top: 60%; /* Ευθυγράμμιση κάθετα στο κέντρο */
transform: translateY(-50%); /* Διόρθωση θέσης για τέλεια κεντράρισμα */
left: 30%; /* Απόσταση από το κείμενο */
}

.categories-box-content {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
align-items: top;
}

.categories-box-Titles {
width: 50%;
counter-reset: category-counter; /* Ξεκινάει ο μετρητής */
}

.category-box-title {
padding: 10px 0;
font-size: 1vw;
cursor: pointer;
font-family: Rubik, sans-serif;
color: black;
display: flex;
align-items: center;
counter-increment: list-item;
position: relative;
}

.category-box-title::before {
content: counter(list-item, decimal-leading-zero);
margin-right: 15px; /* Απόσταση μεταξύ αριθμού και γραμμής */
color: #4CAF50;
font-weight: bold;
}

.category-box-title::after {
content: "";
display: inline-block;
width: 0px; /* Αρχικό μήκος της γραμμής */
height: 2px; /* Πάχος της γραμμής */
background-color: #4CAF50; /* Χρώμα της γραμμής */
margin-left: 15px; /* Απόσταση μεταξύ γραμμής και κειμένου */
position: relative;
top: 0;
transition: width 0.3s ease; /* Προσθήκη animation για την ομαλή αλλαγή του πλάτους */
}

.category-box-title.active::after {
width: 50px; /* Το μήκος της γραμμής όταν το στοιχείο είναι ενεργό */
}

.category-box-title.active {
font-weight: bold;
color: #4CAF50;
background: #dedede;
}

.category-box-title:hover::after {
width: 50px; /* Μεγαλώνει η γραμμή στο hover */
}

.category-box-title:not(.active):hover::after {
width: 50px; /* Μεγαλώνει η γραμμή στο hover για τα μη ενεργά στοιχεία */
}


.categories-box-Photos {
width: 50%;
}

.category-box-photo {
width: 100%;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
}

.category-box-photo img {
width: 45%;
border-radius: 8px;
}

.category-box-photo.hidden {
display: none;
}

/* Dropdown περιεχόμενο */
/* Dropdown περιεχόμενο */
.dropdownContentNavLeasing {
display: none;
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
min-width: 160px;
z-index: 1;
}

.dropdownContentNavLeasing a {
padding: 12px 16px;
}

/* Κρατάμε το dropdown ανοιχτό όταν το ποντίκι είναι πάνω σε αυτό */
.dropdownNavLeasing:hover .dropdownContentNavLeasing,
.dropdownContentNavLeasing:hover {
display: block;
}

/* Sub-categories (dropdown μέσα σε dropdown) */
.dropdownSubContentNavLeasing {
display: none;
position: absolute;
left: 100%; /* Τοποθετεί το sub-dropdown ακριβώς δίπλα στο dropdownContent */
background-color: white;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
min-width: 160px;
padding: 12px 16px;
top:0; /* Ρυθμίζουμε το ύψος ώστε να ταιριάζει με το στοιχείο */
}

/* Εμφάνιση των sub-dropdowns όταν γίνεται hover */
.dropdownContentNavLeasing a:hover + .dropdownSubContentNavLeasing,
.dropdownSubContentNavLeasing:hover {
display: block;
}

/* Στυλ για τα links */
.dropdownContentNavLeasing a,
.dropdownSubContentNavLeasing a {
color: black;
text-decoration: none;
display: block;
padding: 8px 12px;
}

.dropdownContentNavLeasing a:hover,
.dropdownSubContentNavLeasing a:hover {
background-color: #f1f1f1;
}

.navItemDropCont {
position:relative;
}

.userInfoOrderBtnsList {
display:flex;
flex-direction:row;
justify-content:center;
gap:2%;
}

.userInfoOrder_button {
width:15%;
padding:1% 1%;
background:black;
color:white;
text-align:center;
font-family: Rubik, sans-serif;
cursor:pointer;
}

.userInfoOrder form {
display:flex;
flex-direction:column;
justify-content:center;
flex-wrap:wrap;
}

.userInfoOrder form .outlet_input {
display:block;
width:35%;
padding:1% 2%;
border:none;
border-bottom:1px solid black;
background:transparent;
font-family: Rubik, sans-serif;
margin:2% auto;
}

.userInfoOrder form .outlet_input:focus {
outline:0;
}

.outlet_input_btn {
background:black;
border:0;
color:white;
padding:1% 2%;
width:15%;
margin:2% auto;
font-family: Rubik, sans-serif;

}

.feature-section {
width:100%;
margin-top:25px;
margin-left:auto;
margin-right:auto;
justify-content:center;
flex-wrap:wrap;
display:flex;
position:relative;
z-index:2;
}

.serviceItem {
width:30%;
margin:0 auto;
text-align:left;
position:relative;
z-index:2;}

.clear {
clear:both;
}

.ourServicesSubTitle {
width:50%;
margin:0 auto;
text-align:center;
font-size:0.8vw;
position:relative;
z-index:2;
color:white;
}

.serviceItem {
display:block;
text-align:center;
vertical-align:middle;
align-items: center;
margin-top:40px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
width:30%;
border-radius:5px;
position:relative;
z-index:2;
}



.serviceText {
width:100%;
margin-left:auto;
margin-right:auto;
position: relative;
perspective: 1000px;
cursor:pointer;
position:relative;
z-index:2;
}

.serviceText img {
width:100%;
}

.serviceText .serviceTextTitle {
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1);
transition: all 0.5s ease;
font-size:1vw;
position:relative;
z-index:2;
}

.serviceText .serviceTextTitle img{
width:100%;
}

.serviceText .fas {
font-size:1.7vw;
}

.serviceText .serviceTextEtc {
position: absolute;
top: 0;
left: 0;
z-index: 10;
padding: 30px;
opacity: 0;
transform-style: preserve-3d;
backface-visibility: hidden;
transform: translateY(110px) rotateX(-90deg);
transition: all 0.5s ease;
display: flex;
height:100%;
justify-content:center;
align-items:center;
vertical-align:middle;
background:white;
color:black;
}
.whyLeasingTitle {
font-size: 1.7vw;
font-weight: bold;
color: black;
font-family: Rubik, sans-serif;
text-align: center;
text-align:center;
margin-top:2%;
}
.serviceText:hover .serviceTextEtc {
opacity: 1;
transform: rotateX(0deg);
}

.serviceText:hover .serviceTextTitle {
opacity: 0;
transform: translateY(-110px) rotateX(90deg);
}


.serviceIcon i {
font-size:40px !important;
}

.serviceTextTitle {
font-size:1vw;
font-weight:bold;
background-image: radial-gradient(#0070ed, #c3f4ff);
color: transparent;
background-clip: text;
-webkit-background-clip: text;
}

.serviceTextEtc {
font-size:1.2vw;
}

.cartDetails .overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
}

.paymentContainer {

padding: 20px;
text-align: center;
background-color: white;
width: 100%;
height:100%;
}

.paymentOptions {
margin-top: 20px;
display:flex;
align-items:center;
justify-content:center;
flex-direction:row;
height:100%;
}

.paymentOption {
display: inline-block;
padding: 10px 20px;
margin: 10px;
border: 2px solid black;
background-color: transparent;
font-size: 18px;
cursor: pointer;


}

.paymentOption:hover {
background-color: #f0f0f0;
}

.logos-scroll {
width: 100%;
margin: 2% auto;
overflow: hidden;
position: relative;
}

.logo-track {
display: flex;
width: calc(20% * 30); /* 18 logos in total (9 logos duplicated) */
animation: scroll 30s linear infinite;
}

.logo-item {
flex: 0 0 300px;
display: flex;
justify-content: center;
align-items: center;
}

.logos-scroll img {
max-height: 225px;
opacity: 0.7;
transition: * 0.3s ease;
}

.logos-scroll img:hover {
transform:scale(1.1);
}

@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-250px * 15)); /* Μετακίνηση κατά το πλάτος των 9 αρχικών λογότυπων */
}
}

.trustedBy {
text-align:center;
margin-top:2%;
margin-bottom:2%;

font-size: 1.2vw;
font-weight: bold;
color: black;
font-family: Rubik, sans-serif;
}
.form-container {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 5%;
font-family: Rubik, sans-serif;
}
input, textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: none;
border-bottom: 1px solid lightgray;
outline: none;
font-family: Rubik, sans-serif;
}
.table-container {
width: 100%;
margin-top: 20px;
font-family: Rubik, sans-serif;
}
table {
width: 100%;
border-collapse: collapse;
font-family: Rubik, sans-serif;
}
table, th, td {
border-bottom: 1px solid lightgray;
font-family: Rubik, sans-serif;
}
th, td {
padding: 10px;
text-align: left;
font-family: Rubik, sans-serif;
}
.add-remove-btn {
padding: 5px 10px;
border: 1px solid lightgray;
background-color: #f0f0f0;
font-family: Rubik, sans-serif;
cursor: pointer;
}
.add-remove-btn:hover {
background-color: #e0e0e0;
font-family: Rubik, sans-serif;
}
.reason-container label {
margin-top: 20px;
font-family: Rubik, sans-serif;
display:flex;
flex-direction:row;
gap:10px;
align-items:center;
}
.submit-btn {
margin-top: 20px;
padding: 10px 20px;
background-color: lightgray;
font-family: Rubik, sans-serif;
border: none;
cursor: pointer;
}
.submit-btn:hover {
background-color: gray;
font-family: Rubik, sans-serif;
color: white;
}