:root { /* color variables */ --primary-color: #a80507; --primary-color-rgb: 168, 5, 7; --secondary-color: #0f0f10; --secondary-color-rgb: 15, 15, 16; --font-color: #292929; --white-color: #fff; --white-color-rgb: 255, 255, 255; --border-color: #cbcbcb; --light-bg-color: #f4f1f1; --accent-tint-bg: rgba(var(--primary-color-rgb), 0.08); --gray-100: #f3f4f6; --gray-150: #e9eaec; --gray-200: #e5e7eb; --border-right-leftbox: rgba(0, 0, 0, 0.57); --dark-color: #000; --font-light-color: #d9d9d9; --whatsapp-green-start: rgba(9, 124, 55, 0.69); --whatsapp-green-end: #007e32; --whatsapp-green-end-rgb: 0, 126, 50; /* string variables */ --primary-font-site: "IBM Plex Sans"; /* responsive margins / paddings */ --margin-sm: 16px; --margin-md: 32px; --bs-sitePrimary-color: var(--primary-color); --bs-sitePrimary-rgb: var(--primary-color-rgb); --bs-sitePrimaryDark-color: var(--secondary-color); --bs-siteSecondary-color: var(--secondary-color); --bs-sitefont-color: var(--font-color); --bs-siteGray-color: var(--font-color); --bs-sitebg-color: var(--secondary-color); --bs-siteborderLight-color: rgba(var(--white-color-rgb), .30); --bs-siteDarkGary-color: var(--font-color); --bs-siteLightgary-color: var(--gray-200); --bs-siteDark-color: var(--secondary-color); --bs-siteLightInner-color: rgba(var(--secondary-color-rgb), 0.28); --bs-siteSecondaryLightInner-color: rgba(var(--white-color-rgb), 0.82); --bs-siteselectForm: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25); --bs-sitetransition: all .5s linear; --bs-body-font-family: var(--primary-font-site), sans-serif !important; } * { --min-screen-size: 430; --max-screen-size: 1500; --interpolate-diff: calc(var(--max-font-size) - var(--min-font-size)); --interpolate: clamp(calc(var(--min-font-size) * 1px), calc((var(--min-font-size) * 1px) + var(--interpolate-diff) * ((100vw - calc(var(--min-screen-size) * 1px)) / (var(--max-screen-size) - var(--min-screen-size)))), calc(var(--max-font-size) * 1px)); } p{margin-bottom: 0;} /* body { container: body / inline-size; min-height: 100%; display: flex; flex-direction: column; font-family: var(--sitefont-family); letter-spacing: 0px; background-color: var(--white-color); overflow: auto; } */ /* * { --min-screen-size: 430; --max-screen-size: 1500; --interpolate-diff: calc(var(--max-font-size) - var(--min-font-size)); --interpolate: clamp(calc(var(--min-font-size) * 1px), calc((var(--min-font-size) * 1px) + var(--interpolate-diff) * ((100vw - calc(var(--min-screen-size) * 1px)) / (var(--max-screen-size) - var(--min-screen-size)))), calc(var(--max-font-size) * 1px)); } */ /* html { height: 100%; font-size: 16px; } */ /* text utility classes */ .text-primary-color { color: var(--primary-color); font-size: 22px; font-weight: 600; line-height: 1.145; } .subtitle-primary-color2 { color: var(--primary-color); font-size: 35px; font-weight: 600; line-height: 1; } .title-word-dark { color: var(--secondary-color); } .subtitle-primary-color1 { color: var(--primary-color); --min-font-size: 21; --max-font-size: 35; font-size: 35px; font-weight: 600; line-height: 1; } .sub-text { font-size: 35px; } .sub-text-secondary-color { color: var(--secondary-color); font-size: 20px; } .sub-text-primary-color2 { color: var(--primary-color); } .sub-text-primary-color { color: var(--primary-color); font-size: 35px; } .sub-text-secondary-color2 { color: var(--secondary-color); font-size: 25px; } /* section utility classes */ .section { display: flex; flex-direction: column; align-items: center; padding: 0 24px; } /* ui objects utility classes */ .circle1, .circle { border-radius: 50%; } .input { border-radius: 8px; } /* button hover utility classes */ .hover-bright { transition: filter 0.3s ease; } .hover-bright:hover { filter: brightness(1.2); } .hover-zoom { transition: scale 0.3s ease; } .hover-zoom:hover { scale: 1.05; } /* card hover utility classes */ .hover-shadow-lift { box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.08); transition: box-shadow 0.3s ease, transform 0.3s ease; } .hover-shadow-lift:hover { box-shadow: 0px 14px 30px rgba(0, 0, 0, 0.16); transform: translateY(-4px); } /* glass effect utility classes */ .glass-effect { background-color: rgba(var(--white-color-rgb), 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(var(--white-color-rgb), 0.6); } .veloce-top { background-image: url(../images/home/spriteTop.png); display: inline-block; background-repeat: no-repeat; vertical-align: middle;position: relative; } .veloce-top-time{background-position: 0px 0px; width: 15px; height: 15px;} .veloce-top-mail{background-position: -20px 0px; width: 22px; height: 16px;} .veloce-top-translate{background-position: -46px 0px; width: 16px; height: 16px;} .veloce-top-facebook{background-position: -66px 0px; width: 18px; height: 17px;} .veloce-top-instagram{background-position: -88px 0px; width: 17px; height: 17px;} .veloce-top-twitter{background-position: -109px 0px; width: 17px; height: 17px;} .veloce-top-youtube{background-position: -132px 0px; width: 21px; height: 18px;} .veloce-top-whatsapp{background-position: -157px -1px;width: 24px;height: 23px;} .veloce-top-whatsapp-bot{background-position: -138px -40px;width: 21px;height: 20px;} .veloce-top-whatsapp-con{background-position: -186px -0px;width: 35px;height: 35px;} .veloce-top-address{background-position: -88px -39px;width: 20px;height: 23px;} .veloce-top-mail-bot{background-position: -112px -38px;width: 21px;height: 19px;} .veloce-top-facebook-bot{background-position: 0px -39px;width: 17px;height: 17px;} .veloce-top-instagram-bot{background-position: -22px -39px;width: 16px;height: 17px;} .veloce-top-twitter-bot{background-position: -44px -39px;width: 17px;height: 17px;} .veloce-top-youtube-bot{background-position: -64px -39px;width: 20px;height: 18px;} .veloce-top-jct-member{background-position: -1px -61px;width: 85px;height: 63px;} .veloce-mid { background-image: url(../images/home/spriteMid.png); display: inline-block; background-repeat: no-repeat; vertical-align: middle;position: relative; } /* stock-card spec icons — small row, y=0 */ .veloce-mid-calendar { background-position: 0px 0px; width: 12px; height: 12px; } .veloce-mid-mission { background-image: url(../images/home/icon-mission.png); background-position: 0 0; width: 34px;height: 31px; } .veloce-mid-vision { background-image: url(../images/home/icon-vision.png); background-position: 0 0; width: 31px;height: 31px; } .veloce-mid-milage { background-position: -16px -1px; width: 16px; height: 11px; } .veloce-mid-fuel { background-position: -36px -1px; width: 15px; height: 12px; } .veloce-mid-transmission { background-position: -55px -1px; width: 12px; height: 12px; } /* how-to-buy step icons — sprite ink is red; rendered white so they stay visible on the existing circle's dark/red background, which already carries the hover color-swap */ .how-to-buy__step-icon { display: flex; align-items: center; justify-content: center; } /* .how-to-buy__step-icon .veloce-mid { transform: scale(0.62); } */ .veloce-mid-inquiry { background-position: -367px -158px; width: 30px; height: 24px; filter: brightness(0) invert(1); } .veloce-mid-shipment { background-position: -491px -159px; width: 22px; height: 23px; filter: brightness(0) invert(1); } .veloce-mid-payment { background-position: -401px -159px; width: 25px; height: 22px; filter: brightness(0) invert(1); } .veloce-mid-vehicle { background-position: -430px -159px; width: 29px; height: 22px; filter: brightness(0) invert(1); } .veloce-mid-order { background-position: -463px -158px; width: 25px; height: 24px; filter: brightness(0) invert(1); } .veloce-mid-vehicle { background-position: -430px -159px; width: 42px; height: 22px; filter: brightness(0) invert(1); } .how-to-buy__site-section .container .how-to-buy__row-inner .how-to-buy__step:hover .how-to-buy__step-icon .veloce-mid-inquiry, .how-to-buy__site-section .container .how-to-buy__row-inner .how-to-buy__step:hover .how-to-buy__step-icon .veloce-mid-order, .how-to-buy__site-section .how-to-buy__row-inner:has(.how-to-buy__step:hover):not(:has(.how-to-buy__step--5:hover)) .how-to-buy__step--5 .how-to-buy__step-icon .veloce-mid-payment, .how-to-buy__site-section .container .how-to-buy__row-inner .how-to-buy__step:hover .how-to-buy__step-icon .veloce-mid-shipment, .how-to-buy__site-section .container .how-to-buy__row-inner .how-to-buy__step:hover .how-to-buy__step-icon .veloce-mid-vehicle { filter: brightness(0) invert(1); } /* trust badges + delivery vehicles */ .veloce-mid-arrow-icon {background-position: -272px -160px;width: 17px;height: 14px;} .veloce-mid-flag {background-position: -293px -159px;width: 28px;height: 20px;} .veloce-mid-star {background-position: -325px -159px;width: 17px;height: 16px;} .veloce-mid-van {background-position: -2px -161px;width: 86px;height: 41px;} .veloce-mid-bus {background-position: -96px -159px;width: 87px;height: 52px;} .veloce-mid-truck {background-position: -193px -159px;width: 74px;height: 56px;} /* brand logos */ .veloce-mid-toyota {background-position: 0px -46px;width: 77px;height: 53px;} .veloce-mid-honda {background-position: -83px -46px;width: 66px;height: 53px;} .veloce-mid-nissan {background-position: -155px -47px;width: 60px;height: 51px;} .veloce-mid-suzuki {background-position: -224px -47px;width: 50px;height: 51px;} .veloce-mid-volvo {background-position: -280px -46px;width: 55px;height: 53px;} .veloce-mid-bmw {background-position: -340px -46px;width: 54px;height: 53px;} .veloce-mid-mercedes {background-position: -399px -46px;width: 54px;height: 53px;} .veloce-mid-isuzu {background-position: -459px -48px;width: 57px;height: 50px;} .veloce-mid-lexus {background-position: -522px -47px;width: 71px;height: 51px;} /* vehicle body types */ .veloce-mid-sedan {background-position: -8px -108px;width: 86px;height: 38px;} .veloce-mid-suv {background-position: -112px -105px;width: 89px;height: 44px;} .veloce-mid-wagon {background-position: -211px -108px;width: 86px;height: 38px;} .veloce-mid-coupe {background-position: -309px -105px;width: 91px;height: 38px;} .veloce-mid-sports {background-position: -407px -103px;width: 93px;height: 43px;} .veloce-mid-hatchback {background-position: -508px -106px;width: 84px;height: 44px;} .veloce-mid-used-vehicle {background-position: -385px 0px;width: 42px;height: 42px;} .veloce-mid-bid-icon {background-position: -520px 0px;width: 42px;height: 42px;} .veloce-mid-support {background-position: -565px 0px;width: 42px;height: 42px;} .service__site-section .container .services-row .service-col1:hover .service-col-icon1 .veloce-mid-used-vehicle {background-position: -430px 0px;} .service__site-section .container .services-row .service-col2:hover .service-col-icon2 .veloce-mid-bid-icon {background-position: -475px 0px;} .service__site-section .container .services-row .service-col3:hover .card-service-col3 .veloce-mid-support {background-position: -610px 0px;} /* ---- Scroll To Top ---- */ #scrollupBtn { position: fixed; bottom: 28px; right: 24px; width: 44px; height: 44px; background: var(--bs-sitePrimary-color); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 990; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s, color 0.2s; box-shadow: 0 4px 18px rgba(0,0,0,0.35); text-decoration: none; } #scrollupBtn.visible { opacity: 1; visibility: visible; transform: translateY(0); } #scrollupBtn:hover { background: #fff; color: var(--bs-sitePrimary-color); box-shadow: 0 6px 22px rgba(0,0,0,0.25); } #scrollupBtn svg { pointer-events: none; stroke: currentColor; } /* shared components (common) */ /* .wram-mid { background-image: url(../images/home/spriteMid.png); display: inline-block; background-repeat: no-repeat; vertical-align: middle; position: relative; } .wram-mid-arrow-icon { background-position: 0px -1px; width: 12px; height: 11px; } */ /* .container { width: 100%; max-width: 1200px; margin: 0 auto; } */ .line { width: 0; flex-shrink: 0; } .graphic { margin-left: -1px; flex-shrink: 0; } .group { transform-origin: 50% 50%; width: 130px; height: 219px; } .group .group-mask { position: absolute; top: 0; left: 0; right: 0; width: 100%; } .common__site-btns { position: relative; overflow: hidden; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.29); display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--primary-color); background-color: var(--white-color); font-size: 15px; font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; line-height: 0.6; letter-spacing: 0px; text-align: center; padding: 15px 14px; border: 1px solid var(--primary-color); border-radius: 43px; transition: color 0.35s ease, transform 0.3s ease, box-shadow 0.3s ease; } .common__site-btns:hover { color: var(--white-color); transform: translateY(-3px); animation: common__site-btns-pulse 1.6s ease-out infinite; } .common__site-btns::before { content: ''; position: absolute; z-index: 0; top: 50%; left: 50%; width: 100%; height: 10px; background-color: var(--primary-color); border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.5s ease; } .common__site-btns:hover::before { transform: translate(-50%, -50%) scale(40); } .common__site-btns::after { content: ''; position: absolute; z-index: 2; top: 0; left: -60%; width: 35%; height: 100%; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-20deg); pointer-events: none; } .common__site-btns:hover::after { animation: common__site-btns-shine 0.9s ease; } .common__site-btns > a { display: contents; color: inherit; text-decoration: none; } .common__site-btns > .common__site-btns__reset { display: contents; color: inherit; background: none; border: none; padding: 0; margin: 0; font: inherit; cursor: pointer; } .common__site-btns:hover > a, .common__site-btns:hover > .common__site-btns__reset{color: var(--white-color);} .common__site-btns .common__site-btns__icon { position: relative; z-index: 1; width: 17px; flex-shrink: 0; aspect-ratio: 1 / 1; transition: transform 0.3s ease; } .common__site-btns:hover .common__site-btns__icon { transform: rotate(12deg) translateX(2px); } .common__site-btns.btn-banner1 img { position: relative; z-index: 1; transition: filter 0.3s ease; } .common__site-btns.btn-banner1:hover img { filter: brightness(0) invert(1); } .common__site-btns .common__site-btns__label { position: relative; z-index: 1; text-align: left; } .common__site-btns--filled { color: var(--white-color); background-color: var(--primary-color); } .common__site-btns--filled::before { background-color: var(--white-color); } .common__site-btns--filled:hover { color: var(--primary-color); } .common__site-btns.common__site-btns--filled:hover > a, .common__site-btns.common__site-btns--filled:hover > .common__site-btns__reset { color: var(--primary-color); } @keyframes common__site-btns-shine { 0% { left: -60%; } 100% { left: 140%; } } @keyframes common__site-btns-pulse { 0% { box-shadow: 0px 10px 18px 0px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(var(--primary-color-rgb), 0.45); } 70% { box-shadow: 0px 10px 18px 0px rgba(0, 0, 0, 0.25), 0 0 0 16px rgba(var(--primary-color-rgb), 0); } 100% { box-shadow: 0px 10px 18px 0px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(var(--primary-color-rgb), 0); } } .section-heading { display: flex; flex-direction: column; align-items: center; gap: 8px;z-index: 2; } .section-heading .section-heading__label { color: var(--primary-color); font-size: 14px; font-family: var(--primary-font-site); font-weight: 400; line-height: 1.429; text-align: center; } .section-heading .section-heading__title { color: var(--secondary-color); --min-font-size: 21; --max-font-size: 35; font-size: var(--interpolate); font-family: 'IBM Plex Sans'; font-weight: 600; line-height: 1; text-align: left; } .section-heading--left { align-items: flex-start; } .section-heading--left .section-heading__label { text-align: left; } .component-a { display: flex; align-items: center; gap: 15px; } .component-a .component-graphic1 { height: 22px; flex-shrink: 0; } .component-a .component-text1 { text-align: left; } .component-b { display: flex; align-items: center; justify-content: flex-end; gap: 15px; } .component-b .component-trust-icon { width: 18px; flex-shrink: 0; aspect-ratio: 4194304 / 4893477; } .component-b .component-text2 { text-align: left; } .component-c { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; align-self: stretch; font-size: 18px; font-weight: 400; line-height: 0.5; background-color: #fff; padding: 0 18px; } .component-c .component-graphic2 { width: 196px; height: 59px; flex-shrink: 0; } .component-c .component-text3 { text-align: left; } .stock-card-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; align-content: flex-start; row-gap: 30px; align-self: stretch; } .stock-card-row .stock-card-row-stock-card { position: relative; width: 287px; flex-shrink: 0; display: flex; flex-direction: column; background-color: var(--white-color); border-radius: 16px 16px 0 0; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.18); } .stock-card-row .stock-card-row-stock-card .stock-card__media { position: relative; width: 96%; min-height: 199px; display: flex;align-items: center;justify-content: center;border: 1px solid #d4d4d4;margin: 7px auto 0;border-radius: 16px 16px 0 0; } .stock-card-row .stock-card-row-stock-card .stock-card__media .stock-card__media-img { position: relative; max-width: 100%; height: auto; object-fit: cover;max-height: 199px;border-radius: 16px 16px 0 0; } .stock-card-row .stock-card-row-stock-card .stock-card__year { position: absolute; z-index: 1; top: 12px; left: 12px; display: flex; align-items: center; gap: 5px; color: var(--secondary-color); font-size: 13px; font-weight: 500; padding: 5px 10px; border-radius: 7px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.16); } .stock-card-row .stock-card-row-stock-card .stock-card__price-panel { position: absolute; z-index: 1; right: 10px; bottom: -47px; width: 128px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.16); } .stock-card-row .stock-card-row-stock-card .stock-card__price-panel .stock-card__price-label { color: var(--font-color); font-size: 11px; font-weight: 400; line-height: 1; } .stock-card-row .stock-card-row-stock-card .stock-card__price-panel .stock-card__price-value { color: var(--secondary-color); font-size: 16px; font-weight: 700; line-height: 1.2;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 100%;text-align: center; } .stock-card-row .stock-card-row-stock-card .stock-card__price-panel .stock-card__price-btn { width: 100%; text-align: center; color: var(--white-color); font-size: 12px; font-weight: 500; background-color: var(--secondary-color); padding: 7px 0; border-radius: 40px; transition: background-color 0.3s ease; } .stock-card-row .stock-card-row-stock-card .stock-card__body { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 18px 16px; } .stock-card-row .stock-card-row-stock-card .stock-card__title { color: var(--secondary-color); font-size: 19px; font-weight: 600; text-align: left;width: 47%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; } .stock-card-row .stock-card-row-stock-card:nth-child(2) .stock-card__title { color: var(--primary-color); } .stock-card-row .stock-card-row-stock-card:hover .stock-card__title { color: var(--primary-color); } .stock-card-row:has(.stock-card-row-stock-card:hover):not(:has(.stock-card-row-stock-card:nth-child(2):hover)) .stock-card-row-stock-card:nth-child(2) .stock-card__title { color: var(--secondary-color); } .stock-card-row .stock-card-row-stock-card .stock-card__specs { display: flex; align-items: center; justify-content: space-between; } .stock-card-row .stock-card-row-stock-card .stock-card__specs .stock-card__spec { display: flex; align-items: center; gap: 5px; color: var(--font-color); font-size: 13px; font-weight: 400; } .stock-card-row .stock-card-row-stock-card .stock-card__icon { width: 14px; height: 14px; flex-shrink: 0; } .stock-card-row .stock-card-row-stock-card:nth-child(2) .stock-card__price-btn { background-color: var(--primary-color); } .stock-card-row .stock-card-row-stock-card:hover .stock-card__price-btn { background-color: var(--primary-color); } .stock-card-row:has(.stock-card-row-stock-card:hover):not(:has(.stock-card-row-stock-card:nth-child(2):hover)) .stock-card-row-stock-card:nth-child(2) .stock-card__price-btn { background-color: var(--secondary-color); } /* end shared components */ /* header */ .wram-top { background-image: url(../images/home/spriteTop.png); display: inline-block; background-repeat: no-repeat; vertical-align: middle; position: relative; } .wram-top-time { background-position: 0px -1px; width: 15px; height: 15px; } .wram-top-mail { background-position: -20px 0px; width: 22px; height: 16px; } .wram-top-facebook { background-position: -46px 0px; width: 17px; height: 17px; } .wram-top-instagram { background-position: -68px 0px; width: 17px; height: 17px; } .wram-top-twitter { background-position: -90px 0px; width: 17px; height: 17px; } .wram-top-youtube { background-position: -111px 0px; width: 21px; height: 18px; } .wram-top-whatsapp { background-position: -136px -1px; width: 24px; height: 23px; } .header__main-site { container: header-main-site / inline-size; display: flex; flex-direction: column; font-family: 'IBM Plex Sans'; background-color: #fff; border-bottom: 1px solid var(--border-color); } .header__main-site .header__brand-row { container: header-brand-row / inline-size; display: flex; flex-direction: column; align-items: center; padding: 6px 24px 5px 24px; border-bottom: 1px solid var(--border-color); } .header__main-site .header__brand-row .container .header__brand-row-inner { container: header-brand-row-inner / inline-size; position: relative; display: flex; align-items: center; gap: 108px; } .header__main-site .header__logo-link { display: flex; flex-shrink: 0; } .header__main-site .header__logo { width: 215px; flex-shrink: 0; } .header__main-site .header__nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 36px; cursor: pointer; flex-shrink: 0; } .header__main-site .header__nav-toggle .sb-toggle-left { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; } .header__main-site .header__nav-toggle .menu_icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 100%; } .header__main-site .header__nav-toggle .menu_icon span { display: block; width: 100%; height: 2px; background-color: var(--secondary-color); border-radius: 2px;margin: 0 !important; } .header__main-site .header__nav { flex-grow: 1; } .header__main-site .header__nav .header__nav-list { display: flex; align-items: center; justify-content: space-between; width: 100%; color: var(--font-color); font-size: 18px; font-weight: 500; line-height: 1.111; } .header__main-site .header__nav .header__nav-list .header__nav-link { text-align: left; text-decoration: none; color: inherit; } .header__main-site .header__nav .header__nav-list .header__nav-link--active { color: var(--primary-color); } .header__main-site .header__nav .header__nav-list li.header__nav-item--auth, .mobile_menu li.header__nav-item--auth { display: none !important; } .header__main-site .header__nav .header__nav-list li.dropdown { position: relative; } .header__main-site .header__nav .header__nav-list li.dropdown > a { display: flex; align-items: center; gap: 8px; } .header__main-site .header__nav .header__nav-list li.dropdown > a::after { content: ""; width: 7px; height: 7px; flex-shrink: 0; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s ease; } .header__main-site .header__nav .header__nav-list li.dropdown:hover > a::after, .header__main-site .header__nav .header__nav-list li.dropdown:focus-within > a::after { transform: rotate(-135deg) translateY(2px); } .header__main-site .header__nav .header__nav-list li.dropdown > .header__nav-dropdown { position: absolute; top: 100%; left: 0; min-width: 220px; margin: 0; padding: 8px 0; list-style: none; background-color: var(--white-color); border: 1px solid var(--border-color); border-radius: 6px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; z-index: 30; } .header__main-site .header__nav .header__nav-list li.dropdown:hover > .header__nav-dropdown, .header__main-site .header__nav .header__nav-list li.dropdown:focus-within > .header__nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .header__main-site .header__nav .header__nav-list li.dropdown > .header__nav-dropdown li a { display: block; padding: 6px 16px; color: var(--font-color); font-size: 15px; font-weight: 400; text-decoration: none; white-space: nowrap; } .header__main-site .header__nav .header__nav-list li.dropdown > .header__nav-dropdown li a:hover { color: var(--primary-color); background-color: var(--gray-100); } .dropdown.hover:hover li{height: auto !important;} .dropdown.hover li:first-child a::before { display: none !important; } .header__main-site .btn-banner1 { width: 146px; flex-shrink: 0; padding: 10px 8px; } .header__main-site .header__topbar { container: header-topbar / inline-size; margin-bottom: -1px; display: flex; flex-direction: column; align-items: center; padding: 8px 24px; } .header__main-site .header__topbar .container .header__topbar-inner { container: header-topbar-inner / inline-size; width: 100%; display: flex; align-items: center; justify-content: space-between; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left { display: flex; align-items: flex-start; gap: 25px; color: var(--secondary-color); font-weight: 400; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col { margin-top: 11px; display: flex; align-items: flex-start; gap: 25px; font-size: 14px; line-height: 1; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col .header__topbar-item:first-child { display: flex; align-items: flex-start; gap: 10px; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col .header__topbar-item:last-child { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col .header__icon--clock {/* width: 14px; */ flex-shrink: 0; aspect-ratio: 1 / 1; } /* .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col .header__icon--mail { margin-top: -1px; margin-bottom: -1px; width: 21px; height: 15px; } */ .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col--lang { margin-top: unset; display: flex; align-items: center; gap: 9px; font-size: 13px; line-height: 1.769; padding: 6px 0; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col--lang .header__lang { display: flex; align-items: center; gap: 9px; color: var(--primary-color); } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col--lang .header__lang .header__lang-icon { width: 15px; height: 15px; flex-shrink: 0; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col--lang .header__lang .header__lang-text, .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col--lang .header__lang #google_translate_element .goog-te-combo { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%230f0f10' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1px center; background-size: 10px 6px; border: none; outline: none; margin: 0; padding: 0 16px 0 0; font: inherit; color: var(--bs-siteSecondary-color); text-align: left; cursor: pointer;width: 143px; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col--lang .header__lang .header__lang-text:hover, .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col--lang .header__lang .header__lang-text:focus, .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col--lang .header__lang .header__lang-text:active, .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col--lang .header__lang #google_translate_element .goog-te-combo:hover, .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col--lang .header__lang #google_translate_element .goog-te-combo:focus, .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col--lang .header__lang #google_translate_element .goog-te-combo:active { background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%230f0f10' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1px center; background-size: 10px 6px; outline: none; color: var(--bs-siteSecondary-color); } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col--lang .header__lang .header__lang-text option, .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col--lang .header__lang #google_translate_element .goog-te-combo option { color: var(--font-color); } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col--lang .header__lang #google_translate_element .goog-te-gadget { font-size: 0 !important; color: transparent !important; line-height: 0; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col--lang .header__lang #google_translate_element .goog-te-gadget span, .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col--lang .header__lang #google_translate_element .goog-logo-link, .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col--lang .header__lang #google_translate_element .goog-te-gadget-simple { display: none !important; visibility: hidden !important; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col--lang .header__lang #google_translate_element .goog-te-gadget .goog-te-combo { font-size: 13px !important; line-height: 1.769; } .goog-te-banner-frame, .skiptranslate > iframe { display: none !important; visibility: hidden !important; } body { top: 0 !important; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-right { display: flex; align-items: center; gap: 24px; font-weight: 600; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-right .header__social-list { display: flex; align-items: center; gap: 14px; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-right .header__social-list .header__social-link { display: flex; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-right .header__social-list .header__social-link .wram-top { filter: brightness(0); transition: opacity 0.2s ease; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-right .header__social-list .header__social-link:hover .wram-top { opacity: 0.6; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-right .header__divider { height: 17px; border-left: 2px solid var(--border-color); } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-right .header__whatsapp { margin-left: 1px; display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-right .header__whatsapp .header__whatsapp-icon-wrap { width: 43px; height: 43px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(50% 50% at 50% 50%, var(--whatsapp-green-start) 0%, var(--whatsapp-green-end) 100%) top left / auto auto no-repeat; padding: 10px; border-radius: 50%; animation: header__whatsapp-pulse 1.8s ease-out infinite; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-right .header__whatsapp .header__whatsapp-info { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-right .header__whatsapp .header__whatsapp-info .header__whatsapp-label { color: var(--font-color); font-size: 12px; line-height: 1; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-right .header__whatsapp .header__whatsapp-info .header__whatsapp-number { color: var(--secondary-color); font-size: 23.5px; line-height: 0.894; } .header__main-site .header__text { text-align: left; } @keyframes header__whatsapp-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--whatsapp-green-end-rgb), 0.55); } 70% { box-shadow: 0 0 0 10px rgba(var(--whatsapp-green-end-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--whatsapp-green-end-rgb), 0); } } /* Mobile off-canvas menu — fully self-contained (does not depend on any external off-canvas plugin) */ .sb-slidebar { position: fixed; top: 0; left: 0; width: min(300px, 85vw); height: 100vh; height: 100dvh; background-color: var(--white-color) !important; overflow-y: auto; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); transform: translateX(-100%); transition: transform 0.3s ease; z-index: 1001; } .sb-slidebar.is-open { transform: translateX(0); } .sb-overlay { position: fixed; inset: 0; background-color: rgba(var(--secondary-color-rgb), 0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 1000; } .sb-overlay.is-open { opacity: 1; visibility: visible; } body.sb-menu-open { overflow: hidden; } .sb-slidebar .sb-slidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border-color); font-size: 16px; font-weight: 600; color: var(--dark-color); background-color: var(--white-color); } .sb-slidebar .sb-slidebar-close { padding: 0; background: none; border: none; font-size: 22px; line-height: 1; color: var(--dark-color); cursor: pointer; } .mobile_menu { list-style: none; margin: 0; padding: 10px 0; background-color: var(--white-color); } .mobile_menu > li { border-bottom: 1px solid var(--border-color); background-color: var(--white-color); } .mobile_menu > li > a { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 12px 20px; color: var(--dark-color); font-size: 15px; text-decoration: none; } .mobile_menu > li > a:hover, .mobile_menu > li > a.header__nav-link--active { color: var(--primary-color); } .mobile_menu > li > a[href="javascript:void(0)"]::after { content: ""; width: 7px; height: 7px; flex-shrink: 0; margin-left: auto; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform 0.25s ease; } .mobile_menu > li.md-open > a[href="javascript:void(0)"]::after { transform: rotate(225deg); } .mobile_menu .md-drop { box-sizing: border-box; list-style: none; margin: 0; padding: 0 0 10px 34px; overflow: hidden; /* max-height: 0; */ transition: max-height 0.25s ease; background-color: var(--white-color); } .mobile_menu > li.md-open .md-drop { max-height: 500px; } .mobile_menu .md-drop li a { display: block; padding: 8px 0; color: var(--font-color); font-size: 14px; text-decoration: none; } .mobile_menu .md-drop li a:hover { color: var(--primary-color); } .banner__site-section { container: banner / inline-size; position: relative;/* color: var(--white-color); padding: 30px 17px 64px 17px; overflow: hidden; */ } .banner__site-section a img{max-width: 100%;height: auto;position: relative;margin: auto;display: block;} /* .banner__site-section .banner__img--veloce { position: absolute; top: 0; left: 0; right: 0; width: 100%; min-width: 0; animation: banner__img-veloce-zoom 18s ease-in-out infinite alternate; } .banner__site-section .banner__img--1 { position: absolute; z-index: 2; top: 261px; left: 146px; width: 154px; animation: banner__fade-in 1s ease 0.5s both; } .banner__site-section .banner__img--2 { position: absolute; z-index: 4; top: 117px; right: 17%; width: calc(100% - 51px); max-width: 799px; animation: banner__fade-in 1s ease 0.5s both; } .banner__site-section .container .banner__row { display: flex; align-items: center; justify-content: flex-end; gap: 142px; } .banner__site-section .container .banner__row .banner__col-left { container: banner-col-left / inline-size; position: relative; z-index: 1; margin-top: 24px; width: 333px; display: flex; flex-direction: column; gap: 34px; flex-shrink: 0; animation: banner__fade-up 0.9s ease both; } .banner__site-section .container .banner__row .banner__col-left .banner__row-top { margin-right: -2px; margin-top: -3px; display: flex; align-items: center; padding-left: 30px; } .banner__site-section .container .banner__row .banner__col-left .banner__row-top .banner__label { rotate: -90deg; font-size: 27.17px; font-family: var(--primary-font-site); font-weight: 400; line-height: 0.833; text-align: center; position: absolute; left: -63px; top: 30%; } .banner__site-section .container .banner__row .banner__col-left .banner__row-top .banner__col { margin-left: -37px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font-family: 'IBM Plex Sans'; font-weight: 300; text-align: left; } .banner__site-section .container .banner__row .banner__col-left .banner__row-top .banner__col .banner__subtitle { font-size: 40.76px; line-height: 1.382; } .banner__site-section .container .banner__row .banner__col-left .banner__row-top .banner__col .banner__subtitle--luxury { font-size: 48.99px; font-weight: 700; line-height: 1.15; } .banner__site-section .container .banner__row .banner__col-left .banner__row-top .banner__col .banner__title { font-size: 52.67px; line-height: 1.07; } .banner__site-section .container .banner__row .banner__col-left .banner__btn { width: 197px; align-self: start; padding-top: 16px; padding-bottom: 16px; } .banner__site-section .container .banner__row .banner__group-right { position: relative; z-index: 3; width: 681px; height: 331px; flex-shrink: 0; background: url(../images/banner-section-group.png) center / cover no-repeat; opacity: .2; animation: banner__group-right-in 1s ease 0.25s both; } .banner__site-section .container .banner__row .banner__group-right .banner__img--right { position: absolute; top: 11px; right: -20px; width: 147px; } @keyframes banner__fade-up { 0% { opacity: 0; transform: translateY(28px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes banner__group-right-in { 0% { opacity: 0; transform: translateX(40px); } 100% { opacity: .2; transform: translateX(0); } } @keyframes banner__fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes banner__img-veloce-zoom { 0% { transform: scale(1); } 100% { transform: scale(1.06); } } */ /* end image */ /* stock-list */ .stock__site-section { container: stock-site-section / inline-size; padding: 60px 0; } .stock__site-section .container { margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 35px; } .stock__site-section .stock__site-section__btn { width: 196px; } /* end stock-list */ /* counter */ .counter__site-section { container: counter / inline-size; position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; color: var(--white-color); font-size: 18px; font-family: 'IBM Plex Sans'; font-weight: 400; line-height: 0.5; background-color: var(--secondary-color); padding: 15px 24px; overflow: hidden; } .counter__site-section .counter__marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); } .counter__site-section .counter__marquee .counter__track { display: flex; width: max-content; animation: counter__marquee-scroll 26s linear infinite; } .counter__site-section .counter__marquee .counter__track:has(.component-a:hover, .component-b:hover) { animation-play-state: paused; } .counter__site-section .counter__marquee .counter__row { display: flex; align-items: flex-start; justify-content: space-between; width: 1200px; flex-shrink: 0; margin: 0 20px; padding: 16px 40px; border-radius: 18px; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.4), inset 0px 1px 0px rgba(255, 255, 255, 0.08); } .counter__site-section .counter__marquee .counter__row.glass-effect { background-color: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .counter__site-section .counter1 .component-graphic1 { width: 29px; } .counter__site-section .counter2 { gap: 14px; } .counter__site-section .counter2 .component-graphic1 { margin-left: -1px; margin-top: -1px; margin-bottom: -1px; width: 23px; height: 23px; } .counter__site-section .counter4 .component-graphic1 { width: 22px; } .counter__site-section .component-a, .counter__site-section .component-b { cursor: pointer; } .counter__site-section .component-a .component-graphic1, .counter__site-section .component-b .component-trust-icon { transition: filter 0.35s ease; } /* .counter__site-section .component-a:hover .component-graphic1, .counter__site-section .component-b:hover .component-trust-icon { filter: sepia(1) saturate(8) hue-rotate(-30deg) brightness(0.95); } */ .counter__site-section .component-a .component-text1, .counter__site-section .component-b .component-text2 { transition: color 0.35s ease; } .counter__site-section .component-a:hover .component-text1, .counter__site-section .component-b:hover .component-text2 { color: #ff6b6d; } @keyframes counter__marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .counter__site-section .counter__marquee .counter__track { animation: none; } } /* end counter */ /* welcome */ .welcome__site-section { container: welcome / inline-size; position: relative; display: flex; flex-direction: column; align-items: flex-start; font-family: 'IBM Plex Sans'; text-align: left; background-color: #fff; overflow: hidden; } .welcome__site-section .welcome__group--1 { position: absolute; top: 0; left: 0; right: 0; height: 673px; } .welcome__site-section .welcome__group--1 .welcome__img--1 { position: absolute; top: -155px; left: 0; right: 0; width: 100%; } .welcome__site-section .welcome__group--2 { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 673px; } .welcome__site-section .welcome__group--2 .welcome__img--2 { position: absolute; top: -163px; left: -1px; right: -1px; width: calc(100% - -1px - -1px); max-width: none; } .welcome__site-section .welcome__img--3 { position: absolute; z-index: 4; top: -29px; left: 3px; right: -28px; width: calc(100% - 3px - -28px); max-width: none; } .welcome__site-section .welcome__img--4 { position: absolute; z-index: 5; top: -28px; right: 1416px; rotate: 180deg; transform-origin: 50% 50%; width: calc(100% - 1416px); max-width: 1557px; } .welcome__site-section .welcome__card { position: relative; z-index: 7; margin-right: auto; width: 90%; max-width: 594px; display: flex; flex-direction: column; gap: 10px; font-weight: 400; background-color: rgba(0, 0, 0, 0); padding: 60px 21px 39px 21px; } .welcome__site-section .welcome__card .welcome__card-group { position: absolute; top: 161px; left: 25px; width: 176px; height: 176px; } .welcome__site-section .welcome__card .welcome__card-group .welcome__card-mask { position: absolute; top: 0; left: 0; right: 0; width: 100%; } .welcome__site-section .welcome__card .card-text-common { width: 100%; max-width: 294px; align-self: center; color: var(--primary-color); } .welcome__site-section .welcome__card .welcome__card-subtitle { color: var(--secondary-color); --min-font-size: 31; --max-font-size: 40; font-size: var(--interpolate); font-weight: 600; line-height: 0.875; text-align: right; } .welcome__site-section .welcome__card .welcome__card-text { text-shadow: 0px 0px 12.8px #fff; margin: 26px 8px 0 0; width: 100%; max-width: 334px; align-self: end; color: var(--dark-color); --min-font-size: 17; --max-font-size: 19; font-size: var(--interpolate); line-height: 1.316; } .welcome__site-section .welcome__frame-bottom { position: relative; z-index: 6; background-color: var(--light-bg-color); padding: 16px 30px 16px 151px; overflow: hidden; } .welcome__site-section .welcome__frame-bottom .welcome__row { margin-left: auto; width: fit-content; display: flex; align-items: center; gap: 46px; } .welcome__site-section .welcome__frame-bottom .welcome__row .welcome__column { width: 338px; display: flex; flex-direction: column; gap: 15px; flex-shrink: 0; text-align: left; } .welcome__site-section .welcome__frame-bottom .welcome__row .welcome__column .welcome__column-row-top { display: flex; align-items: flex-end; gap: 14px; color: var(--primary-color); --min-font-size: 18; --max-font-size: 25; font-size: var(--interpolate); font-weight: 500; line-height: 1.32; } .welcome__site-section .welcome__frame-bottom .welcome__row .welcome__column .welcome__column-row-top .welcome__column-icon { margin-left: -1px; margin-bottom: -1px; width: 31px; flex-shrink: 0; } .welcome__site-section .welcome__frame-bottom .welcome__row .welcome__column .welcome__column-row-top .welcome__column-subtitle { text-align: left; } .welcome__site-section .welcome__frame-bottom .welcome__row .welcome__column .welcome__column-text { color: var(--font-color); --min-font-size: 16; --max-font-size: 18; font-size: var(--interpolate); font-weight: 400; } .welcome__site-section .welcome__frame-bottom .welcome__row .welcome__column--left .welcome__column-icon { aspect-ratio: 6815491 / 6815939; } .welcome__site-section .welcome__frame-bottom .welcome__row .welcome__column--left .welcome__column-text { line-height: 1.278; } .welcome__site-section .welcome__frame-bottom .welcome__row .welcome__line { height: 241px; border-left: 1px solid #dbd8d8; } .welcome__site-section .welcome__frame-bottom .welcome__row .welcome__column--right .welcome__column-icon { aspect-ratio: 1 / 1; } .welcome__site-section .welcome__frame-bottom .welcome__row .welcome__column--right .welcome__column-text { line-height: 1.222; } .welcome__site-section .welcome__frame-bottom .welcome__img--5 { position: absolute; z-index: 1; top: -45px; left: 25px; width: 209px; animation: welcome-decor-float 5s ease-in-out infinite; } .welcome__site-section .welcome__frame-bottom .welcome__img--6 { position: absolute; z-index: 2; top: 234px; right: 94px; width: 209px; animation: welcome-decor-float 6s ease-in-out infinite .4s; } .welcome__site-section .welcome__card { animation: welcome-fade-up .9s ease both; } .welcome__site-section .welcome__column--left { animation: welcome-fade-up .9s ease .15s both; } .welcome__site-section .welcome__column--right { animation: welcome-fade-up .9s ease .3s both; } @keyframes welcome-fade-up { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes welcome-decor-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* end welcome */ /* services */ .service__site-section { container: services / inline-size; position: relative; background-color: #fff; padding: 60px 0px; overflow: hidden; } .service__site-section .container { display: flex; flex-direction: column; align-items: center; gap: 35px; } .service__site-section .section-heading1 { font-size: unset; font-weight: unset; line-height: unset; } .service__site-section .container .services-row { position: relative; z-index: 4; display: flex; align-items: flex-start; gap: 35px; color: var(--secondary-color); font-family: 'IBM Plex Sans'; } .service__site-section .container .services-row .service-col-a { position: relative; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); width: 385px; display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; text-align: left; padding-top: 226px; border-radius: 3px; overflow: hidden; } .service__site-section .container .services-row .service-col-a .card3 { position: absolute; top: 0; left: 0; right: 0; gap: 1px; background-image: url(../images/home/vehicle-img-ser.png); height: 100%;} .service__site-section .container .services-row .service-col-b { position: relative; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); width: 385px; display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; text-align: left; padding-top: 226px; border-radius: 3px; overflow: hidden; } .service__site-section .container .services-row .service-col-b .service-col-bid-img { position: absolute; top: 0; left: 0; right: 0; width: 100%; } .service__site-section .container .services-row .service-col-b .card4 { position: absolute; z-index: 1; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; gap: 1px; background: url(../images/home/bid-img-ser-new.png) top left / cover no-repeat; padding-bottom: 361px;height: 100%; } .service__site-section .container .services-row .service-col-c { position: relative; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); width: 385px; display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; text-align: left; padding-top: 226px; border-radius: 3px; overflow: hidden; } .service__site-section .container .services-row .service-col-c .card5 { position: absolute; top: 0; left: 0; right: 0; gap: 1px; background-image: url(../images/home/support-img-ser.png);height: 100%; } .service__site-section .container .services-row .service-col-c .card-service-col3 { width: 70px; flex-shrink: 0; background-color: var(--white-color); padding: 14px; } .service__site-section .container .services-row .service-col-c .card-support-icon { aspect-ratio: 6815744 / 6816075; } .service__site-section .container .services-row .service-col-icon { width: 70px; flex-shrink: 0; background-color: var(--white-color); padding: 0 14px; } .service__site-section .container .services-row .service-col-dots { width: 20px; height: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; background-color: var(--primary-color); } .service__site-section .container .services-row .card-service-col-content { position: relative; z-index: 1; width: 100%; max-width: 385px; display: flex; flex-direction: column; gap: 12px; background-color: rgba(255, 255, 255, 0.79); padding: 15px 20px; transition: background-color 0.3s ease; } .service__site-section .container .services-row .card-service-col-content .card-service-col-content-subtitle { font-size: 25px; font-weight: 600; line-height: 1.4;margin-bottom: 0; } .service__site-section .container .services-row .card-service-col-content .card-service-col-content-text { font-size: 18px; font-weight: 400; line-height: 1.444; } .service__site-section .container .services-row .service-col1 .service-col-icon1 { padding-top: 16px; padding-bottom: 16px; } .service__site-section .container .services-row .service-col1 .service-col-icon1 .service-col-icon-car { aspect-ratio: 5892285 / 5480252; } .service__site-section .container .services-row .service-col2 .service-col-icon2 { padding-top: 14px; padding-bottom: 14px; } .service__site-section .container .services-row .service-col2 .service-col-icon2 .service-col-icon-car { aspect-ratio: 1 / 1; } .service__site-section .container .services-row .component-c { background-color: #fff; transition: background-color 0.3s ease; } .service__site-section .container .services-row .component-c > a { display: flex; align-items: center; justify-content: space-between; width: 100%; color: inherit; text-decoration: none; } .service__site-section .container .services-row .component-c .component-graphic2 { display: block; color: var(--border-color); transition: color 0.3s ease, transform 0.3s ease; } .service__site-section .container .services-row .component-c .component-text3 { color: var(--secondary-color); transition: color 0.3s ease; } /* icon slide-in animation on hover, independent of active state */ .service__site-section .container .services-row .service-col1:hover .component-graphic2, .service__site-section .container .services-row .service-col2:hover .component-graphic2, .service__site-section .container .services-row .service-col3:hover .component-graphic2 { transform: translateX(8px); } /* service icon (car / gavel / headset) hover animation */ .service__site-section .container .services-row .service-col-icon-car, .service__site-section .container .services-row .card-support-icon { transition: transform 0.35s ease; } .service__site-section .container .services-row .service-col1:hover .service-col-icon-car, .service__site-section .container .services-row .service-col2:hover .service-col-icon-car, .service__site-section .container .services-row .service-col3:hover .card-support-icon { transform: scale(1.15) rotate(-8deg); } /* whole card lift animation on hover */ .service__site-section .container .services-row .service-col1, .service__site-section .container .services-row .service-col2, .service__site-section .container .services-row .service-col3 { transition: transform 0.35s ease, box-shadow 0.35s ease; } .service__site-section .container .services-row .service-col1:hover, .service__site-section .container .services-row .service-col2:hover, .service__site-section .container .services-row .service-col3:hover { transform: translateY(-8px); box-shadow: 0px 14px 24px 0px rgba(0, 0, 0, 0.25); z-index: 6; } /* active / inactive state — col2 is active by default, hovering another card swaps it in and drops col2 back to inactive */ .service__site-section .container .services-row .service-col2 .card-service-col-content { z-index: 2; background-color: rgba(255, 255, 255, 0.95); } .service__site-section .container .services-row .service-col2 .component-c { background-color: var(--primary-color); } .service__site-section .container .services-row .service-col2 .component-c .component-graphic2, .service__site-section .container .services-row .service-col2 .component-c .component-text3 { color: var(--white-color); } .service__site-section .container .services-row:has(.service-col1:hover) .service-col1 .card-service-col-content, .service__site-section .container .services-row:has(.service-col3:hover) .service-col3 .card-service-col-content { z-index: 2; background-color: rgba(255, 255, 255, 0.95); } .service__site-section .container .services-row:has(.service-col1:hover) .service-col1 .component-c, .service__site-section .container .services-row:has(.service-col3:hover) .service-col3 .component-c { background-color: var(--primary-color); } .service__site-section .container .services-row:has(.service-col1:hover) .service-col1 .component-c .component-graphic2, .service__site-section .container .services-row:has(.service-col1:hover) .service-col1 .component-c .component-text3, .service__site-section .container .services-row:has(.service-col3:hover) .service-col3 .component-c .component-graphic2, .service__site-section .container .services-row:has(.service-col3:hover) .service-col3 .component-c .component-text3 { color: var(--white-color); } .service__site-section .container .services-row:has(.service-col1:hover) .service-col2 .card-service-col-content, .service__site-section .container .services-row:has(.service-col3:hover) .service-col2 .card-service-col-content { z-index: 1; background-color: rgba(255, 255, 255, 0.79); } .service__site-section .container .services-row:has(.service-col1:hover) .service-col2 .component-c, .service__site-section .container .services-row:has(.service-col3:hover) .service-col2 .component-c { background-color: #fff; } .service__site-section .container .services-row:has(.service-col1:hover) .service-col2 .component-c .component-graphic2, .service__site-section .container .services-row:has(.service-col3:hover) .service-col2 .component-c .component-graphic2 { color: var(--border-color); } .service__site-section .container .services-row:has(.service-col1:hover) .service-col2 .component-c .component-text3, .service__site-section .container .services-row:has(.service-col3:hover) .service-col2 .component-c .component-text3 { color: var(--secondary-color); } .service__site-section .container .services-rect { position: absolute; z-index: 0; top: 0; left: 50%; width: calc(100% - 539px); height: 100%; max-width: 22%; border-left: 1px dashed var(--border-color); border-right: 1px dashed var(--border-color);transform: translateX(-50%); } /* end services */ /* brand-type */ .brand-type__site-section { container: brand-type / inline-size; position: relative; background-color: #f2eeef; padding: 60px 0px; } .brand-type__site-section .container { display: flex; flex-direction: column; align-items: center; gap: 35px; } .brand-type__site-section .brand-type-decor { position: absolute; top: 328px; right: 0; width: 130px; height: 219px; transform-origin: 50% 50%; rotate: 180deg; animation: brand-type-decor-float 4s ease-in-out infinite; } .brand-type__site-section .brand-type-decor .group-mask { position: absolute; top: 0; left: 0; right: 0; width: 100%; } @keyframes brand-type-decor-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } } .brand-type__site-section .container .brand-type-col { container: brand-type-col / inline-size; width: 100%; display: flex; flex-direction: column; gap: 45px; color: var(--secondary-color); font-size: 15px; font-family: var(--primary-font-site); font-weight: 400; line-height: 1; padding-bottom: 1px; } .brand-type__site-section .container .brand-type-col .brand-type-row { display: flex; align-items: flex-start; gap: 26px; } .brand-type__site-section .container .brand-type-col .brand-type-row .brand-type-card { width: 100%; display: flex; flex-direction: column; gap: 17px; flex-grow: 1; text-align: center; transition: transform 0.3s ease; } .brand-type__site-section .container .brand-type-col .brand-type-row .brand-type-card > a { display: flex; flex-direction: column; gap: 17px; width: 100%; color: inherit; text-decoration: none; } .brand-type__site-section .container .brand-type-col .brand-type-row .brand-type-card .brand-type-card-logo-circle { overflow: hidden; border: 1px solid rgba(121, 121, 121, 0.35); border-radius: 5px; transition: border-color 0.3s ease, box-shadow 0.3s ease;width: 100%;display: flex;align-items: center;justify-content: center;min-height: 119px; } .brand-type__site-section .container .brand-type-col .brand-type-row .brand-type-card .brand-type-card-logo { transition: transform 0.35s ease; } .brand-type__site-section .container .brand-type-col .brand-type-row .brand-type-card .brand-type-card-text { text-transform: capitalize; transition: color 0.3s ease; } /* hover animation — card lifts, logo zooms in, active colors handled below */ .brand-type__site-section .container .brand-type-col .brand-type-row .brand-type-card:hover { transform: translateY(-6px); } .brand-type__site-section .container .brand-type-col .brand-type-row .brand-type-card:hover .brand-type-card-logo-circle { box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.12); } .brand-type__site-section .container .brand-type-col .brand-type-row .brand-type-card:hover .brand-type-card-logo { transform: scale(1.1); } .brand-type__site-section .container .brand-type-col .brand-row1 .brand-card1 { margin-bottom: -1px; color: var(--primary-color); padding-bottom: 1px; } .brand-type__site-section .container .brand-type-col .brand-row1 .brand-card1 .brand-type-card-logo-circle { padding: 28px 16px; border: 1px solid rgba(var(--primary-color-rgb), 0.52); } /* active / inactive state — brand-card1 (Toyota) is active by default; hovering another card in the same row activates it and drops brand-card1 back to inactive */ .brand-type__site-section .container .brand-type-col .brand-type-row .brand-type-card:hover .brand-type-card-logo-circle { border-color: rgba(var(--primary-color-rgb), 0.52); } .brand-type__site-section .container .brand-type-col .brand-type-row .brand-type-card:hover .brand-type-card-text { color: var(--primary-color); } .brand-type__site-section .container .brand-type-col .brand-row1:has(.brand-type-card:hover) .brand-card1:not(:hover) .brand-type-card-logo-circle { border-color: rgba(121, 121, 121, 0.35); } .brand-type__site-section .container .brand-type-col .brand-row1:has(.brand-type-card:hover) .brand-card1:not(:hover) .brand-type-card-text { color: var(--secondary-color); } .brand-type__site-section .container .brand-type-col .brand-row1 .brand-card2 .brand-type-card-logo-circle { padding: 28px 21px; } .brand-type__site-section .container .brand-type-col .brand-row1 .brand-card3 .brand-type-card-logo-circle { padding: 28px 23px; } .brand-type__site-section .container .brand-type-col .brand-row1 .brand-card4 .brand-type-card-logo-circle { padding: 28px 27px; } .brand-type__site-section .container .brand-type-col .brand-row1 .brand-card5 .brand-type-card-logo-circle { padding: 28px 27px; } .brand-type__site-section .container .brand-type-col .brand-row1 .brand-card6 .brand-type-card-logo-circle { padding: 28px; } .brand-type__site-section .container .brand-type-col .brand-row1 .brand-card7 .brand-type-card-logo-circle { padding: 28px 27px; } .brand-type__site-section .container .brand-type-col .brand-row1 .brand-card8 .brand-type-card-logo-circle { padding: 28px 25px; } .brand-type__site-section .container .brand-type-col .brand-row1 .brand-card9 .brand-type-card-logo-circle { padding: 28px 18px; } .brand-type__site-section .container .brand-type-col .brand-row2 .brand-card1 .brand-type-card-logo-circle { padding: 34px 3px; } .brand-type__site-section .container .brand-type-col .brand-row2 .brand-card2 .brand-type-card-logo-circle { padding: 29px 6px; } .brand-type__site-section .container .brand-type-col .brand-row2 .brand-card3 { margin-bottom: -1px; padding-bottom: 1px; } .brand-type__site-section .container .brand-type-col .brand-row2 .brand-card3 .brand-type-card-logo-circle { padding: 32px 8px; } .brand-type__site-section .container .brand-type-col .brand-row2 .brand-card4 { margin-bottom: -1px; padding-bottom: 1px; } .brand-type__site-section .container .brand-type-col .brand-row2 .brand-card4 .brand-type-card-logo-circle { padding: 33px 7px; } .brand-type__site-section .container .brand-type-col .brand-row2 .brand-card5 { margin-bottom: -1px; padding-bottom: 1px; } .brand-type__site-section .container .brand-type-col .brand-row2 .brand-card5 .brand-type-card-logo-circle { padding: 37px 7px; } .brand-type__site-section .container .brand-type-col .brand-row2 .brand-card6 .brand-type-card-logo-circle { padding: 32px 9px; } .brand-type__site-section .container .brand-type-col .brand-row2 .brand-card7 .brand-type-card-logo-circle { padding: 33px 10px; } .brand-type__site-section .container .brand-type-col .brand-row2 .brand-card8 .brand-type-card-logo-circle { padding: 27px 9px; } .brand-type__site-section .container .brand-type-col .brand-row2 .brand-card8 .brand-type-card-logo { rotate: 180deg; } .brand-type__site-section .container .brand-type-col .brand-row2 .brand-card9 .brand-type-card-logo-circle { padding: 25px 15px; } .brand-type__site-section .container .brand-type-col .brand-row2 .brand-card9 .brand-type-card-logo { rotate: 180deg; } /* end brand-type */ /* testimonial */ .testimonial__site-section { container: testimonial / inline-size; position: relative; padding: 60px 0; } .testimonial__site-section .container { display: flex; flex-direction: column; align-items: flex-end; gap: 35px;} .testimonial__site-section .testimonial__tesimonila { position: absolute; z-index: 3; bottom: 143px; left: 66px; width: calc(100% - 63px); max-width: 415px; } .testimonial__site-section .container .testimonial__row { position: relative; z-index: 2; margin-left: auto; width: 68%; max-width: 1350px; display: flex; align-items: flex-start; gap: 0; } .testimonial__site-section .testimonial__decor { position: relative; flex-shrink: 0; width: 130px; height: 219px; transform-origin: 50% 50%; } .testimonial__site-section .testimonial__decor{ position: absolute; top: 0; left: 0; right: 0; max-width: 100%; } .testimonial__site-section .testimonial__decor { animation: testimonial-decor-float 4s ease-in-out infinite; } @keyframes testimonial-decor-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } } .testimonial__site-section .container .testimonial__row .testimonial__col { container: testimonial-col / inline-size; /* margin-top: 60px; */ display: flex; flex-direction: column; gap: 35px; flex-grow: 1; text-align: left; } .testimonial__site-section .container .testimonial__row .testimonial__col .section-heading3 { margin-left: 1px; align-self: start; } .testimonial__site-section .container .testimonial__row .testimonial__col .service-card-a { display: flex; align-items: flex-start; gap: 17px; font-family: var(--primary-font-site); } .testimonial__site-section .container .testimonial__row .testimonial__col .service-card-a .service-card-inner1-frame { flex-shrink: 0; width: 28%; min-width: 160px; max-width: 240px; display: flex; align-items: center; justify-content: center; border-radius: 3px; overflow: hidden;border: 1px solid var(--border-color);min-height: 228px; } .testimonial__site-section .container .testimonial__row .testimonial__col .service-card-a .service-card-inner1-frame .service-card-inner1 { max-width: 100%; height: auto; display: block; } .testimonial__site-section .container .testimonial__row .testimonial__col .service-card-b { display: flex; align-items: flex-start; justify-content: center; gap: 17px; flex-grow: 1; font-family: var(--primary-font-site); } .testimonial__site-section .container .testimonial__row .testimonial__col .service-card-b .service-card-inner2-frame { flex-shrink: 0; min-height: 205px; width: 28%; display: flex; align-items: center; justify-content: center; border-radius: 3px; overflow: hidden;border: var(--border-color) 1px solid; } .testimonial__site-section .container .testimonial__row .testimonial__col .service-card-b .service-card-inner2-frame .service-card-inner2 { max-width: 100%; height: auto; display: block;max-height: 205px; } .testimonial__site-section .container .testimonial__row-bottom { container: testimonial-row-bottom / inline-size; margin-left: auto; width: 68%; max-width: 1350px; display: flex; align-items: flex-start; gap: 24px; font-family: var(--primary-font-site); } .testimonial__site-section .testimonial__group-left { position: absolute; /* margin-top: 133px; */ width: 541px; flex-shrink: 0; /* padding: 37px 94px 93px 94px; */bottom: 0;left: 0; min-height: 143px;display: flex;align-items: center; } .testimonial__site-section .testimonial__group-left .testimonial__graphic { position: absolute; top: 0; left: 0; right: 0; height: 143px; } .testimonial__site-section .testimonial__group-left .testimonial__img { position: relative; z-index: 1; margin-left: auto; width: 137px; animation: testimonial-chevron-slide 2.4s ease-in-out infinite; } @keyframes testimonial-chevron-slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } } .testimonial__site-section .container .testimonial__row-bottom .service-card-b { display: flex; align-items: flex-start; justify-content: center; gap: 17px; flex-grow: 1; } .testimonial__site-section .container .testimonial__row-bottom .service-card-b .service-card-inner2-frame { flex-shrink: 0; min-width: 160px; max-width: 240px; display: flex; align-items: center; justify-content: center; border-radius: 3px; overflow: hidden; } .testimonial__site-section .container .testimonial__row-bottom .service-card-b .service-card-inner2-frame .service-card-inner2 { max-width: 100%; height: auto; display: block; } .testimonial__site-section .left-site-content1 .left-site-content-kid-star1 { margin-left: -2px; } .testimonial__site-section .left-site-content1 .left-site-content-kid-star5 { margin-right: -2px; } .testimonial__site-section .left-site-content2 .left-site-content-kid-star1 { margin-left: -2px; } .testimonial__site-section .left-site-content2 .left-site-content-kid-star5 { margin-right: -2px; } /* left-site-content */ .left-site-content { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 17px; text-align: left;width: 70%; } .left-site-content .left-site-content-graphic1 { position: absolute; z-index: 1; top: 128px; left: 39px; width: 20px; height: 17px; } .left-site-content .left-site-content-service-card1 { width: 100%; /* max-width: 528px; */ display: flex; flex-direction: column; gap: 12px; color: var(--dark-color); background-color: var(--white-color); padding: 20px 14px; border: 1px solid var(--border-color); border-radius: 3px; transition: transform 0.3s ease, box-shadow 0.3s ease;min-height: 129px; } .left-site-content .left-site-content-service-card1:hover {/* transform: translateY(-6px); */ box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.12); } .left-site-content .left-site-content-service-card1 .left-site-content-subtitle { font-size: 23px; font-weight: 600; text-transform: capitalize; line-height: 1.043; } .left-site-content .left-site-content-service-card1 .left-site-content-text-service { margin-right: 1px; } .left-site-content .left-site-content-service-card1 .left-site-content-text-service a { color: var(--primary-color); } .left-site-content .left-site-content-bottom-text { width: 100%; max-width: 443px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .left-site-content .left-site-content-bottom-text .left-site-content-service-card2 { display: flex; align-items: flex-start; justify-content: space-between; align-self: stretch; color: var(--primary-color); font-size: 18px; font-weight: 600; line-height: 1.333; } .left-site-content .left-site-content-bottom-text .left-site-content-service-card2 .left-site-content-text { text-align: left; } .left-site-content .left-site-content-bottom-text .left-site-content-service-card2 .left-site-content-circle { width: 35px; height: 35px; flex-shrink: 0; color: var(--secondary-color); background-color: var(--border-color); padding: 9px; border-radius: 50%; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; animation: testimonial-circle-pulse 2.2s ease-out infinite;transform: rotate(-45deg);display: flex;align-items: center;justify-content: center; } .left-site-content .left-site-content-bottom-text .left-site-content-service-card2 .left-site-content-circle:hover { color: var(--white-color); background-color: var(--primary-color); transform: scale(1.15) rotate(-45deg); } .left-site-content .left-site-content-bottom-text .left-site-content-service-card2 .left-site-content-circle > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: inherit; text-decoration: none; } .left-site-content .left-site-content-bottom-text .left-site-content-service-card2 .left-site-content-circle .left-site-content-graphic2 { display: block; rotate: 45deg; transform-origin: 50% 50%; height: 11px; transition: transform 0.3s ease; } .left-site-content .left-site-content-bottom-text .left-site-content-service-card2 .left-site-content-circle:hover .left-site-content-graphic2 { transform: rotate(45deg); } @keyframes testimonial-circle-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0.35); } 70% { box-shadow: 0 0 0 8px rgba(var(--primary-color-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0); } } .left-site-content .left-site-content-bottom-text .left-site-content-row { display: flex; align-items: flex-start; gap: 11px; color: var(--secondary-color); font-size: 15px; font-weight: 400; line-height: 1.4; } .left-site-content .left-site-content-bottom-text .left-site-content-row .left-site-content-img { width: 27px; flex-shrink: 0; } .left-site-content .left-site-content-bottom-text .left-site-content-row .left-site-content-text-usa { text-align: left; } .left-site-content .left-site-content-bottom-text .left-site-content-row-bottom { display: flex; align-items: flex-start; gap: 2px; } .left-site-content .left-site-content-bottom-text .left-site-content-row-bottom .left-site-content-kid-star { margin: -2px 0; width: 20px; flex-shrink: 0; animation: testimonial-star-twinkle 2.4s ease-in-out infinite; } .left-site-content .left-site-content-bottom-text .left-site-content-row-bottom .left-site-content-kid-star:nth-child(1) { animation-delay: 0s; } .left-site-content .left-site-content-bottom-text .left-site-content-row-bottom .left-site-content-kid-star:nth-child(2) { animation-delay: 0.15s; } .left-site-content .left-site-content-bottom-text .left-site-content-row-bottom .left-site-content-kid-star:nth-child(3) { animation-delay: 0.3s; } .left-site-content .left-site-content-bottom-text .left-site-content-row-bottom .left-site-content-kid-star:nth-child(4) { animation-delay: 0.45s; } .left-site-content .left-site-content-bottom-text .left-site-content-row-bottom .left-site-content-kid-star:nth-child(5) { animation-delay: 0.6s; } @keyframes testimonial-star-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } } /* end left-site-content */ /* end testimonial */ /* auction */ .auction__site-section { container: auction / inline-size; position: relative; font-family: 'IBM Plex Sans'; font-weight: 400; background: url(../images/auction-section/auction-section.png) bottom / cover no-repeat; padding: 60px 24px 365px 24px; overflow: hidden; } .auction__site-section .container { display: flex; flex-direction: column; align-items: center; gap: 25px; } .auction__site-section .auction__img--1 { position: absolute; top: 276px; left: 50%; translate: -50% 0; /* rotate: -171deg; */ transform-origin: 50% 50%; margin-left: 371px; width: calc((100% - 32px) * 0.2197); max-width: 228px; animation: auction-gavel-swing 2.6s ease-in-out infinite; } .auction__site-section .auction__group { position: absolute; top: 294px; left: 50%; translate: -50% 0; margin-left: -72px; width: calc(100% - 32px); height: 671px; max-width: 312px; } .auction__site-section .auction__group .auction__rect { position: absolute; rotate: 8deg; transform-origin: 50% 50%; width: 179px; height: 582px; } .auction__site-section .auction__group .auction__rect--1 { top: 78px; left: 27px; background-color: #d9d9d9; } .auction__site-section .auction__group .auction__rect--2 { top: 11px; left: 106px; opacity: 0.63; background-color: var(--primary-color); animation: auction-stripe-pulse 3s ease-in-out infinite; } .auction__site-section .auction__img--2 { position: absolute; z-index: 2; top: 386px; left: 50%; translate: -50% 0; /* rotate: 180deg; */ transform-origin: 50% 50%; width: calc(100% - 32px); max-width: 1038px; animation: auction-car-drive 5s ease-in-out infinite; } .auction__site-section .container .auction__text { width: 100%; max-width: 958px; color: #000; --min-font-size: 16; --max-font-size: 20; font-size: var(--interpolate); line-height: 1.75; text-align: center; } .auction__site-section .container .btn-banner2 { position: relative; z-index: 1; width: 224px; padding: 11px 9px; } @keyframes auction-gavel-swing { 0%, 100% { rotate: -0deg; } 50% { rotate: 7deg; } } @keyframes auction-stripe-pulse { 0%, 100% { opacity: 0.63; } 50% { opacity: 0.85; } } @keyframes auction-car-drive { 0%, 100% { translate: calc(-50% - 18px) 0; } 50% { translate: calc(-50% + 18px) 0; } } /* end auction */ /* how-to-buy */ .how-to-buy__site-section { container: how-to-buy / inline-size; background-color: #fff; padding: 60px 0px; } .how-to-buy__site-section .container { display: flex; flex-direction: column; align-items: center; gap: 40px; } .how-to-buy__site-section .section-heading4 { text-align: left; } .how-to-buy__site-section .container .how-to-buy__row-top { width: 100%; display: flex; align-items: center; justify-content: space-between; } .how-to-buy__site-section .container .how-to-buy__row-top .how-to-buy__btn { width: 192px; flex-shrink: 0; } .how-to-buy__site-section .container .how-to-buy__row { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; font-family: var(--primary-font-site); } /* circle-how-card-a */ .circle-how-card-a { position: relative; width: 232px; height: 232px; flex-shrink: 0; text-align: center; padding: 14px; border: 1px solid var(--border-color); border-radius: 50%; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } .circle-how-card-a:hover { transform: translateY(-10px) rotate(-3deg); } .circle-how-card-a .card-circle1 { width: 202px; height: 202px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; padding: 0 4px; border: 5px solid var(--secondary-color); border-radius: 50%; transition: border-color 0.3s ease; } .circle-how-card-a .card-circle1 .card-circle-text-brand1, .card-circle-text-brand1, .how-to-buy__site-section .circle-how-card4 .card-circle-text-brand3, .card-circle-text-brand3 { color: var(--secondary-color); text-transform: capitalize; transition: color 0.3s ease;font-size: 16px;font-weight: 700; } .circle-how-card-a .card-circle1 .card-circle-text-brand2 { text-transform: capitalize; } .circle-how-card-a .circle-how-card-circle1 { position: absolute; z-index: 1; top: 151px; left: -1px; width: 60px; height: 60px; background-color: var(--secondary-color); padding: 18px 0; transition: background-color 0.3s ease, transform 0.3s ease; animation: how-to-buy-icon-pulse 2.4s ease-out infinite; } .circle-how-card-a:hover .circle-how-card-circle1 { transform: scale(1.15) rotate(-10deg); } /* end circle-how-card-a */ /* circle-how-card-b */ .circle-how-card-b { position: relative; width: 232px; height: 232px; flex-shrink: 0; text-align: center; padding: 14px; border: 1px solid var(--border-color); border-radius: 50%; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } .circle-how-card-b:hover { transform: translateY(-10px) rotate(3deg); } .circle-how-card-b .card-circle2 { width: 202px; height: 202px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; padding: 0 4px; border-radius: 50%; transition: border-color 0.3s ease; } .circle-how-card-b .card-circle2 .card-circle-text-brand3 { color: var(--secondary-color); text-transform: capitalize; transition: color 0.3s ease; } .circle-how-card-b .card-circle2 .card-circle-text-brand4 { text-transform: capitalize; } .circle-how-card-b .circle-how-card-circle2 { position: absolute; z-index: 1; top: 151px; left: -1px; width: 60px; height: 60px; padding: 19px 0; transition: background-color 0.3s ease, transform 0.3s ease; animation: how-to-buy-icon-pulse 2.4s ease-out infinite; } .circle-how-card-b:hover .circle-how-card-circle2 { transform: scale(1.15) rotate(10deg); } /* end circle-how-card-b */ .how-to-buy__site-section .circle-how-card1 .circle-how-card-circle1 { padding-left: 15px; padding-right: 15px; } .how-to-buy__site-section .circle-how-card2 { margin-top: 106px; } .how-to-buy__site-section .circle-how-card2 .card-circle1 { border: 5px solid var(--primary-color); } .how-to-buy__site-section .circle-how-card2 .card-circle-text-brand1 { color: var(--primary-color); } .how-to-buy__site-section .circle-how-card2 .circle-how-card-circle1 { background-color: var(--primary-color); padding-left: 18px; padding-right: 18px; } .how-to-buy__site-section .circle-how-card3 .card-circle2 { border: 5px solid var(--secondary-color); } .how-to-buy__site-section .circle-how-card3 .circle-how-card-circle2 { background-color: var(--secondary-color); padding-left: 18px; padding-right: 18px; } .how-to-buy__site-section .circle-how-card4 { margin-top: 106px; } .how-to-buy__site-section .circle-how-card4 .card-circle2 { border: 5px solid var(--primary-color); } .how-to-buy__site-section .circle-how-card4 .card-circle-text-brand3 { color: var(--primary-color); } .how-to-buy__site-section .circle-how-card4 .circle-how-card-circle2 { background-color: var(--primary-color); padding-left: 19px; padding-right: 19px; } .how-to-buy__site-section .circle-how-card5 .circle-how-card-circle1 { padding: 19px 16px; } .how-to-buy__site-section .circle-how-card1 .circle-how-card-circle1 { animation-delay: 0s; } .how-to-buy__site-section .circle-how-card2 .circle-how-card-circle1 { animation-delay: 0.3s; } .how-to-buy__site-section .circle-how-card3 .circle-how-card-circle2 { animation-delay: 0.6s; } .how-to-buy__site-section .circle-how-card4 .circle-how-card-circle2 { animation-delay: 0.9s; } .how-to-buy__site-section .circle-how-card5 .circle-how-card-circle1 { animation-delay: 1.2s; } @keyframes how-to-buy-icon-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0.35); } 70% { box-shadow: 0 0 0 10px rgba(var(--primary-color-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0); } } /* active / inactive state — cards 2 & 4 are active (red) by default; hovering any card makes it active and reverts every other card to inactive (black) */ .how-to-buy__site-section .container .how-to-buy__row .circle-how-card1:hover .card-circle1, .how-to-buy__site-section .container .how-to-buy__row .circle-how-card2:hover .card-circle1, .how-to-buy__site-section .container .how-to-buy__row .circle-how-card5:hover .card-circle1 { border-color: var(--primary-color); } .how-to-buy__site-section .container .how-to-buy__row .circle-how-card1:hover .circle-how-card-circle1, .how-to-buy__site-section .container .how-to-buy__row .circle-how-card2:hover .circle-how-card-circle1, .how-to-buy__site-section .container .how-to-buy__row .circle-how-card5:hover .circle-how-card-circle1 { background-color: var(--primary-color); } .how-to-buy__site-section .container .how-to-buy__row .circle-how-card1:hover .card-circle-text-brand1, .how-to-buy__site-section .container .how-to-buy__row .circle-how-card2:hover .card-circle-text-brand1, .how-to-buy__site-section .container .how-to-buy__row .circle-how-card5:hover .card-circle-text-brand1 { color: var(--primary-color); } .how-to-buy__site-section .container .how-to-buy__row .circle-how-card3:hover .card-circle2, .how-to-buy__site-section .container .how-to-buy__row .circle-how-card4:hover .card-circle2 { border-color: var(--primary-color); } .how-to-buy__site-section .container .how-to-buy__row .circle-how-card3:hover .circle-how-card-circle2, .how-to-buy__site-section .container .how-to-buy__row .circle-how-card4:hover .circle-how-card-circle2 { background-color: var(--primary-color); } .how-to-buy__site-section .container .how-to-buy__row .circle-how-card3:hover .card-circle-text-brand3, .how-to-buy__site-section .container .how-to-buy__row .circle-how-card4:hover .card-circle-text-brand3 { color: var(--primary-color); } .how-to-buy__site-section .container .how-to-buy__row:has(.circle-how-card1:hover, .circle-how-card2:hover, .circle-how-card3:hover, .circle-how-card4:hover, .circle-how-card5:hover) .circle-how-card1:not(:hover) .card-circle1, .how-to-buy__site-section .container .how-to-buy__row:has(.circle-how-card1:hover, .circle-how-card2:hover, .circle-how-card3:hover, .circle-how-card4:hover, .circle-how-card5:hover) .circle-how-card2:not(:hover) .card-circle1, .how-to-buy__site-section .container .how-to-buy__row:has(.circle-how-card1:hover, .circle-how-card2:hover, .circle-how-card3:hover, .circle-how-card4:hover, .circle-how-card5:hover) .circle-how-card5:not(:hover) .card-circle1 { border-color: var(--secondary-color); } .how-to-buy__site-section .container .how-to-buy__row:has(.circle-how-card1:hover, .circle-how-card2:hover, .circle-how-card3:hover, .circle-how-card4:hover, .circle-how-card5:hover) .circle-how-card1:not(:hover) .circle-how-card-circle1, .how-to-buy__site-section .container .how-to-buy__row:has(.circle-how-card1:hover, .circle-how-card2:hover, .circle-how-card3:hover, .circle-how-card4:hover, .circle-how-card5:hover) .circle-how-card2:not(:hover) .circle-how-card-circle1, .how-to-buy__site-section .container .how-to-buy__row:has(.circle-how-card1:hover, .circle-how-card2:hover, .circle-how-card3:hover, .circle-how-card4:hover, .circle-how-card5:hover) .circle-how-card5:not(:hover) .circle-how-card-circle1 { background-color: var(--secondary-color); } .how-to-buy__site-section .container .how-to-buy__row:has(.circle-how-card1:hover, .circle-how-card2:hover, .circle-how-card3:hover, .circle-how-card4:hover, .circle-how-card5:hover) .circle-how-card1:not(:hover) .card-circle-text-brand1, .how-to-buy__site-section .container .how-to-buy__row:has(.circle-how-card1:hover, .circle-how-card2:hover, .circle-how-card3:hover, .circle-how-card4:hover, .circle-how-card5:hover) .circle-how-card2:not(:hover) .card-circle-text-brand1, .how-to-buy__site-section .container .how-to-buy__row:has(.circle-how-card1:hover, .circle-how-card2:hover, .circle-how-card3:hover, .circle-how-card4:hover, .circle-how-card5:hover) .circle-how-card5:not(:hover) .card-circle-text-brand1 { color: var(--secondary-color); } .how-to-buy__site-section .container .how-to-buy__row:has(.circle-how-card1:hover, .circle-how-card2:hover, .circle-how-card3:hover, .circle-how-card4:hover, .circle-how-card5:hover) .circle-how-card3:not(:hover) .card-circle2, .how-to-buy__site-section .container .how-to-buy__row:has(.circle-how-card1:hover, .circle-how-card2:hover, .circle-how-card3:hover, .circle-how-card4:hover, .circle-how-card5:hover) .circle-how-card4:not(:hover) .card-circle2 { border-color: var(--secondary-color); } .how-to-buy__site-section .container .how-to-buy__row:has(.circle-how-card1:hover, .circle-how-card2:hover, .circle-how-card3:hover, .circle-how-card4:hover, .circle-how-card5:hover) .circle-how-card3:not(:hover) .circle-how-card-circle2, .how-to-buy__site-section .container .how-to-buy__row:has(.circle-how-card1:hover, .circle-how-card2:hover, .circle-how-card3:hover, .circle-how-card4:hover, .circle-how-card5:hover) .circle-how-card4:not(:hover) .circle-how-card-circle2 { background-color: var(--secondary-color); } .how-to-buy__site-section .container .how-to-buy__row:has(.circle-how-card1:hover, .circle-how-card2:hover, .circle-how-card3:hover, .circle-how-card4:hover, .circle-how-card5:hover) .circle-how-card3:not(:hover) .card-circle-text-brand3, .how-to-buy__site-section .container .how-to-buy__row:has(.circle-how-card1:hover, .circle-how-card2:hover, .circle-how-card3:hover, .circle-how-card4:hover, .circle-how-card5:hover) .circle-how-card4:not(:hover) .card-circle-text-brand3 { color: var(--secondary-color); } /* end how-to-buy */ /* footer */ .footer-main-site { container: footer1 / inline-size; position: relative; display: flex; flex-direction: column; align-items: center; font-family: 'IBM Plex Sans'; background-color: var(--secondary-color); padding: 79px 24px 20px 24px; border-top: 1px solid var(--border-color); } .footer-main-site .footer-img { position: absolute; top: 0; left: 0; /* width: calc(100% - 0px); max-width: 525px; */} .footer-main-site .footer-img-circle { position: absolute; z-index: 1; bottom: 0; right: 0;/* rotate: 180deg; transform-origin: 50% 50%; width: calc(100% - 1196px); max-width: 608px; */ } .footer-main-site .container .footer-col1 { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 89px; } /* footer-contact-us (Get In Touch banner) */ .footer-main-site .container .footer-col1 .footer-contact-us { position: relative; width: 100%; max-width: 1200px; display: flex; align-items: stretch; flex-shrink: 0; background: url(../images/home/contact-us.png) center / cover no-repeat; border-radius: 7px; overflow: hidden; box-shadow: 0px 10px 24px 0px rgba(0, 0, 0, 0.18);padding: 26px 70px; } .footer-main-site .container .footer-col1 .footer-contact-us::after { content: ''; position: absolute; z-index: 1; inset: 0; background-color: rgba(15, 15, 16, 0.45); } .footer-main-site .container .footer-col1 .footer-contact-us .footer-contact-us__photo { position: relative; width: 48%; } .footer-main-site .container .footer-col1 .footer-contact-us .footer-contact-us__photo .section-heading .section-heading__title { font-size: 28px;font-weight: 400; } .footer-main-site .container .footer-col1 .footer-contact-us .footer-contact-us__heading { position: relative; z-index: 2; /* padding: 20px 24px 20px 32px; */ } .footer-main-site .container .footer-col1 .footer-contact-us .footer-contact-us__heading .section-heading__label { color: rgba(255, 255, 255, 0.75); } .footer-main-site .container .footer-col1 .footer-contact-us .footer-contact-us__heading .section-heading__title { color: var(--white-color); } .footer-main-site .container .footer-col1 .footer-contact-us .footer-contact-us__actions { position: relative; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 28px; flex-grow: 1; /* background-color: var(--white-color); */ /* padding: 16px 32px; */ } .footer-main-site .container .footer-col1 .footer-contact-us .footer-contact-us__actions .footer-contact-us__whatsapp-link { display: flex; align-items: center; gap: 18px; color: inherit; text-decoration: none; } .footer-main-site .container .footer-col1 .footer-contact-us .footer-contact-us__actions .footer-contact-us__whatsapp-link:hover .footer-contact-us__whatsapp-icon-wrap { transform: scale(1.08); } .footer-main-site .container .footer-col1 .footer-contact-us .footer-contact-us__actions .footer-contact-us__whatsapp-icon-wrap { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; flex-shrink: 0; background: radial-gradient(50% 50% at 50% 50%, var(--whatsapp-green-start) 0%, var(--whatsapp-green-end) 100%) top left / auto auto no-repeat; /* padding: 14px; */display: flex;align-items: center;justify-content: center; border-radius: 50%; box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.25); transition: transform 0.3s ease; animation: header__whatsapp-pulse 1.8s ease-out infinite; } .footer-main-site .container .footer-col1 .footer-contact-us .footer-contact-us__actions .footer-contact-us__whatsapp-icon-wrap .footer-contact-us__whatsapp-icon { width: 100%; aspect-ratio: 1 / 1; } .footer-main-site .container .footer-col1 .footer-contact-us .footer-contact-us__actions .footer-contact-us__phone { color: var(--white-color); --min-font-size: 18; --max-font-size: 25; font-size: 28px; font-weight: 700; line-height: 1; white-space: nowrap; } .footer-main-site .container .footer-col1 .footer-contact-us .footer-contact-us__actions .footer-contact-us__btn { margin-left: auto; flex-shrink: 0; width: 168px; } /* end footer-contact-us */ .footer-main-site .container .footer-col1 .footer-container1 { width: 100%; max-width: 1320px; display: flex; flex-direction: column; gap: 19px; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; align-content: flex-start; row-gap: 10px; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col { width: 35%; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 17px; color: var(--font-light-color); font-size: 15px; font-weight: 400; line-height: 1.4; text-align: center; background-color: rgba(0, 0, 0, 0.17); padding: 0 24px 24px 24px; border: 1px dashed rgba(255, 255, 255, 0.5); border-radius: 3px; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col .card-footer-inner-col-frame-top { margin-top: -51px; width: 176px; background-color: var(--white-color); padding: 11px 9px 10px 10px; border: 1px dashed rgba(255, 255, 255, 0.33); border-radius: 5px; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col .card-footer-inner-col-text { margin-top: 10px; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col .card-footer-inner-col-container { display: flex; align-items: flex-start; gap: 11px; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col .card-footer-inner-col-container .card-footer-inner-col-link .card-footer-inner-col-group1 { aspect-ratio: 1 / 1; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col .card-footer-inner-col-container .card-footer-inner-col-link, .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col .card-footer-inner-col-container .card-footer-inner-col-circle-link1, .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col .card-footer-inner-col-container .card-footer-inner-col-circle-link2, .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col .card-footer-inner-col-container .card-footer-inner-col-circle-link3 { width: 40px; height: 40px; flex-shrink: 0; background-color: rgba(255, 255, 255, 0.17); /* padding: 12px; */ border-radius: 20px; transition: background-color 0.3s ease, transform 0.3s ease;display: flex;align-items: center;justify-content: center; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col .card-footer-inner-col-container .card-footer-inner-col-link:hover, .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col .card-footer-inner-col-container .card-footer-inner-col-circle-link1:hover, .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col .card-footer-inner-col-container .card-footer-inner-col-circle-link2:hover, .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col .card-footer-inner-col-container .card-footer-inner-col-circle-link3:hover { background-color: var(--primary-color); } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col .card-footer-inner-col-container .card-footer-inner-col-circle-link1 .card-footer-inner-col-graphic1 { aspect-ratio: 761542 / 762829; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col .card-footer-inner-col-container .card-footer-inner-col-circle-link2 { width: 40px; height: 40px; flex-shrink: 0; background-color: rgba(255, 255, 255, 0.17); padding: 13px; border-radius: 50%; transition: background-color 0.3s ease, transform 0.3s ease; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col .card-footer-inner-col-container .card-footer-inner-col-circle-link2 .card-footer-inner-col-graphic2 { height: 15px; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col .card-footer-inner-col-container .card-footer-inner-col-circle-link3 { width: 40px; height: 40px; flex-shrink: 0; background-color: rgba(255, 255, 255, 0.17); padding: 11px 10px; border-radius: 50%; transition: background-color 0.3s ease, transform 0.3s ease; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col .card-footer-inner-col-container .card-footer-inner-col-circle-link3 .card-footer-inner-col-group2 { aspect-ratio: 2097152 / 1782583; } /* active / inactive state — the first icon (card-footer-inner-col-link) is active (red) by default; hovering any other icon activates it and drops the first one back to inactive */ .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col .card-footer-inner-col-container .card-footer-inner-col-circle-link1:hover, .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col .card-footer-inner-col-container .card-footer-inner-col-circle-link2:hover, .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col .card-footer-inner-col-container .card-footer-inner-col-circle-link3:hover { background-color: var(--primary-color); transform: translateY(-3px); } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col .card-footer-inner-col-container:has(.card-footer-inner-col-circle-link1:hover, .card-footer-inner-col-circle-link2:hover, .card-footer-inner-col-circle-link3:hover) .card-footer-inner-col-link { background-color: rgba(255, 255, 255, 0.17); } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col1 { width: 35%; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; flex-shrink: 0; text-align: left; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col1 .footer-text-heading1 { align-self: stretch; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col1 .footer-col2 { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col1 .footer-col2 .footer-col3 { width: 100%; max-width: 403px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col1 .footer-col2 .footer-col3 .footer-row-top1 { display: flex; align-items: flex-start; gap: 15px; align-self: stretch; color: var(--font-light-color); font-size: 14px; font-weight: 500; line-height: 1.5; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col1 .footer-col2 .footer-col3 .footer-row-top1 .footer-group { width: 19px; height: 26px; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col1 .footer-col2 .footer-col3 .footer-row-top1 .footer-text { flex-grow: 1; text-align: left;width: 85%; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col1 .footer-col2 .footer-col3 .footer-col4 { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col1 .footer-col2 .footer-col3 .footer-col4 .footer-row-top2 { width: 107px; display: flex; align-items: center; gap: 18px; color: var(--font-light-color); font-size: 14px; font-weight: 500; line-height: 1.857; text-decoration: none; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col1 .footer-col2 .footer-col3 .footer-col4 .footer-row-top2 .footer-graphic-left1 { width: 22px; height: 18px; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col1 .footer-col2 .footer-col3 .footer-col4 .footer-row-top2 .footer-text { flex-grow: 1; text-align: left; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col1 .footer-col2 .footer-col3 .footer-col4 .footer-row-bottom { display: flex; align-items: center; gap: 16px; align-self: stretch; color: var(--primary-color); font-size: 25px; font-weight: 700; line-height: 0.9; text-decoration: none; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col1 .footer-col2 .footer-col3 .footer-col4 .footer-row-bottom:hover{color: var(--white-color);} .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col1 .footer-col2 .footer-col3 .footer-col4 .footer-row-bottom .footer-graphic-left2 { width: 20px; height: 20px; flex-shrink: 0; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col1 .footer-col2 .footer-col3 .footer-col4 .footer-row-bottom .footer-subtitle { text-align: left; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col1 .footer-col2 .footer-member-sec { display: flex; align-items: center; gap: 19px; color: var(--primary-color); font-size: 22px; font-weight: 600; line-height: 0.818; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col1 .footer-col2 .footer-member-sec .footer-text-member-of { text-align: left; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col1 .footer-col2 .footer-member-sec .footer-jct-gold { width: 86px; flex-shrink: 0; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col2 { width: 18%; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; flex-shrink: 0; text-align: left; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col2 .footer-text-heading2 { align-self: stretch; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col2 .footer-list1 { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; color: var(--font-light-color); font-size: 16px; font-weight: 400; line-height: 1.375; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col2 .footer-list1 .footer-text-link-a { text-decoration: none; color: inherit; transition: color 0.2s ease; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col2 .footer-list1 .footer-text-link-a:hover { color: var(--primary-color); } .footer-main-site .container .footer-col1 .footer-container1 .footer-line { width: 100%; height: 0; align-self: start; border-top: 1px solid var(--border-color); } .footer-main-site .container .footer-col1 .footer-container1 .footer-container2 { container: footer-container2 / inline-size; margin-top: 1px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; align-content: flex-start; row-gap: 0; font-weight: 400; } .footer-main-site .container .footer-col1 .footer-container1 .footer-container2 .footer-list2 { display: flex; align-items: flex-start; gap: 31px; color: var(--font-light-color); font-size: 15px; line-height: 1.467; } .footer-main-site .container .footer-col1 .footer-container1 .footer-container2 .footer-list2 .footer-text-link-b { text-align: left; text-decoration: none; color: inherit; } .footer-main-site .container .footer-col1 .footer-container1 .footer-container2 .footer-list2 .footer-text-link-b:hover { color: var(--primary-color); } .footer-main-site .container .footer-col1 .footer-container1 .footer-container2 .footer-text-container a { text-decoration: none; } .footer-main-site .container .footer-col1 .footer-container1 .footer-container2 .footer-text-container a:hover{color: var(--white-color);} .footer-main-site .container .footer-col1 .footer-container1 .footer-container2 .footer-list2 .footer-text-link7 { color: var(--white-color); } .footer-main-site .container .footer-col1 .footer-container1 .footer-container2 .footer-text-container { color: var(--light-bg-color); font-size: 18px; line-height: 1.089; text-align: center; } /* end footer */ /* container queries */ @container header-topbar (width < 803px) { .header__main-site .header__topbar .container .header__topbar-inner { flex-direction: column; align-items: center; gap: 13px; } } @container header-topbar-inner (width < 480px) { .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left { flex-direction: column; align-items: center; gap: 13px; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-left .header__topbar-col { margin-top: 0; flex-direction: column; align-items: center; gap: 8px; } .header__main-site .header__topbar .container .header__topbar-inner .header__topbar-right { flex-direction: column; gap: 13px; } } @container header-brand-row-inner (width < 987px) { .header__main-site .header__brand-row .container .header__brand-row-inner { gap: 15px; } } @media screen and (max-width: 987px) { .header__main-site .header__nav-toggle { display: flex !important; } .header__main-site .header__nav { display: none !important; } .header__main-site .common__site-btns { display: none !important; } } @media screen and (min-width: 988px) { .header__main-site .header__nav-toggle { display: none !important; } } /* end header */ /* container queries (flex rows) — home sections */ @container counter (width < 971px) { .counter__site-section { padding: 26px 20px; gap: 22px; } .counter__marquee .counter__row { width: 860px; padding: 15px 30px; } } @container counter (width < 620px) { .counter__site-section { font-size: 15px; } .counter__marquee .counter__row { width: 620px; padding: 13px 22px; border-radius: 14px; } } @container welcome (width < 900px) { .welcome__frame-bottom { padding-left: 30px; } .welcome__row { /* flex-direction: column; */ align-items: flex-start; width: 100%; gap: 24px; } .welcome__column { width: 100%; max-width: 500px; } .welcome__line { display: none; } } @container services (width < 1224px) { .services-row { flex-wrap: wrap; align-items: center; gap: 35px;width: 100%; } .services-row > .service-col1 { width: 48% !important; max-width: 49%; } .services-row > .service-col2 { width: 48% !important; max-width: 49%; } .services-row > .service-col3 { width: 100% !important; max-width: 100%; } .service__site-section .container .services-row .card-service-col-content{max-width: 100%;} .services-rect { display: none; } } @container services (width < 433px) { .service__site-section { padding: 45px 16px; } .services-row { gap: 24px; } } @container brand-type-col (width < 991px) { .brand-type-row { flex-wrap: wrap; justify-content: center; row-gap: 28px; } .brand-type__site-section .container .brand-type-col .brand-type-row .brand-type-card{width: 18%;} .brand-type__site-section .container .brand-type-col .brand-type-row .brand-type-card:last-child, .brand-type__site-section .container .brand-type-col .brand-type-row .brand-type-card:last-child{display: none;} .brand-type-row > * { margin-left: unset !important; flex-grow: 0; width: calc((100% - 52px) / 3); } } @container brand-type-col (width < 600px) { .brand-type-row > * { width: calc((100% - 26px) / 2); } } @container testimonial (width < 1349px) { .testimonial__row { flex-direction: column; align-items: center; gap: 33px; } .testimonial__row > * { margin-top: unset !important; text-align: center; } .testimonial__row .section-heading3 { align-self: center; } .testimonial__row > .testimonial__col { width: 100%; align-items: center; } } @container testimonial-col (width < 784px) { .service-card-a { align-items: center; gap: 27px; } .service-card-a > * { text-align: center; } .service-card-a > .left-site-content1 { align-items: center; } .service-card-a > .service-card-inner1-frame { width: 100%; max-width: 240px; } .service-card-b { align-items: center; gap: 27px; } .service-card-b > * { text-align: center; } .service-card-b > .left-site-content2 { align-items: center; } .service-card-b > .service-card-inner2-frame { width: 100%; max-width: 240px; } } @container testimonial (width < 1349px) { .testimonial__row-bottom { flex-direction: column; align-items: flex-end; gap: 23px; } .testimonial__row-bottom > * { margin-top: unset !important; } .testimonial__tesimonila { display: none; } .testimonial__row-bottom > .testimonial__group-left { width: 100%; max-width: 541px; } .testimonial__row-bottom > .service-card2 { width: 100%; } } @container testimonial-row-bottom (width < 784px) { .service-card-b { flex-direction: column; align-items: center; gap: 27px; } .service-card-b > * { text-align: center; } .service-card-b > .service-card-inner2-frame { width: 100%; max-width: 240px; } .service-card-b > .left-site-content2 { align-items: center; } } @container auction (width < 900px) { .auction__site-section { padding-bottom: 274px; } .auction__img--1 { top: 207px; margin-left: 278px; max-width: 171px; } .auction__group { top: 221px; margin-left: -54px; height: 503px; max-width: 234px; } .auction__group .auction__rect { width: 134px; height: 437px; } .auction__group .auction__rect--1 { top: 59px; left: 20px; } .auction__group .auction__rect--2 { top: 8px; left: 80px; } .auction__img--2 { top: 290px; max-width: 779px; } } @container auction (width < 520px) { .auction__site-section { padding-bottom: 164px; } .auction__img--1 { top: 124px; margin-left: 167px; max-width: 103px; } .auction__group { top: 132px; margin-left: -32px; height: 302px; max-width: 140px; } .auction__group .auction__rect { width: 81px; height: 262px; } .auction__group .auction__rect--1 { top: 35px; left: 12px; } .auction__group .auction__rect--2 { top: 5px; left: 48px; } .auction__img--2 { top: 174px; max-width: 467px; } } @container how-to-buy (width < 853px) { .how-to-buy__row-top { flex-direction: column; align-items: center; gap: 14px; } .how-to-buy__row-top > * { margin-left: unset !important; margin-top: unset !important; text-align: center; } .how-to-buy__row-top > .section-heading4 { align-items: center; } } @container how-to-buy (width < 1159px) { .how-to-buy__row { flex-wrap: wrap; align-items: center; gap: 29px; } .how-to-buy__site-section .container .how-to-buy__row{justify-content: center;} .how-to-buy__row > * { margin-top: unset !important; } } @container footer-container2 (width < 409px) { .footer-list2 { flex-direction: column; align-items: center; gap: 13px; } .footer-list2 > * { text-align: center; } } @container footer1 (width < 900px) { .footer-inner-row { flex-wrap: wrap; align-items: center; gap: 40px; } .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .card-footer-inner-col{width: 100%;max-width: 100%;} .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col1{width: 70%;} .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col2{width: 18%;} .footer-inner-row > * { width: 100%; max-width: 403px; text-align: center; align-items: center; } .footer-col3, .footer-col4 { align-items: center; } .footer-row-top1, .footer-row-top2, .footer-row-bottom { justify-content: center; } .footer-member-sec { justify-content: center; } .footer-list1 { align-items: center; } } @container footer1 (width < 780px) { .footer-contact-us { padding: 24px 28px; } .footer-contact-us__photo { width: 100%; } .footer-contact-us__actions { justify-content: center; } .footer-contact-us__btn { margin-left: 0; } } @container footer1 (width < 480px) { .footer-contact-us { padding: 20px 18px; } .footer-contact-us__actions { gap: 16px; } .footer-contact-us__whatsapp-link { width: 100%; justify-content: center; } .footer-contact-us__phone { width: auto; white-space: normal; text-align: center; } .footer-contact-us__btn { width: 100%; } } @container div-header-search (width < 1176px) { .div-header-search-container { flex-direction: column; align-items: center; gap: 14px; } .div-header-search-container > * { margin-left: unset !important; margin-top: unset !important; text-align: center; } .div-header-search-container > .div-header-search-form-mb { width: 100%; max-width: 780px; } } @container banner (width < 1189px) { .banner__img--veloce { width: 100%; } .banner__img--1, .banner__img--2 { display: none; } .banner__row { flex-direction: column; align-items: center; gap: 36px; } .banner__row > * { margin-top: unset !important; text-align: center; } .banner__row .banner__btn { align-self: center; } .banner__row > .banner__col-left { width: 100%; max-width: 333px; align-items: center; } .banner__row > .banner__col-left > * { text-align: unset; } .banner__row > .banner__group-right { width: 100%; max-width: 681px; } .banner__row-top { padding-left: 0; justify-content: center; } .banner__label { position: static; left: unset; top: unset; rotate: 0deg; } .banner__col { margin-left: 0; align-items: center; text-align: center; } } @container banner-col-left (width < 479px) { .banner__row-top { margin-left: 0; margin-right: 0; flex-direction: column; align-items: center; gap: 17px; } .banner__row-top > * { margin-left: unset !important; margin-right: unset !important; margin-top: unset !important; } .banner__subtitle { font-size: 28px; line-height: 1.3; } .banner__subtitle--luxury { font-size: 32px; } .banner__title { font-size: 34px; } .banner__btn { width: 100%; max-width: 220px; } } @container stock-site-section (width < 960px) { .stock-card-row-stock-card { width: 47%; } } @container stock-site-section (width < 686px) { .stock-card-row-stock-card { width: 100%; max-width: 320px; } .stock-card__media { height: 210px; } } /** breakpoints (home sections — margin / paddings) **/ @media screen and (max-width: 1280px) { .header__main-site .header__brand-row .container .header__brand-row-inner{gap: 25px;} .header__main-site .header__nav .header__nav-list{font-size: 13px;} .welcome__card { padding-inline: var(--margin-sm); } .welcome__card-text { margin-inline: 0; } .welcome__frame-bottom { padding-inline: var(--margin-sm); } .testimonial__group-left { padding-inline: 0; } .testimonial__site-section { padding-right: 24px; } .auction__group { margin-inline: 0; } .card-footer-inner-col { padding-inline: var(--margin-sm); } .div-header-search { padding-inline: var(--margin-sm); } .banner__col { margin-inline: 0; } .welcome__site-section .welcome__frame-bottom{width: 100%;} .welcome__site-section .welcome__card{width: 70%;max-width: 508px;} .testimonial__site-section .container .testimonial__row{width: 85%;} .left-site-content .left-site-content-graphic1{top: 126px;} .footer-main-site .container .footer-col1 .footer-contact-us .footer-contact-us__actions .footer-contact-us__phone{display: none;} } @media screen and (max-width: 991px) { .stock-card-row {gap: 15px;} .stock-card-row .stock-card-row-stock-card{width: 48%;} .welcome__site-section .welcome__card{padding: 30px 21px 30px 21px;} .welcome__site-section .welcome__frame-bottom{padding: 16px 30px 16px 15px;} .welcome__site-section .welcome__card .welcome__card-group .welcome__card-mask{display: none;} .welcome__site-section .welcome__frame-bottom .welcome__img--5{top: -67px;} .services-row > .service-col1{width: 46.5% !important;} .auction__site-section .auction__img--1{margin-left: auto !important;} .auction__site-section .auction__img--1{left: 81%;} .header__main-site .header__nav-toggle{width: 40px !important;} .header__main-site .header__brand-row{padding: 5px 0;} .header__main-site .header__brand-row .container .header__brand-row-inner{justify-content: space-between;gap: 0;} .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col1 .footer-col2 .footer-col3 .footer-col4 .footer-row-bottom{align-self: auto;} } @media screen and (max-width: 590px) { .stock-card-row{gap: 10px;} .stock-card-row .stock-card-row-stock-card{width: 100%;max-width: 100%;} .welcome__site-section .welcome__img--3, .welcome__site-section .welcome__frame-bottom .welcome__img--6{display: none;} .welcome__site-section .welcome__card{width: 100%;max-width: 100%;} .welcome__site-section .welcome__card .welcome__card-subtitle{text-align: start;font-size: 22px;} .welcome__site-section .welcome__card .welcome__card-text{max-width: 100%;margin: 0;align-self: auto;} .sub-text-primary-color{font-size: 23px;} .brand-type__site-section .container .brand-type-col .brand-type-row{gap: 18px;} .service__site-section .container .services-row .service-col1, .service__site-section .container .services-row .service-col2, .service__site-section .container .services-row .service-col3{width: 100% !important; max-width: 100%;} .section-heading .section-heading__title{line-height: 25px;text-align: center;} .brand-type__site-section .container .brand-type-col .brand-type-row .brand-type-card{width: 32% !important;} .testimonial__site-section .container .testimonial__row .testimonial__col .service-card-a, .testimonial__site-section .container .testimonial__row .testimonial__col .service-card-b{flex-direction: column;} .left-site-content, .testimonial__site-section .container .testimonial__row .testimonial__col .service-card-a .service-card-inner1-frame, .testimonial__site-section .container .testimonial__row .testimonial__col .service-card-b .service-card-inner2-frame{width: 100%;min-width: 100%;max-width: 100%;} .left-site-content .left-site-content-graphic1{top: 150px;} .testimonial__site-section{padding: 30px 0;} .testimonial__site-section .testimonial__decor{display: none;} .testimonial__site-section .container .testimonial__row{width: 100%;} .testimonial__site-section .testimonial__group-left .testimonial__graphic{display: none;} .testimonial__site-section .testimonial__group-left{width: 100%;padding: 0;} .left-site-content .left-site-content-service-card1{min-height: 151px;} .auction__site-section .auction__img--1{left: 90%;top: 67%;} .auction__site-section{padding: 30px 0 125px 0;} .auction__site-section .auction__img--2{top: 77%;} .auction__site-section .auction__group{display: none;} .footer-main-site .container .footer-col1 .footer-contact-us{flex-direction: column; padding: 15px;gap: 28px;} .footer-main-site .container .footer-col1 .footer-contact-us .footer-contact-us__photo{width: 100%;} .footer-main-site .container .footer-col1 .footer-contact-us .footer-contact-us__heading{align-items: center !important;} .footer-main-site .container .footer-col1 .footer-contact-us .footer-contact-us__photo .section-heading .section-heading__title{line-height: 35px;} .footer-main-site .container .footer-col1 .footer-contact-us .footer-contact-us__actions .footer-contact-us__btn{margin-left: inherit;} .footer-main-site .container .footer-col1 .footer-contact-us .footer-contact-us__actions{gap: 10px;} .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col1, .footer-main-site .container .footer-col1 .footer-container1 .footer-inner-row .footer-inner-col2{display: none;} .footer-main-site .container .footer-col1 .footer-container1 .footer-container2 .footer-list2{display: none;} .footer-main-site .container .footer-col1 .footer-container1 .footer-container2{justify-content: center;} .how-to-buy__site-section, .brand-type__site-section, .service__site-section, .stock__site-section{padding: 30px 0;} .stock__site-section .container{gap: 10px;} } /* ============================================================ INNER PAGES (common) — about-us, contact-us, our-team, bank-information, how-to-buy, faq, service, photo-gallery, sitemap, privacy, terms, disclaimer, 404 ============================================================ */ /* page title (replaces home-only section-heading for standalone inner pages) */ .page-title-section { container: page-title / inline-size; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; /* padding: 44px 24px 10px; */ padding-bottom: 20px;} .page-title-section .page-title-sub { display: none; max-width: 640px; color: var(--font-color); font-size: 19px; line-height: 1.6; margin: 4px auto 0; text-align: center; } .in_heading { position: relative; font-size: 36px; font-weight: 700; color: var(--primary-color); text-align: center; margin: 25px 0 30px; } .in_heading span { position: relative; z-index: 1; border-bottom: 1px solid var(--primary-color); letter-spacing: 1.03px; } /* alert boxes */ .ip-alert { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-radius: 10px; margin-bottom: 24px; font-size: 14px; line-height: 1.65; } .ip-alert-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; } .ip-info { background: var(--accent-tint-bg); border: 1px solid rgba(var(--primary-color-rgb), .25); } .ip-info .ip-alert-icon { background: var(--primary-color); color: var(--white-color); } .ip-warning { background: #fffbeb; border: 1px solid rgba(240, 165, 0, .25); } .ip-warning .ip-alert-icon { background: #f0a500; color: var(--white-color); } /* section heading components (secondary headings within an inner page) */ .ip-sec-head { margin-bottom: 28px; } .ip-sec-head.center { text-align: center; } .ip-sec-head.center .ip-sec-tag { justify-content: center; } .ip-sec-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--primary-color); display: flex; align-items: center; gap: 7px; margin-bottom: 8px; } .ip-sec-tag::before { content: ''; display: inline-block; width: 16px; height: 2px; background: var(--primary-color); border-radius: 2px; } .ip-sec-title { font-size: 22px; font-weight: 600; color: var(--secondary-color); margin: 0 0 10px; line-height: 1.3; } .ip-sec-title span { color: var(--primary-color); } .ip-sec-sub { font-size: 14px; color: var(--font-color); line-height: 1.85; margin: 0; } .ip-divider { border: none; border-top: 1px solid var(--border-color); margin: 40px 0; } .ip-feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .ip-feature-item { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--font-color); line-height: 1.7; } .ip-feature-item::before { content: '\2713'; width: 20px; height: 20px; border-radius: 50%; background: var(--primary-color); color: var(--white-color); font-size: 10px; font-weight: 900; text-align: center; line-height: 20px; flex-shrink: 0; margin-top: 1px; } .ip-feature-item strong { color: var(--secondary-color); } .ip-section-light { background: var(--gray-100); border-radius: 16px; padding: 36px; margin-bottom: 36px; border: 1px solid var(--gray-200); } .ip-section-accent { background: var(--accent-tint-bg); border-radius: 16px; padding: 36px; margin-bottom: 36px; border: 1px solid rgba(var(--primary-color-rgb), .2); } .ip-cta-block { background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); border-radius: 16px; padding: 38px 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 40px 0; box-shadow: 0 6px 28px rgba(var(--primary-color-rgb), .25); flex-wrap: wrap; } .ip-cta-text { flex: 1; min-width: 220px; } .ip-cta-title { font-size: 21px; font-weight: 700; color: var(--white-color); margin: 0 0 8px; line-height: 1.3; } .ip-cta-sub { font-size: 14px; color: rgba(255, 255, 255, .82); margin: 0; line-height: 1.6; } .btn-banner { position: relative; z-index: 0; overflow: hidden; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.29); display: flex; align-items: center; justify-content: center; gap: 10px; flex-shrink: 0; color: var(--primary-color); font-size: 15px; font-style: normal; font-weight: 400; line-height: 0.6; letter-spacing: 0px; text-align: unset; background-color: var(--white-color); padding: 17px 9px; border: 1px solid var(--primary-color); border-radius: 3px; } .btn-banner::before { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; z-index: -1; background-color: currentColor; border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.5s ease, height 0.5s ease; } .btn-banner:hover::before { width: 1000px; height: 400px; } .btn-banner .btn-banner__label { text-align: left; transition: color 0.4s ease; } .btn-banner:hover .btn-banner__label { color: var(--white-color); } .btn-banner .btn-banner__icon { flex-shrink: 0; transition: transform 0.35s ease, filter 0.4s ease; } .btn-banner:hover .btn-banner__icon { filter: brightness(0) invert(1); animation: btn-banner-icon-nudge 0.7s ease-in-out infinite; } .btn-banner:is(.btn-banner2, .btn-banner3, .btn-banner6, .btn-banner9) .btn-banner__icon { filter: invert(0); } .btn-banner:is(.btn-banner2, .btn-banner3, .btn-banner6, .btn-banner9):hover .btn-banner__icon { filter: brightness(0) invert(1); } @keyframes btn-banner-icon-nudge { 0%, 100% { transform: rotate(0deg) translate(0, 0); } 50% { transform: rotate(45deg) translate(3px, -3px); } } .ip-cta-block .btn-banner { background-color: var(--white-color); border-color: var(--white-color); } /* company profile text (paragraphs under the "Company Profile" heading) */ .ci-profile-text { display: flex; flex-direction: column; gap: 16px; margin-bottom: 36px; } .ci-profile-text p { font-size: 15px; color: var(--font-color); line-height: 1.8; margin: 0; } /* ═══════ ABOUT US PAGE ═══════ */ .au-page .au-hero-banner { display: grid; grid-template-columns: 1fr 1.65fr; gap: 44px; align-items: center; background: var(--accent-tint-bg); border-radius: 18px; padding: 44px; position: relative; overflow: hidden; margin-bottom: 24px; border: 1px solid rgba(var(--primary-color-rgb), .2); } .au-page .au-hero-banner .au-hero-bottom { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 24px; margin-top: 8px; } .au-page .au-hero-banner .au-hero-bottom .ip-feature-list--row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 40px; } @media (max-width: 600px) { .au-page .au-hero-banner .au-hero-bottom .ip-feature-list--row { grid-template-columns: 1fr; } .ci-profile-text{margin-bottom: 0;}} .au-page .au-hero-shapes { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .au-page .au-sh { position: absolute; } .au-page .au-sh--ring-lg { width: 320px; height: 320px; border-radius: 50%; border: 1px solid rgba(var(--primary-color-rgb), .12); top: -80px; right: -60px; animation: auShapeRotate 20s linear infinite; } .au-page .au-sh--ring-md { width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(var(--primary-color-rgb), .1); bottom: -40px; left: 4%; animation: auShapeRotate 15s linear infinite reverse; } .au-page .au-sh--ring-sm { width: 100px; height: 100px; border-radius: 50%; border: 1px solid rgba(var(--primary-color-rgb), .1); top: 40%; left: 8%; animation: auShapeRotate 10s linear infinite; } .au-page .au-sh--dot-1 { width: 12px; height: 12px; background: var(--primary-color); border-radius: 50%; top: 22%; left: 12%; opacity: .25; animation: auFloat 6s ease-in-out infinite; } .au-page .au-sh--dot-2 { width: 8px; height: 8px; background: var(--primary-color); border-radius: 50%; bottom: 22%; right: 16%; opacity: .3; animation: auFloat 8s ease-in-out infinite 1s; } .au-page .au-sh--dot-3 { width: 6px; height: 6px; background: var(--secondary-color); border-radius: 50%; top: 55%; left: 42%; opacity: .2; animation: auFloat 7s ease-in-out infinite .5s; } .au-page .au-sh--cross-1 { top: 30%; right: 20%; animation: auCross 6s ease-in-out infinite; } .au-page .au-sh--cross-1::before, .au-page .au-sh--cross-1::after { content: ''; position: absolute; background: rgba(var(--primary-color-rgb), .25); border-radius: 2px; } .au-page .au-sh--cross-1::before { width: 18px; height: 2px; top: 0; left: 0; } .au-page .au-sh--cross-1::after { width: 2px; height: 18px; top: -8px; left: 8px; } @keyframes auShapeRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes auFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes auCross { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.2) rotate(15deg); } } .au-page .au-hero-img-col { position: relative; z-index: 1; } .au-page .au-hero-img-wrap { position: relative; display: inline-block; width: 100%; } .au-page .au-hero-img { max-width: 100%; height: auto; min-height: 300px; margin: auto; max-height: 510px; border-radius: 14px; display: block; object-fit: cover; /* box-shadow: 0 8px 32px rgba(0, 0, 0, .15); */} .au-page .au-hero-content { z-index: 1; display: flex; flex-direction: column; gap: 14px; } .au-page .au-eyebrow { font-size: 14px; font-weight: 700; color: var(--primary-color); text-transform: uppercase; letter-spacing: 1.5px; display: flex; align-items: center; gap: 8px; margin: 0; } .au-page .au-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 2px; background: var(--primary-color); border-radius: 2px; } .au-page .au-hero-title { font-size: clamp(28px, 4vw, 40px); font-weight: 600; color: var(--secondary-color); margin: 0; line-height: 1.25; } .au-page .au-hero-title span { color: var(--primary-color); } .au-page .au-desc { font-size: 16px; color: var(--font-color); line-height: 1.9; margin: 0; } .au-page .au-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; } .au-page .au-stat-card { background: var(--white-color); border: 1px solid var(--border-color); border-radius: 14px; padding: 24px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; transition: border-color .3s, transform .3s, box-shadow .3s; } .au-page .au-stat-card:hover { border-color: rgba(var(--primary-color-rgb), .4); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(var(--primary-color-rgb), .12); } .au-page .au-stat-icon { width: 48px; height: 48px; background: var(--accent-tint-bg); border-radius: 12px; display: flex; align-items: center; justify-content: center; } .au-page .au-stat-icon svg { width: 24px; height: 24px; fill: var(--primary-color); } .au-page .au-stat-val { font-size: 19px; font-weight: 700; color: var(--primary-color); line-height: 1.2; } .au-page .au-stat-lbl { font-size: 14px; color: var(--font-color); font-weight: 500; } .au-page .au-details-video-row { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; margin-bottom: 36px; align-items: start; } .au-page .au-details-card { background: var(--white-color); border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 16px rgba(0, 0, 0, .05); } .au-page .au-details-card-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--gray-150); background: var(--accent-tint-bg); } .au-page .au-card-icon { width: 40px; height: 40px; background: rgba(var(--primary-color-rgb), .12); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .au-page .au-card-icon svg { width: 20px; height: 20px; fill: var(--primary-color); } .au-page .au-card-title { font-size: 19px; font-weight: 700; color: var(--secondary-color); margin: 0; } .au-page .au-info-list { list-style: none; margin: 0; padding: 0; } .au-page .au-info-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 22px; border-bottom: 1px solid var(--gray-150); transition: background .15s; } .au-page .au-info-item:last-child { border-bottom: none; } .au-page .au-info-item:hover { background: var(--accent-tint-bg); } .au-page .au-info-lbl { min-width: 30%; font-size: 13px; font-weight: 700; color: var(--primary-color); flex-shrink: 0; text-transform: uppercase; letter-spacing: .4px; padding-top: 2px; } .au-page .au-info-val { font-size: 15px; color: var(--font-color); line-height: 1.7; } .au-page .au-info-val strong { color: var(--secondary-color); } .au-page .au-info-val a { color: var(--primary-color); text-decoration: none; font-weight: 600; } .au-page .au-info-val a:hover { text-decoration: underline; } .au-page .au-contact-side { display: flex; flex-direction: column; gap: 14px; } .au-page .au-contact-side .btn-banner { width: 100%; } .au-page .au-contact-person-card { background: var(--accent-tint-bg); border: 1px solid rgba(var(--primary-color-rgb), .2); border-radius: 13px; padding: 20px; display: flex; align-items: center; gap: 16px; } .au-page .au-contact-avatar { width: 56px; height: 56px; background: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: var(--white-color); flex-shrink: 0; } .au-page .au-contact-info { display: flex; flex-direction: column; gap: 3px; } .au-page .au-contact-name { font-size: 18px; font-weight: 700; color: var(--secondary-color); } .au-page .au-contact-role { font-size: 13px; font-weight: 700; color: var(--primary-color); background: rgba(var(--primary-color-rgb), .12); padding: 2px 10px; border-radius: 50px; display: inline-block; } .au-page .au-contact-company { font-size: 14px; color: var(--font-color); } .au-page .au-info-cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 26px; } .au-page .au-info-card { background: var(--white-color); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; display: flex; gap: 16px; align-items: flex-start; transition: border-color .3s, transform .3s, box-shadow .3s; } .au-page .au-info-card:hover { border-color: rgba(var(--primary-color-rgb), .4); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, .06); } .au-page .au-info-card-icon { width: 44px; height: 44px; background: rgba(var(--primary-color-rgb), .12); border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .au-page .au-info-card-icon svg { width: 22px; height: 22px; fill: var(--primary-color); } .au-page .au-info-card-title { font-size: 17px; font-weight: 700; color: var(--secondary-color); margin: 0 0 6px; } .au-page .au-info-card-text { font-size: 15px; color: var(--font-color); line-height: 1.8; margin: 0; } .au-page .au-payment-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .au-page .au-payment-card { background: var(--white-color); border: 1px solid var(--border-color); border-radius: 14px; padding: 28px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; transition: border-color .3s, transform .3s, box-shadow .3s; } .au-page .au-payment-card:hover { border-color: rgba(var(--primary-color-rgb), .4); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(var(--primary-color-rgb), .12); } .au-page .au-payment-icon { width: 52px; height: 52px; background: var(--accent-tint-bg); border-radius: 14px; display: flex; align-items: center; justify-content: center; } .au-page .au-payment-icon svg { width: 26px; height: 26px; fill: var(--primary-color); } .au-page .au-payment-name { font-size: 19px; font-weight: 700; color: var(--secondary-color); } .au-page .au-payment-desc { font-size: 14px; color: var(--font-color); } .au-page .au-motto { background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); border-radius: 14px; padding: 22px 32px; display: flex; align-items: center; gap: 20px; margin-bottom: 36px; box-shadow: 0 6px 24px rgba(var(--primary-color-rgb), .25); } .au-page .au-motto-star { width: 28px; height: 28px; fill: rgba(255, 255, 255, .6); flex-shrink: 0; } .au-page .au-motto-text { font-size: 18px; font-weight: 500; color: var(--white-color); margin: 0; line-height: 1.5; font-style: italic; } @media (max-width: 1024px) { .au-page .au-stats-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .au-page .au-payment-cards { grid-template-columns: 1fr; } .au-page .au-details-video-row { grid-template-columns: 1fr; } .au-page .au-hero-banner { grid-template-columns: 1fr; padding: 28px; } .au-page .au-info-cards-row { grid-template-columns: 1fr; } .au-page .ip-cta-block { padding: 28px; justify-content: center; text-align: center; } .au-page .ip-cta-block .btn-banner { width: 100%; } .au-page .au-motto { flex-wrap: wrap; justify-content: center; text-align: center; padding: 20px; } } @media (max-width: 480px) { .au-page .au-stats-row { grid-template-columns: 1fr 1fr; } .au-page .au-hero-banner { padding: 20px;gap: 18px; } .au-page .au-details-card-head { padding: 16px 18px; } .au-page .au-info-item { padding: 10px 18px; flex-direction: column; gap: 2px; } .au-page .au-info-lbl { min-width: unset; } .au-page .au-info-cards-row .au-info-card { flex-direction: column; align-items: flex-start; } } /* ═══════ HOW TO BUY PAGE ═══════ */ .hbs-page .hbs-steps-wrap { display: flex; flex-direction: column; gap: 0; margin-bottom: 36px; } .hbs-page .hbs-connector { height: 36px; display: flex; align-items: center; justify-content: center; position: relative; } .hbs-page .hbs-connector::before { content: ''; display: block; width: 0; height: 36px; border-left: 2px dashed rgba(var(--primary-color-rgb), .35); position: absolute; left: 48px; } .hbs-page .hbs-connector.hbs-connectorright::before { right: 48px !important; left: auto; } .hbs-page .hbs-step { display: grid; grid-template-columns: .6fr 1fr; border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; background: var(--white-color); box-shadow: 0 2px 16px rgba(0, 0, 0, .06); transition: box-shadow .3s; } .hbs-page .hbs-step.hbs-step--reverse { grid-template-columns: 1fr .6fr; } .hbs-page .hbs-step:hover { box-shadow: 0 6px 28px rgba(0, 0, 0, .1); } .hbs-page .hbs-img-col { position: relative; overflow: hidden; min-height: 280px; } .hbs-page .hbs-img-col img { max-width: 100%; height: 100%; object-fit: cover; display: block; min-height: 280px; max-height: 440px; } .hbs-page .hbs-step-badge { position: absolute; bottom: 20px; left: 20px; background: var(--primary-color); color: var(--white-color); border-radius: 8px; padding: 10px 16px; display: flex; flex-direction: column; align-items: center; min-width: 56px; line-height: 1; } .hbs-page .hbs-step--reverse .hbs-step-badge { left: auto; right: 20px; } .hbs-page .hbs-step-num { font-size: 24px; font-weight: 700; line-height: 1.1; } .hbs-page .hbs-step-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; opacity: .8; margin-top: 2px; } .hbs-page .hbs-content-col { padding: 40px 44px; display: flex; flex-direction: column; gap: 16px; justify-content: center; } .hbs-page .hbs-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--primary-color); } .hbs-page .hbs-eyebrow-icon { width: 24px; height: 24px; background: rgba(var(--primary-color-rgb), .12); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hbs-page .hbs-eyebrow-icon svg { width: 13px; height: 13px; stroke: var(--primary-color); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .hbs-page .hbs-step-title { font-size: 26px; font-weight: 600; color: var(--secondary-color); margin: 0; line-height: 1.25; } .hbs-page .hbs-step-desc { font-size: 16px; color: var(--font-color); line-height: 1.9; margin: 0; } .hbs-page .hbs-pro-tip { background: var(--accent-tint-bg); border: 1px solid rgba(var(--primary-color-rgb), .18); border-left: 3px solid var(--primary-color); border-radius: 0 8px 8px 0; padding: 12px 16px; display: flex; align-items: flex-start; gap: 10px; } .hbs-page .hbs-pro-tip-icon { width: 20px; height: 20px; border-radius: 50%; background: rgba(var(--primary-color-rgb), .2); color: var(--primary-color); font-size: 11px; font-weight: 900; font-style: italic; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .hbs-page .hbs-pro-tip-text { font-size: 14px; color: var(--font-color); line-height: 1.75; margin: 0; } .hbs-page .hbs-pro-tip-text strong { color: var(--secondary-color); } .hbs-page .ip-cta-block.hbs-cta { background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%); } @media (max-width: 767px) { .hbs-page .hbs-step { grid-template-columns: 1fr; } .hbs-page .hbs-step.hbs-step--reverse { grid-template-columns: 1fr; } .hbs-page .hbs-content-col { padding: 28px 24px; } .hbs-page .hbs-connector::before { left: 24px; } .hbs-page .ip-cta-block { padding: 28px; justify-content: center; text-align: center; } .hbs-page .ip-cta-block .btn-banner { width: 100%; } } /* quick-links row (3 equal buttons), used across the auction pages */ .aw-quicklinks { display: flex; flex-wrap: wrap; gap: 16px; margin: 40px 0 50px; } .aw-quicklinks .btn-banner { flex: 1 1 220px; justify-content: center; } /* shared table (auction calendar + deposit tables) */ .aw-table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: 14px; -webkit-overflow-scrolling: touch; } .aw-table { width: 100%; border-collapse: collapse; font-size: 13px; } .aw-table th { background: var(--secondary-color); color: var(--white-color); font-weight: 600; text-align: left; padding: 12px 14px; white-space: nowrap; } .aw-table td { padding: 10px 14px; border-top: 1px solid var(--gray-150); color: var(--font-color); vertical-align: top; white-space: nowrap; } .aw-table tr:nth-child(even) td { background: var(--gray-100); } /* ═══════ AUCTION CALENDAR PAGE ═══════ */ .ac-page .ac-intro { font-size: 15px; color: var(--font-color); line-height: 1.8; margin-bottom: 24px; } .ac-page .aw-table { min-width: 920px; } .ac-page .aw-table th, .ac-page .aw-table td { text-align: center; white-space: normal; } .ac-page .ip-cta-block { margin-top: 36px; } /* ═══════ AUCTION TERMS PAGE ═══════ */ .at-page .at-hero { display: grid; grid-template-columns: .8fr 1.2fr; gap: 32px; align-items: center; margin-bottom: 40px; } .at-page .at-hero-img { width: 100%; height: 100%; max-height: 340px; border-radius: 16px; display: block; object-fit: cover; box-shadow: 0 6px 24px rgba(0, 0, 0, .1); } .at-page .at-hero-title { font-size: 22px; font-weight: 700; color: var(--secondary-color); margin: 0 0 12px; } .at-page .at-hero-text { font-size: 15px; color: var(--font-color); line-height: 1.8; margin: 0 0 12px; } .at-page .at-hero-text a { color: var(--primary-color); font-weight: 600; text-decoration: none; } .at-page .at-hero-text a:hover { text-decoration: underline; } .at-page .at-sec-title { font-size: 20px; font-weight: 700; color: var(--secondary-color); margin: 0 0 8px; } .at-page .at-sec-sub { font-size: 14px; color: var(--font-color); margin: 0 0 20px; line-height: 1.7; } .at-page .at-deposit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; margin-bottom: 40px; } .at-page .at-note { font-weight: 700; color: var(--secondary-color); margin-bottom: 6px; } .at-page .at-note span { color: var(--primary-color); } .at-page .at-ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .at-page .at-ul li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--font-color); line-height: 1.7; } .at-page .at-ul li::before { content: '\2713'; width: 18px; height: 18px; border-radius: 50%; background: var(--primary-color); color: var(--white-color); font-size: 9px; font-weight: 900; text-align: center; line-height: 18px; flex-shrink: 0; margin-top: 2px; } .at-page .at-steps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-bottom: 40px; } .at-page .at-step-card { position: relative; background: var(--white-color); border: 1px solid var(--border-color); border-radius: 14px; padding: 26px 20px; text-align: center; transition: border-color .3s, transform .3s, box-shadow .3s; } .at-page .at-step-card:hover { border-color: rgba(var(--primary-color-rgb), .4); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(var(--primary-color-rgb), .12); } .at-page .at-step-num { position: absolute; top: 14px; right: 18px; font-size: 24px; font-weight: 800; color: var(--gray-200); line-height: 1; } .at-page .at-step-icon { width: 50px; height: 50px; background: var(--accent-tint-bg); border-radius: 13px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .at-page .at-step-icon svg { width: 24px; height: 24px; fill: var(--primary-color); } .at-page .at-step-title { font-size: 15px; font-weight: 700; color: var(--secondary-color); margin: 0 0 8px; } .at-page .at-step-text { font-size: 13px; color: var(--font-color); line-height: 1.7; margin: 0; } @media (max-width: 1024px) { .at-page .at-steps-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .ac-page .aw-table { min-width: 760px; } .at-page .at-hero { grid-template-columns: 1fr; } .at-page .at-hero-img { max-height: 220px; } .at-page .at-deposit-row { grid-template-columns: 1fr; gap: 24px; margin-bottom: 30px; } .at-page .at-steps-grid { grid-template-columns: repeat(2, 1fr); } .aw-quicklinks .btn-banner { flex: 1 1 100%; } } /* ═══════ CONTACT PAGE ═══════ */ .ct-page{margin-bottom: 50px;} .ct-page .ct-main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 36px; align-items: stretch; } .ct-page .ct-form-card { background: var(--white-color); border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 16px rgba(0, 0, 0, .06); } .ct-page .ct-form-card-head { display: flex; align-items: flex-start; gap: 16px; padding: 28px 32px 20px; border-bottom: 1px solid var(--gray-150); } .ct-page .ct-form-icon { width: 48px; height: 48px; background: var(--accent-tint-bg); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ct-page .ct-form-icon svg { width: 22px; height: 22px; stroke: var(--primary-color); fill: none; } .ct-page .ct-form-title { font-size: 23px; font-weight: 700; color: var(--secondary-color); margin: 0 0 4px; line-height: 1.2; } .ct-page .ct-form-sub { font-size: 15px; color: var(--font-color); margin: 0; } .ct-page .ct-form-body { padding: 24px 15px 28px; } .ct-page .ct-info-col { display: flex; flex-direction: column; gap: 16px; } .ct-page .ct-info-card { background: var(--accent-tint-bg); border: 1px solid rgba(var(--primary-color-rgb), .2); border-radius: 16px; padding: 28px; flex: 1; } .ct-page .ct-info-card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; } .ct-page .ct-info-icon { width: 44px; height: 44px; background: var(--primary-color); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ct-page .ct-info-icon svg { width: 20px; height: 20px; stroke: var(--white-color); fill: none; } .ct-page .ct-info-title { font-size: 20px; font-weight: 700; color: var(--secondary-color); margin: 0 0 3px; line-height: 1.2; } .ct-page .ct-info-sub { font-size: 14px; color: var(--font-color); margin: 0; } .ct-page .ct-company-name-wrap { background: var(--primary-color); border-radius: 8px; padding: 10px 16px; margin-bottom: 14px; } .ct-page .ct-company-name { font-size: 16px; font-weight: 700; color: var(--white-color); display: block; } .ct-page .ct-highlights { display: flex; flex-direction: column; background: var(--white-color); border-radius: 10px; } .ct-page .ct-highlight-item { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--gray-150); transition: background .2s; } .ct-page .ct-highlight-item:last-child { border-bottom: none; } .ct-page .ct-highlight-icon { width: 36px; height: 36px; background: var(--accent-tint-bg); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s; } .ct-page .ct-highlight-icon svg { width: 16px; height: 16px; stroke: var(--primary-color); fill: none; stroke-width: 2; } .ct-page .ct-highlight-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--primary-color); margin-bottom: 2px; } .ct-page .ct-highlight-val { display: block; font-size: 15px; font-weight: 600; color: var(--secondary-color); } .ct-page .ct-highlight-item:hover .ct-highlight-icon { background: var(--primary-color); } .ct-page .ct-highlight-item:hover .ct-highlight-icon svg { stroke: var(--white-color); } .ct-page a.ct-highlight-item { text-decoration: none; } .ct-page a.ct-highlight-item:hover { background: rgba(var(--primary-color-rgb), .06); } @media (max-width: 767px) { .ct-page .ct-main-grid { grid-template-columns: 1fr; } } .ct-page .ct-form-fields { display: flex; flex-direction: column; gap: 18px; } .ct-page .ct-form-row { display: flex; gap: 18px; } .ct-page .ct-form-row .ct-form-group { flex: 1; } .ct-page .ct-form-group { display: flex; flex-direction: column; gap: 6px; } .ct-page .ct-form-group label { font-size: 15px; font-weight: 600; color: var(--secondary-color); } .ct-page .ct-form-group input, .ct-page .ct-form-group textarea { font-family: inherit; font-size: 16px; color: var(--font-color); padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--white-color); transition: border-color 0.2s ease; } .ct-page .ct-form-group input:focus, .ct-page .ct-form-group textarea:focus { outline: none; border-color: var(--primary-color); } .ct-page .ct-form-group textarea { resize: vertical; min-height: 120px; } @media (max-width: 480px) { .ct-page .ct-form-row { flex-direction: column; gap: 18px; } } /* ═══════ COMING SOON (Bank Info / Our Team / Gallery) ═══════ */ .bi-coming-soon { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 70px 40px; background: var(--accent-tint-bg); border: 1px solid rgba(var(--primary-color-rgb), .2); border-radius: 18px; margin-bottom: 36px; } .bi-cs-icon { width: 64px; height: 64px; background: rgba(var(--primary-color-rgb), .15); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .bi-cs-icon svg { width: 36px; height: 36px; fill: var(--primary-color); } .bi-cs-title { font-size: 28px; font-weight: 700; color: var(--secondary-color); margin: 0 0 14px; } .bi-cs-title span { color: var(--primary-color); } .bi-cs-desc { font-size: 16px; color: var(--font-color); line-height: 1.8; max-width: 480px; margin: 0 0 28px; } .bi-cs-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } @media (max-width: 500px) { .bi-coming-soon { padding: 50px 20px; } .bi-cs-title { font-size: 22px; } .bi-cs-btns .btn-banner { width: 100%; } } /* ═══════ TERMS PAGE ═══════ */ .tm-page .tm-terms-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .tm-page .tm-term-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: var(--white-color); border: 1px solid var(--border-color); border-radius: 10px; transition: border-color .2s, box-shadow .2s; } .tm-page .tm-term-item:hover { border-color: rgba(var(--primary-color-rgb), .3); box-shadow: 0 2px 10px rgba(0, 0, 0, .05); } .tm-page .tm-term-num { min-width: 32px; height: 32px; background: rgba(var(--primary-color-rgb), .14); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--primary-color); flex-shrink: 0; margin-top: 1px; } .tm-page .tm-term-text { font-size: 16px; color: var(--font-color); line-height: 1.75; } /* ═══════ SITEMAP PAGE ═══════ */ .sm-page .sm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 10px; } .sm-page .sm-card { background: var(--white-color); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .04); transition: box-shadow .25s, transform .25s; } .sm-page .sm-card:hover { box-shadow: 0 8px 28px rgba(var(--primary-color-rgb), .18); transform: translateY(-3px); } .sm-page .sm-card-head { background: var(--primary-color); padding: 16px 20px; display: flex; align-items: center; gap: 12px; } .sm-page .sm-card-icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 34px; height: 34px; background: rgba(255, 255, 255, .2); border-radius: 8px; } .sm-page .sm-card-icon svg { width: 18px; height: 18px; fill: var(--white-color); display: block; } .sm-page .sm-card-title { font-size: 16px; font-weight: 700; color: var(--white-color); margin: 0; line-height: 1.3; } .sm-page .sm-links { list-style: none; padding: 4px 0; margin: 0; } .sm-page .sm-link-item { border-bottom: 1px solid var(--gray-150); } .sm-page .sm-link-item:last-child { border-bottom: none; } .sm-page .sm-link-item a { display: flex; align-items: center; padding: 11px 18px; font-size: 15px; color: var(--font-color); transition: background .15s, color .15s, padding-left .15s; } .sm-page .sm-link-item a::before { content: '\203A'; color: var(--primary-color); font-size: 18px; font-weight: 700; line-height: 1; margin-right: 8px; } .sm-page .sm-link-item a:hover { background: var(--accent-tint-bg); color: var(--primary-color); padding-left: 24px; } @media (max-width: 991px) { .sm-page .sm-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .sm-page .sm-grid { grid-template-columns: 1fr; } } /* ═══════ PHOTO GALLERY PAGE ═══════ */ .pg-page .pg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 32px; } .pg-page .pg-item { position: relative; border-radius: 12px; overflow: hidden; background: var(--accent-tint-bg); aspect-ratio: 4/3; } .pg-page .pg-link { display: block; width: 100%; height: 100%; text-decoration: none; } .pg-page .pg-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .pg-page .pg-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--secondary-color-rgb), 0) 40%, rgba(var(--secondary-color-rgb), .78) 100%); display: flex; align-items: flex-end; justify-content: center; padding: 14px; opacity: 0; transition: opacity .3s; } .pg-page .pg-item:hover .pg-overlay { opacity: 1; } .pg-page .pg-item:hover .pg-img { transform: scale(1.07); } .pg-page .pg-zoom { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: rgba(255, 255, 255, .18); border: 2px solid rgba(255, 255, 255, .5); border-radius: 50%; color: var(--white-color); font-size: 22px; font-weight: 700; line-height: 1; } @media (max-width: 991px) { .pg-page .pg-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .pg-page .pg-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } /* ═══════ SERVICES PAGE ═══════ */ /* card grid — same visual language as the home page's "Our Services" cards */ .sv-page .sv-card-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; } .sv-page .sv-card-col { position: relative; width: calc(50% - 10px); flex-shrink: 0; display: flex; flex-direction: column; background-color: var(--white-color); padding: 12px; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; transition: box-shadow 0.3s ease, transform 0.3s ease; box-shadow: 0px -1px 9px rgba(0, 0, 0, .08), inset 0px 2px 3px rgba(0, 0, 0, .06), inset 0px 0px 3px rgba(0, 0, 0, .14); } .sv-page .sv-card-col:hover { box-shadow: 0px 10px 26px rgba(0, 0, 0, .14); transform: translateY(-4px); } .sv-page .sv-card-media { border-radius: 8px; overflow: hidden; } .sv-page .sv-card-media .sv-card-img { width: 100%; height: 190px; object-fit: cover; display: block; } .sv-page .sv-card-body { position: relative; margin-top: 14px; padding-bottom: 6px; } .sv-page .sv-card-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .sv-page .sv-card-title { color: var(--secondary-color); font-size: 20px; font-weight: 600; transition: color 0.3s ease; } .sv-page .sv-card-col:hover .sv-card-title { color: var(--primary-color); } .sv-page .sv-card-arrow { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; color: var(--secondary-color); background-color: var(--gray-100); border-radius: 50%; } .sv-page .sv-card-arrow svg { width: 14px; height: 14px; transition: transform 0.3s ease; } .sv-page .sv-card-col:hover .sv-card-arrow svg { transform: rotate(45deg); } .sv-page .sv-card-text { position: relative; z-index: 1; margin-top: 10px; color: var(--font-color); font-size: 15px; line-height: 1.5; } .sv-page .sv-card-points { list-style: none; margin: 12px 0 0; padding: 0; position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px 16px; } .sv-page .sv-card-points li { font-size: 13px; color: var(--secondary-color); font-weight: 600; display: flex; align-items: center; gap: 6px; } .sv-page .sv-card-points li::before { content: '\2713'; width: 16px; height: 16px; border-radius: 50%; background: rgba(var(--primary-color-rgb), .16); color: var(--primary-color); font-size: 9px; font-weight: 900; text-align: center; line-height: 16px; flex-shrink: 0; } .sv-page .sv-card-num { position: absolute; z-index: 0; right: 6px; bottom: 6px; color: rgba(var(--primary-color-rgb), .08); font-size: 68px; font-weight: 800; line-height: 1; user-select: none; } @media (max-width: 900px) { .sv-page .sv-card-col { width: calc(50% - 10px); } } @media (max-width: 700px) { .sv-page .sv-card-col { width: 100%; } } .sv-page .sv-highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 36px; } .sv-page .sv-highlight-item { display: flex; align-items: center; gap: 14px; background: var(--gray-100); border: 1px solid var(--border-color); border-radius: 14px; padding: 18px 20px; } .sv-page .sv-highlight-icon { width: 42px; height: 42px; background: var(--primary-color); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sv-page .sv-highlight-icon svg { width: 20px; height: 20px; fill: var(--white-color); } .sv-page .sv-highlight-item div { display: flex; flex-direction: column; gap: 2px; } .sv-page .sv-highlight-item strong { font-size: 15px; color: var(--secondary-color); } .sv-page .sv-highlight-item span { font-size: 13px; color: var(--font-color); } @media (max-width: 1024px) { .sv-page .sv-highlights { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .sv-page .ip-cta-block { padding: 28px; justify-content: center; text-align: center; } .sv-page .ip-cta-block .btn-banner { width: 100%; } } @media (max-width: 480px) { .sv-page .sv-highlights { grid-template-columns: 1fr; } } /* ═══════ FAQ PAGE ═══════ */ .fq-page .fq-group { margin-bottom: 32px; } .fq-page .fq-group-title { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; color: var(--secondary-color); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid rgba(var(--primary-color-rgb), .22); } .fq-page .fq-list { display: flex; flex-direction: column; gap: 12px; } .fq-page .fq-item { background: var(--white-color); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; transition: border-color .2s, box-shadow .2s; } .fq-page .fq-item:hover { border-color: rgba(var(--primary-color-rgb), .4); box-shadow: 0 4px 16px rgba(var(--primary-color-rgb), .1); } .fq-page .fq-item[open] { border-color: rgba(var(--primary-color-rgb), .45); box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), .12); } .fq-page .fq-q { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 18px 20px; font-size: 16px; font-weight: 600; color: var(--secondary-color); } .fq-page .fq-q::-webkit-details-marker { display: none; } .fq-page .fq-q-mark { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--primary-color); color: var(--white-color); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .fq-page .fq-q-text { flex: 1; } .fq-page .fq-caret { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--primary-color-rgb), .12); color: var(--primary-color); display: flex; align-items: center; justify-content: center; transition: transform .25s ease, background .25s ease; } .fq-page .fq-item[open] .fq-caret { transform: rotate(180deg); background: var(--primary-color); color: var(--white-color); } .fq-page .fq-a { display: flex; align-items: flex-start; gap: 14px; padding: 0 20px 20px 20px; font-size: 15px; color: var(--font-color); line-height: 1.8; } .fq-page .fq-a-mark { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(var(--primary-color-rgb), .16); color: var(--primary-color); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .fq-page .fq-a-text { flex: 1; } .fq-page .fq-a-text a { color: var(--primary-color); font-weight: 600; text-decoration: none; } .fq-page .fq-a-text a:hover { text-decoration: underline; } @media (max-width: 600px) { .fq-page .fq-q { font-size: 15px; padding: 16px; gap: 10px; } .fq-page .fq-a { padding: 0 16px 16px 16px; gap: 10px; } } /* container-query breakpoints for the inner-page title */ @container page-title (width < 480px) { .page-title-section { padding: 32px 16px 6px; } }