* {

margin: 0;

padding: 0;

box-sizing: border-box;

}



body {

font-family: "Poppins", sans-serif;

line-height: 1.5;

overflow-x: hidden;

}



.layout--background-color { background-color: #f7f7ff ;}



.wrapper {

    position: relative;

    padding: 2vw 1em 2vw 1em;

    margin: 0 auto;

    max-width: 1140px;

}



.bg-color--primary{

    background-color: #f7f7ff;

}

/*--------------------------*/

.section-title {

font-size: 2rem;

font-weight: 400;

letter-spacing: 3px;

text-align: center;

margin-bottom: 40px;

}

.section-title--light {

color: white;

font-size: 8rem;

font-weight: 400;

letter-spacing: 3px;

}



.section-title--dark {

color: #023047;

font-size: 2rem;

font-weight: 400;

letter-spacing: 3px;

}



/*-------------------------------------*/

/*HEADER*/



header {

position: relative;

min-height: 100vh;

background: #6f94a3;

overflow: hidden;

display: grid;

grid-template-columns: 2fr 3fr;

align-items: center;

}



.wrapper--header {

grid-column: 1 / 2;

z-index: 2;

}



.bg-circle--img {

position: absolute;

right: 0;

top: 0;

height: 100%;

width: 100%;

background-image: url("img/header.jpg");

background-size: 60% auto;

background-repeat: no-repeat;

background-position: right center;

clip-path: circle(70% at 100% 50%);

z-index: 1;

}



.header-logo {

width: 15vw;

margin-bottom: 20px;

}



.header-small {

letter-spacing: 3px;

font-size: 2vw;  

font-weight: 900;

margin-bottom: 10px;

white-space: nowrap;

color: #004369;

}



.header-title {

font-size: 5.5rem !important;

font-weight: 500;

color: white;

white-space: nowrap;

}



.header-subtitle {

font-size: 1.5vw;

letter-spacing: 2px;

font-weight: 400;

color: white;

white-space: nowrap !important;

margin: 20px 0;

}



.header-line {

width: 100%;

height: 1px;

background: white;

margin: 10px 0;



}



.header-button {

display: inline-block;

border: 2px solid white;

padding: 1.5vw 10vw;

margin: 20px 0;

text-decoration: none;

color: white;

transition: 0.3s;

white-space: nowrap;

font-size: 1.5vw;

}



.header-button:hover {

background-color: white;

color: #023047;

}



/*-------------------------------------*/

/* TEXT POD HEADEREM */



#Underheader {

background-color: #f4f4f4;

padding: 80px 0;

}



#Underheader .grid__item--text {

max-width: 100%;

text-align: center;

margin: 0 auto;

}



#Underheader h3 {

font-size: 2rem;

font-weight: 300;

line-height: 1.4;

color: #6f94a3;

margin: 0;

}



.grid--header-text {

display: grid;

}





/*-------------------------------------*/

/* BIOGRAPHY */



#Biography {

background-color: #023047;



}

#Biography .section-title {

color: white;

font-weight: 300;

font-size: 3rem;

text-align: left;



}

#Biography .grid__item--text {

text-align: left;

}

#Biography p {

font-size: 18px;

letter-spacing: 2px;

font-weight: 100;

color: white;

text-align: left;

}



.grid--biography {

display: grid;

grid-template-columns: 1fr;

gap: 40px;

align-items: center;

padding: 20px;



}





.img--avatar-biography {

border-radius: 50%;

object-fit: cover;

}



#Biography .wrapper {

max-width: 1400px;

}



/*-------------------------------------*/

/* VIDEO */



#Video {

position: relative;

overflow: hidden;

color: white;

min-height: 100vh;

display: grid;

align-items: center;

}



/* video background */



.video-container {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 0;

}



.video-container video { 

width: 100%;

height: 100%;

object-fit: cover;

}





/* obsah */



.video-content {

position: relative;

z-index: 2;

width: 100%;

max-width: 1300px;

margin: 0 auto;

display: grid;

}





/* GRID 3 sloupce */



.video-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 40px;

text-align: center;

}





#Video .section-title {

font-size: 3rem;

font-weight: 300 ;

