y3construct.com
Open in
urlscan Pro
23.106.127.13
Public Scan
URL:
https://y3construct.com/wp-content/themes/y3-construction/assets/css/main.css?ver=746128158
Submission: On November 05 via api from US — Scanned from SG
Submission: On November 05 via api from US — Scanned from SG
Form analysis
0 forms found in the DOMText Content
@charset "UTF-8"; .ff-2, .title-icon, .drop-a-line .info .wrapper .info-list li .content .title, .product-card .content .title, .project-card .content .title, .why-choose-us .my-tabs .tabs-nav li, .thank-you .products-table, .checkout-page .products-table, .cart-page, .cart-page .summary-table tr td, .checkout-page .summary-table tr td, .thank-you .summary-table tr td, .cart-page .heading-box, .checkout-page .heading-box, .thank-you .heading-box, .header .menu-link, .footer .menu-link, .pagi-item, .form-group label, .form-wrap label, .dropdown, .btn-arrow, .main-content .subtitle, .heading, [class*=heading-] { font-family: "Inter"; } .heading, [class*=heading-] { line-height: 1.2; } .heading-70 { font-size: 7rem; font-weight: bold; } .heading-50, .our-projects .inner .number { font-size: 5rem; font-weight: 600; } .heading-40 { font-size: 4rem; font-weight: 500; } .heading-55 { font-size: 5.5rem; font-weight: 600; } .heading-30 { font-size: 3rem; font-weight: 600; } *, *:after, *:before { -webkit-box-sizing: inherit; box-sizing: inherit; margin: 0; padding: 0; } * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; } html { height: -webkit-fill-available; font-size: 7px; } @media (min-width: 768px) { html { font-size: calc(0.0836120401vw + 6.3578595318px); } } @media (min-width: 1366px) { html { font-size: calc(0.4512635379vw + 1.3357400722px); } } @media (min-width: 1920px) { html { font-size: 10px; } } @media (min-width: 1366px) { html { font-size: 7.5px; } } @media (min-width: 1920px) { html { font-size: 10px; } } body { -webkit-box-sizing: border-box; position: relative; box-sizing: border-box; min-height: 100vh; min-height: -webkit-fill-available; overflow-x: hidden; color: #071227; font-family: "Roboto"; font-size: 1.8rem; line-height: calc(28/18); } a { text-decoration: none; } img { display: block; max-width: 100%; height: auto; } button { cursor: pointer; } input, textarea, button { outline: none; -webkit-box-shadow: none; box-shadow: none; } .slick-slide:active, .slick-slide:focus, .slick-arrow:hover, .slick-arrow:focus { outline: 0; border: 0; } .mdi-arrow-left:before { content: ""; } .mdi-reload:before { content: ""; } .mdi-account:before { content: ""; } .mdi-magnify:before { content: ""; } .mdi-home:before { content: ""; } .mdi-close:before { content: ""; } .mdi-menu:before { content: ""; } .mdi-phone:before { content: ""; } .mdi-email:before { content: ""; } .mdi-plus-circle:before { content: ""; } .mdi-alert-circle-outline:before { content: ""; } .mdi-calendar:before { content: ""; } .mdi-map-marker:before { content: ""; } .mdi-chevron-double-left:before { content: ""; } .mdi-chevron-double-right:before { content: ""; } .mdi-cloud-download:before { content: ""; } .mdi-briefcase:before { content: ""; } .mdi-fax:before { content: ""; } .mdi-whatsapp:before { content: ""; } .mdi-map:before { content: ""; } .mdi-printer:before { content: ""; } .mdi-file-outline:before { content: ""; } .mdi-chevron-down:before { content: ""; } .mdi-chevron-up:before { content: ""; } .mdi-chevron-left:before { content: ""; } .mdi-chevron-right:before { content: ""; } .mdi-link:before { content: ""; } .mdi-arrow-right:before { content: ""; } .mdi-facebook:before { content: ""; } .mdi-linkedin:before { content: ""; } .fa-twitter:before { content: ""; } .mdi-instagram:before { content: ""; } .mdi-twitter:before { content: ""; } .mdi-youtube:before { content: ""; } .mdi-play-circle-outline:before { content: ""; } .mdi-cart:before { content: ""; } .mdi-check-circle-outline:before { content: ""; } .lnr-arrow-right:before { content: ""; } .lnr-arrow-left:before { content: ""; } .lnr-chevron-right:before { content: ""; } .lnr-chevron-left:before { content: ""; } .lnr-chevron-down:before { content: ""; } .lnr-chevron-up:before { content: ""; } .lnr-download:before { content: ""; } .lnr-arrow-up:before { content: ""; } .mdi-plus:before { content: ""; } .mdi-minus:before { content: ""; } .mdi-cards-heart-outline:before { content: ""; } .mdi-cards-heart:before { content: ""; } .mdi-filter:before { content: ""; } .mdi-clock-time-five:before { content: ""; } .mdi-menu-down:before { content: ""; } .mdi-menu-right:before { content: ""; } .mdi-menu-up:before { content: ""; } .mdi-check-circle:before { content: ""; } .mdi-plus:before { content: ""; } .mdi-minus:before { content: ""; } /*GRID - media queries breakpoints*/ .col, [class*=col-] { padding-right: 1.5rem; padding-left: 1.5rem; width: 100%; } [class*=col-span-], [class*=col-end-], [class*=col-start-] { padding-right: 0; padding-left: 0; } .row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -1.5rem; margin-left: -1.5rem; } .container-fluid, .container { margin-right: auto; margin-left: auto; width: 100%; } .container-fluid { padding-right: 5.5rem; padding-left: 5.5rem; } @media (max-width: 1199px) { .container-fluid { padding-right: 2rem; padding-left: 2rem; } } .container { padding-right: 1.5rem; padding-left: 1.5rem; } @media (min-width: 1200px) { .container { max-width: calc(157.2/192*100%); } } @media (min-width: 1920px) { .container { max-width: 157.2rem; } } @media (min-width: 1200px) { .container-narrow { max-width: calc(99/192*100%); } } @media (min-width: 1920px) { .container-narrow { max-width: 99rem; } } @media (min-width: 1200px) { .container-wide { max-width: calc(126.6/192*100%); } } @media (min-width: 1920px) { .container-wide { max-width: 126.6rem; } } .no-gutters { margin-right: 0 !important; margin-left: 0 !important; } .no-gutters > .col, .no-gutters > [class*=col-] { padding-right: 0 !important; padding-left: 0 !important; } .gap-large { margin-right: -1.5rem !important; margin-left: -1.5rem !important; } .gap-large > .col, .gap-large > [class*=col-] { padding-right: 1.5rem !important; padding-left: 1.5rem !important; } .img-white { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .fake-bold { text-stroke: 1px currentColor; -webkit-text-stroke: 1px currentColor; } .swiper-slide { -webkit-box-sizing: border-box; box-sizing: border-box; } .my-tabs .tab-content { display: none; } .accordion-content { display: none; } .tabs-nav-wrap { overflow: hidden; overflow-x: auto; } .tabs-nav-wrap::-webkit-scrollbar { height: 0; } .price ins { text-decoration: none; } a { color: inherit; } .desc p:not(:last-child), .brief-content p:not(:last-child), .full-content p:not(:last-child) { margin-bottom: 2rem; } .row-reverse { -webkit-box-orient: horizontal !important; -webkit-box-direction: reverse !important; -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .triangle { display: inline-block; margin: 5px; width: 0; height: 0; } .triangle--top { border-right: 1rem solid transparent; border-bottom: 1rem solid #000; border-left: 1rem solid transparent; } .triangle--bottom { border-top: 1rem solid #000; border-right: 1rem solid transparent; border-left: 1rem solid transparent; } .triangle--right { border-top: 1rem solid transparent; border-bottom: 1rem solid transparent; border-left: 1rem solid #000; } .triangle--left { border-top: 1rem solid transparent; border-right: 1rem solid #000; border-bottom: 1rem solid transparent; } .myFancyBox .fancybox-thumbs { top: auto; right: 0; bottom: 0; left: 0; -webkit-box-sizing: border-box; box-sizing: border-box; background: rgba(0, 0, 0, 0.3); padding: 5px; width: auto; } .fancybox-show-thumbs .fancybox-inner { width: 100%; } .myFancyBox .fancybox-show-thumbs .fancybox-inner { right: 0; bottom: 0; } .fancybox-thumbs__list a:before { border: 0.3rem solid #5DC6E9; } .clearfix::after { display: table; clear: both; content: ""; } .bg-overlay { position: relative; } .bg-overlay:after { inset: 0; position: absolute; content: ""; } .bg-overlay-50:after { background: rgba(10, 11, 9, 0.5); } .bg-overlay-40:after { background: rgba(10, 11, 9, 0.4); } .main-content .subtitle { font-size: 3.6rem; font-weight: 500; letter-spacing: 0.072rem; line-height: calc(38/36); } .main-content .big-title { margin-top: 0.5rem; } .main-content .head { position: relative; margin-bottom: 1rem; } .main-content .head:after { position: absolute; bottom: -1rem; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #0A0B09; width: 3rem; height: 1px; content: ""; } .main-content .head.line-white::after { background: #fff; } .main-content .head.line-left::after { left: 0; -webkit-transform: none; transform: none; } .big-title { font-size: 5.6rem; line-height: calc(60/56); } @media (max-width: 767px) { .big-title { font-size: 4.8rem; } } .btn-arrow { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: all 0.25s; transition: all 0.25s; font-size: 2rem; font-weight: bold; } .btn-arrow .icon { -ms-flex-negative: 0; flex-shrink: 0; margin-left: 2rem; width: 2.4rem; } .btn-arrow .icon img { -webkit-filter: brightness(0); filter: brightness(0); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; width: 100%; height: auto; } .btn-arrow:hover { color: #2576BC; } .btn-arrow:hover .icon img { -webkit-filter: none; filter: none; } .btn { gap: 1rem; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.3s; transition: all 0.3s; border: none; border-radius: 0; padding: 0 2rem; min-width: 23.2rem; height: 7rem; color: #fff; font-size: 2rem; font-weight: 700; line-height: 7rem; text-align: center; white-space: nowrap; } .btn em { font-size: 1.6rem; } .btn em::before { font-weight: bold; } .btn .icon { display: block; -ms-flex-negative: 0; flex-shrink: 0; width: 2rem; } .btn:not([class*=brounded]) .icon img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .btn[class*="--brounded"]:hover .icon img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .btn-white { background: #FFFFFf; color: #404040; } .btn-white--brounded { border: 1.5px solid #FFFFFf; background: none; color: #FFFFFf; } .btn-white--brounded:hover, .btn-white--brounded.active { -webkit-transition: all 0.2s; transition: all 0.2s; background: #FFFFFf; color: #404040; } .btn-green { background: #88DA29; color: #ffffff; } .btn-green--brounded { border: 1.5px solid #88DA29; background: none; color: #88DA29; } .btn-green--brounded:hover { -webkit-transition: all 0.2s; transition: all 0.2s; background: #88DA29; color: #ffffff; } .btn-green:hover, .btn-green.active { -webkit-transition: all 0.3s; transition: all 0.3s; background: #88DA29; } .btn-black { background: #071227; color: #ffffff; } .btn-black--brounded { border: 1.5px solid #071227; background: none; color: #071227; } .btn-black--brounded:hover { -webkit-transition: all 0.2s; transition: all 0.2s; background: #071227; color: #ffffff; } .btn-black:hover, .btn-black.active { -webkit-transition: all 0.3s; transition: all 0.3s; background: #071227; } .btn-orange { background: #FF8E00; color: #ffffff; } .btn-orange--brounded { border: 1.5px solid #FF8E00; background: none; color: #FF8E00; } .btn-orange--brounded:hover { -webkit-transition: all 0.2s; transition: all 0.2s; background: #FF8E00; color: #ffffff; } .btn-orange:hover, .btn-orange.active { -webkit-transition: all 0.3s; transition: all 0.3s; background: #FF8E00; } .btn-light { background: #E4E4E4; color: #303030; } .btn-light--brounded { border: 1.5px solid #E4E4E4; background: none; color: #303030; } .btn-light--brounded:hover { -webkit-transition: all 0.2s; transition: all 0.2s; background: #E4E4E4; color: #303030; } .btn-light:hover, .btn-light.active { -webkit-transition: all 0.3s; transition: all 0.3s; background: #E4E4E4; } .btn:hover, .btn.active { -webkit-filter: hue-rotate(-45deg); filter: hue-rotate(-45deg); text-shadow: 0 0.7rem 1.5rem #00000033; } .text-center { text-align: center; } .swiper-pagination { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; bottom: 0rem; left: 50% !important; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 9; } .swiper-pagination span { display: block; position: static; opacity: 1; -webkit-transition: all 0.2s; transition: all 0.2s; margin: 0 0.35rem; outline: none; border: none; border-radius: 50%; background: #E4E4E4; width: 1.3rem; height: 1.3rem; } .swiper-pagination span.swiper-pagination-bullet-active { -webkit-transition: all 0.2s; transition: all 0.2s; background: #5DC6E9; } .swiper-prev, .swiper-next { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 98; -webkit-transition: all 0.2s; transition: all 0.2s; cursor: pointer; outline: none; } .swiper-prev img, .swiper-next img { width: 2.4rem; } .swiper-prev { left: 0; } .swiper-next { right: 0; } .swiper-button-disabled { opacity: 0.5; cursor: no-drop; } .swiper-btn { gap: 2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .swiper-btn .swiper-next, .swiper-btn .swiper-prev { position: static; -webkit-transform: none; transform: none; } .choose-number { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-shadow: inset 0 0 0 1.5px #131413; box-shadow: inset 0 0 0 1.5px #131413; height: 7rem; } .choose-number .minus, .choose-number .plus { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; background: none; width: 5.7rem; height: 2.5rem; } .choose-number .minus img, .choose-number .plus img { width: 1.2rem; } .choose-number .input { outline: none; border: none; border-right: 1px solid #C6C6C6; border-left: 1px solid #C6C6C6; border-radius: 0; background: none; padding: 0; width: 5.7rem; height: 2.5rem; font-size: 2rem; text-align: center; } .choose-number ::-webkit-outer-spin-button, .choose-number ::-webkit-inner-spin-button { display: none; } .dropdown { position: relative; background: none; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 24rem; color: #071227; font-size: 2rem; font-weight: 500; } .dropdown-caret { position: relative; margin-left: 1rem; font-size: 1.6rem; } .dropdown-caret::before { font-weight: bold; } .dropdown-select { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; z-index: 9; cursor: pointer; border: 1px solid #3A3E47; padding: 0 3rem; height: 100%; line-height: 7rem; } .dropdown-list { display: none; position: absolute; top: calc(100% + 1rem); left: 0; z-index: 9; border: 1px solid #041229; background: #fff; padding: 1rem 0; width: 100%; list-style: none; } .dropdown-item { z-index: 2; cursor: pointer; margin-bottom: 0 !important; padding: 1rem 3rem; } .dropdown-item.selected, .dropdown-item:hover { color: #FF8E00; } .dropdown.open { z-index: 999; } .dropdown.open .dropdown-list .dropdown-item { display: block; } .dropdown.open .dropdown-caret img { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition: all 0.2s; transition: all 0.2s; } input, textarea { -webkit-transition: outline 0.2s; transition: outline 0.2s; outline: none; -webkit-box-shadow: none; box-shadow: none; border: 1px solid #E5E5E5; border-radius: 0; background: none; padding: 0rem 2.2rem; width: 100%; height: 6rem; font-weight: normal; } textarea { padding: 1rem 2.2rem; min-height: 12rem; resize: none; } input[type=date]::-webkit-inner-spin-button { display: none; } input[type=date]::-webkit-calendar-picker-indicator { position: absolute; right: 0; opacity: 0; width: 4rem; height: 4rem; } .input-text.hasDatepicker { background-image: url(../img/icons/date.png); background-position: center; background-position: calc(100% - 2rem) center; background-repeat: no-repeat; background-size: 2rem auto; } ::-webkit-input-placeholder { color: rgba(112, 112, 112, 0.3); } select:invalid { color: rgba(112, 112, 112, 0.3); } select { -webkit-appearance: none; outline: none; -webkit-box-shadow: none; box-shadow: none; border: 1px solid #E5E5E5; border-radius: 0; background: none; background-image: url(../img/chevron-down.png); background-position: center; background-position: calc(100% - 2.2rem) center; background-repeat: no-repeat; background-size: 1.5rem auto; padding: 0 2.2rem; padding-right: 3rem; width: 100%; height: 6rem; line-height: 6rem; text-transform: capitalize; } #datepicker { background-image: url(../img/chevron-down.png); background-position: center; background-position: calc(100% - 1.5rem) center; background-repeat: no-repeat; background-size: 1.5rem auto; } button { outline: none !important; -webkit-box-shadow: none; box-shadow: none; border: none; background: none; } @media screen and (min-width: 768px) { .form-row { grid-gap: 0 2.4rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } } .form-group { margin-bottom: 3rem; } .form-group .input { position: relative; } .form-group .dropdown, .form-wrap .dropdown { width: 100%; } .form-group label, .form-wrap label { margin-bottom: 1.5rem; font-size: 2rem; font-weight: 500; } .form-group label .required, .form-wrap label .required { color: #9E0000; } .breadcrumb-section { position: relative; margin-top: 2rem; } .breadcrumb-section ol { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0; list-style-type: none; } .breadcrumb-section ol li { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; font-size: 1.2rem; } .breadcrumb-section ol li:not(:last-child) { margin-right: 1.5rem; } .breadcrumb-section ol li:not(:last-child):after { display: block; position: absolute; top: 50%; right: -1.2rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 1.2rem; content: ">"; } .breadcrumb-section ol li:last-child:after { display: none; } .breadcrumb-section ol li.active { text-decoration: underline; } .pagi { gap: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; list-style: none; } .pagi-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: 0.3s; transition: 0.3s; cursor: pointer; margin-bottom: 0 !important; background: none; font-size: 2.2rem; } .pagi-item.pagi-action { font-size: 1.6rem; } .pagi-item.pagi-action img { width: 1.5rem; } .pagi-item.pagi-action em:before { font-weight: bold; } .pagi-item.is-disabled { cursor: no-drop; } .pagi-item:hover, .pagi-item.active { text-stroke: 0.1rem currentColor; -webkit-text-stroke: 0.1rem currentColor; color: #2576BC; } .custom-checkbox, .custom-radio { cursor: pointer; } .custom-checkbox > label, .custom-radio > label { margin-bottom: 0; font-size: 2rem; font-weight: normal !important; font-weight: 500; } .custom-checkbox > input, .custom-radio > input { display: none; cursor: pointer; margin-bottom: 0; padding: 0; width: initial; height: initial; } .custom-checkbox.style-1 > label, .custom-checkbox.style-1 > span, .custom-radio.style-1 > label, .custom-radio.style-1 > span { position: relative; cursor: pointer; padding-left: 5rem; } .custom-checkbox.style-1 > label:before, .custom-checkbox.style-1 > span:before, .custom-radio.style-1 > label:before, .custom-radio.style-1 > span:before { position: absolute; top: 0rem; left: 0; cursor: pointer; border: 0.1rem solid #231F20; background: #fff; width: 3rem; height: 3rem; content: ""; } .custom-checkbox.style-1 > label:after, .custom-checkbox.style-1 > span:after, .custom-radio.style-1 > label:after, .custom-radio.style-1 > span:after { display: block; position: absolute; top: 0.8rem; left: 1.2rem; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; border: solid #2576BC; border-width: 0 0.2rem 0.2rem 0; width: 0.7rem; height: 1.2rem; content: ""; } .custom-checkbox.style-1 input[type=radio]:focus + label .content, .custom-checkbox.style-1 input[type=radio]:focus + span .content, .custom-radio.style-1 input[type=radio]:focus + label .content, .custom-radio.style-1 input[type=radio]:focus + span .content { display: block; } .custom-checkbox.style-1 input[type=radio]:focus + label::after, .custom-checkbox.style-1 input[type=radio]:focus + span::after, .custom-radio.style-1 input[type=radio]:focus + label::after, .custom-radio.style-1 input[type=radio]:focus + span::after { opacity: 1; } .custom-checkbox.style-1 input[type=radio]:checked + label .content, .custom-checkbox.style-1 input[type=radio]:checked + span .content, .custom-radio.style-1 input[type=radio]:checked + label .content, .custom-radio.style-1 input[type=radio]:checked + span .content { display: block; } .custom-checkbox.style-1 input[type=radio]:checked + label::after, .custom-checkbox.style-1 input[type=radio]:checked + span::after, .custom-radio.style-1 input[type=radio]:checked + label::after, .custom-radio.style-1 input[type=radio]:checked + span::after { opacity: 1; } .custom-checkbox.style-1 input[type=checkbox]:focus + label .content, .custom-checkbox.style-1 input[type=checkbox]:focus + span .content, .custom-radio.style-1 input[type=checkbox]:focus + label .content, .custom-radio.style-1 input[type=checkbox]:focus + span .content { display: block; } .custom-checkbox.style-1 input[type=checkbox]:focus + label::after, .custom-checkbox.style-1 input[type=checkbox]:focus + span::after, .custom-radio.style-1 input[type=checkbox]:focus + label::after, .custom-radio.style-1 input[type=checkbox]:focus + span::after { opacity: 1; } .custom-checkbox.style-1 input[type=checkbox]:checked + label .content, .custom-checkbox.style-1 input[type=checkbox]:checked + span .content, .custom-radio.style-1 input[type=checkbox]:checked + label .content, .custom-radio.style-1 input[type=checkbox]:checked + span .content { display: block; } .custom-checkbox.style-1 input[type=checkbox]:checked + label::after, .custom-checkbox.style-1 input[type=checkbox]:checked + span::after, .custom-radio.style-1 input[type=checkbox]:checked + label::after, .custom-radio.style-1 input[type=checkbox]:checked + span::after { opacity: 1; } .custom-checkbox.style-2 > label, .custom-checkbox.style-2 > span, .custom-radio.style-2 > label, .custom-radio.style-2 > span { position: relative; cursor: pointer; padding-left: 3rem; } .custom-checkbox.style-2 > label:before, .custom-checkbox.style-2 > span:before, .custom-radio.style-2 > label:before, .custom-radio.style-2 > span:before { position: absolute; top: 0.4rem; left: 0; cursor: pointer; border: 1px solid #071326; border-radius: 50%; width: 2rem; height: 2rem; content: ""; } .custom-checkbox.style-2 > label .content, .custom-checkbox.style-2 > span .content, .custom-radio.style-2 > label .content, .custom-radio.style-2 > span .content { display: none; margin-top: 2rem; margin-left: -3rem; background: #F7F7F7; padding: 3rem; width: calc(100% + 3rem); font-size: 1.6rem; } .custom-checkbox.style-2 input[type=radio]:focus + label, .custom-checkbox.style-2 input[type=radio]:focus + span, .custom-radio.style-2 input[type=radio]:focus + label, .custom-radio.style-2 input[type=radio]:focus + span { font-weight: bold !important; } .custom-checkbox.style-2 input[type=radio]:focus + label .content, .custom-checkbox.style-2 input[type=radio]:focus + span .content, .custom-radio.style-2 input[type=radio]:focus + label .content, .custom-radio.style-2 input[type=radio]:focus + span .content { display: block; } .custom-checkbox.style-2 input[type=radio]:focus + label:before, .custom-checkbox.style-2 input[type=radio]:focus + span:before, .custom-radio.style-2 input[type=radio]:focus + label:before, .custom-radio.style-2 input[type=radio]:focus + span:before { -webkit-box-shadow: inset 0 0 0 0.3rem #fff; box-shadow: inset 0 0 0 0.3rem #fff; border: 1px solid #2576BC; background: #2576BC; } .custom-checkbox.style-2 input[type=radio]:checked + label .content, .custom-checkbox.style-2 input[type=radio]:checked + span .content, .custom-radio.style-2 input[type=radio]:checked + label .content, .custom-radio.style-2 input[type=radio]:checked + span .content { display: block; } .custom-checkbox.style-2 input[type=radio]:checked + label:before, .custom-checkbox.style-2 input[type=radio]:checked + span:before, .custom-radio.style-2 input[type=radio]:checked + label:before, .custom-radio.style-2 input[type=radio]:checked + span:before { -webkit-box-shadow: inset 0 0 0 0.3rem #fff; box-shadow: inset 0 0 0 0.3rem #fff; border: 1px solid #2576BC; background: #2576BC; } .custom-checkbox.style-2 input[type=checkbox]:focus + label .content, .custom-checkbox.style-2 input[type=checkbox]:focus + span .content, .custom-radio.style-2 input[type=checkbox]:focus + label .content, .custom-radio.style-2 input[type=checkbox]:focus + span .content { display: block; } .custom-checkbox.style-2 input[type=checkbox]:focus + label:before, .custom-checkbox.style-2 input[type=checkbox]:focus + span:before, .custom-radio.style-2 input[type=checkbox]:focus + label:before, .custom-radio.style-2 input[type=checkbox]:focus + span:before { -webkit-box-shadow: inset 0 0 0 0.3rem #fff; box-shadow: inset 0 0 0 0.3rem #fff; border: 1px solid #2576BC; background: #2576BC; } .custom-checkbox.style-2 input[type=checkbox]:checked + label .content, .custom-checkbox.style-2 input[type=checkbox]:checked + span .content, .custom-radio.style-2 input[type=checkbox]:checked + label .content, .custom-radio.style-2 input[type=checkbox]:checked + span .content { display: block; } .custom-checkbox.style-2 input[type=checkbox]:checked + label:before, .custom-checkbox.style-2 input[type=checkbox]:checked + span:before, .custom-radio.style-2 input[type=checkbox]:checked + label:before, .custom-radio.style-2 input[type=checkbox]:checked + span:before { -webkit-box-shadow: inset 0 0 0 0.3rem #fff; box-shadow: inset 0 0 0 0.3rem #fff; border: 1px solid #2576BC; background: #2576BC; } [data-aos=box] { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } [data-aos=box].aos-animate { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); -webkit-transition: 1s cubic-bezier(0.77, 0, 0.18, 1); transition: 1s cubic-bezier(0.77, 0, 0.18, 1); } [data-aos=box-reverse] { -webkit-clip-path: inset(0 0 0 100%); clip-path: inset(0 0 0 100%); } [data-aos=box-reverse].aos-animate { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); -webkit-transition: 1s cubic-bezier(0.77, 0, 0.18, 1); transition: 1s cubic-bezier(0.77, 0, 0.18, 1); } [data-aos=fadeup] { -webkit-transform: translateY(50px); transform: translateY(50px); } [data-aos=fadeup].aos-animate { -webkit-transform: translateY(0rem); transform: translateY(0rem); } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { z-index: 2; } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); z-index: 0; } } @keyframes rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { z-index: 2; } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); z-index: 0; } } @-webkit-keyframes rotate2 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes rotate2 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } .footer { padding: 7rem 0 5rem; color: #fff; } .footer .copyright { margin-top: 5rem; text-align: center; } .footer .logo { display: block; margin: 0 auto; max-width: 31.4rem; } .footer .logo img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); width: 100%; } .footer .menu { margin-top: 5rem; } .footer .menu-list { gap: 1rem 5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; list-style: none; } .footer .menu-link { -webkit-transition: all 0.2s; transition: all 0.2s; font-size: 2rem; } .footer .menu-item:not(:last-child) { margin-bottom: 2rem; } .footer .menu-item:hover a, .footer .menu-item.active a { text-decoration: underline; } .social-list { gap: 2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; list-style: none; } .social-list li { -ms-flex-negative: 0; flex-shrink: 0; } .social-list li a { display: block; width: 2.5rem; height: 2.5rem; } .social-list li a img { -webkit-transition: all 0.3s; transition: all 0.3s; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .social-list li:hover a img { -webkit-transform: scale(1.1); transform: scale(1.1); } .header { position: relative; z-index: 999; -webkit-box-shadow: 0 0.8rem 2.4rem #00000008; box-shadow: 0 0.8rem 2.4rem #00000008; background: #fff; background-image: url(../img/home/bg-navigation.png); background-position: 100% 0; background-repeat: no-repeat; background-size: auto 100%; } .header.fixed { position: fixed; top: 0; right: 0; left: 0; z-index: 99; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-box-shadow: 0 0.8rem 2.4rem #00000008; box-shadow: 0 0.8rem 2.4rem #00000008; background-color: #fff; width: 100%; } .header .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 13rem; } .header .logo { display: block; height: 7.8rem; } .header .logo img { width: auto; height: 100%; } .header .account, .header .cart { position: relative; z-index: 9999; } .header .account-toggle, .header .cart-toggle { position: relative; cursor: pointer; height: 3rem; } .header .account-toggle img, .header .cart-toggle img { width: auto; height: 100%; } .header .account { margin-left: 18rem; } .header .cart { margin-left: 3rem; } .header .cart-toggle .badges { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: -1rem; right: -1rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; background: #F64226; width: 3rem; height: 3rem; color: #fff; font-size: 1.6rem; font-weight: 500; } .header .menu-list { list-style: none; } .header .menu-link { display: block; -webkit-transition: all 0.2s; transition: all 0.2s; font-size: 2rem; font-weight: 400; } .header .menu-item:hover .menu-link, .header .menu-item.active .menu-link { text-stroke: 0.1rem #2576BC; -webkit-text-stroke: 0.1rem #2576BC; } @media (min-width: 1280px) { .header .menu { margin-left: auto; } .header .menu-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header .menu-item:not(:last-child) { margin-right: 6rem; } } .header .overlay { position: fixed; top: 0; left: 0; visibility: hidden; opacity: 0; z-index: 99; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background: rgba(0, 0, 0, 0.4); width: 100vw; height: 100vh; } .header .overlay.active { visibility: visible; opacity: 1; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .header .mobile-nav-inner { position: fixed; top: 0; left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); z-index: 999; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background: #fff; padding: 15px; width: 30rem; height: 100vh; overflow: hidden; overflow-y: auto; } .header .mobile-nav-inner.active { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } @media (max-width: 1279px) { .header .account { margin-left: auto; } .header .menu-item:not(:last-child) { margin-bottom: 2rem; } } .toggle-btn { position: relative; z-index: 9999; cursor: pointer; margin-left: 3rem; } @media (min-width: 1280px) { .toggle-btn { display: none; } } .toggle-btn .line { display: block; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; margin: 0.6rem auto; border-radius: 10px; background-color: #071227; width: 2.5rem; height: 0.3rem; } .toggle-btn.active .line:nth-child(2) { opacity: 0; } .toggle-btn.active .line:nth-child(1) { -webkit-transform: translateY(0.9rem) rotate(45deg); transform: translateY(0.9rem) rotate(45deg); } .toggle-btn.active .line:nth-child(3) { -webkit-transform: translateY(-0.9rem) rotate(-45deg); transform: translateY(-0.9rem) rotate(-45deg); } #loader-container { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: #fff; } #loader-container .loader { display: grid; position: absolute; top: 50%; left: 50%; place-items: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; } #loader-container .loader__logo { width: 8rem; } #loader-container .loader__logo img { width: 100%; } #loader-container .loader__progress { display: none; position: relative; width: 100%; } #loader-container .loader__progress #progress-percent { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 1.6rem; text-align: center; } .cart-page, .checkout-page, .thank-you { padding: 12rem 0; } .cart-page table, .checkout-page table, .thank-you table { width: 100%; } .cart-page .heading-box, .checkout-page .heading-box, .thank-you .heading-box { margin-bottom: 5rem; font-size: 3rem; font-weight: bold; } .cart-page .chose-shipping, .checkout-page .chose-shipping, .thank-you .chose-shipping { margin-left: auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; text-align: left; } .cart-page .chose-shipping .custom-checkbox label, .checkout-page .chose-shipping .custom-checkbox label, .thank-you .chose-shipping .custom-checkbox label { color: #707070; font-size: 1.8rem; font-weight: normal; } .cart-page .chose-shipping .custom-checkbox:not(:last-child), .checkout-page .chose-shipping .custom-checkbox:not(:last-child), .thank-you .chose-shipping .custom-checkbox:not(:last-child) { margin-bottom: 1.5rem; } .cart-page .edit, .checkout-page .edit, .thank-you .edit { color: #837160; font-size: 1.6rem; font-weight: normal; text-decoration: underline; } .cart-page .cart-total .head, .checkout-page .cart-total .head, .thank-you .cart-total .head { border-bottom: 1px solid #E4E4E4; padding: 3rem 8rem; font-size: 3rem; font-weight: 600; } .cart-page .summary-table, .checkout-page .summary-table, .thank-you .summary-table { border: 1px solid #E4E4E4; width: 100%; } .cart-page .summary-table tr td, .checkout-page .summary-table tr td, .thank-you .summary-table tr td { vertical-align: top; padding: 1.5rem 4rem; font-size: 2rem; font-weight: 500; } .cart-page .summary-table tr td:nth-child(2), .checkout-page .summary-table tr td:nth-child(2), .thank-you .summary-table tr td:nth-child(2) { text-align: right; } .cart-page .summary-table tr td:nth-child(1), .checkout-page .summary-table tr td:nth-child(1), .thank-you .summary-table tr td:nth-child(1) { font-size: 2.4rem; font-weight: 600; } .cart-page .summary-table tr:nth-last-child(2) td, .checkout-page .summary-table tr:nth-last-child(2) td, .thank-you .summary-table tr:nth-last-child(2) td { padding-bottom: 3rem; } .cart-page .summary-table tr:first-child td, .checkout-page .summary-table tr:first-child td, .thank-you .summary-table tr:first-child td { padding-top: 3rem; } .cart-page .summary-table tr:last-child, .checkout-page .summary-table tr:last-child, .thank-you .summary-table tr:last-child { border-top: 1px solid #E4E4E4; } .cart-page .summary-table tr:last-child td, .checkout-page .summary-table tr:last-child td, .thank-you .summary-table tr:last-child td { padding: 3rem 4rem; } .cart-page .summary-table tr:last-child td:last-child, .checkout-page .summary-table tr:last-child td:last-child, .thank-you .summary-table tr:last-child td:last-child { color: #2576BC; font-weight: bold; } .cart-page .cart-product-table .table { border: 1px solid #E4E4E4; width: 100%; } .cart-page .cart-product-table .table thead { border-bottom: 1px solid #E4E4E4; } .cart-page .cart-product-table .table thead th { padding: 3rem; font-size: 2.4rem; font-weight: 600; } .cart-page .cart-product-table .table thead th:nth-child(2) { width: 50%; text-align: left; } .cart-page .cart-product-table .table tbody tr { position: relative; border-radius: 0.5rem; width: 100%; } .cart-page .cart-product-table .table tbody tr:not(:last-child) { border-bottom: 1px solid #E4E4E4; } .cart-page .cart-product-table .table tbody td { padding: 5rem 3rem; font-size: 2rem; font-weight: 500; } .cart-page .cart-product-table .table tbody td .choose-number { height: 6rem; } .cart-page .cart-product-table .table tbody td .item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .cart-page .cart-product-table .table tbody td .item .box-img { -ms-flex-negative: 0; flex-shrink: 0; border: 1px solid #E4E4E4; width: 13rem; height: 13rem; overflow: hidden; } .cart-page .cart-product-table .table tbody td .item .box-img img { width: 100%; height: 100%; -o-object-fit: scale-down; object-fit: scale-down; } .cart-page .cart-product-table .table tbody td .item .caption { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-left: 3rem; text-align: left; } .cart-page .cart-product-table .table tbody td .remove { width: 2.5rem; } .cart-page .cart-product-table .table tbody td .remove img { width: 100%; } @media (max-width: 767px) { .cart-page .cart-product-table .table thead { position: absolute; left: -9999px; width: 0px; height: 0px; overflow: hidden; } .cart-page .cart-product-table .table tr, .cart-page .cart-product-table .table td, .cart-page .cart-product-table .table th, .cart-page .cart-product-table .table thead, .cart-page .cart-product-table .table tbody, .cart-page .cart-product-table .table table { display: block; } .cart-page .cart-product-table .table tbody tr { position: relative; } .cart-page .cart-product-table .table tbody tr td { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 3rem 2rem; } .cart-page .cart-product-table .table tbody tr td:first-child:before { display: none; } .cart-page .cart-product-table .table tbody tr td::before { display: inline-block; -webkit-box-flex: 0; -ms-flex: 0 0 30%; flex: 0 0 30%; width: 30%; min-width: 100px; font-weight: 600; text-align: left; content: attr(data-title); } } .cart-page .bottom-w { gap: 3rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .coupon-code { width: 100%; } .coupon-code .form-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 0; -webkit-box-shadow: inset 0 0 0 1px #071326; box-shadow: inset 0 0 0 1px #071326; background: #FFFFFF; } .coupon-code .form-group input { border: none; background: none; height: 6rem; } .coupon-code .form-group .button { padding: 0 5rem; min-width: unset; } .project-details .images { gap: 3rem; display: grid; } @media (min-width: 576px) { .project-details .images { grid-template-areas: "h1 h1 h2" "h1 h1 h3"; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; } .project-details .images .image:nth-child(1) { grid-area: h1; } .project-details .images .image:nth-child(2) { grid-area: h2; } .project-details .images .image:nth-child(3) { grid-area: h3; } } @media (max-width: 767px) { .project-details .images { gap: 2rem; } } .project-details .images .image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .related-projects, .related-products { position: relative; background: transparent -webkit-gradient(linear, left top, left bottom, from(#F7F7F7), to(#FFFFFF)) 0% 0% no-repeat padding-box; background: transparent linear-gradient(180deg, #F7F7F7 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box; padding: 30rem 0 12rem; } .related-projects .bg, .related-products .bg { position: absolute; top: 0; left: 0; width: 100%; } .related-projects .bg img, .related-products .bg img { width: 100%; } .related-projects .swiper-next img, .related-projects .swiper-prev img, .related-products .swiper-next img, .related-products .swiper-prev img { -webkit-filter: brightness(0); filter: brightness(0); } .related-projects .box-img, .related-products .box-img { display: block; } @media (max-width: 1279px) { .related-projects .slider, .related-products .slider { padding: 0 3.9rem; } } @media (min-width: 1280px) { .related-projects .slider .swiper-next, .related-products .slider .swiper-next { right: -7.4rem; } .related-projects .slider .swiper-prev, .related-products .slider .swiper-prev { left: -7.4rem; } } .contact-form { position: relative; background: transparent -webkit-gradient(linear, left top, left bottom, from(#F7F7F7), to(#FFFFFF)) 0% 0% no-repeat padding-box; background: transparent linear-gradient(180deg, #F7F7F7 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box; padding: 30rem 0 12rem; } .contact-form .bg { position: absolute; top: 0; left: 0; width: 100%; } .contact-form .bg img { width: 100%; } .contact-info .map { position: relative; padding-top: calc(957/1048*100%); } .contact-info .map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .contact-info .box-content ul li:not(:last-child) { margin-bottom: 2rem; } @media (max-width: 767px) { .contact-info .box-content { margin-bottom: 6rem; } } .contact-info .info-list { list-style: none; } .contact-info .info-list li:not(:last-child) { margin-bottom: 5rem; } .contact-info .info-list li .icon { width: 4rem; height: 4rem; } .contact-info .info-list li .icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .contact-info .info-list li .info-content { padding-top: 2rem; } .checkout-page .shipping-info .another-address { display: none; padding-top: 2rem; } .checkout-page .payment { padding-top: 5rem; } .checkout-page .custom-checkbox:not(:last-child) { margin-bottom: 2rem; } .thank-you .products-table, .checkout-page .products-table { font-size: 2rem; font-weight: 500; } .thank-you .products-table .table, .checkout-page .products-table .table { width: 100%; } .thank-you .products-table .table thead th:nth-child(2), .thank-you .products-table .table thead td:nth-child(2), .thank-you .products-table .table tbody th:nth-child(2), .thank-you .products-table .table tbody td:nth-child(2), .checkout-page .products-table .table thead th:nth-child(2), .checkout-page .products-table .table thead td:nth-child(2), .checkout-page .products-table .table tbody th:nth-child(2), .checkout-page .products-table .table tbody td:nth-child(2) { text-align: right; } .thank-you .products-table .table tbody tr:not(:last-child) td, .checkout-page .products-table .table tbody tr:not(:last-child) td { padding-bottom: 3rem; } .thank-you .products-table .table tbody tr td:last-child, .checkout-page .products-table .table tbody tr td:last-child { text-align: right; } .products-list-section { padding: 5rem 0 12rem; } .products-list-section .select { gap: 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .products-list-section .select .txt { font-weight: 600; } .products-list-section .select select { border: 1px solid #071326; background-image: url(../img/chevron-down.png), -webkit-gradient(linear, left top, right top, color-stop(50%, #E4E4E4), color-stop(50%, transparent)); background-image: url(../img/chevron-down.png), linear-gradient(to right, #E4E4E4 50%, transparent 50%); background-position: calc(100% - 3rem) center, calc(100% - 8rem) center; background-size: 2rem auto, 1px 4.9rem; padding: 0 3rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 36.5rem; height: 7rem; line-height: 7rem; } .products-list-section .list-products{ row-gap: 4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); -webkit-column-gap: 3rem; -moz-column-gap: 3rem; column-gap: 3rem; list-style-type: none; } @media (min-width: 768px){ .products-list-section .list-products{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px){ .products-list-section .list-products{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } .banner-subpage { position: relative; padding: 15rem 0 35rem; } .banner-subpage:after { inset: 0; position: absolute; background: rgba(0, 0, 0, 0.5); content: ""; } .banner-subpage .bg { position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; } .banner-subpage .bg img { width: 100%; height: auto; } .why-choose-us .inner { position: relative; padding-bottom: 8rem; } @media (max-width: 767px) { .why-choose-us .inner { padding: 0 1.5rem 8rem; } } .why-choose-us .inner:after { position: absolute; bottom: 0; left: 0; z-index: -1; background-image: url(../img/home/bg-project.png); background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; height: calc(100% - 8rem); content: ""; } .why-choose-us .box-img { border: 1.5rem solid #fff; } .why-choose-us .box-img img { width: 100%; } .why-choose-us .my-tabs .tabs-nav-wrap { overflow: hidden; overflow-x: auto; } .why-choose-us .my-tabs .tabs-nav-wrap::-webkit-scrollbar { height: 0; } .why-choose-us .my-tabs .tabs-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-shadow: inset 0 -0.2rem 0 0 rgba(255, 255, 255, 0.4); box-shadow: inset 0 -0.2rem 0 0 rgba(255, 255, 255, 0.4); list-style: none; } .why-choose-us .my-tabs .tabs-nav li { -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer; border-bottom: 0.2rem solid transparent; padding-bottom: 1.5rem; color: rgba(255, 255, 255, 0.4); font-size: 2.2rem; font-weight: 600; white-space: nowrap; } .why-choose-us .my-tabs .tabs-nav li.active, .why-choose-us .my-tabs .tabs-nav li:hover { border-bottom: 0.2rem solid #fff; color: #fff; } .why-choose-us .my-tabs .tabs-nav li:not(:last-child) { margin-right: 7rem; } @media (max-width: 767px) { .why-choose-us .my-tabs .tabs-nav li:not(:last-child) { margin-right: 4rem; } } .why-choose-us .my-tabs .tab-container { padding-top: 4rem; } .our-awards { position: relative; background: transparent -webkit-gradient(linear, left top, left bottom, from(#F7F7F7), to(#FFFFFF)) 0% 0% no-repeat padding-box; background: transparent linear-gradient(180deg, #F7F7F7 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box; } .our-awards .bg { position: absolute; top: 0; left: 0; width: 100%; } .our-awards .bg img { width: 100%; height: auto; } .our-awards .swiper-next img, .our-awards .swiper-prev img { -webkit-filter: brightness(0); filter: brightness(0); } .our-awards .box-img { display: block; } @media (max-width: 1279px) { .our-awards .slider { padding: 0 3.9rem; } } @media (min-width: 1280px) { .our-awards .slider .swiper-next { right: -7.4rem; } .our-awards .slider .swiper-prev { left: -7.4rem; } } .projects-list-section { padding: 5rem 0 12rem; } .projects-list-section .select { gap: 3rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .projects-list-section .select select { border: 1px solid #071326; background-image: url(../img/chevron-down.png), -webkit-gradient(linear, left top, right top, color-stop(50%, #E4E4E4), color-stop(50%, transparent)); background-image: url(../img/chevron-down.png), linear-gradient(to right, #E4E4E4 50%, transparent 50%); background-position: calc(100% - 3rem) center, calc(100% - 8rem) center; background-size: 2rem auto, 1px 4.9rem; padding: 0 3rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 36.5rem; height: 7rem; line-height: 7rem; } .projects-list-section .list-projects{ row-gap: 4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); -webkit-column-gap: 3rem; -moz-column-gap: 3rem; column-gap: 3rem; list-style-type: none; } @media (min-width: 768px){ .projects-list-section .list-projects{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } .project-card .box-img { display: block; position: relative; padding-top: 74.8987854251%; overflow: hidden; } .project-card .box-img img { position: absolute; top: 0; left: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .project-card .content { padding-top: 3rem; } .project-card .content .title { font-size: 2.4rem; font-weight: 500; } .project-card:hover .box-img img { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .contact-section { position: relative; background: transparent -webkit-gradient(linear, left top, left bottom, from(#F7F7F7), to(#FFFFFF)) 0% 0% no-repeat padding-box; background: transparent linear-gradient(180deg, #F7F7F7 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box; padding: 30rem 0 12rem; } .contact-section .bg { position: absolute; top: 0; left: 0; width: 100%; } .contact-section .bg img { width: 100%; } .contact-section .box-img { display: block; position: relative; padding-top: 100%; overflow: hidden; } .contact-section .box-img img { position: absolute; top: 0; left: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .contact-section .box-img:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .how-it-works { background: #FAFAFA; } .how-it-works .banner { position: relative; } .how-it-works .banner:after { inset: 0; position: absolute; opacity: 0.7; background: transparent linear-gradient(110deg, #071227 0%, #59606E 100%) 0% 0% no-repeat padding-box; content: ""; } .how-it-works .banner .content { position: relative; z-index: 1; } .how-it-works .item { -webkit-transition: all 0.3s; transition: all 0.3s; padding: 7rem 18%; } @media (max-width: 991px) { .how-it-works .item { padding: 7rem 15%; } } @media (max-width: 767px) { .how-it-works .item { padding: 7rem 10%; } } @media (max-width: 575px) { .how-it-works .item { padding: 5rem 3rem; } } .how-it-works .item .icon { width: 6.4rem; height: 6.4rem; } .how-it-works .item .icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .how-it-works .item:hover { background-image: url(../img/services/bg.png); background-position: center; background-repeat: no-repeat; background-size: cover; color: #fff; } .how-it-works .item:hover .icon img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .services-section ul li { position: relative; padding-left: 3rem; font-size: 2rem; } .services-section ul li:before { position: absolute; top: 0.8rem; left: 0.5rem; -webkit-transform: rotate(45deg); transform: rotate(45deg); background: #5DC6E9; width: 1rem; height: 1rem; content: ""; } .services-section ul li:not(:last-child) { margin-bottom: 1.6rem; } @media (min-width: 768px) { .services-section .swiper-container { max-height: 77.2rem; } .services-section .thumbs.swiper-container { max-height: 47rem; overflow: visible; } } @media (max-width: 767px) { .services-section .thumbs.swiper-container { margin-bottom: 6rem; } } .services-section .thumbs.swiper-container .swiper-slide { position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; } @media (min-width: 768px) { .services-section .thumbs.swiper-container .swiper-slide { -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0.4; } .services-section .thumbs.swiper-container .swiper-slide-active { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .services-section .thumbs.swiper-container .swiper-slide img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .services-section .thumbs.swiper-container .swiper-slide .image-title { position: absolute; bottom: 0; left: 0; background: transparent -webkit-gradient(linear, left top, left bottom, from(#62C6E7), to(#2B77BA)) 0% 0% no-repeat padding-box; background: transparent linear-gradient(180deg, #62C6E7 0%, #2B77BA 100%) 0% 0% no-repeat padding-box; padding: 3rem 5rem; color: #fff; font-size: 3rem; font-weight: 600; } .services-section .custom-pagination { position: relative; margin: 0 auto; margin-top: 5rem; margin-bottom: 3rem; background: #E4E4E4; width: 100%; height: 2px; } .services-section .custom-pagination .swiper-pagination-progressbar-fill { background: #2576BC; } @media (min-width: 768px) { .services-section .custom-pagination { display: none; } } .services-section .swiper-scrollbar-vertical { position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 99; background: #E4E4E4; width: 1px; height: 100%; } .services-section .swiper-scrollbar-vertical .swiper-scrollbar-drag { border-radius: unset; background: #2576BC; } @media (max-width: 767px) { .services-section .swiper-scrollbar-vertical { display: none; } } .account-section { background-position: 0 0 !important; background-repeat: no-repeat; background-size: 50% auto !important; } .account-section .my-tabs { margin: 0 auto; max-width: 75.6rem; } .account-section .my-tabs .tabs-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-shadow: inset 0 -0.2rem 0 0 #E5E5E5; box-shadow: inset 0 -0.2rem 0 0 #E5E5E5; list-style: none; } .account-section .my-tabs .tabs-nav li { cursor: pointer; border-bottom: 0.2rem solid transparent; padding-bottom: 1.5rem; width: calc(50% - 1.5rem); color: #E5E5E5; font-size: 3rem; font-weight: 600; text-align: center; } .account-section .my-tabs .tabs-nav li:hover, .account-section .my-tabs .tabs-nav li.active { border-bottom: 0.2rem solid #071227; color: #071227; } .account-section .link { border-bottom: 1px solid #071227; padding-bottom: 0.5rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-weight: 500; } .account-section .btn { width: calc( 50% - 1.5rem); } .account-section .input { position: relative; } .account-section .input .toggle-pass { position: absolute; top: 50%; right: 1.5rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-image: url(../img/sign-up/eye.png); background-position: center; background-repeat: no-repeat; background-size: contain; width: 1.7rem; height: 1.3rem; } .account-section .input .toggle-pass.active { background-image: url(../img/sign-up/eye-2.png); } @media (min-width: 768px) { .account-section .box-img { position: relative; height: 100%; } .account-section .box-img .image { position: absolute; top: 0; left: 0; width: calc(100% + 1.5rem); height: 100%; } .account-section .box-img .image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } } @media (min-width: 768px) and (min-width: 1200px) { .account-section .box-img .image { width: calc(100% + calc((100vw - (calc(166.8/192*100vw)))/2 + 1.5rem)); } } @media (min-width: 768px) and (min-width: 1920px) { .account-section .box-img .image { width: calc(100% + calc((100vw - 166.8rem)/2 + 1.5rem)); } } @media (max-width: 767px) { .account-section .box-img .image { margin-left: -1.5rem; width: calc(100% + 3rem); } .account-section .box-img .image img { width: 100%; } } .thank-you .top-content { font-size: 2rem; } .thank-you .top-content tr td:last-child { font-weight: bold; } .thank-you .top-content tr:not(:last-child) td { padding-bottom: 2rem; } .thank-you .products-table table.table tr td { padding-right: 4rem; padding-left: 4rem; } .thank-you .summary-table.mt-5 table.table tr:last-child td:last-child { color: #071227; font-weight: normal; } .thank-you .summary-table.mt-5 table.table tr:nth-last-child(2) td:last-child { color: #2576BC; font-weight: bold; } .thank-you ul li { font-size: 2rem; letter-spacing: 0.2rem; } .product-details { position: relative; padding: 8rem 0 12rem; } .product-details .product-details-slider { overflow: hidden; } .product-details .product-details-slider .product-details-slider-thumbs { margin-top: 2rem; } .product-details .product-details-slider .product-details-slider-thumbs .image { border: 1px solid #E4E4E4; } .product-details .product-details-slider .image { display: block; position: relative; padding-top: 100%; overflow: hidden; } .product-details .product-details-slider .image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-fit: scale-down; object-fit: scale-down; } .product-details .product-details-slider .product-details-slider-gallery { border: 1px solid #E4E4E4; } @media (max-width: 767px) { .product-details .details { margin-top: 6rem; } } .product-details .my-tabs .tabs-nav { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-shadow: inset 0 -0.2rem 0 0 #E5E5E5; box-shadow: inset 0 -0.2rem 0 0 #E5E5E5; list-style: none; } .product-details .my-tabs .tabs-nav li { -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer; border-bottom: 0.2rem solid transparent; padding: 1.6rem 3rem; color: #E5E5E5; font-size: 3rem; font-weight: 600; text-align: center; white-space: nowrap; } .product-details .my-tabs .tabs-nav li:not(:last-child) { margin-right: 3rem; } .product-details .my-tabs .tabs-nav li.active, .product-details .my-tabs .tabs-nav li:hover { border-bottom: 0.2rem solid #071326; color: #071227; } .product-details .my-tabs .tab-container { padding-top: 5rem; } .product-details .my-tabs .tab-container p:not(:last-child) { margin-bottom: 2rem; } .hero-banner .swiper-slide { position: relative; padding: 24rem 0 42.4rem; } @media (max-width: 767px) { .hero-banner .swiper-slide { padding: 15rem 0 20rem; } } .hero-banner .swiper-slide:after { inset: 0; position: absolute; background: rgba(0, 0, 0, 0.5); content: ""; } .hero-banner .swiper-slide .bg { position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; } .hero-banner .swiper-slide .bg img { width: 100%; height: auto; } .our-shop { position: relative; } .our-shop .inner { border-bottom: 1px solid #E4E4E4; } .our-shop .bg { position: absolute; top: 0; left: 0; width: 100%; } .our-shop .bg img { width: 100%; height: auto; } .our-shop .list-products { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; margin: -1.5rem; list-style: none; } .our-shop .list-products .item { margin: 1.5rem; width: calc(25% - 3rem); } @media (max-width: 767px) { .our-shop .list-products .item { width: calc( 33.33% - 3rem); } } @media (max-width: 575px) { .our-shop .list-products .item { width: calc(50% - 3rem); } } .product-card { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; border: 1px solid #E4E4E4; padding: 3rem; } .product-card .box-img { display: block; position: relative; padding-top: 74.5874587459%; } .product-card .box-img img { position: absolute; top: 0; left: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-fit: scale-down; object-fit: scale-down; } .product-card .content { padding-top: 2rem; } .product-card .content .title { font-size: 2rem; font-weight: 500; } .product-card:hover { -webkit-box-shadow: inset 0 -0.5rem 0 0 #5DC6E9; box-shadow: inset 0 -0.5rem 0 0 #5DC6E9; } .product-card:hover .box-img img { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .price { gap: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #2576BC; font-size: 2rem; font-weight: 500; } .price del { color: rgba(7, 18, 39, 0.3); font-size: 1.8rem; font-weight: 500; } .our-projects .swiper-pagination { bottom: -4.3rem; } .our-projects .inner { position: relative; padding-bottom: 8rem; } @media (max-width: 767px) { .our-projects .inner { padding: 0 1.5rem 8rem; } } .our-projects .inner:after { position: absolute; bottom: 0; left: 0; background-image: url(../img/home/bg-project.png); background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; height: calc(100% - 8rem); content: ""; } .our-projects .inner .swiper-next img, .our-projects .inner .swiper-prev img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .our-projects .inner .box-img { border: 1.5rem solid #FFFFFF; } .our-projects .inner .box-img img { width: 100%; } .our-projects .inner .box-content { padding-top: 16rem; } .drop-a-line { position: relative; background: transparent -webkit-gradient(linear, left top, left bottom, from(#F7F7F7), to(#FFFFFF)) 0% 0% no-repeat padding-box; background: transparent linear-gradient(180deg, #F7F7F7 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box; padding: 30rem 0 13rem; } .drop-a-line .bg { position: absolute; top: 0; left: 0; width: 100%; } .drop-a-line .bg img { width: 100%; } .drop-a-line .inner { position: relative; z-index: 1; } @media (min-width: 768px) { .drop-a-line .inner:after { position: absolute; top: 0; z-index: -1; background-image: url(../img/home/bg-contact.png); background-position: center; background-repeat: no-repeat; background-size: cover; width: 58.33%; height: 100%; content: ""; } } .drop-a-line .inner .form-wrap { background-image: url(../img/home/bg-contact.png); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 1.5rem; } .drop-a-line .info { -webkit-box-shadow: 0 0.8rem 2.4rem #00000008; box-shadow: 0 0.8rem 2.4rem #00000008; background: #fff; } @media (max-width: 767px) { .drop-a-line .info { margin-top: 6rem; } } .drop-a-line .info .wrapper { overflow: hidden; } .drop-a-line .info .wrapper .info-list { margin: -0.5px; list-style: none; } .drop-a-line .info .wrapper .info-list li { border: 0.5px solid #E4E4E4; padding: 7rem 5rem; } .drop-a-line .info .wrapper .info-list li .icon { margin: 0 auto; width: 8.6rem; height: 8.6rem; } .drop-a-line .info .wrapper .info-list li .icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media (max-width: 767px) { .drop-a-line .info .wrapper .info-list li .icon { width: 6rem; height: 6rem; } } .drop-a-line .info .wrapper .info-list li .content { padding-top: 3rem; color: #707070; text-align: center; } .drop-a-line .info .wrapper .info-list li .content .title { margin-bottom: 2rem; color: #071227; font-size: 2.4rem; font-weight: 600; } @media (max-width: 767px) { .drop-a-line .info .wrapper .info-list li { padding: 5rem 3rem; } } .drop-a-line input, .drop-a-line textarea, .drop-a-line select { border: none; background: #fff; } .our-services { position: relative; } .our-services .slider .swiper-next img, .our-services .slider .swiper-prev img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } @media (min-width: 1280px) { .our-services .slider .swiper-next { right: -7.4rem; } .our-services .slider .swiper-prev { left: -7.4rem; } } @media (max-width: 1279px) { .our-services .slider { padding: 0 3.9rem; } } .our-services .bg { position: absolute; top: 0; left: 0; width: 100%; } .our-services .bg img { width: 100%; height: auto; } .service-card { border: 1px solid #E4E4E4; background: #fff; padding: 8rem 17%; } .service-card .image { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 8.6rem; } .service-card .image img { width: auto; height: 100%; } @media (max-width: 991px) { .service-card { padding: 8rem 10%; } } @media (max-width: 575px) { .service-card { padding: 8rem 3rem; } } .title-icon { gap: 0.8rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 2.2rem; font-weight: bold; line-height: 1.2; } .title-icon .icon { display: block; width: 3.7rem; } .title-icon .icon img { width: 100%; } .title-icon.text-white .icon img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }