/* =========================================================
	 Design tokens
	 ========================================================= */
:root{
	--brand-1:#5ca9fb;
	--brand-2:#6372ff;
	--brand-1-weak:#5ca9fb26;

	--text:#333;
	--text-weak:#777;
	--muted:#888;

	--bg:#fff;
	--bg-soft:#f6f6f6;

	--shadow:0 2px 12px rgba(0,0,0,.08);
	--radius:12px;

	--space-1:.25rem;
	--space-2:.5rem;
	--space-3:.75rem;
	--space-4:1rem;
	--space-5:1.5rem;
	--space-6:2rem;
}

/* =========================================================
	 Base / HTML & Typography	(původní škála velikostí)
	 ========================================================= */
html{
	font-family:"Open Sans", sans-serif;
	text-rendering:optimizeLegibility!important;
	-webkit-font-smoothing:antialiased!important;
	color:var(--text-weak);
	font-weight:400;
	width:100%!important;
	height:100%!important;
	scroll-behavior:smooth;
	scroll-padding-top:60px;
}
body{ color:var(--text-weak) }

h2,h3,h4{ font-family:"Raleway",sans-serif }
h2{ text-transform:uppercase; margin:0 0 20px; font-weight:800; font-size:36px; color:#333 }
h3{ font-size:20px; font-weight:600; color:#333 }
h4{ font-size:18px; font-weight:600; color:#333 }
h5{ text-transform:uppercase; font-weight:700; line-height:20px }

p{ font-size:15px }
p.intro{ margin:12px 0 0; line-height:24px }

a{ color:#608dfd; font-weight:400; text-decoration:none }
a:hover,a:focus{ color:#608dfd; text-decoration:none }

ul,ol{ list-style:none; padding:0; margin:0 }

hr{ height:2px; width:70px; background:#1e7a46; border:0; margin-bottom:20px }

/* =========================================================
	 Navigation
	 ========================================================= */
#menu{ padding:15px; transition:.3s }
#menu.navbar-default{ background:var(--bg); border-color:transparent; box-shadow:0 0 10px rgba(0,0,0,.15) }

#menu a.navbar-brand{
	font-family:"Raleway",sans-serif; font-size:16px; font-weight:700; color:#333;
	display:inline-flex; align-items:center; gap:8px; cursor:pointer;
}
#menu.navbar-default .navbar-nav>li>a{
	font-family:"Lato",sans-serif; text-transform:uppercase; color:#555;
	font-size:15px; font-weight:400; padding:8px 2px; border-radius:0;
	margin:9px 20px 0; position:relative;
}
/* gradient underline */
#menu.navbar-default .navbar-nav>li>a:after{
	content:""; position:absolute; left:0; bottom:-1px; width:0; height:2px;
	background:linear-gradient(90deg, var(--brand-2), var(--brand-1));
	transition:width .2s;
}
#menu.navbar-default .navbar-nav>li>a:hover:after{ width:100% }
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus{ background:transparent }
.navbar-default .navbar-nav>.active>a:after{ width:100% }

/* Hamburger (BS3/4/5 friendly) */
.navbar-toggle,.navbar-toggler{
	position:fixed; top:0; right:30px; z-index:1300;
	background:#f0f0f0; border:0; padding:10px; border-radius:50%;
	box-shadow:0 2px 6px rgba(0,0,0,.1); cursor:pointer;
}
.navbar-toggle span{ display:block; width:25px; height:3px; margin-bottom:5px; background:#333 }

/* Optional slide-out mobile menu (ponecháno z původního) */
.mobile-menu{
	position:fixed; top:60px; right:15px; width:280px; padding:20px;
	background:#f0f0f0; border-radius:25px; box-shadow:0 5px 20px rgba(0,0,0,.2); z-index:1250;
}
.mobile-menu ul{ margin:0; padding:0 }
.mobile-menu li{ margin-bottom:12px }
.mobile-menu a{
	display:block; padding:14px 24px; font-size:18px; color:#333; border-radius:50px;
	transition:background-color .3s ease, color .3s ease;
}
.mobile-menu a.active{ background:#5ca9fb; color:#fff }

/* =========================================================
	 Section title
	 ========================================================= */
.section-title{ margin-bottom:70px }
.section-title h2{ position:relative; margin-top:10px; margin-bottom:15px; padding-bottom:15px }
.section-title h2::after{
	content:""; position:absolute; left:50%; transform:translateX(-50%);
	bottom:0; height:4px; width:60px;
	background:linear-gradient(90deg, var(--brand-1), var(--brand-2));
}
.section-title p{ font-size:18px }

/* =========================================================
	 Buttons
	 ========================================================= */
.btn-custom{
	font-family:"Raleway",sans-serif; text-transform:uppercase; color:#fff;
	background-image:linear-gradient(90deg, var(--brand-1), var(--brand-2));
	padding:14px 34px; letter-spacing:1px; margin:0;
	font-size:15px; font-weight:500; border-radius:25px; border:0; transition:all .25s linear;
}
.btn-custom:hover{ color:#fff; background-image:none; background-color:#6372ff }

/* =========================================================
	 Intro (hero)
	 ========================================================= */
.intro{
	display:table; width:100%;
	background:url(../img/intro-bg-01.jpg) center/cover no-repeat #e5e5e5;
}
.intro .overlay{ background:rgba(0,0,0,.2) }

/* ˇ ZÁMĚRNĚ MENŠÍ HERO NADPIS (kvůli výšce hlavičky)
	 Původně 82px – vrať zpět smazáním následující deklarace */
.intro h1{
	font-family:"Raleway",sans-serif; color:#fff; font-weight:700; text-transform:uppercase;
	margin:0 0 10px; font-size:56px;
}
.intro h1 span{ font-weight:800; color:#5ca9fb }
.intro p{ color:#fff; font-size:22px; font-weight:300; line-height:30px; margin:0 auto 60px }

header .intro-text{
	/* výrazně menší vertikální padding než původních 350/200px */
	padding-top:160px;	 /* 10rem */
	padding-bottom:96px; /* 6rem	*/
	text-align:center;
}

/* =========================================================
	 Features
	 ========================================================= */
#features{ background:var(--bg-soft) }
#features i.fa{
	font-size:30px; width:88px; height:88px; padding:24px 0; margin-bottom:20px;
	color:#fff; border-radius:50%;
	background:linear-gradient(90deg, var(--brand-2), var(--brand-1));
	box-shadow:6px 6px 10px rgba(0,0,0,.05);
}

/* =========================================================
	 About
	 ========================================================= */
#about{ padding:100px 0 }
#about h3{ font-size:22px; margin:0 0 20px }
#about h2{ position:relative; margin-bottom:15px; padding-bottom:15px }
#about h2::after{
	content:""; position:absolute; left:0; bottom:0; height:4px; width:60px;
	background:linear-gradient(90deg, var(--brand-1), var(--brand-2));
}
#about .about-text li{ margin-bottom:6px; margin-left:6px }
#about .about-text li:before{
	content:"\f00c"; font-family:"FontAwesome"; color:#5ca9fb; font-size:11px; font-weight:300; padding-right:8px;
}
#about img{ width:520px; margin-top:10px; background:#fff; box-shadow:0 0 50px rgba(0,0,0,.06) }
#about p{ line-height:24px; margin:30px 0 }

/* =========================================================
	 Services (lehčí boxy, žádná pevná výška)
	 ========================================================= */
#services{
	padding:80px 0; /* bylo 100px */
	background:linear-gradient(90deg,#3d5fc4,#5a9bd8); color:#fff;
}
#services h2,#services h3{ color:#fff }
#services .section-title h2::after{ background:rgba(255,255,255,.3) }
#services i.fa{
	font-size:42px; width:110px; height:110px; padding:32px 0; border-radius:50%;
	background:linear-gradient(90deg, var(--brand-2), var(--brand-1));
	box-shadow:8px 8px 12px rgba(0,0,0,.06);
}
#services p{ color:rgba(255,255,255,.78) }

#services .service-desc{
	margin:10px 10px 20px;
	border:1px solid rgba(255,255,255,.35);
	border-radius:10px;
	padding:1rem;
	min-height:unset;							/* zrušení 300px */
	overflow:auto;
	display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
	box-shadow:0 1px 8px rgba(0,0,0,.06);
	text-align:center;
	background:#ffffff12;
}

/* =========================================================
	 Portfolio
	 ========================================================= */
#portfolio{ padding:100px 0 }
.portfolio-item{ margin:1px -15px 0 -14px }
.portfolio-item .hover-bg{ overflow:hidden; position:relative }
.hover-bg .hover-text{
	position:absolute; inset:0; text-align:center; color:#fff;
	background:linear-gradient(90deg, rgba(99,114,255,.8), rgba(92,169,251,.8));
	padding-top:30%; opacity:0; transition:.3s;
}
.hover-bg .hover-text>h4{
	opacity:0; color:#fff; transform:translateY(100%); transition:.25s;
	font-size:18px; letter-spacing:1px; font-weight:500; text-transform:uppercase;
}
.hover-bg:hover .hover-text{ opacity:1 }
.hover-bg:hover .hover-text>h4{ opacity:1; transform:translateY(0) }

#portfolio { text-align: left; }
#portfolio .section-title { text-align: center; }
#portfolio .gallery-grid{
  display: grid !important;                 /* přepíše .row { display:flex } */
  grid-auto-flow: row dense;                /* vyplní případné mezery */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  justify-content: start;
  justify-items: stretch;
  align-items: stretch;
  text-align: left;
}

/* Zruš vliv .col-* (flex-basis, max-width, padding, atd.) uvnitř gridu */
#portfolio .gallery-grid > [class*="col-"]{
  float: none !important;
  flex: initial !important;
  max-width: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* .row má v Bootstrapu negativní okraje – tady je nulujeme pro grid */
#portfolio .gallery-grid.row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Card look & equal height */
#portfolio .gallery-card{
  padding: var(--space-6);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
}

#portfolio .gallery-card h4{
  font-size: 1.8rem;
  line-height: 1.25;
  margin: 0 0 var(--space-3);
  color: #111;
  font-weight: 700;
}
#portfolio .gallery-card p{
  font-size: 1.8rem;
  line-height: 1.6;
  margin: 0;
  color: var(--text);
}
#portfolio .gallery-card a{
  word-break: break-word;
  text-decoration: none;
}

