@charset "utf-8";


:root {
    --screenWidth: 150px;
    --lineClamp: 6;
    --slideHeight: 340px;
    --slideWidth: 270px;
    --spaceBtwSlide: 0px;
    --slideBorderRadius: 0px;
    --paddingSlide: 10px;
    --ImgWidthSlide: 100%;
    --borderRadiusImg: 0px;
    --slideBorderSize: 0px;
    --slideBorderColor: #275EFE;
    --slideBorderType: solid;
    --slideBgColor: #fff;
    --titleColor: #ffffff;
    --textColor: #5f637d;
    --TitleSize: 16px;
    --textSize: 12px;
    --buttonFontSize: 13px;
    --buttonBgColor: #2c8ae8;
    --buttonWidth: 145px;
    --buttonPadding: 5px 15px;
    --buttonBorderSize: 0px;
    --buttonBorderColor: #275EFE;
}

/*::-webkit-scrollbar {*/
/*    width: 0px;*/
/*}*/

.rounded-reel-item {
    margin: var(--spaceBtwSlide);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--paddingSlide);
    flex-direction: column;
    border-radius: var(--slideBorderRadius);
    min-width: 100vw;
}

.controlerFinalCarousel div {
    text-align: center;
    border-radius: 50px;
    border: none;
    height: 20px;
    width: 20px;
    display: flex;
    margin: 10px 20px;
    padding: 5px;
  
    backdrop-filter: blur(11px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    justify-content: center;
    align-items: center;
}

.controlerFinalCarousel div img {
    width: 16px;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.containerVertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.slideTemplate {
    display: inline-block;
    position: relative;
    width: var(--slideWidth);
    height: var(--slideHeight);
    border-radius: var(--slideBorderRadius);
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px 0px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
    margin: 10px;
    border: var(--slideBorderSize) var(--slideBorderType) var(--slideBorderColor);
    background-color: var(--slideBgColor);
    overflow: hidden;
    transition: 300ms ease-out;
}

.slideTemplate h2 {
    margin: 10px;
    text-align: left;
    color: var(--titleColor);
    font-size: var(--TitleSize);
    font-weight: 600;
    font-family: 'Fira Sans', sans-serif;
    position: absolute;
    left: 6px;
    bottom: 0;
    text-shadow: 1px 1px black;
}

.slideContainer {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
}

.mainContainerCarouselFinal {
    scrollbar-width: none;
    padding:  0;
    max-width: 870px;
    overflow-x: auto;
    white-space: nowrap;
    width: var(--screenWidth);
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* mask-image: linear-gradient(to right, transparent 0%, black 3% 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3% 94%, transparent 100%); */
    font-family: 'Lato', sans-serif;
    font-weight: 700;
}

.controlerFinalCarousel {
    width: var(--screenWidth);
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 48px;
}
  .kallithea{
  background: url(project-images/Kallithea/ergo-teleiomrno-stin-kallithea.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}                             
.ano-glyfada{
  background: url(project-images/Ano-Glyfada/oloklirosi-ergou-ano-glyfada.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.kaisariani{
  background: url(project-images/Kaisariani/anakainisi-oliki-stin-dafni.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.dafni{
  background: url(project-images/Dafni/ledotainies-se-ergo-sti-dafni.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.alimos{
  background: url(project-images/Alimos/ejvterikh-opsi-polikatoikias.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (max-width:800px) {
  :root{
    --slideHeight: 280px;
    --slideWidth: 220px;
  }

}
@media screen and (max-width:600px) {
  :root{
    --slideHeight: 250px;
    --slideWidth: 180px;
  }

}
@media screen and (max-width:400px) {
  :root{
       --screenWidth: 120px;
    --slideHeight: 200px;
    --slideWidth: 150px;
  }
  

}