/*-------------------------------------------------------------- Template Name: Simply Construction HTML Template. Template URI: # Description: Simply Construction is a unique website template designed in HTML with a simple & beautiful look. There is an excellent solution for creating clean, wonderful and trending material design corporate, corporate any other purposes websites. Author: DevItems Version: 1.0 ---------------------------------------------------------------*/ /* ---------------------------------------------------- You can put your custom css code here: -------------------------------------------------------*/ /* broken? @media (min-width: 1200px) { .col-lg-3 { width: 25%; } } */ /* Broken? } @media (min-width: 992px) { .col-md-8 { float: right; } } */ /* undohtml.css */ /* (CC) 2004 Tantek Celik. Some Rights Reserved. */ /* http://creativecommons.org/licenses/by/2.0 */ /* This style sheet is licensed under a Creative Commons License. */ /* Purpose: undo some of the default styling of common (X)HTML browsers */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; /* font-size: 100%; */ /* font: inherit; */ /* vertical-align: baseline; */ } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } * { padding: 0; margin: 0; } /* // Tables */ table { border-collapse: collapse; // Prevent double borders } caption { padding-top: $table-cell-padding; padding-bottom: $table-cell-padding; color: $text-muted; text-align: left; caption-side: bottom; } /* * Remove the text shadow on text selections (opinionated). * 1. Restore the coloring undone by defining the text shadow (opinionated). */ ::-moz-selection { background-color: #b3d4fc; /* 1 */ color: #000000; /* 1 */ text-shadow: none; } /** * 1. Remove the bottom border in Chrome 57- and Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } ::selection { background-color: #b3d4fc; /* 1 */ color: #000000; /* 1 */ text-shadow: none; } /* th { // Matches default `` alignment by inheriting from the ``, or the // closest parent with a set `text-align`. text-align: inherit; } */ /* BP Custom Code */ :root { color-scheme: light dark; } .main__menu { justify-content: right; } .mean-container .mean-bar { right: 0px; } /* Contact page form UX improvements */ .contact-form-wrap { max-width: 940px; margin: 28px auto 0; padding: 36px 40px; background: #ffffff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .contact-form-wrap p { font-size: 18px; line-height: 1.6; margin-bottom: 24px; } .whatsapp-contact-form { font-size: 18px; } .contact-inline-fields { display: flex; gap: 16px; flex-wrap: wrap; } .contact-inline-fields .form-group { flex: 1 1 220px; } .whatsapp-contact-form .form-group { margin-bottom: 20px; } .whatsapp-contact-form label { display: block; margin-bottom: 8px; font-size: 18px; font-weight: 600; } .whatsapp-contact-form input, .whatsapp-contact-form textarea { width: 100%; font-size: 17px; padding: 14px 16px; border: 1px solid #f8dc82; border-radius: 8px; background: #ffffff; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .whatsapp-contact-form textarea { min-height: 170px; resize: vertical; background: #ffffff; } .whatsapp-contact-form input:focus, .whatsapp-contact-form textarea:focus { outline: none; border-color: #f2c200; border-width: 2px; box-shadow: 0 0 0 3px rgba(242, 194, 0, 0.24); } .whatsapp-contact-form .contact-btn { display: flex; justify-content: flex-end; } .whatsapp-send-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; font-size: 18px; border-radius: 10px; background: #25d366; border-color: #25d366; color: #ffffff; } .whatsapp-send-btn i { font-size: 24px; } .whatsapp-send-btn:hover, .whatsapp-send-btn:focus { background: #1da851; border-color: #1da851; color: #ffffff; } @media (max-width: 767px) { .contact-form-wrap { padding: 24px 20px; } .contact-form-wrap p, .whatsapp-contact-form, .whatsapp-contact-form label { font-size: 16px; } } /* Homepage desktop header sizing: match default white menu bar to sticky size */ @media (min-width: 992px) { .sticky__header.scroll-header { animation: none; } #sticky-header-with-topbar .main__menu > li > a { height: 70px; line-height: 70px; } #sticky-header-with-topbar .logo { height: 70px; line-height: 70px; } #sticky-header-with-topbar .logo a img, .sticky__header.scroll-header .logo a img { max-width: 170px; } #sticky-header-with-topbar .htc__header__search { height: 70px; } } /* Banking sector sales page */ .banking-page { background: #ffffff; color: #6f6f6f; font-family: Arial, Helvetica, sans-serif; } .banking-page h1, .banking-page h2, .banking-page h3, .banking-page h4 { color: #203033; font-weight: 800; letter-spacing: 1px; line-height: 1.15; text-transform: uppercase; } .banking-page p, .banking-page li { color: #6f6f6f; font-size: 16px; line-height: 1.8; } .banking-page .text-yellow { color: #ffc233; } .banking-hero { align-items: center; background: linear-gradient(90deg, rgba(31, 48, 51, 0.94) 0%, rgba(31, 48, 51, 0.74) 45%, rgba(31, 48, 51, 0.5) 100%), url('../images/bg/6.jpg') center center / cover no-repeat; display: flex; min-height: 680px; overflow: hidden; padding: 120px 0 130px; position: relative; } .banking-hero::after { background: #ffffff; bottom: -62px; content: ""; height: 118px; left: -5%; position: absolute; transform: rotate(-2.5deg); width: 72%; z-index: 1; } .banking-hero::before { background: #ffc233; bottom: -45px; content: ""; height: 96px; position: absolute; right: -5%; transform: rotate(2.5deg); width: 58%; z-index: 1; } .banking-hero__content { max-width: 800px; position: relative; z-index: 2; } .banking-eyebrow { color: #ffc233; display: inline-block; font-size: 14px; font-weight: 800; letter-spacing: 3px; margin-bottom: 18px; text-transform: uppercase; } .banking-hero h1 { color: #ffffff; font-size: 56px; margin-bottom: 24px; } .banking-hero p { color: rgba(255, 255, 255, 0.88); font-size: 18px; max-width: 760px; } .banking-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .banking-btn { align-items: center; background: #ffc233; border: 2px solid #ffc233; color: #ffffff; display: inline-flex; font-size: 13px; font-weight: 800; justify-content: center; letter-spacing: 1px; min-height: 50px; padding: 14px 24px; text-transform: uppercase; } .banking-btn:hover, .banking-btn:focus { background: #203033; border-color: #203033; color: #ffffff; } .banking-btn--outline { background: transparent; border-color: rgba(255, 255, 255, 0.72); } .banking-btn--outline:hover, .banking-btn--outline:focus { background: #ffc233; border-color: #ffc233; } .banking-section { padding: 92px 0; } .banking-section--grey { background: #f7f7f7; } .banking-section--dark { background: #203033; } .banking-section__header { margin: 0 auto 48px; max-width: 820px; text-align: center; } .banking-section__header h2, .banking-content h2 { font-size: 34px; margin-bottom: 18px; } .banking-section__header p { font-size: 17px; } .banking-card-grid { display: grid; gap: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .banking-card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .banking-card-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); } .banking-card { background: #ffffff; border-bottom: 4px solid #ffc233; box-shadow: 0 12px 35px rgba(31, 48, 51, 0.08); min-height: 100%; padding: 34px 28px; position: relative; } .banking-card__number { color: rgba(255, 194, 51, 0.24); font-size: 46px; font-weight: 900; line-height: 1; position: absolute; right: 24px; top: 22px; } .banking-card h3 { font-size: 20px; margin-bottom: 14px; padding-right: 42px; } .banking-card p { margin: 0; } .banking-split { align-items: center; display: grid; gap: 54px; grid-template-columns: 1fr 1fr; } .banking-image-card { border: 12px solid #ffffff; box-shadow: 0 18px 45px rgba(31, 48, 51, 0.18); position: relative; } .banking-image-card::after { background: #ffc233; bottom: -22px; content: ""; height: 70%; position: absolute; right: -22px; width: 70%; z-index: 0; } .banking-image-card img { display: block; position: relative; width: 100%; z-index: 1; } .banking-list { margin-top: 20px; } .banking-list li { margin-bottom: 10px; padding-left: 28px; position: relative; } .banking-list li::before { color: #ffc233; content: "\f00c"; font-family: FontAwesome; font-size: 14px; left: 0; position: absolute; top: 2px; } .banking-feature-list { display: grid; gap: 20px; } .banking-feature-row { align-items: flex-start; background: rgba(255, 255, 255, 0.08); border-left: 5px solid #ffc233; display: grid; gap: 24px; grid-template-columns: 190px 1fr; padding: 28px 30px; } .banking-section--dark h2, .banking-section--dark h3 { color: #ffffff; } .banking-section--dark p { color: rgba(255, 255, 255, 0.78); } .banking-feature-row h3 { font-size: 20px; margin: 0; } .banking-process-grid { counter-reset: banking-step; display: grid; gap: 22px; grid-template-columns: repeat(5, minmax(0, 1fr)); } .banking-step-card { background: #ffffff; box-shadow: 0 10px 30px rgba(31, 48, 51, 0.08); padding: 30px 24px; position: relative; } .banking-step-card::before { background: #ffc233; color: #203033; content: counter(banking-step, decimal-leading-zero); counter-increment: banking-step; display: inline-flex; font-size: 18px; font-weight: 900; height: 44px; justify-content: center; line-height: 44px; margin-bottom: 22px; transform: skew(-12deg); width: 58px; } .banking-step-card h3 { font-size: 18px; margin-bottom: 12px; } .banking-stats { background: #ffc233; overflow: hidden; padding: 42px 0; position: relative; } .banking-stats::before, .banking-stats::after { background: #203033; content: ""; height: 130%; position: absolute; top: -15%; transform: skew(-18deg); width: 90px; } .banking-stats::before { left: -55px; } .banking-stats::after { right: -55px; } .banking-stats-grid { display: grid; gap: 28px; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; z-index: 1; } .banking-stat { border-right: 1px solid rgba(31, 48, 51, 0.28); padding: 10px 20px; text-align: center; } .banking-stat:last-child { border-right: none; } .banking-stat strong { color: #203033; display: block; font-size: 24px; font-weight: 900; text-transform: uppercase; } .banking-stat span { color: #203033; display: block; font-size: 12px; font-weight: 900; letter-spacing: 1.5px; margin-top: 8px; text-transform: uppercase; } .banking-final-cta { background: linear-gradient(90deg, rgba(31, 48, 51, 0.93) 0%, rgba(31, 48, 51, 0.78) 55%, rgba(31, 48, 51, 0.62) 100%), url('../images/service/commercial-builds.png') center center / cover no-repeat; padding: 105px 0; } .banking-final-cta h2 { color: #ffffff; font-size: 38px; margin-bottom: 18px; } .banking-final-cta p { color: rgba(255, 255, 255, 0.86); font-size: 18px; max-width: 760px; } @media (max-width: 1199px) { .banking-card-grid--four, .banking-card-grid--five, .banking-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 991px) { .banking-hero { min-height: 560px; padding: 90px 0 115px; } .banking-hero h1 { font-size: 42px; } .banking-card-grid, .banking-split, .banking-stats-grid { grid-template-columns: 1fr; } .banking-stat { border-bottom: 1px solid rgba(31, 48, 51, 0.28); border-right: none; } .banking-stat:last-child { border-bottom: none; } } @media (max-width: 767px) { .banking-section { padding: 64px 0; } .banking-hero h1, .banking-final-cta h2 { font-size: 34px; } .banking-section__header h2, .banking-content h2 { font-size: 28px; } .banking-feature-row, .banking-card-grid--four, .banking-card-grid--five, .banking-process-grid { grid-template-columns: 1fr; } .banking-actions { align-items: stretch; flex-direction: column; } .banking-btn { width: 100%; } } /* Architect sales page */ .architect-hero { background: linear-gradient(90deg, rgba(31, 48, 51, 0.94) 0%, rgba(31, 48, 51, 0.72) 48%, rgba(31, 48, 51, 0.46) 100%), url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1800&q=80') center center / cover no-repeat; } .architect-trust-card { overflow: hidden; } .architect-trust-card::before { background: #ffc233; content: ""; height: 5px; left: 0; position: absolute; top: 0; width: 84px; } .architect-image-card img { min-height: 420px; object-fit: cover; } .architect-value-section .banking-section__header h2 { color: #ffffff; } .architect-value-grid { display: grid; gap: 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .architect-value-panel { background: rgba(255, 255, 255, 0.08); border-top: 5px solid #ffc233; padding: 38px 34px; } .architect-value-panel h3 { color: #ffffff; font-size: 22px; margin-bottom: 18px; } .architect-check-list li { color: rgba(255, 255, 255, 0.82); } .architect-image-cta { align-items: center; background: linear-gradient(90deg, rgba(31, 48, 51, 0.88) 0%, rgba(31, 48, 51, 0.72) 52%, rgba(31, 48, 51, 0.52) 100%), url('https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=1800&q=80') center center / cover no-repeat; display: flex; min-height: 520px; padding: 110px 0; } .architect-image-cta__content { max-width: 720px; } .architect-image-cta h2 { color: #ffffff; font-size: 42px; margin-bottom: 18px; } .architect-image-cta p { color: rgba(255, 255, 255, 0.86); font-size: 18px; max-width: 680px; } .architect-stats .banking-stat strong { font-size: 22px; } .architect-final-cta { background: linear-gradient(90deg, rgba(31, 48, 51, 0.94) 0%, rgba(31, 48, 51, 0.78) 55%, rgba(31, 48, 51, 0.62) 100%), url('https://images.unsplash.com/photo-1503387837-b154d5074bd2?auto=format&fit=crop&w=1800&q=80') center center / cover no-repeat; } @media (max-width: 991px) { .architect-value-grid { grid-template-columns: 1fr; } } @media (max-width: 767px) { .architect-image-cta { min-height: 420px; padding: 74px 0; } .architect-image-cta h2 { font-size: 34px; } .architect-value-panel { padding: 30px 24px; } }