/* =========================================================
	 Testimonials
	 ========================================================= */
#testimonials{ padding:100px 0; background:var(--bg-soft) }
#testimonials i{ color:#e6e6e6; font-size:32px; margin-bottom:20px }
.testimonial{
	border:1px solid #d7d7d7; border-radius:var(--radius);
	padding:20px; margin-bottom:30px;
	background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.08);
	transition:.2s;
}
.testimonial:hover{ border-color:#007bff; box-shadow:0 6px 20px rgba(0,123,255,.2) }
.testimonial-image{ float:left; margin-right:15px }
.testimonial-image img{ width:80px; height:80px; border-radius:50%; object-fit:cover; margin-bottom:15px }
.testimonial-content{ overflow:hidden }
.testimonial-content p{ font-style:italic; color:#333 }
.testimonial-meta{ font-weight:700; margin-top:10px; color:#555 }

/* =========================================================
	 Team
	 ========================================================= */
#team{ padding:100px 0 }
#team h4{ margin:5px 0 }
#team .team-img{ width:240px }
#team .thumbnail{ background:transparent; border:0 }
#team .thumbnail .caption{ padding:10px 0 0; color:#888 }

/* =========================================================
	 Contact
	 ========================================================= */
#contact{
	padding:100px 0 60px;
	background:linear-gradient(90deg,#3d5fc4,#5a9bd8);
	color:rgba(255,255,255,.75);
}
#contact .section-title{ margin-bottom:40px }
#contact .section-title p{ font-size:16px }
#contact h2{
	color:#fff; margin-top:10px; margin-bottom:15px; padding-bottom:15px; position:relative;
}
#contact .section-title h2::after{
	content:""; position:absolute; left:30px; bottom:0; height:4px; width:60px; background:rgba(255,255,255,.3);
}
#contact h3{ color:#fff; margin-top:80px; margin-bottom:25px; padding-bottom:20px; font-weight:400 }
#contact form{ padding-top:20px }
#contact .text-danger{ color:#cc0033; text-align:left }
#contact .btn-custom{ margin:30px 0; background:transparent; border:2px solid #fff }
#contact .btn-custom:hover{ color:#1f386e; background:#fff }
label{ font-size:12px; font-weight:400; font-family:"Open Sans",sans-serif; float:left }
#contact .form-control{
	width:100%; padding:6px 12px; font-size:16px; color:#444;
	background:#fff; border:1px solid #ddd; border-radius:0; box-shadow:none;
}
#contact .form-control:focus{ border-color:#999; outline:0; box-shadow:transparent }
#contact .contact-item{ margin:20px 0 }
#contact .contact-item span{ color:#fff; margin-bottom:10px; display:block }
#contact .contact-item i.fa{ margin-right:10px }

