/* Google fonts import */
@import url('https://fonts.googleapis.com/css2?family=Kanit: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&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* Asterisk wildcard selector to override default styles added by the browser */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* General styles */
body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Generic project styles */
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 110%;
}

/* Header */
header {
    background-color: #091457;
    padding: 0 1rem;
    position: fixed;
    z-index: 99;
    width: 100%;
    box-shadow: 0 2px 2px #091457;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

header a {
    text-decoration: none;
    color:inherit;
}

h1, h2 {
    font-family: 'Kanit', sans-serif;
    letter-spacing: 2px;
    text-align: center;
}

h3 {
   text-align: center;
}

p {
  text-align: center;
  letter-spacing: 1px;
  font-weight: normal;
}

.style-icon{
  color:#F8715E;
}


#menu {
    font-size: 100%;
    letter-spacing: 4px;
    list-style-type: none;
}

#menu > li {
    margin-bottom: 1em;
}

.active {
    border-bottom: 1px solid #EA9178;
    color: #EA9178;
}

/* Navbar styles with dropdown toggle */
nav {
    position: absolute;
    background-color: #091457;
    width: 100%;
    left: 0;
    padding: 0 1rem;
    box-shadow: 0 2px 2px #091457;
    display: none;
    top: 100%;
    right: -100%;
}

/* Nav toggle */
#nav-toggle:checked~nav {
    display: block;
}

#nav-toggle {
    display: none;
}

.nav-toggle-label {
    font-size: 2rem;
}

/* Main content */
main {
    /* Make main element take up any surplus space to push footer */
    flex: 1 0 auto;
    margin-top: 40px;
    background-color: #505888;
    display: flex;
    flex-direction: column;
}

#hero h2, #timeline h2, #newsletter h2, #flip-cards h2, #testimonials h2, #about h2 {
  margin-bottom: 20px;
  text-align: center;
  font-size: 220%;
}

#main-video {
  width: 100%;
}

.intro-text {
  padding:0 80px;
}

#iframe {
  width: 100%;
}

/* Timeline layout home page */
/* The actual timeline (the vertical ruler) */
.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    color: #000;
  }
  
  /* The actual timeline (the vertical ruler) */
  .timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: white;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
  }
  
  /* Container around content */
  .container {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
  }
  
  /* The circles on the timeline */
  .container::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: white;
    border: 4px solid #EA9178;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
  }
  
  /* Place the container to the left */
  .left {
    left: 0;
  }
  
  /* Place the container to the right */
  .right {
    left: 50%;
  }
  
  /* Add arrows to the left container (pointing right) */
  .left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
  }
  
  /* Add arrows to the right container (pointing left) */
  .right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }
  
  /* Fix the circle for containers on the right side */
  .right::after {
    left: -16px;
  }
  
  /* The actual content */
  .content {
    padding: 20px 30px;
    background-color: white;
    position: relative;
    border-radius: 6px;
  }

  /* Newsletter button */
  .button {
    display: block;
    border-radius: 4px;
    background-color: #F8715E;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 28px;
    padding: 20px;
    width: 280px;
    transition: all 0.5s;
    cursor: pointer;
    margin: auto;
  }
  
  .button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
  }
  
  .button span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
  }
  
  .button:hover span {
    padding-right: 25px;
  }
  
  .button:hover span:after {
    opacity: 1;
    right: 0;
  }


/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 280px;
  height: 350px;
  /*border: 1px solid #f1f1f1;*/
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  margin-top: 10px;
  display:inline-block;
  cursor: pointer;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #091457;
  color: white;
  transform: rotateY(180deg);
}

#flip-cards {
  margin: auto;
  /* center main div */
  max-width: fit-content;
  text-align: center;
}

#flip-card-size {
  width:280px;
  height:350px;
}


/*Flex boxes Testimonials boxes */  
/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns */
.column {
  flex: 25%;
  padding: 20px;
  /*margin: 10px 30px;
  border-radius: 5px;*/
}

/* About page */
#about-page {
  max-width: 75%;
  margin: 20px auto;
  text-align: center;
}

#about-qualification > div {
  line-height: 20px;
  margin-bottom: 20px;
}

#about p {
  padding: 0 20px;
}

#about hr {
  border-top: 1px solid #3a3a3a;
  margin: 5px 0;
}

#about-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

#circle-cover-bg {
  background: url(../images/about/sotiris-sq.jpg) no-repeat center center / cover;
  height: 90vw;
  width: 90vw;
  margin-bottom: 20px;
  /* Makes the square image into a circle */
  border-radius: 50%;
  max-width: 300px;
  max-height: 300px;
  margin:auto;
}

#message {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

#send-message {
  color: #ffffff;
  background-color: rgba(60, 60, 60, 0.6);
  padding: 30px;
  border-radius: 20px;
}


/* Gallery page */
#photos img {
  width: 100%;
  line-height: 1em;
}

#photos {
  line-height: 0;
}



/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 80px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: #F8715E;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 40px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 40px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active2, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}


