@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap);
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&family=Noto+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sofia&display=swap');



@keyframes progress-bar-stripes {
    0%{background-position: 1rem 0
}

to {
    background-position: 0 0
}}

@keyframes spinner-border {
    to {
        transform: rotate(360deg)
    }
}

@keyframes spinner-grow {
    0% {
        transform: scale(0)
    }

    50% {
        opacity: 1;
        transform: none
    }
}

@keyframes action {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-15px)
    }
}

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #E09145;
    --secondary: #6ebbf6;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #fef1ef;
    --dark: #211e1c;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: "Poppins", sans-serif;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace
}

*,::after,::before {
    box-sizing: border-box
}

*::focus {
    outline: none;
    border: none;
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth !important;
    -webkit-scroll-behavior: smooth !important;
}

article,aside,figcaption,figure,footer,header,hgroup,main,nav,section {
    display: block
}

body {
    margin: 0;
    font-family: 'EB Garamond', serif !important;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #11212d;
    background-color: #fff7ea;
    height: 4000px;
    overflow-x: hidden;
}

.text-primary {
    color: #ba986c !important;
    font-family: 'EB Garamond', serif !important;
}

.text-secondary {
    color: #937354 !important;
    font-family: 'EB Garamond', serif !important;
}

.text-center {
    text-align: center!important
}

.bg-transparent {
    background-color: transparent!important
}

.p-4 {
    padding: 1.5rem!important
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    margin-top: 1rem;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1)
}

a {
    color: #937354;
    text-decoration: none;
    background-color: transparent;
    text-transform: uppercase;
    transition: .5s;
    scroll-behavior: smooth !important;
}

a:hover {
    color: #fcbf86!important;
}

.container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-image: url(../img/place.jpg);
    background-size: cover;
    overflow: hidden;
    z-index: 1;
}

.glass {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    background: rgba(26, 26, 26, 0.459);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3.9px);
    -webkit-backdrop-filter: blur(3.9px);
    z-index: -999;
}


.logo {
    width: 150px;
}

.flags {
    position: absolute;
    right: 50px;
}

.grecee,.usa {
    max-width: 40px;
    transition: .5s;
    margin: 0 3px;
}

.usa {
    height: 40px;
    border-radius: 25%
}

.grecee {
    height: 29px;
    border-radius: 5px;
    transform: translateY(-5px);
}

.flag:hover {
    scale: 1.1;
    cursor: pointer;
}

.btn {
    background-color: #937354;
    color: #fff;
    transition: .3s;
    font-weight: 400;
    border: 1px solid transparent;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    padding: 5px 10px;
}

.btn:hover {
    background-color: #ba986c;
    cursor: pointer;
}

