/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /*######################### BODY #####################################*/ body { max-width: 100% !important; width: 100% !important; min-width: 100% !important; background: #f3f3f3; } .text-gold { color: #d1b66f !important; } .text-gray { color: #4a585c !important; } .border-gold { border-color: #d1b66f !important; } .background-gold { background-color: #d1b66f !important; } .background-gray { background-color: #4a585c !important; } .background-white { background-color: #ffffff !important; } a:hover { color: #d1b66f !important; border-color: #d1b66f !important; text-decoration: none !important; } /*##################### HEADER #########################*/ .main-header { height: 60px; background-color: #141414; } .nav-brand-logo { height: 50px; width: auto; } .nav-brand-isotype { height: 30px; } .login-button { background: #d1b66f; color: #2d353d; } /*################### END HEADER #######################*/ /*################## SECTIONS ###########################*/ /*---- Main Section Start ----*/ .welcome-main{ height: 80vh; background-image: url('../assets/img/brand/welcome_backgroud.png'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } .welcome-paragraph { color: #ffffff; } /*---- Main Section End ----*/ /*---- About Section Start ----*/ .about-section { height: 80vh; background-image: url('../assets/img/brand/about_background.png'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } .about-section-paragraph{ text-align: justify; text-align-last: right; } /*---- About Section End ----*/ /*---- Services Section Start ----*/ .our-services-section{ height: 80vh; } /*---- Services Section Start ----*/ /*---- Pricing Section Start ----*/ .header-card { height: max-content; } .header-card-gold { background: #d1b66f; display: inline-block; position: relative; } .header-card-gold:before { margin-left: auto; margin-right: auto; border-radius: 20px; border-top: 2.2rem solid #d1b66f; border-left: 9rem solid transparent; border-right: 9rem solid transparent; content: ""; height: 0; left: 0; position: absolute; bottom: -33px; width: 0; } .header-card-gray { background: #4a585c; display: inline-block; position: relative; } .header-card-gray:before { margin-left: auto; margin-right: auto; border-radius: 20px; border-top: 2.25rem solid #4a585c; border-left: 9rem solid transparent; border-right: 9rem solid transparent; content: ""; height: 0; left: 0; position: absolute; bottom: -33px; width: 0; } /*---- Pricing Section End ----*/ /*---- Team Section End ----*/ .team-card-header{ margin-bottom: -50px; } .team-card-paragraph{ text-align-last: center; } /*---- Team Section End ----*/ /*################## END SECTIONS ########################*/ /*######################## FOOTER ########################*/ .main-footer { color: #ffffff; background-color: #141414; } .container-footer-title { border-bottom-style: dotted; } .footer-title { max-width: 50%; border-bottom-color: #d1b66f; margin-bottom: -2px; } /*######################### Mobile Styles #########################*/ @media only screen and (max-width: 600px) { body { padding: 0; font-size: 14px; } .main-header { height: 50px; padding: 0 10px; } .nav-brand-logo { height: 40px; } .nav-brand-isotype { height: 25px; } .login-button { padding: 5px 10px; border-radius: 5px; } .welcome-main { height: 60vh; background-size: cover; } .welcome-paragraph { padding: 10px; text-align: center; } .about-section { height: 60vh; background-size: cover; display: flex; justify-content: center; align-items: center; } .about-section-paragraph { padding: 10px; text-align: justify; color: #ffffff; } .our-services-section { height: auto; padding: 20px 10px; } .header-card { margin: 10px 0; } .header-card-gold, .header-card-gray { width: 90%; margin: 0 auto; padding: 20px; border-radius: 10px; text-align: center; color: #ffffff; } .main-footer { padding: 20px 10px; text-align: center; } .container-footer-title { padding-bottom: 10px; } .footer-title { margin-bottom: 10px; } .mobile-menu { position: absolute; top: 0; left: -200%; width: 100%; height: 100vh; background: #141414; transition: 0.5s; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 0; } .mobile-menu.active { left: 0; } .mobile-menu ul { width: 100%; text-align: center; } .mobile-menu ul li { margin: 10px 0; } .mobile-menu ul li a { font-size: 18px; } .mobile-menu ul li ul { display: none; } .mobile-menu ul li:hover ul { display: block; background: #2d353d; margin-top: 10px; border-radius: 5px; } .mobile-menu ul li ul li { margin: 5px 0; } }