@import url('https://fonts.googleapis.com/css2?Roboto+Condensed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
@import "https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');




/*--------------------------------------------------------------
## regisztrációs űrlap gomb színének módosítása
--------------------------------------------------------------*/

.um a.um-button, .um a.um-button.um-disabled:active, .um a.um-button.um-disabled:focus, .um a.um-button.um-disabled:hover, .um input[type=submit].um-button, .um input[type=submit].um-button:focus {
    background: #dd9933;
}

/*--------------------------------------------------------------
## Header menü elemei
--------------------------------------------------------------*/

.main-navigation ul li {
      margin: 0 20px -10px 0; /*39 px volt eredetileg, de azért, hogy közelebb legyenelk a menu elemek, csökkentettem 20px-re */
 }

/*--------------------------------------------------------------
## Oldal sima szövegének módosítása
--------------------------------------------------------------*/

h4
{
  font-size: 22px;
  margin: 25px 0; 
}


	body
{
	color: #0f0f0f;
  font-size: 19px;
  font-family: Tahoma, Arial, Helvetica, sans-serif;;
  line-height: 1.56; 
}

/*--------------------------------------------------------------
## Custom Button
--------------------------------------------------------------*/

.custom-button {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Az ikon balra igazítva, a szöveg pedig jobbra */ /*Középre igazított szöveg: Használd a justify-content: center-t. /// Balra igazított szöveg: Használd a justify-content: flex-start-ot és szükség esetén állíts be margót az ikon és a szöveg között.*/
  background-color: rgba(3, 58, 70, 1.0); /* Piros háttér */
  color: white;
  padding: 0;
  font-size: 17px;
  text-decoration: none;
  width: 100%; /* 100% szélesség */
  height: 70px; /* Fix gombmagasság */
  border-radius: 2px;
  transition: background-color 0.5s ease, color 0.5s ease;
  box-sizing: border-box;
  position: relative;
}

/* Az ikon stílusa */
.custom-button i {
  color: white;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 0;
  width: 70px; /* Az ikon mérete */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative; /* Már nem "absolute", hogy ne legyen elmozdulás */
  font-size: 30px; /* Nagyobb ikonméret */
}

/* A szöveg stílusa */
.custom-button .button-text {
  flex-grow: 1; /* A szöveg rugalmasan kitölti a helyet */
  text-align: right; /* Jobbra igazított szöveg */
  padding-right: 20px; /* A szöveg közvetlenül a jobb oldalhoz simul */
  color: white;
}

/* Hover állapot */
.custom-button:hover{
  background-color: #feb81a; /* Hover szín */
  color: white;
}

.custom-button:hover i {
  color: white;
}

/* Aktív (kattintott) állapot */
.custom-button:active {
  background-color: #0F2C48;
  color: white;
}

/* Media query - kis képernyők (max 600px szélesség) */
@media (max-width: 600px) {
  .custom-button {
    font-size: 14px; /* Kisebb szövegméret */
    height: 60px; /* Kisebb gombmagasság */
  }

  .custom-button i {
    width: 50px; /* Kisebb ikonméret */
    font-size: 24px; /* Kisebb ikon */
  }

  .custom-button .button-text {
    padding-right: 10px; /* Kisebb távolság a szöveg és a jobb oldal között */
    font-size: 14px; /* Kisebb szövegméret */
  }
}