/*==========================================
=           Általános beállítások          =
==========================================*/

/* Görgetés simítása */
html {
  scroll-behavior: smooth;
}

/* Alap betűtípus az egész oldalra */

body,
h1, h2, h3, h4, h5, h6,
p {
  font-family: 'Titillium Web', sans-serif;
}
h1, h2, h3, h4, h5, h6{color:#FCB040!important;}
/* Szövegformázás - bekezdések */
body p {
  font-size: 15px !important;
  text-align: left !important;
  margin-left: 15px;
  margin-right: 15px;
  /*color:#2c2c2c;*/
}

/* Oldalszélesség elrejtése */
body {
  overflow-x: hidden !important;
}


/*==========================================
=               Bootstrap grid             =
==========================================*/

/* Alap row margók */
div.row {
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

/* Medium-Large képernyő (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
  div.row {
    margin-right: calc(-2.5 * var(--bs-gutter-x)) !important;
    margin-left: calc(-2.5 * var(--bs-gutter-x)) !important;
  }
}

/* Small-Medium képernyő (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
  div.row {
    margin-right: calc(-4.5 * var(--bs-gutter-x)) !important;
    margin-left: calc(-4.5 * var(--bs-gutter-x)) !important;
  }

  main {
    overflow-x: hidden !important;
  }
}

/* Speciális row-k margóinak visszaállítása */
footer div.container div.row,
div.price-cards-container div.row,
div.jumbotron-row,
div.service-cards-container div.row,
div.modal-body div.row {
  margin-right: calc(-0.5 * var(--bs-gutter-x)) !important;
  margin-left: calc(-0.5 * var(--bs-gutter-x)) !important;
}


/*==========================================
=               Progress bar               =
==========================================*/

::-webkit-progress-bar {
  background-color: #000000 !important; /* Háttérszín */
}

::-webkit-progress-value {
  background-color: #000000 !important; /* Töltési szín */
}


/*==========================================
=                 Tartalom                 =
==========================================*/

/* Oldalcím margó */
div.container div.row div.col-md-8 h1.page-title {
  margin-top: 25px !important;
}


/*==========================================
=             Szolgáltatások kártyák       =
==========================================*/

/* Kártyák mérete és hover animáció */
.services-cards {
  height: auto !important;
  transition: transform 0.3s, box-shadow 0.3s;
}

.services-cards:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

/* Kártyák tartalom magasság */
.card-body {
  height: 250px;
}


/*==========================================
=               Lábjegyzet                 =
==========================================*/

/* Lábjegyzet szöveg szín */
#main-footer,
#main-footer div ul li a {
  color: white !important;
}

/* Lábjegyzet kreditek */
p#footer-credit {
  text-align: center !important;
  margin-top: 15px !important;
  margin-bottom: 0px !important;
}


/*==========================================
=           Kapcsolat oldal stílus         =
==========================================*/

.contact-card {
  max-width: 400px;
  margin: 50px auto;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.contact-info {
  padding: 20px;
}

.contact-margin {
  margin-top: 50px;
}

/*==========================================
=          Button Style Custom             =
==========================================*/

.btn {
    font-weight: 500;
    border-radius: 0.375rem; /* lekerekítés */
    padding: 0.5rem 1rem;
    border: none;
}

.btn-primary {
    background-color: #0F75BC!important; /* alap szín */
    border-color: #0F75BC!important;
    color: #fff;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #0d639f!important; /* sötétebb árnyalat hoverre */
    border-color: #0d639f!important;
    color: #fff;
}

.btn-primary:active {
    background-color: #0b5384!important; /* még sötétebb kattintáskor */
    border-color: #0b5384!important;
}

/*==========================================
=           Vissza a tetejére gomb        =
==========================================*/

/* Gomb alap pozíció */
#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  width:50px;
  height:50px;
}

/* Gomb stílus - színátmenet */
#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  z-index: 999 !important;
  color:#ffffff;
  background-color:#0b1c2d!important;
  border:0!important;
  display:none;
}

/*===========================================================
=           Görgetősáv stílus (Chrome, Edge, Safari)        =
=============================================================*/

::-webkit-scrollbar {
  width: 10px;               /* Szélesség (függőleges sáv) */
  height: 10px;              /* Magasság (vízszintes sáv, ha kell) */
}

::-webkit-scrollbar-track {
  background: #f0f0f0;       /* Háttér a sáv mögött */
}

::-webkit-scrollbar-thumb {
  background-color: #012351; /* A görgető sáv "húzható" része */
  border-radius: 10px;       /* Lekerekítés */
  border: 2px solid #012351; /* Térköz a track és a thumb között */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #012351; /* Hover szín */
}

/* Firefox specifikus */
* {
  scrollbar-width: thin;             /* vastagság: auto | thin | none */
  scrollbar-color: #012351 #f0f0f0;  /* thumb szín, track szín */
}

/*===========================================================
=           Shine Effect        =
=============================================================*/
.shine {
    position: relative;
    overflow: hidden;
    mask-image: url('./images/logo/minilogo.png');
    -webkit-mask-image: url('./images/logo/minilogo.png');
}

.shine::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -75%;
    width: 20%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.4) 100%);
    mix-blend-mode: overlay;
    transform: skewX(-25deg);
    z-index: 2;
}

.shine:hover::before,
.shine:focus::before {
    animation: shine 0.85s;
}

@keyframes shine {
    100% {
        left: 125%;
    }
}