*, ::before, ::after { box-sizing: border-box; } html { /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */ font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; line-height: 1.15; /* 1. Correct the line height in all browsers. */ -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */ -moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */ -o-tab-size: 4; tab-size: 4; /* 3 */ } hr { height: 0; /* 1 */ color: inherit; /* 2 */ } abbr[title] { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* 1 */ font-size: 1em; /* 2 */ } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ } button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } button, select { text-transform: none; } button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } ::-moz-focus-inner { border-style: none; padding: 0; } :-moz-focusring { outline: 1px dotted ButtonText; } :-moz-ui-invalid { box-shadow: none; } legend { padding: 0; } progress { vertical-align: baseline; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } summary { display: list-item; } :root { --light-primary: #fff; --accent-color: #e64903; --bg-body:#fff; --bg-header:#252a30; --bg-list-item:#203953; --bg-footer: #252a30; --dark-primary: #000000; --border-color: #878776; --bg-th:#87593b61; --bg-td:linear-gradient(145deg,#3E3E3E); --td-hover:#fcfcfc; --before-color:linear-gradient(145deg, #ff4202); --btn-color: linear-gradient(145deg, #f74b57, #e40310); --btn-hover:linear-gradient(145deg, #e73844, #c7020f); --btn-active:linear-gradient(145deg, #c7020f, #a0020d); } p{ margin-bottom: 15px; } *:where( :not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } *, *::before, *::after { box-sizing: border-box; } html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } a, button { cursor: revert; text-decoration: none; } ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } :where([draggable="true"]) { -webkit-user-drag: element; } :where(dialog:modal) { all: revert; box-sizing: border-box; } body{ font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Segoe UI", Arial, Roboto, "PingFang SC", miui, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;; font-size: 17px; line-height: 20px; line-height: 1.5; box-sizing: border-box; overflow-x: hidden; margin: 0; background-color: var(--bg-body); } h1{ font-size: 34px; font-weight: 700; margin-bottom: 15px; } h2{ font-weight: 700; font-size: 28px; margin-bottom: 15px; } h3{ font-weight: 600; font-size: 20px; margin-top:10px; } .section{ padding: 20px; max-width: 920px; margin: 0 auto; color: var(--dark-primary); } .section-top{ padding-top: 100px; } .button-box{ width: 100%; height: auto; color: var(--dark-primary); background: var(--accent-color); border-radius: 15px; padding: 10px; display: flex; justify-content: space-between; align-items: center; gap: 35px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(255, 255, 255, 0.2) inset; &>div { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; letter-spacing: 2px; gap: 5px; } & p { text-align: center; } } .button { display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: 18px; font-weight: 600; letter-spacing: 2px; padding: 15px 10px; color: var(--light-primary); background: var(--btn-color); border-radius: 0.75rem; transition: all 0.1s ease; max-width: 350px; height: 60px; margin: 15px auto; } .button:hover { background: var(--btn-hover); } .button:active { letter-spacing: 0px; transform: skew(-10deg) translateY(6px); background: var(--btn-active); } .img-box { width: 100%; height: auto; border-radius: 15px; overflow: hidden; margin-bottom: 15px; & img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; display: block; } } .no-scroll { overflow: hidden; } .hidden { position: absolute; left: -9999px; visibility: hidden; } strong{ margin: 10px 0px; display: block; } .header { position: fixed; background: var(--bg-header); color: var(--light-primary); width: 100%; padding: 0px 20px 10px 20px; box-shadow: 0 0 15px 0 rgba(0, 0, 0, .3); z-index: 998; } .header-container { max-width: 860px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } @media(min-width:992px){ nav{ margin-left: 75px; } } .nav-mob.is-visible { transform: translateY(0); } .nav-list { display: none; } @media (min-width: 992px) { .nav-list { display: flex; gap: 64px; } } .nav-item { transition: all 0.3s ease; position: relative; &:hover{ color: var(--accent-color); } } .burger-btn { display: flex; flex-direction: column; gap: 4px; @media (min-width:992px) { display: none; } } .top-line, .middle-line,.bottom-line { display: block; width: 20px; height: 1.5px; border-radius: 15px; background-color: var(--light-primary); } .nav-mob { transform: translateY(-200%); background: var(--bg-list-item); color: var(--light-primary); width: 100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: 999; transition: all 0.3s ease; } .nav-btn-close{ position: absolute; top: 20px; right: 40px;; } .nav-list-mob { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; font-size: 24px; font-weight: 600; } .nav-link.active { border-bottom: 2px solid var(--accent-color); color: var(--accent-color); } .nav-link-mob.active { border-bottom: 2px solid var(--dark-primary); color: var(--dark-primary); position: relative; } .active:before{ content: ''; display: block; width: 45px; height: 25px; position: absolute; top: 0; left: -50px; background-image: url(./img/555.webp); background-size: cover; background-position: center; background-repeat: no-repeat; } .language-dropdown { position: relative; display: inline-block; margin-left: 50px; display: none; @media (min-width:992px) { display: block; } } .dropdown-btn { color: var(--btn-color);color: var(--btn-color); padding: 10px; font-size: 16px; border: none; cursor: pointer; background: var(--bg-gradient); border-radius: 5px; } .dropdown-content { display: none; position: absolute; min-width: 140px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; background: var(--bg-gradient); } .dropdown-content.show { display: block; } .dropdown-content a { color: var(--btn-color); padding: 12px 16px; text-decoration: none; display: block; } .mob a{ padding: 6px 5px; font-size: 16px; } .dropdown-content a:hover { background-color: #f1f1f1; background: var(--btn-color); color: var(--dark-primary); } .language-dropdown:hover .dropdown-content { display: block; } .language-dropdown:hover .dropdown-content { display: block; } @media (max-width: 991px) { .language-dropdown:hover .dropdown-content { display: none; } .dropdown-content.show { display: block; } } .questions-list { display: flex; flex-direction: column; gap: 20px; color: var(--accent-color); } .questions-item { border-radius: 25px; overflow: hidden; } .questions-content-box { background: linear-gradient(145deg, var(--accent-color), var(--accent-color-secondarily)); padding: 12px 42px; } .questions-title { display: grid; grid-template-columns: 1fr 20px; cursor: pointer; align-items: center; font-size: 22px; } .icon { width: 30px; height: 25px; fill: var(--accent-color); } .questions-content { display: none; } .questions-content p{ margin-top: 15px; color: var(--dark-primary); } @media (min-width:992px) { .hero-cover{ display: flex; gap: 25px; justify-content: center; margin-top: 15px; margin-bottom: 15px; } .hero-box { width: 50%; } } .hero-mob-text{ font-weight: 900; font-size: 24px; color: var(--btn-color); text-shadow: 1px 1px 3px var(--accent-color-secondarily); margin-bottom: 5px; @media (min-width:768px) { display: none; } } .hero-list-mob { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 30px; @media (min-width:768px) { display: none; } } .hero-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; @media (max-width:768px) { display: none; } } .hero-img-box{ border-radius: 15px; overflow: hidden; margin-top: 15px; & img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } @media (min-width:992px) { max-width: 300px; } } @media (max-width:992px) { .hero-img-box{ margin: 0 auto; width: 100%; height: auto; & img { display: block; } } } .list { display: flex; flex-direction: column; justify-content: space-around; gap: 15px; padding: 20px 0px 0px 40px; margin-bottom: 15px; } .list-item{ position: relative; padding: 10px 25px 10px 40px; border-radius: 10px; background: var(--bg-list-item); color: var(--light-primary); &::before { content: attr(data-title); position: absolute; top: 50%; left: -20px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; font-weight: 700; font-size: 38px; background: var(--before-color); border-radius: 50%; z-index: 2; color: var(--light-primary); box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2), inset 0px -3px 6px rgba(0, 0, 0, 0.3), inset 0px 3px 6px rgba(255, 255, 255, 0.3); } } table { width: 100%; border-collapse: collapse; margin-top: 15px; } th, td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border-color); } th { background-color: var(--bg-th); font-weight: bold; &:first-child{ border-top-left-radius: 10px; } &:last-child{ border-top-right-radius: 10px; } } tbody tr:hover { background-color: var(--td-hover); color: var(--dark-primary); } .hidden { display: none; } tbody tr>td:nth-child(odd) { background: var(--bg-td); color: var(--light-primary); } .list-img{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px 0px; margin-top: 20px; margin-bottom: 15px; } .list-img-item{ width: 80%; transition: all 0.3s ease-in-out; &:hover, &:focus{ transform: scale(1.1); } } .list-img-item{ overflow: hidden; border-radius: 15px; height: auto; &>img { height: 100%; width: 100%; } } .footer{ width: 100%; padding: 25px; text-align: center; box-shadow: 0 0 15px 0 rgba(0, 0, 0, .3); background:var( --bg-footer); color: var(--light-primary); } .footer-text{ font-size: 12px; } .footer-payment-box { display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; } .footer-payment-list { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; align-items: flex-end; justify-content: center; }