.navbar {
    position: fixed;
    z-index: 999 !important;
    width: 100%;
    height: 20%;
    padding: .5rem 5rem;
    transition: .5s;
    font-size: 1.5rem;
    background: #363636;
    background: linear-gradient(0deg,rgba(54, 54, 54, 0.15) 0%, rgba(0, 0, 0, 0.63) 100%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalogue-title:hover {
    color: #fcbf86 !important;
    transform: scale(1.1);
}

.catalogue-hero {
    margin-top: 20vh;
    display: flex;
    text-align: center;
}

.title-cont { 
    width: 100%;
    height: 100%;
    margin-left: 100px;
}

.hero-title {
    font-size: 3.5rem;
    text-transform: uppercase;
}

.hero-subtitle {
    font-size: 2.5rem;
    margin-top: 45px;
    font-weight: 500;
    text-transform: capitalize;
    /* font-family: "Sofia", cursive !important; */
}

.arrow {
    font-size: 10rem;
    animation: action 1s infinite alternate;
    color: #ba986c;
    display: inline-block;
    transition: .5s;
}

.arrow:hover {
    cursor: pointer;
}

.line {
    width: 2px;
    height: 100vh;
    background: #ba986c;
    opacity: 0.5;
    border-radius: 5px;
    margin-left: 150px;
    margin-top: 55px;
}

.best-cont {
    width: 100%;
    height: 90%;
}

.best-cont h2 {
    font-size: 3rem;
    text-transform: uppercase;
    transition: .5s;
}

.hero-p {
    font-size: 1.3rem;
    margin: 20px auto;
    width: 400px;
    color: #947454;
}

.services-flex {
    display: flex;
    padding: 0 100px;
    width: 100%;
    justify-content: space-between;
}

.carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__prev > label:nth-child(5), .carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__next > label:nth-child(2), .carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__prev > label:nth-child(1), .carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__next > label:nth-child(3), .carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__prev > label:nth-child(2), .carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__next > label:nth-child(4), .carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__prev > label:nth-child(3), .carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__next > label:nth-child(5), .carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__prev > label:nth-child(4), .carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__next > label:nth-child(1) {
	 opacity: 1 !important;
	 z-index: 3;
}

 .slider-container {
	 width: 700px;
	 min-width: 700px;
	 margin: 0px auto;
}
 .carousel {
	 width: 100%;
	 position: relative;
	 overflow: hidden;
     border-radius: 10px;
}
 .carousel > input[type="radio"] {
	 position: absolute;
	 left: 0;
	 opacity: 0;
	 top: 0;
}
 .carousel > input[type="radio"]:checked ~ .carousel__items .carousel__item, .carousel > input[type="radio"]:checked ~ .carousel__prev > label, .carousel > input[type="radio"]:checked ~ .carousel__next > label {
	 opacity: 0;
}
 .carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__items .carousel__item:nth-child(1) {
	 opacity: 1;
}
 .carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__nav > label:nth-child(1) {
	 background: #ccc;
	 cursor: default;
	 pointer-events: none;
}
 .carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__items .carousel__item:nth-child(2) {
	 opacity: 1;
}
 .carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__nav > label:nth-child(2) {
	 background: #ccc;
	 cursor: default;
	 pointer-events: none;
}
 .carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__items .carousel__item:nth-child(3) {
	 opacity: 1;
}
 .carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__nav > label:nth-child(3) {
	 background: #ccc;
	 cursor: default;
	 pointer-events: none;
}
 .carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__items .carousel__item:nth-child(4) {
	 opacity: 1;
}
 .carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__nav > label:nth-child(4) {
	 background: #ccc;
	 cursor: default;
	 pointer-events: none;
}
 .carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__items .carousel__item:nth-child(5) {
	 opacity: 1;
}
 .carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__nav > label:nth-child(5) {
	 background: #ccc;
	 cursor: default;
	 pointer-events: none;
}
 .carousel__items {
	 margin: 0;
	 padding: 0;
	 list-style-type: none;
	 width: 100%;
	 height: 600px;
	 position: relative;
}
 .carousel__item {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 z-index: 1;
	 transition: opacity 2s;
	 -webkit-transition: opacity 2s;
}
 .carousel__item img {
	 width: 100%;
	 vertical-align: middle;
}
 .carousel__prev > label, .carousel__next > label {
	 border: 1px solid #fff;
	 border-radius: 50%;
	 cursor: pointer;
	 display: block;
	 width: 40px;
	 height: 40px;
	 position: absolute;
	 top: 50%;
	 transform: translateY(-50%);
	 -webkit-transform: translateY(-50%);
	 transition: all 0.3s ease;
	 -webkit-transition: all 0.3s ease;
	 opacity: 0;
	 z-index: 2;
}
 .carousel__prev > label:hover, .carousel__next > label:hover, .carousel__prev > label:focus, .carousel__next > label:focus {
	 opacity: 0.5 !important;
}
 .carousel__prev > label:before, .carousel__next > label:before, .carousel__prev > label:after, .carousel__next > label:after {
	 content: "";
	 position: absolute;
	 width: inherit;
	 height: inherit;
}
 .carousel__prev > label:before, .carousel__next > label:before {
	 background: linear-gradient(to top, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%), linear-gradient(to left, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%);
	 width: 60%;
	 height: 60%;
	 top: 20%;
}
 .carousel__prev > label {
	 left: 2%;
}
 .carousel__prev > label:before {
	 left: 35%;
	 top: 20%;
	 transform: rotate(135deg);
	 -webkit-transform: rotate(135deg);
}
 .carousel__next > label {
	 right: 2%;
}
 .carousel__next > label:before {
	 left: 10%;
	 transform: rotate(315deg);
	 -webkit-transform: rotate(315deg);
}

.carousel__item p {
    font-size: 2rem;
    margin-top: 25px;
    font-weight: 500;
    text-transform: uppercase;
    font-weight: 600;
}

.services {
    width: 100%;
    height: auto;
}

#services-link {
    position: relative;
    top: -185px;
}

.services-title {
    font-size: 3rem;
    text-transform: uppercase;
    color: #ba986c;
    margin-bottom: 50px;
    text-align: center;
}

.services-cont {
    width: 100%;
    height: auto;
    padding: 0 100px 100px 100px;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.row {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.row-8 {
    justify-content: center;
}

.row-8 .service {
    max-width: 100%;
    width: 100%;
}

.service {
    min-width: 600px;
    max-width: 600px;
    height: 600px;
    margin: 0 120px;
    border-radius: 10px;
    transition: .5s;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.about-service {
    max-width: 450px;
    width: 100%;
    font-size: 1.3rem !important;
    padding: 0 30px;
}

.row-8 .about-service {
    max-width: 800px;
}

.service-glass {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    background: rgba(56, 56, 56, 0.22);
    border-radius: 16px;
    backdrop-filter: blur(6.3px);
    -webkit-backdrop-filter: blur(6.3px);
    color: #ffffff;
    transition: .5s;
    overflow: hidden;
}

.service-glass:hover {
    background: rgba(56, 56, 56, 0.4);
}

.service-text {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}


.service-text .btn {
    width: 150px;
    position: absolute;
    bottom: 50px;
}

.title-service {
    color: #fff;
    font-size: 2.3rem;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.big-title {
    font-size: 2rem;
}



.deep-tissue {
    background-image: url(../img/deep-tissue.jpg);
}

.back-shoulder {
    background-image: url(../img/back-shoulder.jpg);
}

.face-lifting {
    background-image: url(../img/face.webp);
}

.lymphatic {
    background-image: url(../img/9Q6A8475.jpg);
}

.swedish {
    background-image: url(../img/swed.jpeg);
}

.hotstone {
    background-image: url(../img/hotstone2.jpg);
}

.cupping {
    background-image: url(../img/cup-therapy.jpg);
}

.anti-cellulite {
    background-image: url(../img/anti-cellulite.jpg);
}

.anti-cellulite {
    background-image: url(../img/anti_cellulite.webp);
}

.candle-experience {
    background-image: url(../img/Candle-massage.jpg);
}

.signature {
    background-image: url(../img/massage-aromatherapy-1.jpg);
}

.reflexology {
    background-image: url(../img/Foot-massage-technique.jpg);
}

.sports {
    background-image: url(../img/sportmassage.jpg);
}

.guasha {
    background-image: url(../img/gua\ sha.webp);
}

.rejuvans {
    background-image: url(../img/rejuvans.jpg);
}

.buccal {
    background-image: url(../img/buccal.jpg);
}


/* Modal Styling */

.jw-modal {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,.75);
    overflow: auto;
    opacity: 0;
    transition: opacity .3s ease-in;
    z-index: 9999;
}

.jw-modal .movement {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh
}

.jw-modal.open {
    display: block;
    opacity: 1
}

.jw-modal-body {
    max-width: 850px;
    height: 550px;
    padding: 20px;
    background: #fff;
    overflow: hidden;
    position: relative;
    display: flex;
    border: 2px solid #e09145 !important;
}

.btn-order {
    color: #fff !important;
    width: 50% !important;
    position: relative;
    margin-top: 20px;
}

.modal-price {
    color: #937354;
    font-size: 1.9rem;
    margin: 0;
}

.time {
    color: #eab683;
}

.price-cont {
    display: flex;
    flex-direction: column;

}

.jw-modal .jw-modal-body img {
    min-width: 50%;
    height: auto !important;
    margin-right: 30px;
}

.jw-modal .jw-modal-body h1 {
    max-width: 100%;
    position: relative;
    font-size: 2rem;
    color: #937354;
}

.jw-modal .jw-modal-body p {
    color: #000;
    position: relative
}

.btn-close {
    width: 40px;
    height: 40px;
    position: absolute;
    right: 5px;
    top: 5px;
    font-weight: 700;
    background-color: transparent!important;
    color: #937354 !important;
    outline: 0;
    border: 2px solid #eab683;
    border-radius: 50%;
    transition: .5s;
    font-size: 1.1rem;
    cursor: pointer;
}

:lang(en) .btn-close {
    font-family: 'EB Garamond', serif !important;
}

.btn-close:hover {
    color: #ffffff !important;
    background-color: #11212d;
    rotate: 180deg;
    background-color: #937354 !important;
    border: 2px solid #fff;
}

/* CONTACT */
.bg-appointment {
    background: linear-gradient(rgba(33,30,28,.7),rgba(33,40,28,.7)),url(../img/place2.jpg),no-repeat center center;
    background-size: cover;
    margin: 30px 0 0 0;
    background-position: -150px;
}

.contact {
    width: 100%;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-cont {
    width: 50%;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.contact-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #eab683!important;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif !important;
}

form {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

textarea {
    resize: none;
}

.form-control {
    display: block;
    width: 350px;
    height: 47px;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    font-family: Poppins, sans-serif !important;
    outline: none;
    margin: 10px;
}

.form-control::placeholder {
    color: #eab683;
    opacity: 1;
    text-align: center;
}

.form-control:focus {
    color: #fff;
    background-color: #fff;
    border-color: #fff;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(249,163,146,.25);
    font-family: 'Poppins', sans-serif !important;
}


.submit-btn {
    width: 350px;
    background-color: #937354;
    color: #fff;
    outline: none;
    border: none;
    font-family: 'Poppins', sans-serif !important;
    height: 47px;
    font-size: 1rem;
    transition: .5s;
    cursor: pointer;
}

.submit-btn:hover {
    background-color: #ba986c;
    cursor: pointer;
}

.cataloug-link-cont {
    transform: translateY(-30px);
    text-align: center;
}

.cataloug-link {
    font-size: .9rem;
    font-family: 'Poppins', sans-serif !important;
    letter-spacing: 2px;
    color: #eab683!important;
}

.cataloug-link:hover {
    text-decoration: none;
    color: #937354 !important;
}


/* CONTACT END */

/* FOOTER */
.footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* link/icon/paragraph color inside footer */
.footer a,.footer i,.footer p {
    color: #937354  !important;
}
.btn {
    font-weight: 500;
}

.btn.btn-primary,.btn.btn-secondary,.footer .btn-primary i {
    color: #fff!important;
}

.btn-square {
    width: 36px;
    height: 36px;
}

.btn-sm-square {
    width: 28px;
    height: 28px;
}

.btn-lg-square {
    width: 46px;
    height: 46px;
}

.btn-lg-square,.btn-sm-square,.btn-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.map-cont {
  position: relative;
  width: 400px;
  height: 450px;
  transform: translate(150px, 30px);
}

.map-cont iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border: 2px solid #e09145 !important;
  /* Try sepia(), hue-rotate(), invert(), etc. */
}

.map-cont::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* mobile/responsive adjustments that affect map/footer */
@media (max-width:991.98px) {
    .map-cont {
        transform: translate(0) !important;
    }
}

@media (max-width:767.98px) {
    .map-cont {
        margin: 0 auto;
    }
}

/* background utilities (footer uses bg-light) */
.bg-light {
    background-color: #ffe09145 !important;
    border-radius: 10px;
}

/* border top used on the small bottom bar */
.border-top {
    border-top: 1px solid #dee2e6!important;
}
/* container basics (affect footer .container / .container-fluid) */
.container-footer,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* responsive max-widths (these control how the footer's .container behaves) */
@media (min-width:576px) {
    .container-footer,.container-sm {
        max-width: 540px;
    }
}
@media (min-width:768px) {
    .container-footer,.container-md,.container-sm {
        max-width: 720px;
    }
}
@media (min-width:992px) {
    .container-footer,.container-lg,.container-md,.container-sm {
        max-width: 960px;
    }
}
@media (min-width:1200px) {
    .container-footer,.container-lg,.container-md,.container-sm,.container-xl {
        max-width: 1140px;
    }
}

/* row / column basics used by footer .row and .col-... */
.row-footer {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    font-size: 1.1rem !important;
    font-weight: 400;
    font-family: 'Poppins', sans-serif !important;
}

.navbar-brand {
    font-family: 'EB Garamond', serif !important;
    font-size: 2.5rem !important;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0;
}

.footer-p {
    max-width: 550px;
}


.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

.mr-2,.mx-2 {
    margin-right: .5rem!important
}

.d-flex {
    display: flex !important;
}

/* specific column sizes are defined in the stylesheet (so .col-md-6/.col-lg-6 used in footer will work responsively) */
.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}
.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* responsive column declarations present for breakpoints (these exist across the file to support .col-md-6 / .col-lg-6) */
@media (min-width:576px) { .col-sm-6 { flex: 0 0 50%; max-width: 50% } }
@media (min-width:768px) { .col-md { flex-basis: 0; flex-grow: 1; max-width: 100% } }
@media (min-width:992px) {
    .col-lg { flex-basis: 0; flex-grow: 1; max-width: 100% }
}
/* margins / padding utilities used in footer HTML (present in stylesheet) */
.mb-5 { margin-bottom: 3rem !important; } /* typical utility; your file defines many utilities like this */
.mb-3 { margin-bottom: 1rem; }
.m-0 { margin: 0; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* text alignment utilities used in the small bottom bar */
.text-center { text-align: center!important; }

/* FOOTER END */


/* GREEK STYLING */
:lang(el) .arrow {
    font-size: 8rem;
}

:lang(el) p,
:lang(el) li,
:lang(el) h4 {
  font-size: 1.2rem !important;
}

:lang(el) .item__name {
    font-size: 2rem !important;
}

.title-service {
    font-size: 2rem;
}

.big-title {
    font-size: 1.7rem;
}

:lang(el) .modal-title h1 {
    font-size: 1.6rem !important;
}

:lang(el) button {
    text-transform: uppercase;
}

:lang(en) button, .form-control::placeholder {
    font-family: 'Poppins', sans-serif !important; 
}

:lang(el) .jw-modal-body p {
    font-size: 1.1rem !important;
}


/* Back To Top */
.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 11;
    animation: action 1s infinite alternate;
    padding: 10px 15px;
    font-size: 1.25rem;
    line-height: 1.5;
}


/* Tablet Landscape & Small Desktop (1700px and below) */
@media (max-width: 1700px) {
    body {
        overflow-x: hidden;
        width: 100%;
    }

    .logo {
        width: 140px;
        transform: translateY(10px);
    }

    .container {
        overflow: hidden;
        width: 100vw;
        height: auto;
        min-height: 100vh;
    }

    /* Hide the line - gives more space */
    .line {
        display: none;
    }

    /* Fix hero section - Make everything centered */
    .catalogue-hero {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        overflow: hidden;
        padding: 0 40px;
        gap: 60px;
    }

    .hero-cont {
        width: 50%;
        max-width: 600px;
    }

    .title-cont {
        margin-left: 0;
        width: 100%;
        text-align: center;
        padding: 0 20px;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-subtitle {
        font-size: 2.2rem;
    }

    .hero-p {
        margin: 20px auto;
        text-align: center;
        width: 100%;
        max-width: 500px;
    }

    .arrow {
        font-size: 7rem;
        margin: 20px 0;
        text-align: center;
    }

    /* Center the popular services section */
    .best-cont {
        width: 50%;
        max-width: 600px;
        padding: 0 20px;
        text-align: center;
    }

    .best-cont h2 {
        font-size: 2.2rem;
        margin-bottom: 25px;
    }

    .slider-container {
        width: 100%;
        min-width: auto;
        max-width: 600px;
        margin: 0 auto;
    }

    .carousel__items {
        height: 500px;
    }

    .carousel__item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .carousel__item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .carousel__item p {
        position: relative;
        bottom: 0;
        width: 100%;
        padding: 10px;
        background: rgba(0, 0, 0, 0.5);
        margin: 0;
    }

    .service {
        max-width: 480px;
        min-width: 0;
        width: 480px;
        height: 560px;
        margin: 0 40px;
    }
}

/* Large Screens - Further adjustments */
@media (max-width: 1500px) {
    .catalogue-hero {
        gap: 40px;
        padding: 0 30px;
    }

    .hero-cont {
        width: 48%;
    }

    .best-cont {
        width: 48%;
    }

    .hero-title {
        font-size: 2.8rem;
    }

    .hero-subtitle {
        font-size: 2rem;
    }

    .hero-p {
        font-size: 1.1rem;
        max-width: 450px;
    }

    .arrow {
        font-size: 6.5rem;
    }

    .best-cont h2 {
        font-size: 2rem;
    }

    .slider-container {
        max-width: 550px;
    }

    .carousel__items {
        height: 460px;
    }
    
    input[type="text"], input[type="button"], textarea {
        width: 200px !important;
    }
}

/* Large Desktop to Small Desktop (1400px - 1200px) */
@media (max-width: 1400px) {
    .services-cont {
        padding: 0 80px 100px 80px;
    }

    .service {
        width: 520px;
        height: 580px;
        margin: 0 80px;
    }

    .carousel__items {
        height: 440px;
    }

    .big-title {
        font-size: 1.6rem !important;
    }
}

/* Medium Desktop (1199px - 992px) - Stack vertically + increase container height */
@media (max-width: 1199px) {
    body {
        overflow-x: hidden !important;
        width: 100%;
        max-width: 100vw;
    }

    .container {
        overflow: hidden !important;
        width: 100vw;
        max-width: 100%;
        height: auto;
        min-height: 150vh; /* Increase height so all content is visible */
    }

    /* Stack hero section vertically */
    .catalogue-hero {
        flex-direction: column;
        align-items: center;
        padding: 0 30px;
        gap: 40px;
    }

    .hero-cont {
        width: 100%;
        max-width: 700px;
    }

    .title-cont {
        width: 100%;
        padding: 0 20px;
    }

    .hero-title {
        font-size: 2.8rem;
    }

    .hero-subtitle {
        font-size: 2rem;
    }

    .hero-p {
        font-size: 1.15rem;
        max-width: 600px;
    }

    .arrow {
        display: none;
    }

    .best-cont {
        width: 100%;
        max-width: 700px;
        padding: 0 20px;
        margin-top: 20px;
    }

    .best-cont h2 {
        font-size: 2.3rem;
    }

    .slider-container {
        width: 100%;
        max-width: 650px;
    }

    .carousel__items {
        height: 480px;
    }

    /* Services */
    .services-cont {
        padding: 0 60px 80px 60px;
        gap: 80px;
    }

    .service {
        width: 480px;
        height: 560px;
        margin: 0 40px;
    }

    /* Contact - Vertical */
    .contact {
        width: 100%;
        padding: 50px 20px;
        height: auto;
    }

    .contact-cont {
        width: 85%;
        max-width: 550px;
        height: auto;
        padding: 30px 20px;
    }

    .contact-title {
        font-size: 2.3rem;
        margin-bottom: 25px;
    }

    .form-row {
        flex-direction: column;
        align-items: center;
        gap: 0;
        width: 100%;
    }

    .form-control {
        width: 100%;
        min-width: 400px;
        max-width: 100%;
        margin: 10px 0;
        height: 50px;
    }

    .cataloug-link-cont {
        transform: translateY(10px);
    }

    .submit-btn {
        width: 100%;
        max-width: 100%;
        margin: 10px 0;
        height: 50px;
    }

    /* Footer - Fix map overflow */
    .footer {
        width: 100%;
        max-width: 100vw;
        overflow: hidden !important;
        margin-bottom: 0 !important;
        padding-bottom: 2rem !important;
    }

    .container-footer {
        width: 100%;
        max-width: 100%;
        padding: 0 40px;
        overflow: hidden;
    }

    .row-footer {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .col-lg-6 {
        width: 100%;
        max-width: 100%;
    }

    .map-cont {
        width: 100%;
        max-width: 500px;
        height: 400px;
        margin: 0 auto;
        transform: none !important;
    }

    .map-cont iframe {
        width: 100%;
        max-width: 100%;
    }
}

/* Tablet Landscape (991px - 768px) */
@media (max-width: 991px) {
    body {
        font-size: 1rem;
        overflow-x: hidden !important;
        width: 100%;
        max-width: 100vw;
    }

    .container {
        height: auto;
        min-height: 140vh;
    }

    /* Navbar adjustments */
    .navbar {
        padding: 0.5rem 2rem;
        width: 100%;
    }

    .logo {
        width: 120px;
    }

    .flags {
        right: 20px;
    }

    .grecee, .usa {
        max-width: 35px;
    }

    /* Hero section */
    .catalogue-hero {
        padding: 0 25px;
        gap: 35px;
    }

    .hero-cont {
        max-width: 650px;
    }

    .title-cont {
        padding: 0 20px;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.8rem;
        margin-top: 25px;
    }

    .hero-p {
        font-size: 1.05rem;
        max-width: 550px;
    }

    .arrow {
        font-size: 5.5rem;
    }

    .best-cont {
        max-width: 650px;
        padding: 0 20px;
    }

    .best-cont h2 {
        font-size: 2.1rem;
    }

    .slider-container {
        width: 100%;
        max-width: 600px;
    }

    .carousel__items {
        height: 450px;
    }

    /* Services */
    .services-title {
        font-size: 2.5rem;
        margin-bottom: 40px;
    }

    .services-cont {
        padding: 0 30px 60px 30px;
        gap: 50px;
    }

    .row {
        flex-direction: column;
        gap: 50px;
        width: 100%;
    }

    .service {
        width: 100%;
        max-width: 650px;
        height: 560px;
        margin: 0 auto;
    }

    
    .row-8 .service {
        max-width: 650px;
    }

    .title-service {
        font-size: 2.1rem;
        padding: 0 20px;
    }

    .about-service {
        font-size: 1.1rem;
        padding: 0 25px;
    }

    /* Modal */
    .jw-modal-body {
        max-width: 600px;
        height: auto;
        min-height: 480px;
        max-height: 90%;
        flex-direction: column;
        padding: 25px 20px;
        overflow-y: scroll;
        scrollbar-width: 0;
    }

    .jw-modal-body::-webkit-scrollbar {
        display: none;
    }

    .jw-modal .jw-modal-body img {
        min-width: 100%;
        width: 100%;
        object-fit: cover;
        margin-right: 0;
        margin-bottom: 20px;
        order: 2;
        margin-bottom: -10px;
        margin-top: 20px;
    }

    .modal-title h1 {
        font-size: 2rem !important;
    }

    .btn-close {
        font-size: 1.2rem;
        right: 10px;
        top: 10px;
    }

    .modal-price {
        font-size: 1.6rem;
    }

    .btn-order {
        width: 70% !important;
    }


    /* Footer */
    .footer {
        width: 100%;
        max-width: 100vw;
        overflow: hidden !important;
        padding-bottom: 2rem !important;
        margin-bottom: 0 !important;
    }

    .container-footer {
        padding: 0 25px;
    }

    .row-footer {
        flex-direction: column;
        gap: 30px;
    }

    .map-cont {
        width: 100%;
        max-width: 450px;
        height: 380px;
        margin: 25px auto 0;
    }
}

/* Tablet Portrait (767px - 640px) */
@media (max-width: 767px) {
    body {
        width: 100%;
        max-width: 100vw;
    }

    .container {
        height: auto;
        min-height: 120vh;
    }

    /* Navbar */
    .navbar {
        padding: 0.5rem 1rem;
        height: auto;
        min-height: 80px;
    }

    .logo {
        width: 100px;
    }

    .flags {
        right: 10px;
    }

    .grecee, .usa {
        max-width: 30px;
    }

    .usa {
        height: 30px;
    }

    .grecee {
        height: 22px;
    }

    /* Hero section */
    .hero-cont {
        max-width: 100%;
    }

    .title-cont {
        padding: 0 15px;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-subtitle {
        font-size: 1.6rem;
        margin-top: 20px;
    }

    .hero-p {
        font-size: 1rem;
        margin: 15px auto;
        max-width: 90%;
    }

    .best-cont {
        max-width: 100%;
        padding: 0 15px;
    }

    .best-cont h2 {
        font-size: 2rem;
        margin-bottom: 25px;
    }

    .slider-container {
        width: 100%;
        max-width: 100%;
    }

    .carousel__items {
        height: 360px;
    }

    .carousel__item p {
        font-size: 1.5rem;
        margin-bottom: 50px;
        padding: 10px 0px;
    }

    /* Services */
    #services-link {
        top: -100px;
    }

    .services-title {
        font-size: 2.2rem;
        margin-bottom: 30px;
        padding: 0 20px;
    }

    .services-cont {
        padding: 0 20px 40px 20px;
        gap: 35px;
    }

    .service {
        max-width: 100%;
        height: 500px;
    }

    /* Ensure service text visibility */
    .service-glass {
        background: rgba(56, 56, 56, 0.5) !important;
    }

    .title-service {
        font-size: 1.9rem;
        margin-bottom: 15px;
    }

    .big-title {
        font-size: 1.7rem;
    }

    .about-service {
        font-size: 1rem;
        padding: 0 20px;
    }

    .service-text .btn {
        width: 140px;
        font-size: 0.95rem;
    }

    /* Modal */
    .jw-modal-body {
        max-width: 85%;
        margin: 10px;
        padding: 20px 15px;
    }

    .jw-modal .jw-modal-body img {
        height: 250px;
    }

    .modal-title h1 {
        font-size: 1.5rem;
    }

    .jw-modal .jw-modal-body p {
        font-size: 0.95rem;
    }

    .modal-price {
        font-size: 1.4rem;
    }

    .btn-order {
        width: 85% !important;
    }

    .btn-close {
        font-size: 1.2rem;
    }

    /* Contact - properly stacked */
    .contact {
        height: auto;
        padding: 40px 15px;
    }

    .contact-cont {
        width: 95%;
        max-width: 100%;
        padding: 25px 15px;
    }

    .contact-title {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .form-row {
        flex-direction: column;
        width: 100%;
    }

    .form-control {
        width: 100%;
        max-width: 100%;
        margin: 8px 0;
        height: 48px;
    }

    textarea.form-control {
        height: 120px;
    }

    .submit-btn {
        width: 100%;
        max-width: 100%;
        margin: 8px 0;
        height: 48px;
    }

    .cataloug-link-cont {
        transform: translateY(-10px);
        margin-top: 15px;
    }

    /* Footer */
    .footer {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .container-footer {
        padding: 0 20px;
    }

    .navbar-brand {
        font-size: 1.9rem !important;
    }

    .row-footer {
        font-size: 1rem !important;
    }

    .col-lg-6 {
        padding-right: 0;
        margin-bottom: 2rem;
    }

    .map-cont {
        width: 100%;
        max-width: 100%;
        height: 320px;
    }

    .back-to-top {
        right: 15px;
        bottom: 15px;
        padding: 8px 12px;
        font-size: 1rem;
    }
}

/* Mobile Portrait (639px - 480px) */
@media (max-width: 639px) {
    .container {
        min-height: 110vh;
    }

    .hero-title {
        font-size: 1.9rem;
    }

    .hero-subtitle {
        font-size: 1.4rem;
    }

    .best-cont h2 {
        font-size: 1.8rem;
    }

    .carousel__items {
        height: 300px;
    }

    .carousel__item p {
        font-size: 1.3rem;
    }

    .services-title {
        font-size: 1.9rem;
    }

    .service {
        height: 460px;
    }

    .title-service {
        font-size: 1.7rem;
    }

    .big-title {
        font-size: 1rem !important;
    }

    .contact-title {
        font-size: 1.8rem;
    }
}

/* Small Mobile (479px - 375px) */
@media (max-width: 479px) {
    .container {
        min-height: 100vh;
    }

    .logo {
        width: 80px;
    }

    .grecee, .usa {
        max-width: 25px;
    }

    .hero-title {
        font-size: 1.6rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .arrow {
        font-size: 4rem;
    }

    .best-cont h2 {
        font-size: 1.5rem;
    }

    .carousel__items {
        height: 260px;
    }

    .carousel__item p {
        font-size: 1.1rem;
    }

    .services-title {
        font-size: 1.6rem;
    }

    .service {
        height: 440px;
    }

    .title-service {
        font-size: 1.5rem;
    }

    .big-title {
        font-size: 1.3rem;
    }

    .about-service {
        font-size: 0.95rem;
    }

    .contact-title {
        font-size: 1.6rem;
    }

    .map-cont {
        height: 280px;
    }

    .form-control {
        width: 100%;
        min-width: 250px;
        max-width: 100%;
    }

    .modal-title h1 {
        font-size: 1.4rem !important;
    }
}

/* Extra Small Mobile (374px and below) */
@media (max-width: 374px) {
    .logo {
        width: 70px;
    }

    .hero-title {
        font-size: 1.4rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .best-cont h2 {
        font-size: 1.3rem;
    }

    .carousel__items {
        height: 230px;
    }

    .services-title {
        font-size: 1.4rem;
    }

    .service {
        height: 410px;
    }

    .title-service {
        font-size: 1rem !important;
    }

    .about-service {
        font-size: .9rem !important;
    }

    .contact-title {
        font-size: 1.4rem;
    }

    .big-title {
        font-size: .9rem !important;
    }

    .item__name {
        font-size: 1rem !important;
    }

    :lang(el) .item__name {
        font-size: 1rem !important;
    }
}

/* Landscape orientation */
@media (max-height: 500px) and (orientation: landscape) {
    .catalogue-hero {
        margin-top: 120px;
    }

    .navbar {
        padding: 0.3rem 1rem;
    }

    .arrow {
        font-size: 3.5rem;
        margin: 10px 0;
    }

    .service {
        height: 360px;
    }
}

/* Print styles */
@media print {
    .navbar,
    .flags,
    .arrow,
    .btn,
    .back-to-top,
    .carousel__prev,
    .carousel__next {
        display: none !important;
    }
}


/*Scrollbar Styling */

::-webkit-scrollbar {
    width: 10px
}

::-webkit-scrollbar-track {
    background: #17191d
}

::-webkit-scrollbar-thumb {
    background: #e09145;
    border-radius: 5px
}

::-webkit-scrollbar-thumb:hover {
    background: #555
}