html { scroll-behavior: smooth; } body { font-family: Arial, sans-serif; margin: 0; padding: 0; line-height: 1.6; display: grid; grid-template-rows: auto 1fr; } header, section, footer { padding: 10px; } img { max-width: 100%; height: auto; } .thumbnails { display: flex; flex-direction: column; align-items: center; padding-right: 20px; } .thumbnail { width: 50px; height: auto; cursor: pointer; margin-bottom: 10px; opacity: 0.6; } .thumbnail:hover { opacity: 1; } .main-image { width: auto; max-width: 100%; height: auto; display: block; margin: 1em; } @media (max-width: 600px) { .thumbnails { flex-direction: row; justify-content: center; padding: 0; margin-top: 20px; } .thumbnail { width: 30px; margin-right: 10px; } .thumbnail:last-child { margin-right: 0; } } .product-card { display: flex; border: 1px solid #ccc; padding: 20px; max-width: 1100px; margin: 20px auto; min-width: 240px; } .thumbnails-container { display: flex; flex-direction: column; align-items: center; padding-right: 20px; justify-content: center; } .thumbnail { width: 100px; height: auto; cursor: pointer; margin-bottom: 10px; } .main-image-container { display: flex; justify-content: center; align-items: center; margin: auto auto 1em } @media (min-width: 1024px) { .main-image-container:hover { transform: scale(1.4); transition: transform 1s ease; z-index: 10000; } } .main-image { width: 800px; height: auto; margin-right: 20px; } .product-info { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 200px; margin: 1em; } .product-info h1 { margin: 0; font-size: 24px; } .product-info .price { font-size: 20px; color: #e44d26; } .buy-button { padding: 10px 20px; background-color: #e44d26; color: white; border: none; cursor: pointer; margin-top: 10px; text-transform: uppercase; } .description { font-size: 14px; padding-left: 1px } @media (max-width: 600px) { .product-card { flex-direction: column; } .main-image-container { order: -1; } .thumbnails-container { flex-direction: row; justify-content: center; padding: 0; } .thumbnail { width: 30px; margin: 0 5px; } } nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; } nav a { text-decoration: none; } #menu-toggle { display: none; font-size: 24px; background: none; border: none; position: absolute; top: 10px; margin: 10px; } @media (max-width: 600px) { #menu { display: none; flex-direction: column; width: 100%; } #menu li { text-align: center; padding: 10px 0; } #menu-toggle { display: block; } } .wrapper{ top: 50%; left: 50%; } .link_wrapper{ position: relative; } .button-link { display: inline-block; position: relative; background-color: #a73afd; border: none; color: #ffffff; text-decoration: none; width: 160px; padding: 12px 24px; border-radius: 5px; text-align: center; font-weight: bold; margin: 5px; font-size: 1rem; transition: all 0.3s ease; vertical-align: middle; cursor: pointer; } .button-link:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); transition: opacity 0.3s ease, transform 0.3s ease; } .button-link:hover { transform: translateY(-3px); background: #ed3cca; } .button-link:hover:before { opacity: 1; transform: translateY(5px); } .icon{ width: 50px; height: 50px; border: 3px solid transparent; position: absolute; transform: rotate(45deg); right: 0; top: 0; z-index: -1; transition: all .35s; } .container { width: 100%; padding: 20px; box-sizing: border-box; } @media (min-width: 768px) { .container { max-width: 77.77%; margin: 0 auto; } } p { width: 100%; box-sizing: border-box; text-align: justify; font-size: 22px; } @media (max-width: 1460px){ .product-card { flex-direction: column; align-items: center; } .main-image-container { order: 1; width: 100%; max-width: 800px; margin: auto; } .thumbnails-container { order: 2; flex-direction: row; justify-content: center; flex-wrap: wrap; margin-top: 20px; margin-bottom: 20px; width: 100%; max-width: 800px; } .thumbnail { margin: 5px; } .product-info { order: 3; width: 100%; max-width: 800px; margin: auto; text-align: center; } .price, .description, .wrapper { width: auto; text-align: center; } .link_wrapper { justify-content: center; display: flex; width: 100%; } } .product-info > p, .product-info > div { display: flex; justify-content: center; align-items: center; flex-direction: column; } .product-info > p { width: 100%; } .product-info .price { margin: 10px 0; } .wrapper { display: flex; justify-content: center; align-items: center; width: 100%; } .link_wrapper { justify-content: center; } .product-links { font-size: 12px; text-transform: uppercase; } .video-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 1s ease; } .video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; transition: opacity 1s ease, visibility 1s ease; } .close-btn { position: absolute; top: 10px; right: 10px; background: #ffffff; border: none; border-radius: 50%; cursor: pointer; z-index: 101; opacity: 1; } .product-card { position: relative; } #chat-popup { position: fixed; bottom: 10px; left: 10px; width: 250px; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 5px; border-top-right-radius: 25px; padding: 10px; padding-top: 20px; z-index: 1000; overflow: hidden; transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, transform 2.5s ease-in-out; visibility: hidden; opacity: 0; transform: translateY(100vh); } #chat-popup::before { content: ''; position: absolute; top: -15px; right: -25px; width: 50px; height: 50px; background-color: #18c139; border-radius: 25px 25px 25px 25px; z-index: 2; } #chat-popup::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40px; background-color: #2196f3; z-index: 1; } .close-btn { position: absolute; top: 10px; right: 30px; cursor: pointer; width: 20px; height: 20px; line-height: 20px; text-align: center; background-color: #1f78c2; border-radius: 50%; color: white; font-size: 14px; z-index: 3; } #chat-message-container { background-color: #f1f0f0; padding: 5px; border-radius: 10px; margin-top: 35px; text-align: left; } #chat-message { font-size: 15px!important; color: #222d38!important; margin: 0; text-align: left; } .discountDate{ position: absolute; top: 10px; right: 10px; background-color: #8306f7; color: white; padding: 5px; border-radius: 5px; } .reviews-container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-around; } .review-item { flex-basis: calc(50% - 20px); max-width: calc(50% - 20px); opacity: 0; display: none; transition: transform 0.3s ease, opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; cursor: pointer; } .review-item.active { display: block; opacity: 1; } .review-item:hover, .review-item:focus, .review-item:active { transform: scale(1.05); } @media screen and (max-width: 768px) { .review-item { flex-basis: 100%; max-width: 100%; } } @media screen and (max-width: 768px) { .review-item:hover, .review-item:focus, .review-item:active { transform: scale(1.6) translateX(-30px); } } #load-more-reviews{ display: inline-block; position: relative; background-color: #a73afd; border: none; color: #ffffff; text-decoration: none; width: 160px; padding: 12px 24px; border-radius: 5px; text-align: center; font-weight: bold; font-size: 1rem; transition: all 0.3s ease; vertical-align: middle; cursor: pointer; } #load-more-reviews:hover{ transform: translateY(-3px); background: #ed3cca; } #load-more-reviews:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); transition: opacity 0.3s ease, transform 0.3s ease;} #load-more-reviews:hover:before { opacity: 1; transform: translateY(5px); } .button-container { display: flex; justify-content: center; align-items: center; margin-top: 20px; } .gradient-background { display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; width: 100%; height: 1573px; background-image: linear-gradient(0deg, #ed3cca 0%, #8306f7 59.22%); z-index: 1; } .gradient-background::before { content: ''; position: absolute; top: 88px; left: 0; width: 100%; height: 100%; background-image: url('ico/Vector.webp'); background-repeat: no-repeat; background-position: center top; background-size: cover; z-index: 3; } #topbutton{ align-items: center; height: 100vh; margin-top: -10px; } #svg1{ position: absolute; bottom: 50%; width: 40%; max-width: 600px; height: auto; background-repeat: no-repeat; background-position: right bottom; background-size: contain; z-index: 2; right: 15%; } @media (min-width: 2201px) { #svg1 { position: absolute; bottom: 20%; width: 60%; height: auto; top: 10%; right: 15%; } } @media (min-width: 1600px) and (max-width: 2200px){ #svg1 { position: absolute; bottom: 20%; width: 60%; height: auto; top: 15%; right: 10%; } } @media (min-width: 1180px) and (max-width: 1601px){ #svg1 { position: absolute; bottom: 20%; width: 60%; height: auto; top: 25%; right: 10%; } } @media (min-width: 961px) and (max-width: 1179px) { #svg1 { position: absolute; bottom: 20%; width: 50%; height: auto; top: 10%; right: 5%; } } @media (min-width: 800px) and (max-width: 960px) { #svg1 { position: absolute; bottom: 20%; width: 60%; height: auto; top: 25%; right: 10%; } } @media (min-width: 680px) and (max-width: 799px) { #svg1 { position: absolute; bottom: 20%; width: 60%; height: auto; top: 25%; right: 10%; } } @media (min-width: 631px) and (max-width: 679px) { #svg1 { position: absolute; bottom: 20%; width: 60%; height: auto; top: 25%; right: 10%; } } @media (min-width: 531px) and (max-width: 630px) { #svg1 { position: absolute; bottom: 20%; width: 50%; height: auto; top: 15%; right: -5%; } } @media (max-width: 530px) { #svg1 { position: absolute; bottom: 20%; width: 50%; height: auto; top: 15%; right: 0; } } .page-content { position: relative; } @media (min-width: 488px) { .gradient-background::before { top: 98px !important; } } @media (min-width: 630px) { .gradient-background::before { top: 360px !important; } } @media (min-width: 960px) { .gradient-background::before { top: 256px !important; } } @media (min-width: 1180px) { .gradient-background::before { top: 567px !important; } } @media (max-width: 767px) { .gradient-background::after { width: 70%; max-width: none; } } #menu{ position: fixed; top: 0; left: 0; width: 100%; height: 65px; background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.3); z-index: 999; } #navbar { margin-top: 65px; } .button-menu { display: inline-block; position: relative; margin-right: 10px; } .button-menu a { background-color: #a73afd; border: none; color: #ffffff; text-decoration: none; padding: 12px 24px; margin: 10px; text-align: center; font-weight: bold; font-size: 1rem; transition: all 0.3s ease; display: inline-block; vertical-align: middle; cursor: pointer; border-radius: 5px; } .button-menu a:hover { transform: translateY(-3px); background-color: #ed3cca; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .hidden { display: none; } #navbar { margin-top: 65px; } #menu-toggle { display: none; } @media (max-width: 1279px) { #menu { display: none; } #menu-toggle { display: block; position: fixed; top: 0; left: 0; z-index: 999; } } #menu-close { position: absolute; bottom: 10px; right: 10px; display: block; } @media (max-width: 1279px) { #menu { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 40%; overflow: hidden; background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); z-index: 1000; } #menu.active { display: block; } #menu-close { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 1001; } #menu-toggle { background: none; border: none; cursor: pointer; padding: 0; margin: 0; width: 30px; height: 20px; position: fixed; top: 20px; left: 20px; z-index: 1001; } #menu-icon { display: block; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: black; transition: background 0s 0.3s; transform: translateY(-50%); } #menu-icon:before, #menu-icon:after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: black; transition: transform 0.3s 0.3s; } #menu-icon:before { top: -8px; } #menu-icon:after { top: 8px; } #menu-toggle.cross #menu-icon { background: transparent; } #menu-toggle.cross #menu-icon:before { transform: translateY(8px) rotate(45deg); } #menu-toggle.cross #menu-icon:after { transform: translateY(-8px) rotate(-45deg); } .button-menu { flex-direction: column; position: relative; margin-right: 10px; } } .wrapper .link_wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 999; } .input{ font-size: 76px; text-align: center; font-family: 'Montserrat',Arial,sans-serif; line-height: 1; font-weight: 700; background-position: center center; border-color: transparent; border-style: solid; } @media (min-width: 868px) and (max-width: 1179px) { .input{ font-size: 52px; } .wrapper[data-unique="uniqueSection"] .link_wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; left: -90px; z-index: 1000; } } @media (min-width: 629px) and (max-width: 867px) { .input{ font-size: 44px; text-align: center; padding-left: 120px } .wrapper[data-unique="uniqueSection"] .link_wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; left: -90px; z-index: 999; } } @media (min-width: 530px) and (max-width: 628px) { .input{ font-size: 36px; text-align: center; padding-left: 110px } .wrapper[data-unique="uniqueSection"] .link_wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; left: -90px; z-index: 999; } } @media (min-width: 431px) and (max-width: 529px) { .input{ font-size: 36px; text-align: center; padding-left: 100px } .wrapper[data-unique="uniqueSection"] .link_wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; left: -90px; z-index: 999; } } @media (min-width: 380px) and (max-width: 430px) { .input{ font-size: 36px; text-align: center; padding-left: 100px; margin: 0; } .wrapper[data-unique='uniqueSection'] .link_wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; left: -90px; z-index: 999; } .wrapper[data-unique="uniqueSection"] .button-link { width: 140px; padding: 6px 6px; margin: 6px; } #svg1 { top: 15%; right: 0; } } @media (max-width: 379px) { .input{ font-size: 26px; text-align: center; padding-left: 100px; margin: 0; } .wrapper[data-unique="uniqueSection"] .link_wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; left: -90px; z-index: 999; } .wrapper[data-unique="uniqueSection"] .button-link { width: 140px; padding: 3px 3px; } #svg1 { top: 15%; right: -5%; } } @media (max-width: 767px) { .wrapper[data-unique="uniqueSection"] .button-link.circle{ font-size: 36px; border-radius: 50%; width: 40px; height: 40px; padding: 0; display: flex; justify-content: center; align-items: center; position: fixed; top: 0; z-index: 100; } .wrapper[data-unique="uniqueSection"] .button-link.circle.phone { right: 70px; } .wrapper[data-unique="uniqueSection"] .button-link.circle.whatsapp { right: 130px; } .wrapper[data-unique="uniqueSection"] .button-link.circle.telegram { right: 190px; } } @media (min-width: 768px) { .wrapper[data-unique="uniqueSection"] .button-link.circle { border-radius: 50%; width: 40px; height: 40px; padding: 0; display: flex; justify-content: center; align-items: center; position: fixed; top: 10px; z-index: 9999; } .wrapper[data-unique="uniqueSection"] .button-link.circle.phone { right: calc(-3% + 190px); margin: 0; } .wrapper[data-unique="uniqueSection"] .button-link.circle.whatsapp { right: calc(-3% + 140px); margin: 0; } .wrapper[data-unique="uniqueSection"] .button-link.circle.telegram { right: calc(-3% + 90px); margin: 0; } .wrapper[data-unique="uniqueSection"] .button-link.circle .fa { font-size: 24px; color: #fff; } } @media (min-width: 1281px) and (max-width: 1580px) { #menu { left: 0; } .button-menu{ margin-right: -15px; } .button-menu a{ padding: 5px 6px; } } .bullets-container { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; position: relative; bottom: 0; margin-top: 100px; justify-content: center; z-index: 3; } .bullet { flex: 1 0 20%; text-align: center; height: 230px; width: 340px; z-index: 100; background: #FFFFFF; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 20px; box-sizing: border-box; margin-bottom: 10px; color: #000000; font-size: 24px; font-family: 'Montserrat',Arial,sans-serif; overflow: hidden; } .bullet:before { content: attr(data-number); display: inline-block; font-weight: bold; background: #8306f7; color: white; border-radius: 6px; width: 36px; height: 24px; text-align: center; line-height: 24px; margin-right: 10px; float: left; margin-top: -4px; margin-left: -4px; } @media (max-width: 1400px) { .bullet { flex-basis: calc(50% - 10px); } } @media (max-width: 640px) { .bullet { flex-basis: calc(100% - 10px); font-size: 24px; } #topbutton { height: 100%; } } .button-link.whatsapp { background-color: #25D366; } .button-link.whatsapp .fa-whatsapp { background-color: transparent; } .button-link.telegram { background-color: #0088cc; } .button-link.telegram .fa-telegram { background-color: transparent; } .button-link.phone .fa, .button-link.whatsapp .fa, .button-link.telegram .fa { animation: rock-animation 6s linear infinite; } .uptwo { transform: translateY(-50%); left: 5%; top: 35%; max-width: 100%; height: 50%; position: absolute; } @media (max-width: 1580px) { .uptwo{ height: 40%; } } @media (max-width: 1180px) { .uptwo{ height: 25%; top: 25%; left: 0; } } @media (max-width: 960px) { .uptwo{ display: none; } } #popup-form { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 99999; display: flex; justify-content: center; align-items: center; } .popup-content { position: relative; background: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); z-index: 99999; } #close-btn { position: absolute; top: 10px; right: 10px; cursor: pointer; border-radius: 50%; color: white; background-color: #8306f7; border: 1px solid #8306f7; width: 30px; height: 30px; font-size: x-large; } .popup-content, #product-inquiry-form_own { display: flex; flex-direction: column; align-items: start; width: 100%; margin: 10%; z-index: 1000000; } #product-inquiry-form_own label, #product-inquiry-form_own input, #product-inquiry-form_own select, #product-inquiry-form_own textarea, #product-inquiry-form_own button[type='submit'] { display: block; width: 80%; margin-bottom: 10px; } #product-inquiry-form_own input, #product-inquiry-form_own select, #product-inquiry-form_own textarea { height: 40px; padding: 0 10px; font-size: 20px; } #product-inquiry-form_own textarea { height: auto; padding: 10px; } #product-inquiry-form_own input::placeholder, #product-inquiry-form_own select::placeholder, #product-inquiry-form_own textarea::placeholder { font-size: 20px; color: #999; } label.required:after { content: " *"; color: #8306f7; } #accordion .question { cursor: pointer; padding: 10px; border: 1px solid #dcdcdc; margin-top: 5px; font-weight: 600; } #accordion .answer { padding: 10px; border: 1px solid #dcdcdc; border-top: none; } .call{ display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; } .hide-text .text { display: none; } #contact { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 620px; margin: 0 auto; padding: 20px; } .list-block, .map-block { flex: 1; max-width: 300px; margin-bottom: 20px; } .list-block { margin-right: 20px; } ul { list-style-type: none; padding: 0; } li { margin-bottom: 10px; } @media screen and (max-width: 620px) { .list-block, .map-block { flex: 100%; max-width: 100%; margin-right: 0; } } .contact-title { text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 20px; width: 100%; } h3{ font-size: 22px; text-align: center; } h4{ font-size: 20px; text-align: center; } h1{ text-align: center; } h2{ text-align: center; } #returnPolicy{ text-align: left; } /* styles.css */ ul, ol { font-size: 19px; } li { margin-bottom: 10px; }