* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html { scroll-behavior: smooth; }

#kineziologia { scroll-margin-top: 100px; }



body {

  font-family: 'Inter', sans-serif;

  color: #333;

  line-height: 1.6;

  background-color: #fdfdfc;

}



h1, h2, h3, h4 {

  font-family: 'Playfair Display', serif;

}



.container {

  max-width: 1100px;

  margin: auto;

  padding: 0 20px;

}



/* HEADER */

.header {

  background: #fff;

  border-bottom: 1px solid #eee;

}



.header .container {

  display: flex;

  justify-content: space-between;

  align-items: center;

  height: 70px;

}



.logo {

  font-size: 24px;

}



nav a {

  margin-left: 20px;

  text-decoration: none;

  color: #555;

  font-weight: 500;

}



/* Update Nav Hover to Olive */

nav a:hover {

  color: #6b705c;

}



/* HERO */

.hero {

  /* This creates a light overlay so the text is easy to read */

  background:  linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7)),

    url('111.png'); 

  background-size: cover;

  background-position: center;

  background-attachment: fixed; /* This creates a subtle parallax effect when scrolling */

  padding: 100px 0;

  text-align: center;

  border-bottom: 1px solid #d4d9cc;

}



.hero h2 {

  font-size: 42px;

  margin-bottom: 20px;

  color: #3e4431; /* Deep olive for the title */

}



.hero p {

  font-size: 19px;

  max-width: 700px;

  margin: auto;

  margin-bottom: 30px;

  color: #4b4d40;

}



/* Updated Button to match the Olive theme */

.hero .btn {

  display: inline-block;

  background: #6b705c; /* The deep forest olive from your image */

  color: #fff;

  padding: 14px 32px;

  text-decoration: none;

  border-radius: 30px;

  font-weight: 500;

  margin-bottom: 40px;

  transition: all 0.3s ease;

  box-shadow: 0 4px 15px rgba(107, 112, 92, 0.3);

}



.hero .btn:hover {

  background: #585d4a;

  transform: translateY(-2px); /* Lifts slightly on hover */

  box-shadow: 0 6px 20px rgba(107, 112, 92, 0.4);

}



/* A hero szakaszban a lista levegősen */

.hero p strong {

  display: block;

  margin-bottom: 10px;

}



/* Container to hold both the title and the list */

.list-wrapper {

  display: flex;

  flex-direction: column; /* Stacks title and list vertically */

  align-items: center;    /* Centers the title and the list block */

  justify-content: center;

  text-align: center;     /* Centers the title text */

  max-width: 1000px;

  margin: 180px auto 40px auto;      /* Centers the container itself */

  padding: 0 20px;

}



.list-title {

  display: block;

  margin-bottom: 25px;    /* Space between title and first bullet */

  color: #3e4431;

  font-size: 22px;

  font-weight: 600;

  width: 100%;

}



.inline-vertical-list {

  list-style: none;

  padding: 0;

  margin: 0;

  display: inline-block;  /* Important: makes the block only as wide as the longest text */

  text-align: left;       /* Keeps bullets and text aligned to the left within the centered block */

}



.inline-vertical-list li {

  font-size: 18px;

  line-height: 1.6;

  color: #3e4431;

  margin-bottom: 12px;

  position: relative;

  padding-left: 30px;     /* Space for the bullet */

}



/* Styled Bullet Point */

.inline-vertical-list li::before {

  content: '•';           /* Classic bullet */

  position: absolute;

  left: 0;

  color: #6b705c;         /* Your Olive Green */

  font-weight: bold;

  font-size: 24px;

  line-height: 1;

}



/* Adjusting the hero strong from your original CSS so it doesn't interfere */

.hero p strong {

  display: inline !important; 

  margin-bottom: 0 !important;

}



/* SECTIONS */

.section {

  padding: 80px 0;

}



.section.light {

  background: #f7f7f5;

}



.section h3 {

  text-align: center;

  margin-bottom: 40px;

  font-size: 32px;

}



/* RÓLAM bekezdések levegősen */

/* RÓLAM SECTION */

#rolam.section.light {

  background-color: #a3ad91; 

  color: #3e4431;

}



#rolam h3 {

  color: #3e4431;; 

  position: relative;

  margin-bottom: 50px;

}



#rolam h3::after {

  content: '';

  display: block;

  width: 50px;

  height: 2px;

  background: #a3ad91;

  margin: 15px auto 0;

}



/* PASTE THE NEW PART HERE */

#rolam p {

  max-width: 800px;

  margin: 0 auto 1.8em auto; 

  line-height: 1.8;

  font-size: 17px;

  color: #4b4d40;

}



