@import url(http://fonts.googleapis.com/css?family=Open%20Sans:300,400,500,600,700);
@import url(http://fonts.googleapis.com/css?family=Merriweather:300,400,500,600,700);

a, a:visited {
	color: #005F56; /* Emerald Green */
	text-decoration: none;
}
a:hover, a:focus {
	text-decoration: none;
	color: white;
	background-color: #005F56; /* Emerald Green */
}

html, body {
	font-family: "Open Sans", Arial, sans-serif;
	font-weight: 400;
	color: #333333;           /* Charcoal Gray */
	background-color: #FFFFFF;
	margin: 0;
        
}

body {
    display: flex;
    flex-direction: column;
    height: 100%;
    /*min-height: 90vh;*/
}


.topmenu {width: 90%; height: 50px;}
.topmenu th {width: 30%; text-align: center; color: white; font-size: 20px; font-family: "Merriweather"; font-weight: bold; letter-spacing: 4px;}
.topmenu td {width: 10%; text-align: center; color: white; text-decoration: none; letter-spacing: 3px;}
.topmenu a {text-decoration: none; color: white; display: block;}
.topmenu a:hover {text-decoration: none; color: white; background-color: #E5F6F7; color: black; display: block;}


.seminartable  {border: 5px; border-collapse: collapse; border-style: solid; border-color: buttonface;}
.seminartable td {padding: 10px; background-color: D3E5E3;}
.seminartable th {padding: 10px; background-color: black; color: white; font-weight: normal;}

.seminardates {border: 1px; margin-top: 10px; margin-bottom: 15px; border-collapse: collapse; border-style: solid; border-color: gray; text-align: center; margin-left:auto; margin-right:auto;}
.seminardates td {padding: 5px; background-color: D3E5E3;}
.seminardates th {padding: 10px; background-color: gray; color: white;}

.semtitle {color: white; font-size: 18px;}
.semtitle a:hover {color: black; background-color: white; display: block;}


.oldprice {text-decoration: line-through; color: red; display: inline;}
.newprice {font-weight: bold; color: green; display: inline;}
.discount_head {font-weight: bold; color: red; font-size: 18px; text-decoration: underline; height: 5px;}
.discount_title {font-weight: bold; color: red; font-size: 16px; line-height: 30px;}
.semimage {padding: 0 15px 10px 0; width: 30%; max-width: 250px; height: auto; float: left;}

.extra_head {font-weight: bold; color: blue; font-size: 18px; height: 5px;}

.desc_short {font-size: 15px; text-align: justify;}
.sem_data {font-size: 16px; text-align: left;}

.regtable {border: 1px; margin-top: 10px; margin-bottom: 15px; border-collapse: collapse; border-style: solid; border-color: gray; margin-left:auto; margin-right:auto;}
.regtable td {padding: 5px; background-color: D3E5E3; text-align: left;}
.regtable th {padding: 10px; background-color: gray; color: white; text-align: right;}
.mynotice {text-align: center; font-size: 16px; font-color: navy;}

.pricetable {border: 1px; margin-top: 10px; margin-bottom: 15px; border-collapse: collapse; border-style: solid; border-color: gray; margin-left:auto; margin-right:auto;}
.pricetable td {padding: 5px; text-align: center;}
.pricetable th {padding: 10px; background-color: gray; font-size: 15px; color: white; text-align: center;}
.pricetable tr:nth-child(even) td{background-color: white;}
.pricetable tr:hover td{background-color: lemonchiffon;}
.priceoption {font-size: 16px; font-family: "Open Sans", Arial, sans-serif;}

.priceoptionyes {background-color: green; color: white; font-size: 16px; font-family: "Open Sans", Arial, sans-serif;}
.priceoptionno {background-color: red; color: white; font-size: 16px; font-family: "Open Sans", Arial, sans-serif;}


.warning_text  {font-size: 16px; color: red; font-family: "Open Sans", Arial, sans-serif; text-align: center;}
.error {font-size: 16px; background-color: #BD0F13; color: white; text-align: center;}
.ok {font-size: 16px; background-color: blue; color: white; text-align: center;}
.warning {font-size: 16px; background-color: green; color: white !important; text-align: center;}
.notice {font-size: 16px; background-color: pink; color: black; text-align: center;}
.success_head {font-size: 24px; margin: 30px; color: green; font-weight: bold; font-family: "Open Sans", Arial, sans-serif; text-align: center;}
.success_text {font-size: 18px; margin: 20px; color: green; font-weight: normal; font-family: "Open Sans", Arial, sans-serif; text-align: center;}
/* Radio element, when checked */
input[type="radio"]:checked  {height: 40px; width: 40px;}

/*
.footer table {margin-left: 0;  position: relative; margin-right: 0; width: 100%; padding: 0; height: 100px; border-spacing: 0; }
.footer td {background-color: #333333; text-align: center; font-size: 11px; color: white; margin: 0 0 0 0; padding: 0 0 0 0;}
*/

button {
  position: relative;
  background: #005F56; /* #444 */
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  border: none;
  letter-spacing: 0.1rem;
  font-size: 1rem;
  /*
  padding: 1rem 3rem; */
  border-radius: 4px;
  padding: 10px 20px;
  margin: 10px;
  transition: 0.2s;
}

button:hover {
  /*letter-spacing: 0.2rem;*/
  border-radius: 4px;
  padding: 10px 20px;
  background: var(--clr);
  color: var(--clr);
  /* box-shadow: 0 0 35px var(--clr); */
  /*animation: box 3s infinite;*/
}

button::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: #272822;
}

button span {
  position: relative;
  z-index: 1;
}
button i {
  position: absolute;
  inset: 0;
  display: block;
}

button i::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 2px;
  left: 80%;
  top: -2px;
  border: 2px solid var(--clr);
  background: #272822;
  transition: 0.2s;
}

button:hover i::before {
  width: 15px;
  left: 20%;
  animation: move 3s infinite;
}

button i::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 2px;
  left: 20%;
  bottom: -2px;
  border: 2px solid var(--clr);
  background: #272822;
  transition: 0.2s;
}

button:hover i::after {
  width: 15px;
  left: 80%;
  animation: move 3s infinite;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes box {
  0% {
    box-shadow: #27272c;
  }
  50% {
    box-shadow: 0 0 25px var(--clr);
  }
  100% {
    box-shadow: #27272c;
  }
}

.sidelements {float:left; text-align:center; width: 33%; padding: 10px; display: inline-table;}
.sidemenu {list-style-type: none;  text-align: center;  margin: auto;  padding: 0; display: table;}
.sidemenu li {  display: inline-block;  font-size: 15px;  padding: 20px;}
.sidemenu a {text-decoration:none;}
.sidemenu-smalltext {list-style-type: none;  text-align: center;  margin: auto;  padding: 0; display: table;}
.sidemenu-smalltext li {  display: inline-block;  font-size: 11px;  padding: 20px; vertical-align: top;}
.sidemenu-smalltext a {text-decoration:none;}
.sidemenu-smalltext img {width: 30px; height: auto;}


/* ------------------------------
   Footer Styles
   ------------------------------ */
.footer {
  background-color: #3A3A3A;   /* σκούρο φόντο */
  color: #FFFFFF;
  padding: 2rem 1rem;
  margin-top: auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  text-align: center;
}
.footer-item h4 {
  margin: 0.5rem 0 0.25rem;
  font-size: 1.1rem;
}
.footer-item a {
  display: block;
  color: #008C7A;             /* πιο ανοιχτο απο το emerald Green */
  text-decoration: none;
  margin: 0.2rem 0;
}

/* Κατάργηση background στο hover των footer links */
.footer-item a:hover,
.footer-item a:focus {
  background-color: transparent !important;
  text-decoration: none;
  color: #00B38F;
}

/* Χρώμα icon στο base state */
.footer-item i {
  color: #008C7A;    /* ή όποιο emerald-teal θες */
  transition: color 0.2s;
}

/* Χρώμα icon όταν κάνεις hover πάνω στο ίδιο το i ή στο parent a */
/*.footer-item i:hover,*/
.footer-item a:hover i {
  color: #00B38F !important;
}



.footer-item p {
  margin: 0.2rem 0;
  color: #FFFFFF;
}
.footer-item i {
  color: #008C7A;             /* Emerald Green */
  margin-bottom: 0.5rem;
}

/* ------------------------------
   Responsive Burger Menu Styles
   ------------------------------ */


.logo img {
  height: 60px;
  width: auto;
  display: block;
}

.navbar {
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #FFFFFF;
  color: #333333;
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 400;
  margin: 0;
}

.navbar nav {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
}

.navbar .logo a {
  color: #333333;
  text-decoration: none;
  font-weight: bold;
}

.navbar ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar ul li a {
  color: #333333;
  text-decoration: none;
  font-weight: 600;
  
  display: inline-block;       /* για να «πιάνει» το padding */
  padding: 5px 10px;           /* ίδιο με το hover */
  transition: background-color 0.3s ease, color 0.3s ease;
  border-radius: 4px;          /* αν το θες στρογγυλεμένο */
}

.navbar ul li a:hover {
  background-color: #005F56;
  color: #FFFFFF;
  /*padding: 5px 10px;*/
  border-radius: 4px;
}

/* Burger icon */
.burger {
  display: none;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  cursor: pointer;
}

.burger-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.burger-lines div {
  width: 60px;
  height: 6px;
  background-color: #333333;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.burger-label {
  font-size: 2rem;
  margin-right: 10px;
  color: #333333;
  font-weight: bold;
  font-family: "Open Sans", sans-serif;
}
.burger.active .line1 {
   transform-origin: top left;
  transform: rotate(60deg);
}

.burger.active .line2,
.burger.active .line3 {
  opacity: 0;
}

.burger.active .line4 {
   transform-origin: left bottom;
  transform: rotate(-60deg);
}

/* Mobile styles */
@media (max-width: 768px) {
   

  .navbar ul {
    display: none;
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    flex-direction: column;
    padding: 1rem;
    z-index: 1000;
    gap: 1rem;
    text-align: center;
    
  }

  .navbar ul li a {
    font-size: 3rem;
    padding: 30px 0;
  }
  
  .navbar ul li {
    margin-bottom: 20px;
  }
  .navbar ul.active {
    display: flex;
  }

  .burger {
    display: flex;
  }
  
  .logo img {
      height: 80px;
  }
  button {
    font-size: 1.5rem;
    padding: 14px 26px;
  }
    .navbar {
        margin-top: 0;
    }

/*  .burger-label {
    font-size: 1rem;
    color: #333333;
    font-weight: bold;
  }*/
}