/* Social */
#contact .social{
	border-top:1px solid rgba(255,255,255,.15);
	padding-top:50px; margin-top:50px; text-align:center;
}
#contact .social ul li{ display:inline-block; margin:0 20px }
#contact .social i.fa{
	font-size:22px; width:48px; height:48px; padding:12px 0;
	border:2px solid #fff; color:#fff; border-radius:50%; transition:.2s;
}
#contact .social i.fa:hover{ color:#608dfd; background:#fff }

/* =========================================================
	 Footer
	 ========================================================= */
#footer{ background:var(--bg-soft); padding:30px 0 }
#footer p{ color:#888; font-size:14px }
#footer a{ color:#608dfd }
#footer a:hover{ border-bottom:2px solid #608dfd }

/* =========================================================
	 Responsive
	 ========================================================= */
@media (max-width:768px){
	#about img{ margin:50px 0 }
}
@media (max-width:480px){
	body>section, body>div, .container, .content-wrapper{
		padding-left:5px; padding-right:5px; box-sizing:border-box;
	}

	header .intro-text{ padding-top:150px; padding-bottom:100px }
	.intro h1{ font-size:36px; line-height:1.2; padding:0 10px } /* mobile hero */
	.intro p{ font-size:16px; line-height:22px; padding:0 15px; margin-bottom:40px }

	#features i.fa{ font-size:28px; width:80px; height:80px; padding:20px 0 }

	#about{ padding:50px 15px }
	#about img{ width:100%; max-width:100%; margin:20px 0 }

	#services{ padding:50px 15px }
	#services .service-desc{ margin:20px 0 30px; width:100%; height:auto; padding:20px }

	#contact{ padding:50px 15px 30px }
	#contact .form-control{ font-size:14px; padding:8px 10px }

	/* mobile nav visibility */
	.navbar-toggle{ display:block !important }
	.desktop-menu{ display:none !important }

	#footer{ padding:20px 15px; text-align:center }
	#footer p{ font-size:12px }
	#contact .social i.fa{ font-size:18px; width:40px; height:40px; padding:8px 0 }

	*,*:before,*:after{ box-sizing:border-box }
}
@media (min-width:481px){
	.desktop-menu{ display:flex !important }
	.navbar-toggle{ display:none !important }
}