* { margin: 0; padding: 0; box-sizing: border-box; } body { max-width: 1600px; margin: 0 auto; font-family: "Ubuntu", sans-serif; } /* EOS ( header) */ header { display: flex; align-items: center; background-color: #313131; height: 70px; flex-direction: row; /*position: fixed;*/ } .logo { flex-grow: 1; } .logo img { width: 150px; margin-left: 40px; } /* EOS - navigation */ nav { margin-right: 40px; } nav li { display: inline-block; list-style-type: none; margin-right: 20px; } nav li a { text-decoration: none; color: #734f96; /*border: 1px solid #734f96;*/ } /* EOS - navigation icons */ .menu-icon { display: none; margin-right: 30px; } /* EOS - Welcome*/ .welcome { /*background: url("image/background.webp");*/ min-height: calc(100vh - 70px); background-size: cover; /*background-position: center;*/ text-align: center; } h2 { color: #734f96; margin-top: 50px; margin-bottom: 50px; } h3 { text-align: center; } p { margin: 10px; } .p { text-align: center; } @media (max-width: 600px) { header { position: relative; } header nav { position: absolute; top: 70px; background-color: #313131; width: 100%; display: none; } .menu-icon { display: block; color: var(--special-white); font-size: 23px; } header nav li { display: block !important; text-align: center; margin-top: 10px; margin-bottom: 10px; } } /* About sekce */ .about-section { margin: 45px 0; } .about-section-wrapper { width: 65%; margin: 0 auto; display: flex; gap: 20px; } .about-text { flex: 1; } .about-img { flex: 1; } img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 768px) { .about-section-wrapper { flex-direction: column; width: 90%; margin: 0 auto; } .about-text { text-align: left; } .about-img { text-align: center; } .about-text-p { padding-top: 15px; } } footer { text-align: center; margin-top: 20px; margin-bottom: 20px; } /* Go to go */ #scrollToTopBtn { display: none; position: fixed; bottom: 20px; right: 20px; /*butoon přes obsah*/ z-index: 99; outline: none; cursor: pointer; padding: 15px; border-radius: 50%; background-color: transparent; } /* What We Do */ .what-section { background-color: var(--background-one); color: var(--word-white); } .what-section-wrapper { width: 65%; margin: 0 auto; } .what-text { text-align: center; } .h2-what-we { font-size: 38px; text-align: center; padding-top: 45px; padding-bottom: 35px; } .where-text { text-align: center; } .icon-what-section { margin-top: 45px; padding: 45px; list-style: none; display: flex; justify-content: space-between; flex-grow: 1; } .img-icons { width: 100px; height: 100px; align-items: center; } .icon-text { text-align: center; padding-top: 15px; font-size: 25px; } @media (max-width: 768px) { .what-section-wrapper { width: 90%; margin: 0 auto; } .icon-what-section { flex-direction: column; align-items: center; text-align: center; } .img-icons { width: 80px; height: 80px; margin-top: 20px; align-items: center; } .icon-text { padding-top: 0px; } } /* Reviews section */ .reviews-section { width: 45%; margin: 0 auto; margin-top: 25px; margin-bottom: 25px; } .h2-reviews { text-align: center; padding-bottom: 20px; } .reviews-text { width: 132px; height: 59px; text-align: center; margin: auto; } .reviews-card-wrapper { display: flex; align-items: center; justify-content: space-evenly; gap: 300px; } .reviews-card { width: 378.49px; height: 346px; text-align: center; } .reviews-card-1 { width: 378.49px; height: 346px; text-align: center; } .reviews-card-2 { width: 378.49px; height: 346px; text-align: center; } .reviews-card img { width: 122.13px; height: 111px; border-radius: 50%; } .reviews-card-1 img { width: 122.13px; height: 111px; border-radius: 50%; } .reviews-card-2 img { width: 122.13px; height: 111px; border-radius: 50%; } .reviews-card-text { margin-top: 20px; } .reviews-name { font-weight: 700; padding-top: 50px; height: 19px; align-items: center; } @media (max-width: 768px) { .reviews-section { width: 90%; margin: 0 auto; } .reviews-card-wrapper { flex-direction: column; width: 90%; margin: 0 auto; gap: 95px; } .reviews-card { width: 324px; } .reviews-card-1 { width: 324px; } .reviews-card-2 { width: 324px; } .reviews-text { width: 263px; } .h2-reviews { padding-top: 40px; } .reviews-name { padding-bottom: 40px; } }