/* PROFILKÉP STÍLUSA */

.profile-wrapper {

  text-align: center;

  margin-bottom: 40px;

}



.profile-image {

  width: 250px;           /* A kör mérete */

  height: 250px;

  object-fit: cover;      /* Biztosítja, hogy ne torzuljon a kép */

  border-radius: 50%;     /* Ettől lesz tökéletes kör alakú */

  border: 4px solid #fff; /* Finom olíva keret */

  box-shadow: 0 10px 25px rgba(107, 112, 92, 0.2);

  transition: transform 0.3s ease;

}



.profile-image:hover {

  transform: scale(1.05); /* Enyhe nagyítás, ha rávisszük az egeret */

}



/* Mobilon kicsit kisebb lehet a kép, hogy több hely maradjon a szövegnek */

@media (max-width: 768px) {

  .profile-image {

    width: 200px;

    height: 200px;

  }

}

/* SZOLGÁLTATÁSOK - MÉLYEBB OLÍVA */
#szolgaltatasok {
  background-color: #c7cfba; /* Közepes olíva háttér */
  color: #fff;
}

#szolgaltatasok h3 {
  color: #3e4431;
}


/* CARDS */

.cards {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 30px;

}



/* CARDS REFINEMENT */

.card {

  background: #ecefe2;

  padding: 40px 30px;

  border-radius: 16px;

  border: 1px solid #e9ede3; 

  box-shadow: 0 15px 35px rgba(107, 112, 92, 0.08); 

  transition: transform 0.3s ease;

}



.card:hover {

  transform: translateY(-5px);

  border-color: #a3ad91;

}



.card h4 {

  color: #6b705c; 

  font-size: 22px;

  margin-bottom: 15px;

}



.card p {

  font-size: 16px;

  color: #666;

}

/* PRICING SECTION */
.pricing-wrapper {
  margin-top: 60px;
  text-align: center;
}

.pricing-title {
  margin-bottom: 30px !important;
  color: #3e4431; /* Ugyanaz a mély olíva, mint a többi cím */
}

.pricing-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.pricing-card {
  background: #ecefe2; /* Megegyezik a fenti kártyák színével a harmónia miatt */
  padding: 30px;
  border-radius: 16px;
  min-width: 280px;
  border: 1px solid #e9ede3;
  box-shadow: 0 10px 25px rgba(62, 68, 49, 0.08);
  transition: transform 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-5px);
  border-color: #a3ad91;
}

.pricing-card h4 {
  color: #6b705c;
  margin-bottom: 10px;
  font-size: 20px;
}

.pricing-card .duration {
  font-size: 16px;
  color: #666;
  margin-bottom: 15px;
}

.pricing-card .price {
  font-size: 24px;
  font-weight: 700;
  color: #3e4431;
}


/* KAPCSOLAT SECTION - VILÁGOS OLÍVA */
#kapcsolat.section {
  background-color: #ecefe2; /* Itt állítottam be a kért színt */
  color: #3e4431;
}

#kapcsolat h3 {
  color: #6b705c;
}

.contact-container {

  text-align: center;

}



.contact-info {

  display: inline-block; /* Centers the block itself */

  text-align: left;      /* Aligns text and icons to the left inside the block */

  margin-top: 30px;

}



.contact-item {

  display: flex;

  align-items: center;   /* Perfectly centers icons vertically with text */

  gap: 15px;             /* Space between icon and label */

  margin-bottom: 20px;

}



.contact-icon {

  color: #6b705c;        /* Olive green for the icons */

  flex-shrink: 0;        /* Prevents icon from shrinking on small screens */

}



.contact-item p {

  margin: 0 !important;  /* Overrides general paragraph margins */

  font-size: 17px;

  color: #4b4d40;

}



.contact-item a {

  text-decoration: none;

  color: #4b4d40;

  transition: color 0.3s;

}



.contact-item a:hover {

  color: #6b705c;

}



/* --- FOOTER --- */

.footer {

  text-align: center;

  background: #fdfdfc;

  border-top: 1px solid #eee;

  padding: 40px;

  color: #8a8d81;

}



/* --- SCROLL TO TOP BUTTON --- */

#scrollToTop {

  display: none;

  position: fixed;

  bottom: 20px;

  right: 20px;

  z-index: 99;

  background-color: #6b705c;

  color: white;

  border: none;

  padding: 10px 15px;

  border-radius: 50%;

  cursor: pointer;

  font-size: 18px;

  box-shadow: 0 4px 10px rgba(0,0,0,0.1);

}



#scrollToTop:hover {

  background-color: #585d4a;

}