padding: 40px 0;

}



#Video .video-item h3 {

font-size: 2rem;

font-weight: 500;

}



.price {

position: relative;

display: inline-block;

padding: 0 20px;

font-size: 1.2rem;

margin: 10px 0;

color: #6f94a3;



}



/* levá čára */



.price::before {

content: "";

position: absolute;

left: -80px;

top: 50%;

width: 90px;

height: 1px;

background: white;

transform: translateY(-50%);

}



/* pravá čára */



.price::after {

content: "";

position: absolute;

right: -80px;

top: 50%;

width: 90px;

height: 1px;

background: white;

transform: translateY(-50%);

}



/* button */



#Video .header-button {

display: inline-block;

width: auto;

padding: 12px 35px;

margin-top: 20px;

justify-self: center;

color: white;

transition: 0.3s;

text-decoration: none;

margin-top: 50px;

font-size: 2rem; 

}



.ritual-button:hover {

background-color: white;

color: #023047;

}



/*-------------------------------------*/

/* DOMÁCÍ PÉČE */



#Domacipece {

background-color: #b7ced6;

padding: 40px 0;

}



#Domacipece h3 {

font-size: 2rem;

font-weight: 300;

line-height: 1.4;

color: #6f94a3;

padding-bottom: 40px;}





.header-center {

text-align: center;

letter-spacing: 3px;

}



.homecare-images {

display: flex;

justify-content: center;

align-items: center;

gap: 5em;

margin: 50px auto;

max-width: 1100px;

}

.homecare-img {

width: clamp(120px, 12vw, 180px);

aspect-ratio: 1 / 1;

border-radius: 50%;

object-fit: cover;

}

#Domacipece .grid__item--text {

text-align: center;

max-width: 100%;

margin: 0 auto;



}

/*-------------------------------------*/





/*FOOTER*/





#Footer {

display: grid;

grid-template-columns: 1fr 1fr;

}





/* Levá část */



.footer-left {

background-color: #023047;

color: white;

padding: 40px 0;

text-align: center;

}



/* Pravá část */



.footer-right {

background-color: #7fa3b3;

color: white;

padding: 40px 0;

text-align: center;

}



/* Nadpis */



.footer-title {

letter-spacing: 3px;

margin-bottom: 40px;

}



/* Button */



.footer-button {

display: inline-block;

border: 2px solid white;

padding: 15px 80px;

margin: 10px 0;

text-decoration: none;

color: white;

transition: 0.3s;

white-space: nowrap;

}



.footer-button:hover {

background-color: white;

color: #023047;

}



/* Social icons */



.footer-social {

display: flex;

justify-content: center;

gap: 40px;

margin-top: 40px;

}



/* Ikony */



.img--instagram {

background-image: url(img/instagram.svg);

background-repeat: no-repeat;

background-size: contain;

width: 60px;

height: 60px;

display: block;

}



.img--facebook {

background-image: url(img/facebook.svg);

background-repeat: no-repeat;

background-size: contain;

width: 60px;

height: 60px;

display: block;

}



/* Text ve footeru */



#Footer h3 {

margin-top: 30px;

margin-bottom: 10px;

}



#Footer .footer-left h2 {

font-size: 3rem;

color: #6f94a3;

font-weight: 400;

} 



#Footer .footer-right h2 {

font-size: 3rem;

color: #023047;

font-weight: 400;

}



#Footer p {

margin: 0;

}



/* -------------------------------- */



/* CENIK */



#Cenik {

background-color: #b7ced6;

}



.cenik-title {

font-size: 3rem;

color: white;

font-weight: 400;

text-align: center;

margin: 0;

}



.cenik-item {

max-width: 100%;

padding: 20px;



}



.cenik-heading {

font-size: 2rem;

font-weight: 600;

color: #023047;

margin-bottom: 10px;

}



.cenik-description {

color: #023047;

margin-bottom: 20px;

}



.cenik-list {

color: #023047;

padding-left: 20px;

margin-bottom: 30px;

}



.cenik-list li {

margin-bottom: 5px;

}

/* šipka zpět*/

