*, ::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 */ scroll-behavior: smooth; } 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: #ffad1e; --accent-color-secondarily: #875f3b; --dark-primary: #000000; /* --dark-secondarily: #000000; */ --border-color: #878776; --bg-th: #5278b8; --bg-td: #ffad1e; --td-hover: #9b8d8d; --bg-list: linear-gradient(145deg, #fef84a, #ffad1e); --bt-btn-lang: linear-gradient(145deg, #223d99, #5fdede); --before-color: linear-gradient(to right, #5278b8, #4c6bde); --btn-color: linear-gradient(145deg, #f70515, #ef323b, #ff5f14); --btn-hover: linear-gradient(145deg, #e73844, #c7020f); --btn-active: linear-gradient(145deg, #c7020f, #a0020d); --bg-header: linear-gradient(to bottom, #000000, #333333); --bg-footer: linear-gradient(to top, #000000, #333333); --bg-box-btn: #ddcece; --bg-gradient: linear-gradient(to bottom, #666666, #dddddd); } 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%; } .flex { display: flex; flex-direction: column; gap: 15px; } @media (min-width: 768px) { .flex { flex-direction: row; } } /* 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(--dark-primary); } h1, h2 { font-weight: 700; font-size: 24px; margin-bottom: 15px; } h3 { font-weight: 600; font-size: 20px; margin-top: 10px; } .section { padding: 20px; max-width: 850px; margin: 0 auto; color: var(--light-primary); } .section-top { padding-top: 90px; } .button-box { width: 100%; max-width: 380px; min-width: 335px; height: 155px; color: var(--dark-primary); background: var(--bg-box-btn); border-radius: 15px; padding: 10px; display: flex; justify-content: space-between; align-items: center; gap: 15px; & > div { max-width: 40%; 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; } } .text-weight { font-weight: 700; } .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; width: 100%; max-width: 400px; height: 60px; margin: 0 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: 0 auto 15px auto; & img { width: 100%; height: 100%; margin: 0 auto; -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; font-size: 18px; font-weight: 700; display: block; } .header { position: fixed; background: var(--bg-header); color: var(--light-primary); width: 100%; padding: 10px 15px; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3); z-index: 998; } .header-container { display: flex; align-items: center; justify-content: space-between; padding: 0px 20px; max-width: 850px; margin: 0 auto; } @media (min-width: 992px) { nav { margin-left: 75px; } } .logo-box { display: flex; align-items: center; justify-content: center; gap: 15px; text-transform: uppercase; font-size: 24px; font-family: Futura Condensed Medium, sans-serif; @media (min-width: 992px) { margin-right: 5px; } } .nav-mob.is-visible { transform: translateY(0); } .nav-list { display: none; } @media (min-width: 992px) { .nav-list { display: flex; justify-content: center; align-items: center; gap: 54px; } } .nav-item { position: relative; &:hover { color: var(--accent-color); } } .burger-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 40px; height: 50px; background: none; border: none; cursor: pointer; padding: 8px; margin-right: 15px; border-radius: 4px; transition: background-color 0.3s ease; z-index: 1000; } .burger-btn:hover { background-color: rgba(255, 255, 255, 0.1); } @media (min-width: 992px) { .burger-btn { display: none; } } .burger-line { display: block; width: 24px; height: 2px; background-color: var(--light-primary); border-radius: 2px; transition: all 0.3s ease; transform-origin: center; } .burger-line-top { margin-bottom: 4px; } .burger-line-middle { margin-bottom: 4px; } .burger-line-bottom { margin-bottom: 0; } /* Animation states for burger menu */ .burger-btn.active .burger-line-top { transform: translateY(6px) rotate(45deg); } .burger-btn.active .burger-line-middle { opacity: 0; transform: scaleX(0); } .burger-btn.active .burger-line-bottom { transform: translateY(-6px) rotate(-45deg); } .nav-mob { transform: translateY(-200%); background: var(--bg-header); color: var(--light-primary); width: 100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: 999; transition: all 0.3s ease; overflow-y: auto; } /* Removed nav-btn-close styles as button was removed */ .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 { transition: all 0.3s ease; } .nav-link.active { border-bottom: 2px solid var(--bg-accent-color); color: var(--accent-color); } .nav-link-mob.active { border-bottom: 2px solid var(--accent-color); color: var(--accent-color); position: relative; } /* --language-dropdown-- */ .language-dropdown { position: relative; display: inline-block; margin-left: 50px; display: none; @media (min-width: 992px) { display: block; } } .dropdown-btn { color: var(--light-primary); padding: 10px; font-size: 16px; border: none; cursor: pointer; background: var(--bt-btn-lang); border-radius: 5px; display: flex; align-items: center; gap: 5px; } .dropdown-content { display: none; position: absolute; min-width: 160px; z-index: 1; background: var(--bt-btn-lang); border-radius: 15px; overflow: hidden; } .dropdown-item { display: flex; align-items: center; padding-left: 5px; } .dropdown-content.show { display: block; } .dropdown-content a { color: var(--light-primary); padding: 12px 16px; text-decoration: none; display: block; } .mob a { padding: 10px 5px; font-size: 16px; } .dropdown-content .dropdown-item:hover { background: var(--bg-box-btn); } .dropdown-content a:hover { color: var(--dark-primary); } .language-dropdown:hover .dropdown-content { display: block; } @media (max-width: 991px) { .language-dropdown:hover .dropdown-content { display: none; } .dropdown-content.show { display: block; } } /* ------- */ .questions { width: 100%; } @media (min-width: 768px) { .questions-faq { letter-spacing: 0.095rem; text-transform: uppercase; font-family: sans-serif; font-size: 2rem; font-weight: 900; line-height: 101%; text-align: center; } } .questions-list { display: flex; flex-direction: column; gap: 20px; color: var(--light-primary); } .questions-content-box { &:hover .questions-title { color: var(--qbet-green); } &:hover .questions-plus { background: var(--light-primary); border: 1px var(--dark-primary) solid; } } .questions-cover { display: flex; align-items: center; justify-content: space-between; } .questions-title { display: grid; grid-template-columns: 1fr 20px; cursor: pointer; align-items: center; font-size: 22px; margin-bottom: 15px; } .questions-plus { border-radius: 0.375rem; min-width: 1.875rem; height: 1.875rem; padding: 0.25rem; background-color: #e8f5e8; border: 1px solid var(--qbet-green-light); display: flex; align-items: center; justify-content: center; position: relative; } .top-line, .bottom-line { position: absolute; width: 12px; height: 2px; background-color: var(--dark-primary); } .top-line { transform: rotate(90deg); transition: all 0.3s ease; } .questions-plus.active .top-line { transform: rotate(0deg); } .icon { width: 30px; height: 25px; fill: var(--light-primary); } .questions-content { overflow: hidden; height: 0; transition: height 0.3s ease; } .hero-box { display: flex; flex-direction: column; width: 100%; } @media (max-width: 768px) { .hero-box > .btn-box { order: 1; } .hero-box > p { order: 2; } } .hero-mob-text { font-weight: 600; margin-top: 10px; } .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%; margin: 0 auto; object-fit: cover; object-position: center; } @media (min-width: 992px) { width: 420px; height: 400px; } } @media (max-width: 992px) { .hero-img-box { margin: 0 auto; width: 240px; height: 320px; margin-bottom: 15px; } } .list { display: flex; flex-direction: column; gap: 5px; padding-left: 20px; margin-bottom: 15px; list-style-type: circle; font-style: italic; font-size: 14px; } /* -------table--------- */ table { width: 100%; margin-top: 15px; margin-bottom: 15px; } th, td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border-color); } @media (max-width: 500px) { table { font-size: 12px; } th, td { padding: 8px; 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(--light-primary); } .hidden { display: none; } .table-double tr > td:nth-child(odd) { background: var(--bg-td); color: var(--dark-primary); } .table-triple td:first-child { background: var(--accent-color); color: var(--dark-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%; } } @media (min-width: 992px) { .interface > .choose-list { padding: 10px; flex-direction: row; flex-wrap: wrap; } } /* ----------------------------------- */ .swiper { margin-bottom: 15px; } @media (max-width: 628px) { .swiper.desk { display: none; } } @media (min-width: 629px) { .swiper.mob { display: none; } } .swiper-img-box { width: 240px; height: 440px; border-radius: 15px; overflow: hidden; } .swiper-button-next::after, .swiper-button-prev::after { color: #ffbe1f; } .swiper-pagination-bullet.swiper-pagination-bullet-active.swiper-pagination-bullet-active-main { background: var(--bg-list); } .bonuse-img-box { display: flex; } /* review */ .review-card { background: var(--light-primary); border-radius: 10px; padding: 15px; margin-bottom: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; color: var(--dark-primary); } .review-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } .positive-review { border-left: 5px solid #4caf50; } .positive-review .review-rating { color: #4caf50; } .neutral-review { border-left: 5px solid #ffc107; } .neutral-review .review-rating { color: #ffc107; } .negative-review { border-left: 5px solid #f44336; } .negative-review .review-rating { color: #f44336; } .review-card h3 { margin-top: 0; font-size: 1.2em; font-weight: bold; } .review-card .review-rating { font-size: 1em; font-weight: bold; margin-bottom: 10px; } .review-card .review-text { font-size: 1em; line-height: 1.5; } /* ----------plus-minus------------- */ @media (min-width: 992px) { .plus-minus-box { display: flex; gap: 15px; } } .group { margin-bottom: 30px; padding: 20px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .plus-group { background-color: #e8f5e9; border: 1px solid #c8e6c9; } .minus-group { background-color: #ffebee; border: 1px solid #ffcdd2; } .plus-minus-box ul li { border: 1px solid #ddd; border-radius: 8px; padding: 10px; margin-bottom: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); font-size: 16px; } .plus-group ul li::before { content: '✔'; color: #4caf50; margin-right: 10px; } .minus-group ul li::before { content: '✖'; color: #f44336; margin-right: 10px; } /* -----------1win-box--- */ @media (min-width: 725px) { .win-box { display: flex; gap: 10px; } .win-box > .win-box-width { max-width: 50%; } .img-mob { width: 30%; } } .win-box-width { margin-top: 15px; } /* demo */ .iframe-bwb { position: relative; overflow: hidden; border-radius: 10px; background-color: #171515ff; } .iframe-bwb__bg-image { height: 400px; background-position: center; background-repeat: no-repeat; background-size: cover; filter: brightness(50%) blur(6px); background-image: url(./img/demo/demo2.webp); } .iframe-bwb__content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; } .iframe-bwb__button { position: absolute; top: 40%; left: 50%; z-index: 200; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 1.5em; line-height: 48px; width: 10em; border: 0; margin: 0; box-shadow: none; cursor: pointer; white-space: nowrap; text-align: center; max-width: 99%; letter-spacing: 2px; padding: 15px 10px; color: var(--light-primary); background: var(--btn-color); border-radius: 0.75rem; transition: all 0.1s ease; } .iframe-bwb__button:hover { background: var(--btn-hover); } .iframe-bwb__yellow { background: var(--accent-color); } .iframe-bwb__yellow:hover { background: #e19b22; } #game-container { margin-top: 20px; width: 100%; max-width: 100%; height: 400px; display: none; } .game-iframe { width: 100%; height: 100%; border: none; } .main-icon-uoutube { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 98px; height: 68px; background: url('./img/youtubelogo.svg') no-repeat center center; background-size: contain; @media (min-width: 768px) { width: 155px; height: 104px; } } /* main */ .main-img-box { flex: 1; margin-bottom: 15px; & > img { margin: 0 auto; display: block; } } /* */ /* download-section */ .download-top-section { position: relative; padding-top: 50px; } .section-fon { position: relative; width: 100vw; height: 50vh; overflow: hidden; display: flex; justify-content: center; align-items: center; } .section-fon { width: 100vw; height: 50vh; } .section-fon img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; } .section-fon::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 -200px 150px 10px #1f2125; z-index: 2; } @media (min-width: 600px) { .section-fon { height: 65vh; } } @media (min-width: 1200px) { .section-fon { height: 78vh; } } .download-section { position: relative; padding-left: 20px; padding-right: 20px; max-width: 850px; margin: -70px auto 0 auto; z-index: 3; overflow: hidden; } .download-box { display: flex; justify-content: flex-start; align-items: flex-start; gap: 15px; } .download-cover { display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: center; } .download-img { border-radius: 20%; grid-column: 1; } .download-content { grid-column: 2; display: flex; flex-direction: column; justify-content: flex-start; } .download-title { line-height: 1.7rem; font-size: 1.2rem; letter-spacing: 0; font-weight: 700; margin: 0 0 5px 0; @media (min-width: 600px) { font-size: 1.7rem; } @media (min-width: 992px) { font-size: 1.9rem; } } .download-content a { color: #00a173; line-height: 1.5rem; font-size: 1rem; letter-spacing: 0.00625em; font-weight: 500; } .info-cover { margin-top: 15px; @media (min-width: 600px) { display: flex; } } .info-container { display: flex; align-items: center; gap: 50px; @media (max-width: 600px) { margin-bottom: 15px; } } .rating-value { display: flex; align-items: center; gap: 3px; } .info-box { display: flex; flex-direction: column; align-items: center; position: relative; text-align: center; } .info-box:not(:last-child)::after { content: ''; position: absolute; top: 0; right: -30px; height: 100%; width: 1px; background-color: #6f6f6f; } .info-content { font-size: 18px; font-weight: 700; margin-bottom: 5px; } .info-description { font-size: 14px; color: #6f6f6f; } .icon { font-style: normal; margin-left: 5px; } .info-btn { background: #00a173; width: 100%; margin: 0 auto; @media (min-width: 600px) { max-width: 200px; } @media (min-width: 768px) { max-width: 300px; } } .info-btn:hover { background: #03bb87; } /* --------------- */ /* curds */ .curd-box { display: flex; flex-direction: column; gap: 15px; } .cards-container { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; background-color: #f9f9f9; } .card { background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 20px; transition: transform 0.3s, box-shadow 0.3s; } .card:hover { transform: translateY(-5px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .card-title { font-size: 1.5em; font-weight: bold; margin-bottom: 10px; color: #333; } .card-earnings { font-size: 1.2em; font-weight: bold; color: #28a745; margin-bottom: 10px; } .card-advice { font-size: 1em; color: #555; line-height: 1.5; } /* footer */ .footer { width: 100%; padding: 25px; text-align: center; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3); background: var(--bg-gradient); color: var(--dark-primary); } .footer-text { font-size: 12px; } .footer-payment-box { display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; flex: 1; } .footer-payment-list { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; align-items: flex-end; justify-content: center; } .footer-logo { margin-bottom: 25px; } .footer-social-list { display: flex; gap: 35px; justify-content: center; align-items: center; margin-bottom: 15px; } .social-link { display: block; transition: all 0.3s ease; } .footer-partners__list { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 15px; } .footer-links { margin-bottom: 35px; flex: 1; } .footer-links__group:not(:last-child) { margin-bottom: 35px; } .footer-links__group { display: flex; flex-direction: column; gap: 10px; & a { font-size: 14px; font-weight: 600; transition: all 0.3s ease; } & a:hover { color: var(--accent-color); } } @media screen and (min-width: 768px) { .footer-cover { display: flex; justify-content: space-between; align-items: center; } .social-link:hover { transform: scale(1.1); } } @media screen and (min-width: 992px) { .footer-links { display: flex; align-items: center; justify-content: center; gap: 70px; } .footer-links__group:not(:last-child) { margin-bottom: 0px; } } .reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; max-width: 1200px; margin: 2rem auto; padding: 0 1rem; box-sizing: border-box; } /* download-section */ .download-top-section { position: relative; padding-top: 50px; } .section-fon { position: relative; width: 100vw; height: 50vh; overflow: hidden; display: flex; justify-content: center; align-items: center; } .section-fon{ width: 100vw; height: 50vh; } .section-fon img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; } .section-fon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 -200px 150px 10px #1f2125; z-index: 2; } @media (min-width:600px) { .section-fon{ height: 65vh; } } @media (min-width:1200px) { .section-fon{ height: 78vh; } } .download-section { position: relative; padding-left: 20px; padding-right: 20px; max-width: 850px; margin: -70px auto 0 auto; z-index: 3; overflow: hidden; } .download-box { display: flex; justify-content: flex-start; align-items: flex-start; gap: 15px; } .download-cover { display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: center; } .download-img{ border-radius: 20%; grid-column: 1 } .download-content { grid-column: 2; display: flex; flex-direction: column; justify-content: flex-start; } .download-title{ line-height: 1.7rem; font-size: 1.2rem; letter-spacing: 0; font-weight: 700; margin: 0 0 5px 0; @media (min-width:600px) { font-size: 1.7rem; } @media (min-width:992px) { font-size: 1.9rem; } } .download-content a { color: #00a173; line-height: 1.5rem; font-size: 1rem; letter-spacing: .00625em; font-weight: 500; } /* ===== */ .link { color: rgb(19, 19, 243); transition: all 0.3s ease; text-decoration: underline; } .link:hover { color: rgb(108, 108, 243) !important; } .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; }