:root {
--green:#3f6f6b;
--mint:#9fcac4;
--gold:#d7b37c;
--brown:#6b5b45;
--light:#efefef;
}
* {
	font-family:'Inter', sans-serif;
}
body {
	background:#e5d3a4;
}
.wrapper {
	max-width:1200px;
	margin:40px auto;
	border-radius:18px;
	overflow:hidden--;
	background:#f4f4f4;
	box-shadow:0 20px 40px rgba(0, 0, 0, .15);
}
/* NAV */
.navbar-custom {
	background:var(--green);
	padding:26px 60px;
	color:#fff;
}
.logo {
	font-weight:700;
	letter-spacing:1px;
	font-size:1.3rem;
}
.btn-gold {
	background:var(--gold);
	border:none;
	border-radius:40px;
	padding:12px 34px;
	font-weight:600;
}
.navbar-custom {
	background:#3f6f6b;
	padding:0px 40px;
	color:#fff;
}
.logo {
    font-weight: 700;
    letter-spacing: 0px;
    width: 200px;
}
.btn-gold {
	background:#d7b37c;
	border:none;
	border-radius:30px;
	padding:10px 26px;
	font-weight:600;
}
/* HERO */
.hero {
	background:url('/mnt/data/01143664-1b5f-4935-add3-01735e1a4cd1.png') center/cover no-repeat;
	padding:100px 70px;
	min-height:520px;
	display:flex;
	align-items:center;
}
.hero h1 {
	font-size:3.5rem;
	font-weight:800;
	line-height:1.05;
	max-width:540px;
}
.hero p {
	max-width:420px;
	color:#333;
	margin-top:20px;
	font-size:1.05rem;
}
.hero {
	background:url('https://picsum.photos/1400/700?random=3') center/cover no-repeat;
	padding:90px 60px;
}
.hero h1 {
	font-size:3.2rem;
	font-weight:800;
	line-height:1.1;
	max-width:500px;
}
.hero p {
	max-width:420px;
	color:#444;
	margin-top:15px;
}
/* SPLIT */
.split-left {
	background:#dedede;
	padding:70px;
}
.split-right {
	background:var(--mint);
	padding:70px;
}
.split h4 {
	font-weight:700;
	font-size:1.4rem;
}
.split p {
	max-width:300px;
}
.split-left {
	background:#ddd;
	padding:60px;
}
.split-right {
	background:#8fc1bd;
	padding:60px;
}
.split h4 {
	font-weight:700;
}
/* ICON BLOCK */
.icon-row {
	background:var(--brown);
	color:#fff;
	padding:80px 60px;
}
.icon-item {
	text-align:center;
}
.icon-circle {
	width:72px;
	height:72px;
	border-radius:50%;
	border:2px solid var(--gold);
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0 auto 18px;
	font-size:1.4rem;
}
.icon-row {
	background:#6a5b45;
	color:#fff;
	padding:60px 40px;
}
.icon-item {
	text-align:center;
}
.icon-circle {
	width:70px;
	height:70px;
	border-radius:50%;
	border:2px solid #d7b37c;
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0 auto 15px;
}
/* PRICE */
.price-box {
	background:#7a694e;
	border-radius:22px;
	padding:45px;
	text-align:center;
	border:2px solid var(--gold);
}
.price-box h2 {
	font-size:3.2rem;
	font-weight:800;
}
.price-box {
	background:#7b6a4f;
	border-radius:20px;
	padding:40px;
	text-align:center;
	border:2px solid #d7b37c;
}
.price-box h2 {
	font-size:3rem;
	font-weight:800;
}

.open-modal-btn {
    background: #f4c430;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.open-modal-btn:hover {
    transform: translateY(-2px);
}


/* Overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 99999; /* fontos */
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Modal */
.modal {
    background: white;
    width: 90%;
    max-width: 500px;
    padding: 40px;
    border-radius: 14px;
    position: relative;
    z-index: 100000; /* fontos */
    
    transform: translateY(30px) scale(0.95);
    opacity: 0;
    transition: all 0.3s ease;
}

.modal-overlay.active .modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}


.close-btn {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 24px;
    cursor: pointer;
}

.modal h2 {
    margin-bottom: 20px;
}

.modal form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.modal input,
.modal textarea {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 14px;
}

.modal button {
    background: #f4c430;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.modal button:hover {
    transform: translateY(-2px);
}

/* SOCIAL */
.social {
	padding:80px 60px;
	background:var(--brown);
	color:#fff;
}
.avatar {
	width:52px;
	height:52px;
	border-radius:50%;
	background:#ccc;
}
.social {
	padding:60px 40px;
	background:#6a5b45;
	color:#fff;
}
.avatar {
	width:50px;
	height:50px;
	border-radius:50%;
	background:#ccc;
}
/* QUOTES */
.quotes {
	background:#f4f4f4;
	padding:60px 40px;
}
.quote-box {
	background:#fff;
	padding:25px;
	border-radius:15px;
}
/* FOOTER CTA */
.footer-cta {
	text-align:center;
	padding:60px 40px;
}

.slider-container {
    max-width: 1300px;
    margin: auto;
    overflow: hidden;
    position: relative;
}

.slider-track {
    display: flex;
    transition: transform 0.6s ease;
    cursor: grab;
}

.slider-track.dragging {
    transition: none;
    cursor: grabbing;
}

.card {
    background: white;
    border-radius: 14px;
    padding: 30px;
    margin: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    min-width: calc(25% - 20px);
    user-select: none;
}

.quote {
    font-size: 50px;
    color: #f4c430;
    opacity: 0.2;
}

.text {
    margin-top: 20px;
    color: #555;
    font-size: 14px;
    line-height: 1.6;
}

.author {
    display: flex;
    align-items: center;
    margin-top: 25px;
}

.author img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 12px;
}

.author-name {
    font-weight: 600;
    font-size: 14px;
}

.dots {
    text-align: center;
    margin-top: 30px;
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ddd;
    border-radius: 50%;
    margin: 0 6px;
    cursor: pointer;
    transition: 0.3s;
}

.dot.active {
    background: #f4c430;
}

@media(max-width: 992px) {
    .card { min-width: calc(50% - 20px); }
}

@media(max-width: 600px) {
    .card { min-width: calc(100% - 20px); }
}

/* BREAKPOINTS */
@media(max-width:1200px) {
.hero h1 {
font-size:2.7rem
}
}
@media(max-width:991px) {
.hero {
text-align:center;
padding:60px 30px
}
.hero h1 {
margin:0 auto
}
}
@media(max-width:768px) {
.navbar-custom {
flex-direction:column;
gap:15px
}
.split-left, .split-right {
padding:40px
}
}
@media(max-width:480px) {
.hero h1 {
font-size:1.8rem
}
}