.cenik-back {

position: sticky;

top: 20px;

right: 30px;

float: right;

z-index: 10;

border: 2px solid #5f8fa1;

padding: 12px 12px;

border-radius: 30px;

text-decoration: none;

color: #5f8fa1;

font-weight: 500;

letter-spacing: 2px;

transition: 0.3s;

margin-top: 30px;

}



.cenik-back:hover {

background: #5f8fa1;

color: white;

}

#Cenik {

position: relative;

}





/* spodní lišta */



.cenik-footer {

background: #023047;

color: white;

padding: 15px 30px;

border-radius: 30px;

display: flex;

justify-content: space-between;

font-weight: 600;

}



.cenik-grid-2 {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 40px;

}



@media (max-width: 768px) {

.cenik-grid-2 {

grid-template-columns: 1fr;

}

}



.cenik-grid-3 {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 10px;

text-align: center;

}



@media (max-width: 900px) {

.cenik-grid-3 {

grid-template-columns: 1fr;

}

}

/* -------------------------------- */

/* VELKÝ MONITOR */

@media (min-width: 1600px) {



.video-content {

max-width: 1800px;

padding: 40px 60px; /* zmenšení výšky */

}



.video-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

column-gap: clamp(120px, 8vw, 200px); /* větší mezery */

row-gap: 40px; /* menší vertikální mezera */

text-align: center;

}



#Video {

min-height: 80vh; /* menší výška sekce */

}



#Video .video-item h3 {

font-size: 3rem;

}



#Video .section-title {

font-size: 3.5rem;

margin-bottom: 20px;

}



#Video .video-item p {

font-size: clamp(1rem, 1.2vw, 1.2rem);

line-height: 1.6;

font-weight: 200;

letter-spacing: 0.5px;

}



}

/* -------------------------------- */



/* DESKTOP BIOGRAPHY FIX */



@media (min-width: 1025px) {



#Biography .grid--biography {

display: grid;

grid-template-columns: 1fr 2fr;

align-items: center;

gap: 60px;

text-align: left;

}



#Biography h2,

#Biography p {

text-align: left;

}



.grid__item--avatar-biography {

justify-self: left;

}



.img--avatar-biography {

width: 400px;

height: 400px;

}



.section-title,

#Biography h2,

#Domacipece h2,

#Video .section-title,

#Cenik h2 {

font-size: 3rem;

font-weight: 300;

letter-spacing: 1px;

margin-bottom: 40px;

}



}

@media (max-width: 1024px) {



#Biography .section-title {

text-align: center;

}



}

/* -------------------------------- */

/* TABLET */



@media (min-width: 769px) and (max-width: 1024px) {



/* HEADER */





header {

grid-template-columns: 1fr;

}



.bg-circle--img {

clip-path: none;

width: 100%;

height: 100%;

background-size: cover;

background-position: center;

opacity: 0.4;

}



.wrapper--header {

grid-column: 1;

text-align: center;

position: relative;

z-index: 2;

}



.header-logo {

width: 40vw;

margin-bottom: 30px;

}



.header-small {

font-size: 4vw;

letter-spacing: 3px;

}



.header-title {

font-size: 10vw !important;

}



.header-subtitle {

font-size: 20px;

}



.header-line {

margin: 20px auto;

max-width: 400px;

}



.header-button {

font-size: 6vw ;

}





/* BIOGRAPHY */



.grid--biography {

display: grid;

grid-template-columns: 1fr;

text-align: center;

gap: 30px;

}



#Biography .grid__item--text {

text-align: center;

}



.img--avatar-biography {

width: 300px;

height: 300px;

margin: 0 auto;

}



#Biography h2,

#Biography p {

text-align: center;

}



/* VIDEO TABLET */



.video-content {

padding: 40px 30px;

}



.video-grid {

grid-template-columns: repeat(2, 1fr);

gap: 30px;

}



#Video .section-title {

font-size: 2.5rem;

}



#Video .video-item h3 {

font-size: 2rem;

}



.price {

font-size: 1.5rem;

}



#Video .header-button {

font-size: 1.5rem;

}



.price::before {

left: -50px;

width: 50px;

}



.price::after {

right: -50px;

width: 50px;

}





/* DOMACI PECE */



.homecare-images {

flex-wrap: wrap;

}