/* Order page */
.products-container {
  /*margin-left: 3%;
  margin-right: 3%;
  display: inline-block;*/
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  text-align: center;
  display: inline-block;
  padding: 20px;
  margin-inline: auto;
}

.price {
  color: grey;
  font-size: 22px;
}

.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #F8715E;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
  border-radius: 5px;
}

.card button:hover {
  opacity: 0.7;
}

#contact-button {
  text-decoration: none;
  color: #fff;
}


/* Contact page */
#signup {
  background-image: url("../images/signup.jpeg");
  background-size: cover;
  background-position: 75%;
  padding: 10% 30%;
  flex-grow: 1;
}

#signup-form {
  color: #ffffff;
  background-color: rgba(60, 60, 60, 0.6);
  padding: 30px;
}

#signup-form>h2 {
  color: #fafafa;
  margin-bottom: 20px;
}

.fieldset {
  padding:10px 10px;
}

.text-input {
  background: transparent;
  color: #fafafa;
  width: 100%;
  height: 25px;
  margin: 5px 0 20px 0;
  border: 1px solid #fafafa;
  border-radius: 2px;
  padding: 0 5px;
}

.message-input {
  background: transparent;
  color: #fafafa;
  width: 100%;
  height: 100px;
  margin: 5px 0 20px 0;
  border: 1px solid #fafafa;
  border-radius: 2px;
  padding: 0 5px;
}

.radio-buttons {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.join-button {
  margin-top: 20px;
  border-radius: 2px;
  padding: 15px 32px;
  font-size: 100%;
  background-color: #F8715E;
  color: #fafafa;
}

.button1:hover {
    background-color: #EA9178;
    color: white;
  }

.button2:hover {
    background-color: #535352;
    color: white;
}  

.reset-button {
  margin-top: 20px;
  border-radius: 2px;
  padding: 15px 32px;
  font-size: 100%;
  background-color: #43403f;
  color: #fafafa;
}


/* Footer */

footer {
    background-color: #091457;
} 

#social-networks {
    text-align: center;
    padding: 20px;
    display: flex;
    justify-content: space-evenly;
    list-style-type: none;
}

#social-networks i {
    font-size: 160%;
    padding: 5%;
    color: #fff;
}

#social-networks i:hover {
  color: #F8715E;
}


/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }

  #logo {
    font-size: 170%;
  }

  .card{
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  #signup {
    background-position: center;
    background-size: cover;
    position: relative;
    /*margin-bottom: 880px;*/
}

#signup-form {
  max-width: 400px;
  left: 10%;
  right: 10%;
  object-fit: cover; 
  position: absolute;
  font-size: 40%;
  padding: initial;
}

.fieldset {
  padding:5px 5px;
}

.text-input {
  background: transparent;
  color: #fafafa;
  width: 100%;
  height: 15px;
  margin: 5px 0 10px 0;
  border: 1px solid #fafafa;
  border-radius: 2px;
  padding: 0 5px;
}

.join-button {
  margin-top: 20px;
  border-radius: 2px;
  padding: 5px 12px;
  font-size: 100%;
  background-color: #F8715E;
  color: #fafafa;
}

.reset-button {
  margin-top: 20px;
  border-radius: 2px;
  padding: 5px 12px;
  font-size: 100%;
  background-color: #43403f;
  color: #fafafa;
}

}


/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }

}


/* Media query: Large or landscape phones (576px and up) */
@media screen and (min-width: 600px) {
  #photos {
    column-count: 2;
    column-gap: 0;
  }
  #logo {
    font-size: 200%;
  }

}

/* Media query: Tablets and larger screens (768px nd up) */
@media screen and (min-width: 768px) {
    /* Header */
    nav {
        display: block;
        position: relative;
        box-shadow: none;
        width: fit-content;
        padding-right: 1rem;
    }

    #menu {
        display: flex;
    }

    #menu > li {
        padding-left: 1rem;
    }

    .nav-toggle-label {
        display: none;
    }

    #logo {
        font-size: 200%;
        line-height: 75px;
        margin: 0 0.5rem;
    }

    /* Main content */
    main {
        /* Push main content down to accommodate larger header */
        margin-top: 79px;
    }

    /* Gallery */
    #photos {
      column-count: 3;
    }

}

/* Large devices (laptops and desktops, 992px and up) */
@media screen and (min-width: 992px) {
    #menu a:hover{
        /*border-bottom: 1px solid #F8715E;*/
        color: #F8715E;
    }

    /* Gallery */
    #photos {
      column-count: 4;
    }
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
    /* Place the timelime to the left */
      .timeline::after {
        left: 31px;
      }
    
    /* Full-width containers */
      .container {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
      }
    
    /* Make sure that all arrows are pointing leftwards */
      .container::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
      }
    
    /* Make sure all circles are at the same spot */
      .left::after, .right::after {
        left: 15px;
      }
    
    /* Make all right containers behave like the left ones */
      .right {
        left: 0%;
      }
    }