header { background-color: var(--color-bg-header); color: var(--color-text-header); display: flex; align-items: center; justify-content: center; text-align: center; padding-top: 16px; padding-bottom: 16px; box-sizing: border-box; } .header-container { max-width: 1400px; box-sizing: border-box; width: 100%; } .header-content { display: flex; align-items: center; position: relative; } .header-logo { display: flex; flex: 0.2 0.2 auto; justify-content: center; align-items: center; } .header-logo img { width: auto; height: var(--header-height); } .header-site-description { display: flex; flex: 1 1 auto; justify-content: center; align-items: center; font-weight: bold; } .header-site-description a { color: var(--color-header-bloginfo-ahref); } .header-site-description a:hover { color: var(--color-header-bloginfo-ahref-hover); } .main-nav { display: flex; justify-content: center; background-color: var(--color-bg-burger); padding: 10px; z-index: 10; }.menu-toggle { display: none; }.menu-icon { display: none; font-size: 2rem; color: var(--color-fg-burger); cursor: pointer; z-index: 100; }.menu-wrapper { display: flex; background-color: var(--color-bg-header); flex-direction: row; width: auto; box-shadow: none; z-index: 99; overflow: visible; max-height: none; padding: 0; } .close-icon{ display: none; }.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; gap: 1rem; }.menu a { text-decoration: none; color: #a3a3a3; padding: 1rem; display: block; }.menu a:hover { color: white; }@media (max-width: 768px) { .menu-icon { display: block; } .menu-wrapper { position: absolute; top: 100%; left: 0; flex-direction: column; width: 100%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); max-height: 0; padding: 0; overflow: hidden; transition: max-height 0.5s ease-in-out, padding 0.3s ease-in-out; } .menu { flex-direction: column; width: 100%; padding: 0; } .menu-toggle:checked ~ .menu-wrapper { max-height: 500px; padding: 10px; } } @import url("./hero.css"); @import url("./benefits.css"); @import url("./gallery.css"); @import url("./about.css"); @import url("./services.css"); @import url("./testimonials.css"); @import url("./effects.css"); .hero-section { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - var(--header-height)); box-sizing: border-box; } .hero-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .hero-content { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; width: 100%; box-sizing: border-box; } .hero-text, .hero-image { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; flex: 1 1 300px; box-sizing: border-box; line-break: loose; } .hero-image img { width: 100%; height: auto;max-height: 300px;border-radius: 8px; object-fit: contain; } .hero-text h1, .hero-text h2 { margin: 0; padding: 10px 0; } .cta-button { padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: bold; transition: background 0.5s; background-color: #ff7f27; color: #fff; margin-top: 15px; } .cta-button:hover { background-color: #0074D9; color: #1f1f1f; } .scroll-down-indicator { display: flex; justify-content: center; align-items: center; margin-top: 20px; } .scroll-down-indicator span { font-size: 2rem; transition: transform 0.3s ease; } .scroll-down-indicator:hover span { transform: translateY(5px); }@media (max-width: 1230px) { .hero-content { flex-direction: column; align-items: center; } .hero-container { padding: 0 10px; height: auto;} .hero-text, .hero-image { flex: 1 1 100%; text-align: center; margin: 5px; width: 100%;} .hero-image img { max-height: 200px;} }@media (max-width: 1366px) and (max-height: 768px) { .hero-content { flex-direction: row; align-items: center; justify-content: center; } .hero-container { padding: 10px;height: auto;} .hero-text, .hero-image { flex: 1 1 40%; max-height: 60vh; text-align: center; margin: 5px; } } .benefits-section { display: flex; justify-content: center; align-items: center; padding: 40px 20px; } .benefits-container { width: 100%; max-width: var(--width-max-container); margin: 0 auto; } .benefit-content { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .benefit { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background-color: #dcdcdc; border-radius: 10px; border: 1px solid #e8e9eb; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: background-color 0.3s, color 0.3s; padding: 20px; flex: 1 1 calc(33.333% - 20px); min-width: 250px; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .benefit h2, .benefit p { color: #2a2a24; margin: 0; padding-bottom: 15px; width: 100%; word-break: break-word; overflow-wrap: anywhere; } @media (max-width: 768px) { .benefit { flex: 1 1 100%; } } .gallery-section { flex-wrap: wrap; width: 100%; justify-content: center; align-items: center; padding: 0 60px; } .gallery { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .gallery-item { flex: 1 1 100%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; background-color: #1f1f1f; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; transition: transform 1s ease; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s ease, box-shadow 1s ease; } .gallery-item:hover img, .gallery-item img:active { transform: scale(1.3); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); } @media screen and (min-width: 1920px) { .gallery-item { flex: 1 1 calc(25% - 16px); } } @media screen and (min-width: 1024px) and (max-width: 1919px) { .gallery-item { flex: 1 1 calc(33.33% - 16px); } } @media screen and (min-width: 768px) and (max-width: 1023px) { .gallery-item { flex: 1 1 calc(50% - 16px); } } @media screen and (min-width: 480px) and (max-width: 767px) { .gallery-item { flex: 1 1 calc(50% - 16px); } } @media screen and (max-width: 479px) { .gallery-item { flex: 1 1 100%; } } .about-us-container { flex-direction: column; }.about-us-content { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;}.about-us-image { flex: 1 1 45%;max-width: 45%; } .about-us-image img { width: 100%; height: auto; border-radius: 10px;}.about-us-text { flex: 1 1 45%;max-width: 45%; padding: 0 24px 0 24px; font-size: 1.1rem;}.image-left .about-us-content { flex-direction: row;} .image-right .about-us-content { flex-direction: row-reverse;}@media (max-width: 768px) {.about-us-content { flex-direction: column;align-items: center; } .about-us-image, .about-us-text { flex: 1 1 100%;max-width: 100%; } }.services-container { display: flex; flex-direction: column; }.services-content { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;}.services-image { flex: 1 1 45%;max-width: 45%; } .services-image img { width: 100%; height: auto; border-radius: 10px;}.services-text { flex: 1 1 45%;max-width: 45%; padding: 0 24px 0 24px; }.image-left .services-content { flex-direction: row;} .image-right .services-content { flex-direction: row-reverse;}@media (max-width: 768px) {.services-content { flex-direction: column;align-items: center; } .services-image, .services-text { flex: 1 1 100%;max-width: 100%; margin-bottom: 15px;} } .testimonials-section{ display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; } .testimonials-container{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .testimonials-slider { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; position: relative; max-width: 600px; width: 100%; margin: auto; overflow: hidden; }.slides { display: flex; width: 100%; animation: slide-animation 30s infinite; align-items: stretch;}.testimonial-slide { flex: 0 0 100%; text-align: center; background-color: #dcdcdc;padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column;justify-content: center; }.testimonial-content { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; }.testimonial-photo img { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; margin-bottom: 15px; border: 2px solid #a3a3a3; }.testimonial-text { font-style: italic; color: #333; flex-grow: 1;display: flex; align-items: center; justify-content: center; margin-bottom: 10px;}.testimonial-name { font-weight: bold; margin-top: 10px; color: #555; }@keyframes slide-animation { 0%, 25% { transform: translateX(0); } 26%, 50% { transform: translateX(-100%); } 51%, 75% { transform: translateX(-200%); } 76%, 100% { transform: translateX(-300%); } }.slider-nav { display: flex; justify-content: center; margin-top: 15px; } .slider-nav label { width: 12px; height: 12px; background: #ccc; margin: 0 5px; border-radius: 50%; cursor: pointer; transition: background 0.3s; }@keyframes dot-animation { 0%, 33.33% { background: #8c6845; } 34%, 66.66% { background: #ccc; } } .slider-nav label { animation: dot-animation 40s infinite; } .slider-nav label:nth-child(1) { animation-delay: 0s; } .slider-nav label:nth-child(2) { animation-delay: 10s; } .slider-nav label:nth-child(3) { animation-delay: 20s; } .slider-nav label:nth-child(4) { animation-delay: 30s; }@media (max-width: 800px) { .slides { width: 100%;} .testimonial-slide { flex: 0 0 100%;padding: 15px; } .testimonial-photo img { width: 80px; height: 80px; } } .scroll-down-indicator { position: absolute;top: 60%; left: 90%; transform: translateX(-50%); text-align: center; font-size: 2rem;color: #FFD700; animation: jump 1.5s infinite ease-in-out; cursor: pointer; z-index: 2;} .scroll-down-indicator::before { content: '▼';display: block; } @keyframes jump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }.scroll-down-indicator { margin-top: 20px; font-size: 24px; color: #a3a3a3; animation: bounce 1.5s infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } } .divider { height: 3px;background: linear-gradient(to right, #654321, #d4af37, #654321);border-radius: 5px;width: 80%;margin-left: auto;margin-right: auto;}section { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; border-radius: 10px; } section.in-view { opacity: 1; transform: translateY(0); }footer { background-color: var(--color-bg-footer); color: var(--color-text-footer); text-align: center; margin-top: auto; padding: 20px; box-sizing: border-box; } footer .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }.footer-creator { color: var(--color-footer-creator-ahref); text-decoration: none;} .footer-creator:hover { color: var(--color-footer-creator-ahref-hover); } .footer-blog-info-name { color: var(--color-footer-bloginfo-ahref); text-decoration: none;} .footer-blog-info-name:hover { color: var(--color-footer-bloginfo-ahref-hover); }@media (max-width: 768px) { footer .container p { font-size: 1.1em;} .footer .cols-2 .widget-column-1 { width: 80%;} }@media (max-width: 480px) { footer .container p { font-size: 1em;} .footer .cols-2 .widget-column-1 { width: 92%;} }footer .footer-icon { font-size: 1.5em; color: #d1d1b2; } footer .footer-icon:hover { color: goldenrod; }.blog { display: flex; justify-content: center; align-items: center; text-align: center; background: linear-gradient(to bottom, #3b3b2e, #2b2b2a); width: 100%; min-height: calc(100vh - 10vh); padding: 20px 0; box-sizing: border-box; } .blog-posts-container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; max-width: min(90%, 1200px); width: 100%; gap: 20px; } .post-list { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }.post { display: flex; justify-content: center; background-color: #1f1f1f; color: #a3a3a3; padding: 15px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease; } .post:hover { transform: translateY(-5px); } .post-container{ width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .post-thumbnail-link-to img { width: 100%; height: auto; border-radius: 12px; object-fit: cover; } .post-title { margin: 10px 0; } .post-title a { text-decoration: none; color: #a3a3a3; } .post-title a:hover { text-decoration: underline; } .post-excerpt { font-size: 16px; line-height: 1.5; }.pagination { display: flex; justify-content: center; margin-top: 30px; gap: 10px; } .pagination a { background-color: #1f1f1f; color: #a3a3a3; padding: 10px 15px; border-radius: 8px; text-decoration: none; transition: background 0.3s ease; } .pagination a:hover { background-color: #333; } .footer-blog-info-name { color: goldenrod; text-decoration: none; }@media screen and (max-width: 1024px) { .post { flex: 1 1 calc(50% - 20px);} } @media screen and (max-width: 768px) { .post { flex: 1 1 100%;} } .blog-post { display: flex; justify-content: center; align-items: center; padding: 40px 20px; background: linear-gradient(to bottom, #3b3b2e, #2b2b2a); width: 100%; min-height: calc(100vh - 10vh); box-sizing: border-box; color: #a3a3a3; } .blog-post a { color: var( --color-global-ahref) } .single-post-container { width: 100%; max-width: 1200px; box-sizing: border-box; } .single-post { background-color: #1f1f1f; padding: 30px; border-radius: 16px; box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; gap: 24px; } .post-thumbnail img { width: 100%; height: auto; border-radius: 12px; object-fit: cover; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .post-content { display: flex; flex-direction: column; gap: 20px; font-size: 16px; line-height: 1.6; } .post-title { font-size: 2rem; color: #e3e1d4; text-align: center; margin: 0; } .post-text { font-size: 16px; line-height: 1.6; color: #a3a3a3; } .next-post{ color: #a3a3a3; justify-content: center; align-items: center; }@media screen and (max-width: 768px) { .single-post { padding: 20px; } .post-title { font-size: 1.5rem; } .post-text { font-size: 15px; } } :root { --font-size-base: 1rem; --font-size-h1: clamp(1.82rem, calc(1.82rem + 2.42vw), 3.03rem); --font-size-h2: clamp(1.82rem, calc(1.70rem + 1.28vw), 3.03rem); --font-size-h3: clamp(1.45rem, calc(1.44rem + 0.48vw), 2.42rem); --font-size-ahref: clamp(1.21rem, calc(1.21rem + 0.61vw), 1.45rem); --font-size-p: clamp(1.21rem, calc(1.21rem + 0.36vw), 1.33rem); --cta-font-size: clamp(1.21rem, calc(1.21rem + 0.36vw), 1.45rem); --global-font-family: 'Readex Pro', sans-serif; --color-bg-body: #ffffff; --color-text-body: #1f1f1f; --color-bg-burger: #1f1f1f; --color-global-ahref:goldenrod; --header-height: 72px; --width-max-container:1200px; } [site-theme="outdoor-night"] { --color-bg-body: black; --color-text-body: #d1d1b2;--color-bg-burger:; --color-fg-burger:; --color-bg-header:; --color-text-header:; --color-bg-footer: #3d3d3c; --color-text-footer:; --color-global-ahref:goldenrod; --color-header-bloginfo-ahref:goldenrod; --color-header-bloginfo-ahref-hover:#ffc107; --color-footer-creator-ahref:goldenrod; --color-footer-creator-ahref-hover:#ffc107; --color-footer-bloginfo-ahref:; --color-footer-bloginfo-ahref-hover:; } [site-theme="retro-games"] { --color-bg-body: #121212; --color-text-body: #f5f5f5; --color-bg-burger: #1e1e2e; --color-fg-burger: #00f0ff; --color-bg-header: #1a0025; --color-text-header: #ff44cc; --color-bg-footer: #0f0f1a; --color-text-footer: #eeeeee; --color-global-ahref: #ffcc00; --color-header-bloginfo-ahref: #00ff88; --color-header-bloginfo-ahref-hover: #ff00aa; --color-footer-creator-ahref: #00ffcc; --color-footer-creator-ahref-hover: #ff44cc; --color-footer-bloginfo-ahref: #00ffcc; --color-footer-bloginfo-ahref-hover: #ffcc00; } [site-theme="outdoor"] { --color-bg-body: #3b3b2e; --color-text-body: #d1d1b2; --color-bg-burger:; --color-fg-burger:; --color-bg-header:; --color-text-header:; --color-bg-footer: #3d3d3c; --color-text-footer:; --color-global-ahref:goldenrod; --color-header-bloginfo-ahref:goldenrod; --color-header-bloginfo-ahref-hover:#ffc107; --color-footer-creator-ahref:goldenrod; --color-footer-creator-ahref-hover:#ffc107; --color-footer-bloginfo-ahref:; --color-footer-bloginfo-ahref-hover:; } [site-theme="dark"] { --color-bg-body: #161616; --color-text-body: #f4f4f4; --color-bg-burger:; --color-fg-burger:; --color-bg-header:#282828; --color-text-header:; --color-bg-footer:; --color-text-footer:; --color-global-ahref:goldenrod; --color-footer-creator-ahref:goldenrod; --color-footer-creator-ahref-hover:#ffc107; --color-footer-bloginfo-ahref:; --color-footer-bloginfo-ahref-hover:; } [site-theme="light"] { --color-bg-body: white; --color-text-body: black; --color-bg-burger:; --color-fg-burger:; --color-bg-header:; --color-text-header:; --color-bg-footer:; --color-text-footer:; --color-global-ahref:; --color-footer-creator-ahref:goldenrod; --color-footer-creator-ahref-hover:#ffc107; --color-footer-bloginfo-ahref:; --color-footer-bloginfo-ahref-hover:; } h1 {font-size: var(--font-size-h1);} h2 {font-size: var(--font-size-h2);} h3 {font-size: var(--font-size-h3);} p {font-size: var(--font-size-p);} a { font-size: var(--font-size-ahref); text-decoration: none; } h1,h2,h3,h4,h5,h6,p,ul,ol,li,a,q,span,button,input,textarea,label,cite,table,details{ font-family: var(--global-font-family) !important; }html, body { height: 100%; margin: 0; padding: 0; background-color: var(--color-bg-body); color: var(--color-text-body); } main { display: flex; flex-direction: column; flex-grow: 1; gap: 80px;background-color: inherit; color: inherit; } main a { color: var(--color-global-ahref) } section { display: flex } main section:last-child { margin-bottom: 40px;} section h2.section-title { margin-bottom:20px; text-align:center; } section p.section-paragraph{}