.homecare-img {

width: 150px;

height: 150px;

}



/* FOOTER */



.footer-button {

padding: 12px 50px;

}



}

@media (max-width: 1024px) {





.cenik-back {

display: none;

}



}

/*--------------------------------------*/

/* MOBILE */



@media (max-width: 768px) {



/* HEADER */



header {

grid-template-columns: 1fr;

text-align: center;

padding: 20px 0;

}



.bg-circle--img {

display: none;

}



.header-logo {

width: 50vw;

margin: 0 auto 20px auto;

}



.header-small {

font-size: 4vw;

white-space: normal;

}



.header-title {

font-size: 4rem !important;

white-space: normal;

}



.header-subtitle {

font-size: 14px;

white-space: normal !important;

}



.wrapper--header {

padding: 20px;

}



.header-button {

display: inline-block;

white-space: nowrap;

font-size: 5vw;

}



/* UNDERHEADER */



#Underheader h3 {

font-size: 1.3rem;

}



/* BIOGRAPHY */



.grid--biography {

display: grid;

grid-template-columns: 1fr;

text-align: center;

gap: 30px;

}



.img--avatar-biography {

width: 200px;

height: 200px;

margin: 0 auto;

}



#Biography h2,

#Biography p {

text-align: center;

}



/* VIDEO MOBILE */





#Video .video-content {

padding-left: max(20px, env(safe-area-inset-left));

padding-right: max(20px, env(safe-area-inset-right));

}



.video-grid {

display: grid;

grid-template-columns: 1fr;

text-align: center;

}







#Video .section-title {

font-size: 2rem;

padding: 20px 0;

}



#Video .video-item h3 {

font-size: 1.2rem;

}



#Video .video-item p {

font-size: 0.9rem;

}



.price {

font-size: 0.9rem;

}



.price::before,

.price::after {

display: none;

}



#Video .header-button {

font-size: 1rem;

padding: 10px 25px;

margin-top: 30px;

}





/* DOMACI PECE */



.homecare-images {

flex-wrap: wrap;

gap: 2em;

}



.homecare-img {

width: 120px;

height: 120px;

}



#Domacipece h2 {

font-size: 2rem;

}



#Domacipece h3 {

font-size: 1.3rem;

}



/* FOOTER */



#Footer {

grid-template-columns: 1fr;

}



.footer-left,

.footer-right {

padding: 30px 20px;

}



.footer-button {

padding: 12px 40px;

}



.footer-social {

gap: 20px;

}



.img--instagram,

.img--facebook {

width: 40px;

height: 40px;

}

}



/* -------------------------------- */

/* SMALL MOBILE */



@media (max-width: 480px) {



    /* HEADER */



header {

grid-template-columns: 1fr;

text-align: center;

padding: 10px 0;

min-height: auto;

}



.bg-circle--img {

display: none;

}



.header-logo {

width: 120px;

margin: 0 auto 15px auto;

}



.header-small {

font-size: 12px;

letter-spacing: 2px;

white-space: normal;

}



.header-title {

font-size: 2rem !important;

white-space: normal;

}



.header-subtitle {

font-size: 12px;

white-space: normal !important;

}



.wrapper--header {

padding: 10px 15px;

}



.header-button {

display: inline-block;

font-size: 0.9rem;

padding: 10px 20px;

white-space: nowrap;

}





#Video .section-title {

font-size: 1.6rem;

}



#Video .video-item h3 {

font-size: 1.1rem;

}



#Video .header-button {

font-size: 0.9rem;

padding: 8px 20px;

}





#Footer {

grid-template-columns: 1fr;

padding: 0;

}



.footer-left,

.footer-right {

padding: 20px 15px;

width: 100%;

box-sizing: border-box;

}

#Footer h2 {

font-size: 1.8rem;

}



#Footer h3 {

font-size: 1rem;

margin-top: 15px;

}



.footer-button {

padding: 10px 50px;

font-size: 1rem;

}



.footer-social {

gap: 15px;

margin-top: 20px;

}



.img--instagram,

.img--facebook {

width: 30px;

height: 30px;

}



#Footer p {

font-size: 0.85rem;

}

}