@charset "utf-8"; /* Open Sans / Playfair Display: moved out to real tags in (site)/layout.tsx's (with preconnect + display=swap) — see the comment there for why. A CSS @import used to sit here instead; it's a real performance anti-pattern (serial, render-blocking font fetch discovered late) so don't reintroduce it. */ /** * * ----------------------------------------------------------------------------- * * Template : Advokat - Lawyer & Lawfirm HTML Template * Author : rs-theme * Author URI : http://www.rstheme.com/ * * ----------------------------------------------------------------------------- * **/ /* TABLE OF CONTENT --------------------------------------------------------- 01. General CSS 02. Global Class CSS 03. Header Section CSS 04. Sticky Menu CSS 05. Slider Section CSS 06. Banner Section CSS 07. Breadcrumbs Section CSS 08. Services Section CSS 09. Skills Section CSS 10. About Us CSS 11. Consultation Section CSS 12. Team Grid Section CSS 13. Team Slider Section CSS 14. Testimonial CSS 15. Faq Section CSS 16. Counter Section CSS 17. Our Practice CSS 18. Practice Single CSS 19. Gallery Section CSS 20. Case Result CSS 21. Partner Section CSS 22. Blog Section CSS 23. Checkout Section CSS 24. Cart Section CSS 25. Shop Section CSS 26. Single Shop Section CSS 27. Contact Section CSS 28. Footer CSS 29. Error 404 CSS 30. Scroll Up CSS 31. Header Cart Modal Css 32. Preloader CSS --------------------------------------------------------*/ /* ----------------------------------- 01. General CSS -------------------------------------*/ html, body { /* Was 15px/26px — client feedback: body text reads too small. Bumped site-wide (this is the base every .des paragraph and most other body copy inherits from — none of them set their own font-size) rather than patching individual pages, so every page stays consistent. */ font-size: 17px; color: #767676; font-family: "Open Sans", sans-serif; vertical-align: baseline; line-height: 28px; font-weight: 400; overflow-x: hidden; } img { max-width: 100%; height: auto; } p { margin: 0 0 26px; line-height: 1.8; } h1, h2, h3, h4, h5, h6 { font-family: "Playfair Display", serif; color: #1f2839; margin: 0 0 26px; } h1 { font-size: 40px; line-height: 50px; font-weight: 400; } h2 { font-size: 36px; line-height: 48px; font-weight: 400; } h3 { font-size: 24px; line-height: 34px; font-weight: 400; } h4 { font-size: 20px; line-height: 30px; font-weight: 400; } h5 { font-size: 18px; line-height: 28px; font-weight: 400; } h6 { font-size: 16px; line-height: 26px; font-weight: 400; } .uppercase { text-transform: uppercase; } a { color: #b69d74; transition: all 0.3s ease; text-decoration: none !important; outline: none !important; } a:active, a:hover { text-decoration: none; outline: 0 none; color: #222222; } ul { list-style: outside none none; margin: 0; padding: 0; } .clear { clear: both; } ::-moz-selection { background: #b69d74; text-shadow: none; color: #ffffff; } ::selection { background: #b69d74; text-shadow: none; color: #ffffff; } .fs-30 { font-size: 30px; line-height: 40px; } .width-70 { width: 70%; max-width: 535px !important; } .width-unset { width: unset !important; } .gray-color { background-color: #fcfcfc !important; } .sec-color { background-color: #faf8f7 !important; } .white-bg { background-color: #ffffff; } .primary-bg { background: #b69d74; } .secondary-bg { background: #263043; } .title-bg { background: #1f2839; } .gray-bg { background: #f8f8f8; } .transparent-bg { background: transparent; } .bg-fixed { background-attachment: fixed; background-repeat: no-repeat; } .sec4-bg { background: url(images/bg/sec4_bg.jpg); background-size: 100%; background-repeat: no-repeat; background-position: bottom left; } .sec4-right-bg { background: url(images/bg/sec4_right_bg.jpg); background-size: 100%; background-repeat: no-repeat; background-position: bottom right; } .bg1 { background-image: url(images/bg/bg1.jpg); } .bg1-1 { background-image: url(images/bg/bg1.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; } .bg2 { background-image: url(images/bg/bg2.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; } .bg3 { background-image: url(images/bg/bg3.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; } .bg4 { background-image: url(images/bg/bg4.png); background-repeat: repeat; background-position: 0 0; } .bg5 { background-image: url(images/bg/bg5.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; } .bg6 { background-image: url(images/bg/bg6.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; } .bg7 { background-image: url(images/bg/bg7.jpg); background-size: cover; background-repeat: no-repeat; } .bg8 { background-image: url(images/bg/bg8.jpg); background-size: cover; background-repeat: no-repeat; } .circle-bg { background-image: url(images/bg/circle-bg.png); background-size: cover; background-repeat: no-repeat; background-position: top center; } .bg-unset { background: unset !important; } .rs-menu-toggle { color: #b69d74; text-align: right; } button { cursor: pointer; } .glyph-icon:before { margin: 0; } .nav-links { box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); background: #ffffff; display: inline-block; padding: 12px 0; } .nav-links li { display: inline-block; color: #b69d74; padding: 0 17px; border-right: 1px solid #e6e6e6; font-size: 18px; line-height: 23px; } .nav-links li a { color: #767676; } .nav-links li a:hover { color: #b69d74; } .nav-links li:last-child { border: none; } .pagenav-link ul { border: 1px solid #f2f2f2; border-radius: 3px; display: inline-block; padding: 0 3px; } .pagenav-link ul li { display: inline-block; padding: 0 18px; margin: 10px 0; border-right: 1px solid #e6e6e6; color: #b69d74; font-size: 16px; } .pagenav-link ul li a { color: #767676; } .pagenav-link ul li a i:before { color: #767676; font-size: 13px; transition: all 0.3s ease; } .pagenav-link ul li a:hover { color: #b69d74; } .pagenav-link ul li a:hover i:before { color: #b69d74; } .pagenav-link ul li:last-child { border-right: none; } input:focus, select:focus, textarea:focus, button:focus { outline: none !important; } /* ------------------------------------ 02. Global Class CSS ---------------------------------------*/ .rs-vertical-middle { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .rs-vertical-bottom { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: flex-end; -webkit-align-items: flex-end; align-items: flex-end; } .readon { background: #b69d74; line-height: normal; color: #ffffff; transition: all 0.3s ease; border-radius: 3px; padding: 0 20px; height: 50px; line-height: 50px; position: relative; font-weight: 400; padding-right: 50px; display: inline-block; } .readon:before { position: absolute; height: 100%; font-size: 18px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; right: 25px; opacity: 1; top: 0px; font-size: 15px; content: "\f133"; font-family: Flaticon; display: inline-block; font-weight: normal; } .readon.upper { text-transform: uppercase; } .readon.large-btn { font-size: 17px; font-weight: 500; } .readon.big-btn { padding: 10px 50px 10px 30px; font-size: 16px; line-height: 25px; border: 2px solid #b69d74; font-weight: 500; height: unset; } .readon.big-btn:before { top: 50%; transform: translateY(-50%); height: unset; } .readon.big-btn2 { padding: 0 35px; font-weight: 700; } .readon.big-btn2:before { display: none; } .readon.big-btn2:hover { opacity: 0.9; } .readon:hover { color: #ffffff; } .readon:hover:before { right: 20px; } button.readon { border: none; outline: none; } button.readon:focus, button.readon:active { outline: none; } .readon2 { color: #b69d74; padding-right: 30px; position: relative; } .readon2:after { position: absolute; content: "\f133"; font-family: Flaticon; font-style: normal; font-weight: 300; top: 50%; transform: translateY(-50%); right: 5px; color: #b69d74; transition: all 0.3s ease; } .readon2:hover { color: #1f2839; } .readon2:hover:after { right: 0; color: #1f2839; } .header-btn { font-size: 15px; border: none; padding: 18px 22px; border-radius: 5px; color: #ffffff; background: #b69d74; text-transform: capitalize; line-height: 27px; letter-spacing: 1px; font-family: "Playfair Display", serif; } .header-btn:hover { background: #bfa985; color: #ffffff; } .btn-shop { outline: none; font-weight: 400; border: none; text-transform: uppercase; background: #b69d74; font-size: 15px; padding: 8px 25px; color: #ffffff; border-radius: 3px; transition: all 0.3s ease; } .btn-shop:hover { background: #bfa985; color: #ffffff; } .margin-remove { margin: 0 !important; } .pb-274 { padding-bottom: 274px; } .pt-411 { padding-top: 411px; } .mw-755 { max-width: 755px; margin: 0 auto; } .no-gutter { margin-left: 0; margin-right: 0; } .no-gutter [class*="col-"] { padding-left: 0; padding-right: 0; } [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after { margin: 0; } .text-shadow { text-shadow: 2px 2px 15px #333; } .container-fluid { padding-left: 100px; padding-right: 100px; } .display-table { display: table; height: 100%; width: 100%; } .display-table-cell { display: table-cell; vertical-align: middle; } .white-color { color: #ffffff !important; } .title-color { color: #1f2839 !important; } .primary-color { color: #b69d74 !important; } .gray-color2 { color: #d1d1d1; } .images-shadow { box-shadow: 2px 3px 8px #ccc; } ul.listing-style li { position: relative; padding-left: 30px; line-height: 34px; } ul.listing-style li:before { position: absolute; top: 0; left: 0; z-index: 0; content: "\f05d"; font-family: "FontAwesome"; color: #b69d74; font-size: 20px; } ul.listing-style.modify li { padding-left: 23px; } ul.listing-style.modify li:before { font-size: 15px; } .rs-carousel.nav-style1 { position: relative; } .rs-carousel.nav-style1 .owl-nav .owl-next, .rs-carousel.nav-style1 .owl-nav .owl-prev { position: absolute; top: 50%; transform: translateY(-50%); left: 30px; width: 42px; height: 42px; line-height: 42px; border-radius: 50%; background: #263043; text-align: center; color: #ffffff; transition: all 0.5s; transition-delay: 0.7s; opacity: 0; visibility: hidden; } .rs-carousel.nav-style1 .owl-nav .owl-next i:before, .rs-carousel.nav-style1 .owl-nav .owl-prev i:before { content: "\f138"; font-family: Flaticon; } .rs-carousel.nav-style1 .owl-nav .owl-next { right: 30px; left: unset; } .rs-carousel.nav-style1 .owl-nav .owl-next i:before { content: "\f137"; } .rs-carousel.nav-style1:hover .owl-nav .owl-next, .rs-carousel.nav-style1:hover .owl-nav .owl-prev { left: -50px; transition-delay: 0s; visibility: visible; opacity: 1; } .rs-carousel.nav-style1:hover .owl-nav .owl-next { right: -50px; left: unset; } .sec-title .sub-title { margin: 0 0 4px; font-size: 18px; font-family: "Playfair Display", serif; line-height: 26px; text-transform: capitalize; } .sec-title .sub-title.primary { color: #b69d74; } .sec-title .title { color: #1f2839; text-transform: capitalize; } .sec-title .title-desc { color: #767676; } .sec-title.top-line .sub-title { position: relative; display: inline-block; } .sec-title.top-line .sub-title:before, .sec-title.top-line .sub-title:after { position: absolute; content: ""; top: 13px; left: -40px; width: 30px; height: 1px; background: #b69d74; } .sec-title.top-line .sub-title:before { left: auto; right: -40px; } .sec-title.top-line .sub-title.primary:after { background: #b69d74; } .sec-title.top-line .sub-title.white:after { background: #ffffff; } .sec-title.right-line .sub-title { position: relative; display: inline-block; } .sec-title.right-line .sub-title:after { position: absolute; content: ""; top: 13px; right: -70px; width: 50px; height: 2px; background: #b69d74; } .sec-title.right-line .sub-title.primary:after { background: #b69d74; } .sec-title.right-line .sub-title.white:after { background: #ffffff; } /* ----------------------- 03. Header Section CSS --------------------------*/ .full-width-header .toolbar-area { background: rgba(31, 40, 57, 0.47); } .full-width-header .toolbar-area .toolbar-contact { padding: 15px 0; } .full-width-header .toolbar-area .toolbar-contact ul { margin: 0; padding: 0; list-style: none; } .full-width-header .toolbar-area .toolbar-contact ul li { display: inline-block; margin-right: 15px; color: #fff; font-size: 15px; } .full-width-header .toolbar-area .toolbar-contact ul li i { font-size: 15px; margin-right: 7px; color: #b69d74; } .full-width-header .toolbar-area .toolbar-contact ul li a { transition: all 0.3s ease; color: #fff; } .full-width-header .toolbar-area .toolbar-contact ul li a:hover { color: #b69d74; } .full-width-header .toolbar-area .toolbar-sl-share ul { text-align: right; } .full-width-header .toolbar-area .toolbar-sl-share ul li { display: inline-block; font-size: 14px; } .full-width-header .toolbar-area .toolbar-sl-share ul li + li { margin-left: 10px; } .full-width-header .toolbar-area .toolbar-sl-share ul li a { display: block; color: #b69d74; transition: all 0.3s ease; text-decoration: none; font-size: 14px; } .full-width-header .toolbar-area .toolbar-sl-share ul li a:hover { color: #b69d74; } .full-width-header .toolbar-area .toolbar-sl-share ul li a i { text-align: center; display: inline-block; color: #b69d74; transition: 0.4s; -webkit-transition: 0.4s; -mzs-transition: 0.4s; } .full-width-header .toolbar-area .toolbar-sl-share ul li a i:hover { color: #b69d74; } .full-width-header .toolbar-area .toolbar-sl-share ul li.get-btn a { font-size: 14px; padding: 15px 15px; line-height: 27px; letter-spacing: 1px; font-family: "Playfair Display", serif; color: #ffffff; background: #b69d74; text-transform: capitalize; } .full-width-header .toolbar-area .toolbar-sl-share ul li.get-btn a:hover { opacity: 0.9; } .full-width-header .rs-header { z-index: 99; } .full-width-header .rs-header .menu-area { transition: all 0.3s ease; } .full-width-header .rs-header .menu-area .logo-area { position: relative; height: 90px; line-height: 90px; } .full-width-header .rs-header .menu-area .logo-area img { transition: 0.4s; -webkit-transition: 0.4s; max-height: 48px; } .full-width-header .rs-header .menu-area .logo-area .dark { display: none; } .full-width-header .rs-header .menu-area .logo-area .light { display: inherit; } /* "An affiliate of..." badge under the logo — mirrors the logo's own light/dark toggle above (same menu-sticky trigger) so the text stays legible over both the dark hero and the white sticky bar. */ .full-width-header .rs-header .menu-area .affiliate-badge { margin-top: 2px; } .full-width-header .rs-header .menu-area .affiliate-badge .light, .full-width-header .rs-header .menu-area .affiliate-badge .dark { align-items: center; gap: 6px; } .full-width-header .rs-header .menu-area .affiliate-badge img { height: 16px; width: auto; flex-shrink: 0; } .full-width-header .rs-header .menu-area .affiliate-badge span { font-family: "Poppins", sans-serif; font-size: 10px; line-height: 1.3; } .full-width-header .rs-header .menu-area .affiliate-badge .dark { display: none; } .full-width-header .rs-header .menu-area .affiliate-badge .light { display: flex; } .full-width-header .rs-header .menu-area .affiliate-badge .light span { color: rgba(255, 255, 255, 0.75); } .full-width-header .rs-header .menu-area .affiliate-badge .dark span { color: rgba(31, 40, 57, 0.65); } /* At ≤991px the vendor template (responsive.css) switches .logo-area to position:absolute (top:20px) with the logo image capped at max-height:38px !important, so a small compact logo can sit level with the hamburger toggle without pushing layout — the classic "tiny mobile logo" pattern. Per request, mobile should instead show a large logo (like desktop) with the affiliate badge stacked directly below it, both left-aligned near-full-width — i.e. cancel the vendor's compact/ absolute treatment for .logo-area entirely and size the logo responsively instead. Selectors are qualified with the extra `.header-transparent`/`.light`/ `.dark` classes (beyond what responsive.css's own selectors use) purely to outrank its specificity — responsive.css loads after this file (see the LEGACY_STYLESHEETS order comment in (site)/layout.tsx) so a plain specificity tie would let its rules win regardless of source order. Once .logo-area is back in normal flow, .affiliate-badge (already a normal-flow sibling) naturally stacks below it — no more manual top-offset math needed like the old absolute-positioned badge fix this replaced. Knock-on effect: the nav column (hamburger toggle), which relied on the logo column collapsing to ~0 height to visually sit level with the compact logo, would otherwise render as its own row below the taller logo+badge block instead of staying anchored in the corner. Fixed below by pulling just .mobile-menu (the toggle's own wrapper, not the nav-menu dropdown it opens) out of flow so it stays pinned top-right regardless of how tall the logo/badge block grows. Verified with Playwright at 320/375/414/768/820/991px. */ @media only screen and (max-width: 991px) { .full-width-header.header-transparent .rs-header .menu-area .logo-area { position: static; height: auto; line-height: normal; } .full-width-header.header-transparent .rs-header .menu-area .logo-area .light img, .full-width-header.header-transparent .rs-header .menu-area .logo-area .dark img { /* !important to match/beat responsive.css's own !important on this property — importance outranks specificity in the cascade, so a non-important rule can never win here no matter how specific. */ max-height: none !important; width: min(300px, 78vw); height: auto; } .full-width-header.header-transparent .rs-header .menu-area .affiliate-badge { margin-top: 6px; } /* Anchor the hamburger toggle itself top-right, independent of the now much-taller logo/badge block above — otherwise (as plain normal flow) it renders as its own row below that block instead of staying in its usual corner position, which read as "displaced" once the logo grew. Only .mobile-menu (the toggle's own wrapper) is pulled out of flow, not .rs-menu (the nav-menu dropdown it opens) — the open menu can stay wherever normal flow puts it; only the closed-state icon needs to stay pinned. No competing vendor rule for .mobile-menu exists at any breakpoint, so no specificity fight needed here. The nav column (.col-lg-9) is forced static too: it turns out to be position:relative (Bootstrap 3-ism), which made IT — not .full-width-header — the nearest positioned ancestor for top/right, so .mobile-menu's offset was resolving against col-lg-9's own flow position (itself pushed down by the taller logo/badge column above it) instead of anchoring to the header as a whole. Confirmed via offsetParent in Playwright before adding this. */ .full-width-header.header-transparent .rs-header .menu-area .col-lg-9 { position: static; } .full-width-header.header-transparent .rs-header .menu-area .main-menu .mobile-menu { position: absolute; top: 28px; right: 15px; z-index: 2; } } .full-width-header .rs-header .menu-area .rs-menu-area { display: flex; align-items: center; justify-content: flex-end; } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.nav-menu li { display: inline-block; margin-right: 30px; padding: 0; } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.nav-menu li a { transition: all 0.3s ease; font-size: 15px; font-weight: 600; text-transform: capitalize; height: 90px; line-height: 90px; padding: 0; color: #ffffff; } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.nav-menu li a:hover { color: #b69d74; } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.nav-menu li:last-child { margin-right: 0 !important; } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.nav-menu li:last-child i { margin: 0; } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.nav-menu.onepage-menu .active-menu a { color: #b69d74 !important; } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.sub-menu { background: #1f2839; margin: 0; padding: 15px 0; } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.sub-menu li { margin: 0; border: none; } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.sub-menu li a { height: unset; line-height: unset; color: #ffffff; font-weight: 400; padding: 10px 30px !important; } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.sub-menu li a:hover { color: #b69d74 !important; } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.sub-menu li:last-child { margin: 0; } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.sub-menu li.active a { color: #b69d74 !important; } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.sub-menu li.children-mega-menu .child-mega-menu { width: 100%; opacity: 1 !important; position: unset; transform: translateY(0px); } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.sub-menu li.children-mega-menu .child-mega-menu .child-single-megamenu { width: 50%; float: left; } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.sub-menu li.children-mega-menu .child-mega-menu .child-single-megamenu .sub-menu { padding: 0; } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.sub-menu.right-menu { left: unset; right: 0; } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.mega-menu { background: #1f2839; } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.mega-menu .mega-menu-container { padding: 0; margin: 0; } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.mega-menu .mega-menu-container .single-megamenu { width: 50%; float: left; } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.mega-menu .mega-menu-container .single-megamenu .sub-menu .menu-title { font-size: 17px; font-weight: 600; padding: 10px 30px; color: #ffffff; text-transform: capitalize; transition: all 0.3s ease; } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.mega-menu .mega-menu-container .single-megamenu:hover .sub-menu .menu-title { color: #b69d74; } .full-width-header .rs-header .menu-area .main-menu .rs-menu ul li a:hover, .full-width-header .rs-header .menu-area .main-menu .rs-menu ul li.active a, .full-width-header .rs-header .menu-area .main-menu .rs-menu ul li.current-menu-item > a { color: #b69d74 !important; } .full-width-header .rs-header .menu-area .main-menu .nav-expander { font-size: 20px; -webkit-transition: all all 0.3s ease ease; -ms-transition: all all 0.3s ease ease; transition: all all 0.3s ease ease; display: block; color: #92278f; position: absolute; right: 15px; top: 26px; } .full-width-header .rs-header .menu-area .main-menu .nav-expander:hover { transform: scale(1.1); color: #b69d74; } .full-width-header .rs-header .menu-area .appointment-cart { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 9; } .full-width-header .rs-header .menu-area .appointment-cart ul.cart { text-align: right; } .full-width-header .rs-header .menu-area .appointment-cart ul.cart li { display: inline-block; position: relative; cursor: pointer; padding-right: 15px; } .full-width-header .rs-header .menu-area .appointment-cart ul.cart li i { color: #ffffff; transition: all 0.3s ease; } .full-width-header .rs-header .menu-area .appointment-cart ul.cart li i:hover { color: #ffffff; } .full-width-header .rs-header .menu-area .expand-btn-inner li { display: inline-block; margin-right: 26px; } .full-width-header .rs-header .menu-area .expand-btn-inner li .cart-icon { position: relative; } .full-width-header .rs-header .menu-area .expand-btn-inner li .cart-icon .cart-count { position: absolute; min-width: 18px; min-height: 18px; line-height: 18px; font-size: 11px; border-radius: 50%; background: #f2f2f2; color: #767676; top: -13px; right: -17px; text-align: center; transition: all 0.3s ease; } .full-width-header .rs-header .menu-area .expand-btn-inner li > a { color: #ffffff; display: inline-block; cursor: pointer; } .full-width-header .rs-header .menu-area .expand-btn-inner li > a i:before { font-size: 18px; font-weight: 600; } .full-width-header .rs-header .menu-area .expand-btn-inner li > a i.flaticon-shopping-bag-1:before { font-weight: normal; } .full-width-header .rs-header .menu-area .expand-btn-inner li > a:hover { color: #ffffff; } .full-width-header .rs-header .menu-area .expand-btn-inner li:last-child { margin-right: 0; } .full-width-header .rs-header .menu-area.sticky { position: fixed; top: 0; left: 0; width: 100%; background: #ffffff !important; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2); } .full-width-header .rs-header .menu-area.sticky .logo-area img { max-height: 35px; } .full-width-header .rs-header .menu-area.sticky .logo-area .dark { display: inherit; } .full-width-header .rs-header .menu-area.sticky .logo-area .light { display: none; } /* Sticky (scrolled, white bg) header — badge removed entirely rather than swapped to the dark-text variant, per request: kept the compact nav bar clean once scrolled instead of showing it in both states. */ .full-width-header .rs-header .menu-area.sticky .affiliate-badge { display: none; } .full-width-header .rs-header .menu-area.sticky .main-menu .rs-menu ul.nav-menu > li > a { color: #494949; } .full-width-header .rs-header .menu-area.sticky .main-menu .rs-menu ul.nav-menu > li > a:hover { color: #b69d74; } .full-width-header .rs-header .menu-area.sticky .appointment-cart ul.cart li i { color: #494949; } .full-width-header .rs-header .menu-area.sticky .appointment-cart ul.cart li i:hover { color: #b69d74; } .full-width-header .rs-header .menu-area.sticky .expand-btn-inner li .cart-icon .cart-count { background: #b69d74; color: #ffffff; } .full-width-header .rs-header .menu-area.sticky .expand-btn-inner li > a { color: #494949; } .full-width-header .rs-header .menu-area.sticky .expand-btn-inner li > a:hover { color: #b69d74; } .full-width-header .rs-header .right_menu_togle { background: #fafafa; padding: 30px; z-index: 999999; } .full-width-header .rs-header .right_menu_togle .close-btn { overflow: visible; padding: 0; } .full-width-header .rs-header .right_menu_togle .close-btn span { width: 45px !important; height: 45px !important; line-height: 44px !important; border-radius: 100%; background: #b69d74; color: #ffffff; border: none !important; transition: all 0.3s ease; } .full-width-header .rs-header .right_menu_togle .close-btn span i { transition: all 0.3s ease; } .full-width-header .rs-header .right_menu_togle .close-btn span:hover i { transform: rotate(90deg); } .full-width-header .rs-header .right_menu_togle .canvas-logo { padding-left: 0; padding-bottom: 25px; } .full-width-header .rs-header .right_menu_togle .sidebarnav_menu li a { font-size: 17px; color: #222; padding-left: 0; } .full-width-header .rs-header .right_menu_togle .sidebarnav_menu li a:hover { color: #b69d74; } .full-width-header .rs-header .right_menu_togle .canvas-contact { padding: 25px 0 0; } .full-width-header .rs-header .right_menu_togle .canvas-contact .canvas-contact-title { padding: 0 0 15px; font-size: 20px; font-weight: 600; position: relative; } .full-width-header .rs-header .right_menu_togle .canvas-contact .canvas-contact-title:before { content: ""; position: absolute; background: #b69d74; height: 2px; width: 50px; left: 0; bottom: 0; display: block; z-index: 1; } .full-width-header .rs-header .right_menu_togle .canvas-contact .contact { padding: 0 0 30px; } .full-width-header .rs-header .right_menu_togle .canvas-contact .contact li { padding: 0 0 13px; } .full-width-header .rs-header .right_menu_togle .canvas-contact .contact li i { padding-right: 10px; } .full-width-header .rs-header .right_menu_togle .canvas-contact .contact li a { color: #767676; } .full-width-header .rs-header .right_menu_togle .canvas-contact .contact li a:hover { color: #b69d74; } .full-width-header .rs-header .right_menu_togle .canvas-contact .contact li:last-child { padding: 0; } .full-width-header .rs-header .right_menu_togle .canvas-contact .social li { display: inline-block; padding-right: 10px; } .full-width-header .rs-header .right_menu_togle .canvas-contact .social li a i { font-size: 18px; color: #ffffff; width: 40px; height: 40px; line-height: 40px; background: #b69d74; text-align: center; border-radius: 50%; } .full-width-header .rs-header .right_menu_togle .canvas-contact .social li a:hover { opacity: 0.82; } .full-width-header .rs-header .right_menu_togle .canvas-contact .social li:last-child { padding: 0; } .full-width-header.header-transparent { position: absolute; width: 100%; z-index: 999; } .full-width-header.header-transparent .nav-menu { text-align: right; padding-right: 40px; } .full-width-header.header-transparent .menu-sticky { background: transparent; } .full-width-header.header-transparent.modify { position: inherit; } .full-width-header.header-transparent.modify .toolbar-area { background: #1f2839; } .full-width-header.header-transparent.modify .rs-header .menu-area .logo-area .dark { display: inherit !important; } .full-width-header.header-transparent.modify .rs-header .menu-area .main-menu .rs-menu .nav-menu > li a { color: #333333; } .full-width-header.header-transparent.modify .rs-header .menu-area .main-menu .rs-menu .nav-menu > li li > a { color: #ffffff; } .full-width-header.header-transparent.modify .rs-header .menu-area .expand-btn-inner li > a { color: #333333; } .full-width-header.header-transparent2 { position: absolute; width: 100%; z-index: 999; } .full-width-header.header-transparent2 .rs-header .menu-area { background: transparent; } .full-width-header.header-transparent2 .rs-header .menu-area .top-part { padding: 20px 0; } .full-width-header.header-transparent2 .rs-header .menu-area .top-part .info-address { text-align: right; } .full-width-header.header-transparent2 .rs-header .menu-area .top-part .info-address li { display: inline-block; text-align: left; border-right: 1px solid #263043; padding-right: 20px; margin-right: 17px; } .full-width-header.header-transparent2 .rs-header .menu-area .top-part .info-address li .address { display: flex; align-items: center; vertical-align: middle; } .full-width-header.header-transparent2 .rs-header .menu-area .top-part .info-address li .address .icon-part { padding-right: 15px; } .full-width-header.header-transparent2 .rs-header .menu-area .top-part .info-address li .address .icon-part i:before { font-size: 25px; color: #b69d74; } .full-width-header.header-transparent2 .rs-header .menu-area .top-part .info-address li .address .content-part span { display: block; color: #ffffff; } .full-width-header.header-transparent2 .rs-header .menu-area .top-part .info-address li .address .content-part a { color: #ffffff; opacity: 0.5; } .full-width-header.header-transparent2 .rs-header .menu-area .top-part .info-address li .address .content-part a:hover { color: #b69d74; } .full-width-header.header-transparent2 .rs-header .menu-area .top-part .info-address li:last-child { border-right: none; padding-right: 0; margin-right: 0; } .full-width-header.header-transparent2 .rs-header .menu-area .logo-md { display: none; } .full-width-header.header-transparent2 .rs-header .menu-area .menu-part .container { background: #ffffff; padding: 0 30px; border-radius: 5px; } .full-width-header.header-transparent2 .rs-header .menu-area .menu-part .container .main-menu .rs-menu { float: none; padding: 0; } .full-width-header.header-transparent2 .rs-header .menu-area .menu-part .container .main-menu .rs-menu ul.nav-menu > li > a { color: #333333; } .full-width-header.header-transparent2 .rs-header .menu-area .menu-part .container .main-menu .rs-menu ul.nav-menu > li.current-menu-item > a { color: #b69d74; } .full-width-header.header-transparent2 .rs-header .menu-area .menu-part .container .main-menu .rs-menu ul.nav-menu > li > a { height: 78px; line-height: 78px; } .full-width-header.header-transparent2 .rs-header .menu-area.sticky .top-part { display: none; } .full-width-header.header-transparent2 .rs-header .rs-menu-area .expand-btn-inner { margin-right: 35px; } .full-width-header.header-transparent2 .rs-header .rs-menu-area .expand-btn-inner li .cart-icon .cart-count { top: 14px; right: -18px; } .full-width-header.header-transparent2 .rs-header .rs-menu-area .expand-btn-inner li > a { color: #333333; height: 78px; line-height: 78px; } .full-width-header.header-transparent2 .rs-header .rs-menu-area .expand-btn-inner li > a:hover { color: #b69d74; } .full-width-header.header-transparent3 { position: absolute; width: 100%; z-index: 999; } .full-width-header.header-transparent3 .rs-header .menu-area { background: transparent; } .full-width-header.header-transparent3 .rs-header .menu-area .main-menu .rs-menu .nav-menu { text-align: right; padding-right: 40px; } .full-width-header.header-transparent3 .rs-header .menu-area .main-menu .rs-menu .nav-menu > li > a { color: #333333; } .full-width-header.header-transparent3 .rs-header .menu-area .main-menu .rs-menu .nav-menu > li.current-menu-item > a { color: #b69d74; } .full-width-header.header-transparent3 .rs-header .rs-menu-area .expand-btn-inner li .cart-icon .cart-count { top: 14px; right: -18px; background: #ffffff; } .full-width-header.header-transparent3 .rs-header .rs-menu-area .expand-btn-inner li > a { color: #333333; height: 78px; line-height: 78px; } .full-width-header.header-transparent3 .rs-header .rs-menu-area .expand-btn-inner li > a:hover { color: #b69d74; } .full-width-header.header-transparent3 .rs-header .sticky .expand-btn-inner li .cart-icon { color: #333333; } .full-width-header.header-transparent3 .rs-header .sticky .expand-btn-inner li .cart-icon .cart-count { background: #b69d74; color: #ffffff; } .full-width-header.header-transparent4 { position: absolute; width: 100%; z-index: 999; } .full-width-header.header-transparent4 .nav-menu { text-align: right; padding-right: 40px; } .full-width-header.header-transparent4 .menu-sticky { background: transparent; } body .search-modal .modal-content { background: transparent; position: initial; border: 0; } body .search-modal .search-block input { height: 60px; line-height: 60px; padding: 0 15px; background: transparent; border-width: 0 0 1px 0; border-radius: 0; border-color: rgba(255, 255, 255, 0.4); box-shadow: none; color: #ffffff; font-weight: 600; font-size: 18px; } body .search-modal .close { color: #ffffff; margin-top: 20px; font-size: 14px; background-color: transparent; height: 40px; width: 40px; text-align: center; line-height: 40px; border-radius: 50%; opacity: 1; outline: none; transition: all 0.3s ease; } body .search-modal .close:hover { color: #b69d74 !important; opacity: 1 !important; } body .modal-backdrop { opacity: 0.95 !important; } /*------------------------------------ 04. Sticky Menu CSS --------------------------------------*/ .menu-sticky { background: #fff; margin: 0; z-index: 999; width: 100%; top: 0; position: relative; } @-webkit-keyframes sticky-animation { 0% { opacity: 0; -webkit-transform: translateY(-100%); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes sticky-animation { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(0); } } /* ------------------------------------ 05. Slider Section CSS ---------------------------------------*/ .rs-slider { position: relative; overflow: hidden; text-align: left; } .rs-slider.slider1 { /*-- Animations Start --*/ /*-- Animations End --*/ } .rs-slider.slider1 .sl-sub-title { -webkit-animation: fadeInDown 0.5s ease-in-out; animation: fadeInDown 0.5s ease-in-out; } .rs-slider.slider1 .sl-title { -webkit-animation: fadeInLeft 1s ease-in-out; animation: fadeInLeft 1s ease-in-out; } .rs-slider.slider1 .sl-desc { -webkit-animation: fadeInUp 0.8s ease-in-out; animation: fadeInUp 0.8s ease-in-out; } .rs-slider.slider1 .slider-bottom { -webkit-animation: zoomIn 0.8s ease-in-out; animation: zoomIn 0.8s ease-in-out; } .rs-slider.slider1 .sl-sub-title { margin-bottom: 7px; font-size: 42px; font-weight: 400; font-family: "Playfair Display", serif; line-height: 50px; color: #b69d74; } .rs-slider.slider1 .sl-title { margin-bottom: 20px; /* Was 70px/90px — sized for a short punchy headline like the original "We Get It Right". The current one ("Professionalism. Integrity. Excellence.") is a full sentence and wraps to 3 lines at that size, which reads as oversized/cramped with no breathing room around it. Smaller size for a wordier headline. */ font-size: 48px; line-height: 58px; font-weight: 700; color: #ffffff; } .rs-slider.slider1 .sl-title span { display: block; } .rs-slider.slider1 .sl-desc { font-size: 18px; line-height: 30px; margin: 0 auto; color: #d1d1d1; text-shadow: 0 10px 20px #000; } .rs-slider.slider1 .slider-bottom { display: inline-block; margin: 39px 0 20px; } .rs-slider.slider1 .slider-bottom .readon { display: block !important; } .rs-slider.slider1 .slider-bottom .white-btn { background: #ffffff; color: #b69d74; } .rs-slider.slider1 .slider-bottom ul li { display: inline-block; margin-right: 15px; } .rs-slider.slider1 .slider-bottom ul li:last-child { margin: 0; } .rs-slider.slider1 .content-part { margin-left: 0px; /* Was -50px in the original template, tuned for a shorter header. Our header (toolbar row + nav row) runs ~147px tall, so that negative margin pulled the hero text up underneath the logo/nav. Positive margin instead, to clear the header with room to spare. */ margin-top: 20px; } /* Slide 1 has no image column (removed — see page.tsx), so the row doesn't get stretched tall the way slide-2's still does; it needs its own clearance, separate from the shared .content-part rule above. Matches .rs-slider.slider1 .content-part above on specificity (3 classes) rather than just ".hero-slide1-content" alone (1 class) — otherwise the shared rule's higher specificity wins regardless of which one is declared later, and this override is silently ignored. Used to be a much larger clamp() (100-250px) so the headline cleared .full-width-header.header-transparent, which floats absolutely over whatever's first on the page. Since the NewsMarquee section was added above the hero (see .picpa-news-marquee below), *it* now clears the header — #rs-slider starts well below the header regardless, so this only needs to be a small, fixed visual gap under the marquee, not a header-height calculation. */ .rs-slider.slider1 .hero-slide1-content { margin-top: 40px; } /* ≤991px: matches the flat value above — no separate header-height modelling needed here either now that the marquee (not this margin) clears the header at every breakpoint (see .picpa-news-marquee's own responsive padding-top). Selector uses #rs-slider (the slider wrapper's id) rather than just ".rs-slider.slider1", even though both match the same element: vendor responsive.css has its own equal-specificity (3-class) breakpoint rules for the shared ".content-part" class — `≤991px { margin-top: 200px }` and `≤767px { margin-top: 150px }` — and since responsive.css loads after this file, those rules always won regardless of source order within *this* file (equal specificity always favors the later stylesheet, full stop). Confirmed via Playwright: this override was silently having zero effect until the id was added. */ @media only screen and (max-width: 991px) { #rs-slider.slider1 .hero-slide1-content, #rs-slider.slider1 .hero-slide2-content { margin-top: 40px; } } /* ≤767px: responsive.css floors the hero background image at min-height:450px (a fixed value, unrelated to and predating this session's header changes — it exists purely so the photo isn't absurdly short on narrow phones, since width:100% + auto aspect ratio on a 1920x1200 source would otherwise render only ~234px tall at 375px width). Before the header/logo changes above, the shorter compact mobile header + hero text comfortably fit inside that 450px. Now the taller header (logo+badge+toggle stacked in flow) pushes the headline block's own bottom edge to ~453px at 375px width — right at the 450px floor already, and past it on some content variations — spilling the "Contact Us" button onto the plain page background below the image before the next section starts. Raise the floor instead of shrinking the header back down. Confirmed via Playwright measurement, not inferred — see the commit this was fixed in. */ @media only screen and (max-width: 767px) { #rs-slider.slider1 .nivoSlider .nivo-main-image { min-height: 540px; } } /* Slide 2 still has its image column, so the row is naturally stretched tall by it and needs pulling up — but only while that column sits beside the text (≥992px); below that, Bootstrap stacks the columns (image moves below the text), so the row's height no longer depends on the image and this correction would push the text the wrong way. */ @media (min-width: 992px) { .rs-slider.slider1 .hero-slide2-content { margin-top: -153px; } } .rs-slider.slider1 .nivoSlider .nivo-main-image { max-height: 1000px; } .rs-slider.slider1 .nivoSlider .sl-ly-img { margin-left: 100px; } .rs-slider.slider1 .nivoSlider .sl-ly-img img { position: unset; padding-top: 150px; max-height: unset; } .rs-slider.slider1 .nivo-caption { padding: 0; } .rs-slider.slider2 { /*-- Animations Start --*/ /*-- Animations End --*/ } .rs-slider.slider2 .sl-sub-title { -webkit-animation: fadeInDown 1.3s ease-in-out; animation: fadeInDown 1.3s ease-in-out; } .rs-slider.slider2 .sl-title { -webkit-animation: fadeInDown 1s ease-in-out; animation: fadeInDown 1s ease-in-out; } .rs-slider.slider2 .sl-desc { -webkit-animation: fadeInUp 1s ease-in-out; animation: fadeInUp 1s ease-in-out; } .rs-slider.slider2 .slider-bottom { -webkit-animation: fadeInUp 1.3s ease-in-out; animation: fadeInUp 1.3s ease-in-out; } .rs-slider.slider2 .sl-title, .rs-slider.slider2 .sl-desc { color: #ffffff; } .rs-slider.slider2 .sl-sub-title { color: #b69d74; margin-bottom: 2px; font-size: 42px; font-family: "Playfair Display", serif; line-height: 50px; } .rs-slider.slider2 .sl-title { margin-bottom: 20px; font-size: 70px; line-height: 90px; font-weight: 700; } .rs-slider.slider2 .sl-title span { display: block; } .rs-slider.slider2 .sl-desc { font-size: 18px; line-height: 35px; margin: 0 auto; text-shadow: 0 10px 20px #000; } .rs-slider.slider2 .slider-bottom { display: inline-block; margin: 40px 0 0; } .rs-slider.slider2 .slider-bottom .readon { display: block !important; } .rs-slider.slider2 .slider-bottom .white-btn { background: #ffffff; color: #b69d74; } .rs-slider.slider2 .slider-bottom ul li { display: inline-block; margin-right: 15px; } .rs-slider.slider2 .slider-bottom ul li:last-child { margin: 0; } .rs-slider.slider2 .nivo-directionNav > a { width: 70px; height: 70px; line-height: 70px; background: rgba(182, 157, 116, 0.06); } .rs-slider.slider2 .nivo-caption { padding: 160px 0 0; } .rs-slider.slider2 .slides img { height: 100vh !important; } .rs-slider.slider4 { /*-- Animations Start --*/ /*-- Animations End --*/ } .rs-slider.slider4 .sl-sub-title { -webkit-animation: fadeInDown 0.5s ease-in-out; animation: fadeInDown 0.5s ease-in-out; } .rs-slider.slider4 .sl-title { -webkit-animation: fadeInLeft 1s ease-in-out; animation: fadeInLeft 1s ease-in-out; } .rs-slider.slider4 .sl-desc { -webkit-animation: fadeInUp 0.8s ease-in-out; animation: fadeInUp 0.8s ease-in-out; } .rs-slider.slider4 .slider-bottom { -webkit-animation: zoomIn 0.8s ease-in-out; animation: zoomIn 0.8s ease-in-out; } .rs-slider.slider4 .sl-sub-title { margin-bottom: 7px; font-size: 42px; font-weight: 400; font-family: "Playfair Display", serif; line-height: 50px; color: #b69d74; } .rs-slider.slider4 .sl-title { margin-bottom: 20px; font-size: 70px; line-height: 90px; font-weight: 700; color: #ffffff; } .rs-slider.slider4 .sl-title span { display: block; } .rs-slider.slider4 .sl-desc { font-size: 18px; line-height: 30px; margin: 0 auto; color: #d1d1d1; text-shadow: 0 10px 20px #000; } .rs-slider.slider4 .slider-bottom { display: inline-block; margin: 39px 0 20px; } .rs-slider.slider4 .slider-bottom .readon { display: block !important; } .rs-slider.slider4 .slider-bottom .white-btn { background: #ffffff; color: #b69d74; } .rs-slider.slider4 .slider-bottom ul li { display: inline-block; margin-right: 15px; } .rs-slider.slider4 .slider-bottom ul li:last-child { margin: 0; } .rs-slider.slider4 .content-part { margin-left: 0px; margin-top: -50px; } .rs-slider.slider4 .nivoSlider .nivo-main-image { max-height: 1000px; } .rs-slider.slider4 .nivoSlider .sl-ly-img { margin-left: 100px; } .rs-slider.slider4 .nivoSlider .sl-ly-img img { position: unset; padding-top: 150px; max-height: unset; } .rs-slider.slider4 .nivo-caption { padding: 0; } .rs-slider.slider5 .sl-sub-title { margin-bottom: 0; font-size: 45px; font-weight: 400; font-family: "Playfair Display", serif; line-height: 60px; color: #ffffff; } .rs-slider.slider5 .sl-title { margin-bottom: 0px; font-size: 55px; line-height: 70px; font-weight: 400; color: #ffffff; } .rs-slider.slider5 .slider-bottom { display: inline-block; margin: 28px 0 0; } .rs-slider.slider5 .slider-bottom .readon { display: block !important; padding: 0 35px; font-size: 17px; text-transform: uppercase; height: 58px; line-height: 58px; } .rs-slider.slider5 .slider-bottom .readon i:before { font-size: 16px; } .rs-slider.slider5 .slider-bottom .readon:before { display: none; } .rs-slider.slider5 .slider-bottom .readon:hover { background: rgba(182, 157, 116, 0.9); } .rs-slider.slider5 .content-part { max-width: 650px; padding: 45px 0 55px; margin: 0 auto; position: relative; } .rs-slider.slider5 .content-part .slider-des, .rs-slider.slider5 .content-part .slider-bottom { position: relative; z-index: 1; } .rs-slider.slider5 .content-part:before, .rs-slider.slider5 .content-part:after { position: absolute; content: ""; border-radius: 6px; background: rgba(31, 40, 57, 0.56); width: 100%; height: 100%; } .rs-slider.slider5 .content-part:after { top: -6px; left: -6px; -webkit-animation: fadeInLeftShotr 0.5s ease-in-out; animation: fadeInLeftShotr 0.5s ease-in-out; } .rs-slider.slider5 .content-part:before { bottom: -6px; right: -6px; -webkit-animation: fadeInRightShotr 0.5s ease-in-out; animation: fadeInRightShotr 0.5s ease-in-out; } .rs-slider.slider5 .nivoSlider .nivo-main-image { max-height: 1000px; } .rs-slider.slider5 .nivoSlider .sl-ly-img { margin-left: 100px; } .rs-slider.slider5 .nivoSlider .sl-ly-img img { position: unset; padding-top: 150px; max-height: unset; } .rs-slider.slider5 .nivo-caption { padding: 0; } .rs-slider .sl-wrap { padding: 50px 0; } .rs-slider .nivo-directionNav > a { font-size: 0; width: 40px; height: 40px; line-height: 40px; text-align: center; border: none; background: #1f2839; border-radius: 50%; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; opacity: 0; } .rs-slider .nivo-directionNav > a:hover { background: #b69d74; } .rs-slider .nivo-directionNav > a:before { font-family: FontAwesome; position: absolute; font-size: 28px; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); color: #fff; } .rs-slider .nivo-directionNav > a.nivo-prevNav { left: 60px; } .rs-slider .nivo-directionNav > a.nivo-prevNav:before { content: "\f104"; } .rs-slider .nivo-directionNav > a.nivo-nextNav { right: 60px; } .rs-slider .nivo-directionNav > a.nivo-nextNav:before { content: "\f105"; margin-left: 2px; } .rs-slider .nivoSlider:hover .nivo-directionNav > a { opacity: 1; } .rs-slider .nivoSlider:hover .nivo-directionNav > a.nivo-prevNav { left: 30px; } .rs-slider .nivoSlider:hover .nivo-directionNav > a.nivo-nextNav { right: 30px; } .rs-slider .nivo-controlNav { position: absolute; bottom: 50px; z-index: 11; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: none !important; } .rs-slider .nivo-controlNav .nivo-control { width: 26px; height: 7px; border: 1px solid #fff; font-size: 0px; display: inline-block; margin-right: 7px; -webkit-transition: 0.4s ease all; transition: 0.4s ease all; } .rs-slider .nivo-controlNav .nivo-control.active { background: #b69d74; border-color: #b69d74; } /*------------------------------------ 06. Banner Section CSS ------------------------------------*/ .rs-banner.layout1 { background: url(images/banner/banner1.jpg); background-position: 50% 50%; padding: 324px 0 240px; background-repeat: no-repeat; background-size: cover; } .rs-banner .banner-inner .banner-title { font-size: 60px; line-height: 75px; font-weight: 700; color: #333333; margin: 0 0 11px; } .rs-banner .banner-inner .subtitle { font-size: 40px; line-height: 55px; color: #b69d74; margin-bottom: 3px; } .rs-banner .banner-inner .desc { color: #333333; font-size: 18px; line-height: 30px; margin-bottom: 10px; } /*------------------------------------ 07. Breadcrumbs Section CSS ------------------------------------*/ .rs-breadcrumbs { background: url(images/breadcrumbs/inner1.jpg); background-size: cover !important; padding: 260px 0 150px; background-repeat: no-repeat !important; } .rs-breadcrumbs.innerbg2 { background: url(images/breadcrumbs/inner2.jpg); } .rs-breadcrumbs.innerbg3 { background: url(images/breadcrumbs/inner3.jpg); } .rs-breadcrumbs.innerbg4 { background: url(images/breadcrumbs/inner4.jpg); } .rs-breadcrumbs.innerbg5 { background: url(images/breadcrumbs/inner5.jpg); } .rs-breadcrumbs.innerbg6 { background: url(images/breadcrumbs/inner6.jpg); } .rs-breadcrumbs.innerbg7 { background: url(images/breadcrumbs/inner7.jpg); } .rs-breadcrumbs.innerbg8 { background: url(images/breadcrumbs/inner8.jpg); } .rs-breadcrumbs.innerbg9 { background: url(images/breadcrumbs/inner9.jpg); } .rs-breadcrumbs.innerbg10 { background: url(images/breadcrumbs/inner10.jpg); } .rs-breadcrumbs .breadcrumbs-title { font-size: 45px; line-height: 50px; font-weight: 700; text-transform: capitalize; letter-spacing: 1px; } .rs-breadcrumbs .breadcrumbs-meta li { color: #b69d74; display: inline-block; padding-right: 10px; } .rs-breadcrumbs .breadcrumbs-meta li a { color: #ffffff; } .rs-breadcrumbs .breadcrumbs-meta li a:hover { color: #b69d74; } .rs-breadcrumbs .breadcrumbs-meta li:after { content: "\f137"; color: #767676; padding-left: 10px; font-family: Flaticon; font-size: 12px; } .rs-breadcrumbs .breadcrumbs-meta li:last-child { padding: 0; } .rs-breadcrumbs .breadcrumbs-meta li:last-child:after { display: none; } /*------------------------------------- 08. Services Section CSS -------------------------------------*/ .rs-services.style1 { position: relative; z-index: 11; } .rs-services.style1.long-gap { /* Was -140px — opened up by the same +50px the hero content above it just moved down by (see .hero-slide1-content in the slider section), so the button-to-box-row clearance that was tuned at -140px doesn't shrink back down to a collision. */ margin-top: -90px; } .rs-services.style1 .service-inner { overflow: hidden; /* Boxes float:left by default, so a box whose title/desc wraps to more lines than its siblings ends up a different height than the rest of the row. display:flex here makes flex's default align-items:stretch equal-height the three boxes (float is ignored on flex items; the 33.33% width below still applies as each item's flex-basis). */ display: flex; flex-wrap: wrap; } .rs-services.style1 .service-inner .service-box { background: #1f2839; padding: 50px; transition: 0.2s; float: left; width: 33.33%; overflow: hidden; } .rs-services.style1 .service-inner .service-box .image-part { float: left; margin-right: 18px; } .rs-services.style1 .service-inner .service-box .image-part img { width: 60px; } .rs-services.style1 .service-inner .service-box .text { overflow: hidden; } .rs-services.style1 .service-inner .service-box .text .title { margin-bottom: 10px; line-height: 40px; } .rs-services.style1 .service-inner .service-box .text .title a { color: #ffffff; } .rs-services.style1 .service-inner .service-box .text .desc { color: #d1d1d1; } .rs-services.style1 .service-inner .service-box.dark-bg { background: #263043; } .rs-services.style1 .service-inner .service-box:hover .text .title a { color: #b69d74; } .rs-services.style2 .practice-area { background: #ffffff; padding: 60px; padding-right: 50px; height: 100%; display: grid; align-items: center; } .rs-services.style2 .service-inner { background: #ffffff; display: flex; padding: 55px 55px 50px; } .rs-services.style2 .service-inner .content-part { padding-left: 27px; } .rs-services.style2 .service-inner .content-part .title { margin-bottom: 10px; font-size: 22px; text-transform: capitalize; line-height: 40px; } .rs-services.style2 .service-inner .content-part .title a { color: #1f2839; } .rs-services.style2 .service-inner .content-part .title a:hover { color: #b69d74; } .rs-services.style3 .services-wrap { position: relative; transition: all 0.5s ease; padding: 35px 30px 31px; overflow: hidden; border-radius: 0 0 20px; background: #c9b086; } .rs-services.style3 .services-wrap .services-item { position: relative; z-index: 1; } .rs-services.style3 .services-wrap .services-item .services-icon { display: -ms-flexbox; display: -webkit-flex; display: flex; margin: 0 0 12px; } .rs-services.style3 .services-wrap .services-item .services-icon .service-img { float: left; margin-right: 12px; } .rs-services.style3 .services-wrap .services-item .services-icon .service-img img { max-width: 55px; } .rs-services.style3 .services-wrap .services-item .services-icon .title { font-size: 24px; margin: 0; line-height: 28px; } .rs-services.style3 .services-wrap .services-item .services-icon .title a { color: #ffffff; } .rs-services.style3 .services-wrap .services-item .desc { color: #ffffff; line-height: 1.8; } .rs-services.style3 .services-wrap:before { position: absolute; content: ""; top: -14px; left: -7px; width: 100%; height: 100%; background: #b69d74; opacity: 1; border-radius: 0 0 100px; transform: rotate(4deg); } .rs-services.style3 .services-wrap:after { position: absolute; content: ""; top: -6px; left: -30px; width: 100%; height: 100%; background: #b69d74; opacity: 1; border-radius: 0 0 84px; transform: rotate(-3deg); } /*------------------------------------- 09. Skills Section CSS -------------------------------------*/ .rs-skills .cl-skill-bar .skillbar-title { font-size: 15px; line-height: 12px; color: #ffffff; } .rs-skills .cl-skill-bar .skillbar { background: #ffffff; border-radius: 3px; height: 12px; margin: 3px 0 20px; position: relative; width: 100%; } .rs-skills .cl-skill-bar .skillbar .skillbar-bar { background: #b69d74; border-radius: 3px; height: 12px; width: 0; margin-bottom: 0; } .rs-skills .cl-skill-bar .skillbar .skill-bar-percent { position: absolute; right: 0; top: -23px; color: #ffffff; font-size: 15px; line-height: 12px; } /* ------------------------------------ 10. About Us CSS ---------------------------------------*/ .rs-about .info .designation { font-weight: 700; color: #1f2839; margin: 0; } .rs-about .info-number .contact-number a { color: #767676; font-family: "Playfair Display", serif; border-bottom: 2px solid #b69d74; padding-bottom: 2px; } .rs-about .free-consultation { margin: 0px; padding: 115px 60px 120px; background: url(images/bg/consultation-bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; } .rs-about .free-consultation form input, .rs-about .free-consultation form textarea, .rs-about .free-consultation form select { width: 100%; border-radius: 3px; border: 1px solid #545e71; color: #767676; background: transparent; padding: 10px 18px; } .rs-about .free-consultation form input, .rs-about .free-consultation form select { margin-bottom: 22px; height: 56px; } .rs-about .free-consultation form textarea { height: 140px; display: inherit; } .rs-about .free-consultation form .select-option { position: relative; } .rs-about .free-consultation form .select-option select { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; z-index: 11; position: relative; } .rs-about .free-consultation form .select-option:after { content: "\f107"; font-family: FontAwesome; color: #767676; right: 15px; position: absolute; top: 16px; font-size: 20px; pointer-events: none; } .rs-about .free-consultation form ::-webkit-input-placeholder { color: #767676; } .rs-about .free-consultation form :-ms-input-placeholder { color: #767676; } .rs-about .free-consultation form ::placeholder { color: #767676; } .rs-about .video-part { background: url(images/about/home-about-4.jpg); text-align: center; } .rs-about .video-part a { color: #ffffff; border-radius: 100%; background: #b69d74; font-size: 30px; width: 80px; height: 80px; line-height: 80px; display: inline-block; position: relative; } .rs-about .video-part a i { margin-left: 3px; z-index: 1; position: relative; } .rs-about .video-part a:before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 100%; height: 100%; background: transparent; border-radius: 50%; border: 1px solid #b69d74; animation: pulse-border 1500ms ease-out infinite; } .rs-about .video-part a:after { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 85%; height: 85%; background: transparent; border-radius: 50%; border: 1px solid #b69d74; animation: pulse-border 1500ms ease-out infinite; } /* ------------------------------------ 11. Consultation Section CSS ---------------------------------------*/ .rs-consultation .free-consultation { padding: 100px 0 85px 95px; } .rs-consultation .free-consultation form input, .rs-consultation .free-consultation form textarea, .rs-consultation .free-consultation form select { width: 100%; border-radius: 3px; border: 1px solid #545e71; color: #767676; background: transparent; padding: 10px 18px; } .rs-consultation .free-consultation form input, .rs-consultation .free-consultation form select { margin-bottom: 22px; height: 56px; } .rs-consultation .free-consultation form textarea { height: 140px; display: inherit; } .rs-consultation .free-consultation form .select-option { position: relative; } .rs-consultation .free-consultation form .select-option select { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; z-index: 11; position: relative; } .rs-consultation .free-consultation form .select-option:after { content: "\f107"; font-family: FontAwesome; color: #767676; right: 15px; position: absolute; top: 16px; font-size: 20px; pointer-events: none; } .rs-consultation .free-consultation form ::-webkit-input-placeholder { color: #e1d9d9; } .rs-consultation .free-consultation form :-ms-input-placeholder { color: #e1d9d9; } .rs-consultation .free-consultation form ::placeholder { color: #e1d9d9; } .rs-consultation.modify .free-consultation { padding: 45px 55px 50px; background: #ffffff; border-radius: 5px; box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.07); margin-bottom: -297px; position: relative; z-index: 2; } .rs-consultation.modify .free-consultation form input, .rs-consultation.modify .free-consultation form textarea, .rs-consultation.modify .free-consultation form select { width: 100%; border-radius: 3px; border: 1px solid #f1f1f1; color: #b69d74; background: transparent; padding: 10px 18px; } .rs-consultation.modify .free-consultation form input, .rs-consultation.modify .free-consultation form select { margin-bottom: 22px; height: 56px; } .rs-consultation.modify .free-consultation form textarea { height: 140px; display: inherit; } .rs-consultation.modify .free-consultation form .select-option { position: relative; } .rs-consultation.modify .free-consultation form .select-option select { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; z-index: 11; position: relative; } .rs-consultation.modify .free-consultation form .select-option:after { content: "\f107"; font-family: FontAwesome; color: #b69d74; right: 15px; position: absolute; top: 16px; font-size: 20px; pointer-events: none; } .rs-consultation.modify .free-consultation form ::-webkit-input-placeholder { color: #b69d74; } .rs-consultation.modify .free-consultation form :-ms-input-placeholder { color: #b69d74; } .rs-consultation.modify .free-consultation form ::placeholder { color: #b69d74; } .rs-consultation.modify2 .free-consultation { padding: 0; } .rs-consultation.modify2 .free-consultation form input, .rs-consultation.modify2 .free-consultation form textarea, .rs-consultation.modify2 .free-consultation form select { border: 1px solid #374257; color: #767676; } .rs-consultation.modify2 .free-consultation form .select-option:after { color: #767676; } .rs-consultation.modify2 .free-consultation form ::-webkit-input-placeholder { color: #767676; } .rs-consultation.modify2 .free-consultation form :-ms-input-placeholder { color: #767676; } .rs-consultation.modify2 .free-consultation form ::placeholder { color: #767676; } /* ------------------------------------ 12. Team Grid Section CSS ---------------------------------------*/ .rs-team.style1 .team-item .team-image { position: relative; } .rs-team.style1 .team-item .team-image .team-social { position: absolute; left: 50%; transform: translateX(-50%); bottom: -43px; padding: 8px 25px; border-radius: 5px 5px 0 0; opacity: 0; background: #b69d74; transition: all 0.5s ease; } .rs-team.style1 .team-item .team-image .team-social ul li { display: inline-block; margin-right: 22px; } .rs-team.style1 .team-item .team-image .team-social ul li a { color: #ffffff; } .rs-team.style1 .team-item .team-image .team-social ul li a:hover { color: #263043; } .rs-team.style1 .team-item .team-image .team-social ul li:last-child { margin: 0; } .rs-team.style1 .team-item .team-image:hover .team-social { bottom: 0; opacity: 1; } .rs-team.style1 .team-item .text-bottom { padding: 24px 25px; background: #263043; text-align: center; border-radius: 0 0 3px 3px; position: relative; z-index: 1; } .rs-team.style1 .team-item .text-bottom h4.person-name { margin-bottom: 5px; font-size: 22px; text-transform: capitalize; line-height: normal; } .rs-team.style1 .team-item .text-bottom h4.person-name a { color: #ffffff; } .rs-team.style1 .team-item .text-bottom h4.person-name a:hover { color: #b69d74; } .rs-team.style1 .team-item .text-bottom span.designation { display: block; color: #d1d1d1; margin: 5px 0 10px; } .rs-team.style2 .team-item { position: relative; overflow: hidden; } .rs-team.style2 .team-item .text-bottom { padding: 24px 25px; background: #b69d74; text-align: center; position: absolute; bottom: -146px; width: 100%; z-index: 1; transition: all 0.3s ease; } .rs-team.style2 .team-item .text-bottom h4.person-name { margin-bottom: 5px; font-size: 22px; text-transform: capitalize; line-height: normal; } .rs-team.style2 .team-item .text-bottom h4.person-name a { color: #ffffff; } .rs-team.style2 .team-item .text-bottom span.designation { display: block; color: #ffffff; margin: 5px 0 10px; } .rs-team.style2 .team-item .text-bottom .team-social ul li { display: inline-block; margin-right: 18px; } .rs-team.style2 .team-item .text-bottom .team-social ul li a { color: #ffffff; } .rs-team.style2 .team-item .text-bottom .team-social ul li:last-child { margin: 0; } .rs-team.style2 .team-item:hover .text-bottom { bottom: 0; } .rs-team.style3 .team-item { position: relative; margin-bottom: 73px; } .rs-team.style3 .team-item .text-bottom { padding: 24px 25px; background: #ffffff; text-align: center; position: absolute; bottom: -72.5px; width: 80%; left: 50%; z-index: 1; transition: all 0.3s ease; transform: translateX(-50%); box-shadow: 0px 15px 34px -5px rgba(193, 193, 193, 0.3); } .rs-team.style3 .team-item .text-bottom h4.person-name { margin-bottom: 5px; font-size: 22px; text-transform: capitalize; line-height: normal; } .rs-team.style3 .team-item .text-bottom h4.person-name a { color: #1f2839; } .rs-team.style3 .team-item .text-bottom h4.person-name a:hover { color: #b69d74; } .rs-team.style3 .team-item .text-bottom span.designation { display: block; color: #b69d74; margin: 5px 0 0; } .rs-team.style3 .team-item .text-bottom .desc { font-size: 14px; position: relative; z-index: 1; max-height: 0; opacity: 0; line-height: 24px; -webkit-transition: all 0.6s, max-height 0.5s; -o-transition: all 0.6s, max-height 0.5s; -moz-transition: all 0.6s, max-height 0.5s; transition: all 0.6s, max-height 0.5s; overflow: hidden; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: bottom; -moz-transform-origin: bottom; -ms-transform-origin: bottom; -o-transform-origin: bottom; transform-origin: bottom; } .rs-team.style3 .team-item .text-bottom .desc:before { content: ""; position: absolute; z-index: 1; background: #b69d74; top: 0; left: 50%; width: 50px; height: 2px; transform: translateX(-50%); } .rs-team.style3 .team-item .text-bottom .team-social { margin-top: 10px; } .rs-team.style3 .team-item .text-bottom .team-social ul li { display: inline-block; margin-right: 18px; } .rs-team.style3 .team-item .text-bottom .team-social ul li a { color: #bbb; } .rs-team.style3 .team-item .text-bottom .team-social ul li a:hover { color: #b69d74; } .rs-team.style3 .team-item .text-bottom .team-social ul li:last-child { margin: 0; } .rs-team.style3 .team-item:hover .text-bottom .desc { position: relative; max-height: 400px; opacity: 1; text-align: center; -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); -webkit-transition: all 0.4s, max-height 1.5s; -o-transition: all 0.4s, max-height 1.5s; -moz-transition: all 0.4s, max-height 1.5s; transition: all 0.4s, max-height 1.5s; padding-top: 20px; margin-top: 14px; } .rs-team.team-sigle .detail-part .title-part .title { margin-bottom: 5px; font-size: 30px; line-height: 40px; } .rs-team.team-sigle .detail-part .contact-list li { display: inline; margin-right: 15px; } .rs-team.team-sigle .detail-part .contact-list li i { color: #b69d74; padding-right: 8px; } .rs-team.team-sigle .detail-part .contact-list li i:before { font-size: 15px; position: relative; } .rs-team.team-sigle .detail-part .contact-list li a { color: #767676; } .rs-team.team-sigle .detail-part .contact-list li a:hover { color: #b69d74; } .rs-team.team-sigle .detail-part .contact-list li:last-child { margin: 0; } .rs-team.team-sigle .detail-part .social-links li { display: inline; margin-right: 12px; } .rs-team.team-sigle .detail-part .social-links li a { color: #b69d74; display: inline-block; background: #f0f0f0; border-radius: 5px; width: 30px; height: 30px; line-height: 30px; text-align: center; } .rs-team.team-sigle .detail-part .social-links li a:hover { color: #ffffff; background: #b69d74; } .rs-team.team-sigle .detail-part .social-links li:last-child { margin: 0; } .rs-team.team-sigle .detail-part .cl-skill-bar .skillbar-title { font-size: 15px; line-height: 12px; } .rs-team.team-sigle .detail-part .cl-skill-bar .skillbar { background: #ffffff; height: 8px; margin: 3px 0 0; position: relative; padding: 1px; border: 1px solid #b69d74; width: 100%; } .rs-team.team-sigle .detail-part .cl-skill-bar .skillbar .skillbar-bar { background: #b69d74; height: 4px; line-height: 4px; width: 0; margin-bottom: 0; } .rs-team.team-sigle .detail-part .cl-skill-bar .skillbar .skill-bar-percent { position: absolute; right: 0; top: -23px; font-size: 15px; line-height: 12px; } .rs-team.team-sigle .training-content .trainnig-wrap .title { line-height: 28px; margin-bottom: 6px; } .rs-team.team-sigle .training-content .trainnig-wrap .season { margin-bottom: 10px; display: block; } .rs-team.team-sigle .practice-part ul.list-item li { margin-bottom: 15px; } .rs-team.team-sigle .practice-part ul.list-item li:before { content: "\f058"; font-family: FontAwesome; color: #b69d74; margin-right: 10px; } .rs-team.team-sigle .practice-part ul.list-item li:last-child { margin: 0; } /* ------------------------------------ 13. Team Slider Section CSS ---------------------------------------*/ .rs-team-slider .owl-item .team-item .team-image { position: relative; } .rs-team-slider .owl-item .team-item .team-image .team-social { position: absolute; left: 50%; transform: translateX(-50%); bottom: -43px; padding: 8px 25px; border-radius: 5px 5px 0 0; opacity: 0; background: #b69d74; transition: all 0.5s ease; } .rs-team-slider .owl-item .team-item .team-image .team-social ul li { display: inline-block; margin-right: 22px; } .rs-team-slider .owl-item .team-item .team-image .team-social ul li a { color: #ffffff; } .rs-team-slider .owl-item .team-item .team-image .team-social ul li a:hover { color: #263043; } .rs-team-slider .owl-item .team-item .team-image .team-social ul li:last-child { margin: 0; } .rs-team-slider .owl-item .team-item .team-image:hover .team-social { bottom: 0; opacity: 1; } .rs-team-slider .owl-item .team-item .text-bottom { padding: 24px 25px; background: #263043; text-align: center; border-radius: 0 0 3px 3px; position: relative; z-index: 1; } .rs-team-slider .owl-item .team-item .text-bottom h4.person-name { margin-bottom: 5px; font-size: 22px; text-transform: capitalize; line-height: normal; } .rs-team-slider .owl-item .team-item .text-bottom h4.person-name a { color: #ffffff; } .rs-team-slider .owl-item .team-item .text-bottom h4.person-name a:hover { color: #b69d74; } .rs-team-slider .owl-item .team-item .text-bottom span.designation { display: block; color: #d1d1d1; margin: 5px 0 10px; } .rs-team-slider .owl-item.center .team-item .team-image .team-social { bottom: 0; opacity: 1; } .rs-team-slider.modify .owl-item .team-item .text-bottom { padding: 24px 25px; background: url(images/bg/test_wraper_bg.png); border-radius: 0; background-repeat: repeat; } .rs-team-slider.modify .owl-item .team-item .text-bottom h4.person-name a { color: #333333; } .rs-team-slider.modify .owl-item .team-item .text-bottom h4.person-name a:hover { color: #b69d74; } .rs-team-slider.modify .owl-item .team-item .text-bottom span.designation { display: block; color: #767676; margin: 5px 0 10px; } .rs-team-slider.modify2 .owl-item .team-item .team-image { position: relative; } .rs-team-slider.modify2 .owl-item .team-item .team-image .fly-content { position: absolute; text-align: center; left: 0; top: 50%; transform: translateY(-50%); width: 100%; z-index: 1; opacity: 0; transition: all 0.3s ease; } .rs-team-slider.modify2 .owl-item .team-item .team-image .fly-content .popup-button { margin-bottom: 54px; } .rs-team-slider.modify2 .owl-item .team-item .team-image .fly-content .popup-button a { color: #ffffff; } .rs-team-slider.modify2 .owl-item .team-item .team-image .fly-content .popup-button a i:before { font-size: 40px; } .rs-team-slider.modify2 .owl-item .team-item .team-image .fly-content .team-social2 li { display: inline; margin-right: 5px; } .rs-team-slider.modify2 .owl-item .team-item .team-image .fly-content .team-social2 li a { display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius: 100%; background: #ffffff; color: #b69d74; } .rs-team-slider.modify2 .owl-item .team-item .team-image .fly-content .team-social2 li a:hover { color: #263043; } .rs-team-slider.modify2 .owl-item .team-item .team-image:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: #b69d74; opacity: 0; transition: all 0.3s ease; } .rs-team-slider.modify2 .owl-item .team-item .text-bottom { background: #1f2839; } .rs-team-slider.modify2 .owl-item .team-item:hover .team-image .fly-content, .rs-team-slider.modify2 .owl-item .team-item:hover .team-image:after { opacity: 0.9; } /* -------------------------------------- 14. Testimonial CSS ---------------------------------------*/ .rs-testimonia .testimonials-inner { max-width: 700px; margin: 0 auto; text-align: center; } .rs-testimonia .testimonials-inner .slider-for { max-width: 950px; margin: 0 auto; position: relative; padding-top: 50px; } .rs-testimonia .testimonials-inner .slider-for:before { position: absolute; height: 100%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; right: 15px; opacity: 0.5; top: 0px; left: 50%; transform: translateX(-50%); font-size: 50px; content: "\f14f"; font-family: Flaticon; display: inline-block; font-weight: normal; color: #b69d74; } .rs-testimonia .testimonials-inner .slider-for .item { position: relative; margin-bottom: 30px; } .rs-testimonia .testimonials-inner .slider-for .item .desc { color: #d1d1d1; } .rs-testimonia .testimonials-inner .slider-for .item .ratings { position: relative; padding-bottom: 32px; margin-bottom: 30px; } .rs-testimonia .testimonials-inner .slider-for .item .ratings li { display: inline; } .rs-testimonia .testimonials-inner .slider-for .item .ratings li i { color: #a58734; font-size: 22px; } .rs-testimonia .testimonials-inner .slider-for .item .ratings:after { bottom: 0; height: 2px; width: 60px; position: absolute; content: ""; transform: translateX(-50%); background: #b69d74; left: 50%; } .rs-testimonia .testimonials-inner .slider-for .item .author-info h4 { margin: 0 0 7px; font-size: 18px; font-weight: 700; line-height: 26px; color: #b69d74; } .rs-testimonia .testimonials-inner .slider-for .item .author-info .designation { font-size: 15px; color: #ffffff; } .rs-testimonia .testimonials-inner .slider-nav { max-width: 350px; margin: 0 auto; z-index: 10; } .rs-testimonia .testimonials-inner .slider-nav .slick-list { padding: 0 !important; } .rs-testimonia .testimonials-inner .slider-nav .item { padding: 70px 8px 0; cursor: pointer; } .rs-testimonia .testimonials-inner .slider-nav .item img { border: 1px solid rgba(141, 110, 91, 0.2); border-radius: 100%; } .rs-testimonia .testimonials-inner .slider-nav .item.slick-center { position: relative; } .rs-testimonia .testimonials-inner .slider-nav .item.slick-center:after, .rs-testimonia .testimonials-inner .slider-nav .item.slick-center:before { position: absolute; content: ""; transform: translateX(-50%); background: #b69d74; left: 50%; } .rs-testimonia .testimonials-inner .slider-nav .item.slick-center:after { top: 10px; height: 60px; width: 2px; } .rs-testimonia .testimonials-inner .slider-nav .item.slick-center:before { top: 0px; height: 10px; width: 10px; border-radius: 50px; } .rs-testimonia .testimonials-inner .slider-nav .item.slick-center img { border: 1px solid #b69d74; } .rs-testimonia.modify .testimonials-inner .slider-for .item .desc { color: #767676; } .rs-testimonia.modify .testimonials-inner .slider-for .item .ratings li i { color: #ffdd81; } .rs-testimonia.modify .testimonials-inner .slider-for .item .author-info h4 { color: #333333; } .rs-testimonia.modify .testimonials-inner .slider-for .item .author-info .designation { color: #767676; } .rs-testimonia.modify .testimonials-inner .slider-nav .item.slick-center img { opacity: 0.7 !important; } .rs-testimonia.modify2 .testimonials-inner .slider-for .item .desc { color: #767676; position: relative; padding-bottom: 32px; margin-bottom: 30px; } .rs-testimonia.modify2 .testimonials-inner .slider-for .item .desc:after { bottom: 0; height: 2px; width: 60px; position: absolute; content: ""; transform: translateX(-50%); background: #b69d74; left: 50%; } .rs-testimonia.modify2 .testimonials-inner .slider-for .item .bottom-line { position: relative; padding-bottom: 32px; margin-bottom: 30px; } .rs-testimonia.modify2 .testimonials-inner .slider-for .item .bottom-line:after { bottom: 0; height: 2px; width: 60px; position: absolute; content: ""; transform: translateX(-50%); background: #b69d74; left: 50%; } .rs-testimonia.modify2 .testimonials-inner .slider-for .item .author-info h4 { color: #333333; } .rs-testimonia.modify2 .testimonials-inner .slider-for .item .author-info .designation { color: #767676; } .rs-testimonia.modify2 .testimonials-inner .slider-nav .item.slick-center img { opacity: 0.7 !important; } .rs-testimonia .slick-arrow { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); font-size: 0; width: 35px; height: 35px; line-height: 35px; display: inline-block; transition: all 0.3s ease 0s; outline: none; z-index: 10; } .rs-testimonia .slick-arrow:before { font-family: FontAwesome; position: absolute; font-size: 26px; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .rs-testimonia .slick-arrow.slick-next, .rs-testimonia .slick-arrow.slick-prev { color: #b69d74; border: transparent; background: transparent; } .rs-testimonia .slick-arrow.slick-prev { left: -26px; } .rs-testimonia .slick-arrow.slick-prev:before { content: "\f104"; } .rs-testimonia .slick-arrow.slick-next { left: auto; right: -60px; } .rs-testimonia .slick-arrow.slick-next:before { content: "\f105"; margin-left: 2px; } /*-------------------------------------- 15. Faq Section CSS --------------------------------------*/ .rs-faq.style1 .faq-part { padding: 55px 60px 70px; } .rs-faq.style1 .faq-part .accordion { border-width: 12px; } .rs-faq.style1 .faq-part .accordion .card { margin-bottom: 15px; border: none; background-color: transparent; } .rs-faq.style1 .faq-part .accordion .card:last-child { margin-bottom: 0; } .rs-faq.style1 .faq-part .accordion .card .card-header { padding: 0 !important; border: none; background-color: transparent; } .rs-faq.style1 .faq-part .accordion .card .card-header .card-link { font-family: "Playfair Display", serif; font-size: 17px; font-weight: 400; line-height: 28px; color: #ffffff; display: block; padding: 14px 20px; background: transparent; border: 1px solid #263043; } .rs-faq.style1 .faq-part .accordion .card .card-body { background: transparent; font-size: 15px; font-weight: 400; line-height: 25px; color: #d1d1d1; padding: 23px 20px 25px !important; border: 1px solid; border-color: #263043; border-top: none; } .rs-faq.style1 .faq-part .accordion .card .card-header .card-link { position: relative; padding-right: 45px !important; } .rs-faq.style1 .faq-part .accordion .card .card-header .card-link:after { content: "\f068"; font-family: FontAwesome; position: absolute; right: 20px; } .rs-faq.style1 .faq-part .accordion .card .card-header .card-link.collapsed:after { content: "\f067"; } .rs-faq.style1 .free-consultation { margin: 0px; padding: 55px 60px 70px; background: url(images/bg/consultation-bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; } .rs-faq.style1 .free-consultation form input, .rs-faq.style1 .free-consultation form textarea, .rs-faq.style1 .free-consultation form select { width: 100%; border-radius: 3px; border: 1px solid #374257; color: #767676; background: transparent; padding: 10px 18px; } .rs-faq.style1 .free-consultation form input, .rs-faq.style1 .free-consultation form select { margin-bottom: 22px; height: 56px; } .rs-faq.style1 .free-consultation form textarea { height: 140px; display: inherit; } .rs-faq.style1 .free-consultation form .select-option { position: relative; } .rs-faq.style1 .free-consultation form .select-option select { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; z-index: 11; position: relative; } .rs-faq.style1 .free-consultation form .select-option:after { content: "\f107"; font-family: FontAwesome; color: #767676; right: 15px; position: absolute; top: 16px; font-size: 20px; pointer-events: none; } .rs-faq.style1 .free-consultation form ::-webkit-input-placeholder { color: #767676; } .rs-faq.style1 .free-consultation form :-ms-input-placeholder { color: #767676; } .rs-faq.style1 .free-consultation form ::placeholder { color: #767676; } .rs-faq.inner #accordion .panel, .rs-faq.inner #accordion2 .panel { border-radius: 0; background: #ffffff; border: 1px solid #ebebeb; border-radius: 3px; } .rs-faq.inner #accordion .panel + .panel, .rs-faq.inner #accordion2 .panel + .panel { margin-top: 20px; } .rs-faq.inner #accordion .panel .panel-heading, .rs-faq.inner #accordion2 .panel .panel-heading { border: none; border-radius: 0; padding: 18px 30px; position: relative; } .rs-faq.inner #accordion .panel .panel-heading .panel-title, .rs-faq.inner #accordion2 .panel .panel-heading .panel-title { margin: 0; line-height: 26px; font-weight: 400; } .rs-faq.inner #accordion .panel .panel-heading .panel-title a, .rs-faq.inner #accordion2 .panel .panel-heading .panel-title a { color: #1f2839; position: relative; display: block; } .rs-faq.inner #accordion .panel .panel-heading .panel-title a:after, .rs-faq.inner #accordion2 .panel .panel-heading .panel-title a:after { color: #b69d74; content: "\f068"; font-family: FontAwesome; font-size: 20px; text-align: center; right: 0; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 9; } .rs-faq.inner #accordion .panel .panel-heading .panel-title a.collapsed:after, .rs-faq.inner #accordion2 .panel .panel-heading .panel-title a.collapsed:after { content: "\f067"; color: #1f2839; } .rs-faq.inner #accordion .panel .panel-body, .rs-faq.inner #accordion2 .panel .panel-body { padding: 0 30px 20px 30px; } /* ------------------------------------ 16. Counter Section CSS ---------------------------------------*/ .rs-counter.style1 .counter-wrap { border-radius: 3px; padding: 70px 0 67px; } .rs-counter.style1 .rs-counter-list { text-align: center; } .rs-counter.style1 .rs-counter-list .icon-part { margin-bottom: 20px; } .rs-counter.style1 .rs-counter-list .rs-count { font-size: 45px; font-weight: 400; padding: 0; color: #ffffff; margin-bottom: 20px; position: relative; display: inline-block; font-family: "Playfair Display", serif; line-height: 1; } .rs-counter.style1 .rs-counter-list .rs-count:after { content: "\f155"; font-family: Flaticon; right: -25px; position: absolute; color: #fff; top: 54%; transform: translateY(-50%) rotate(45deg); font-size: 13px; font-weight: 300; } .rs-counter.style1 .rs-counter-list .title { display: block; color: #d1d1d1; margin-bottom: 0; font-size: 22px; line-height: 1; } .rs-counter.style1 .rs-counter-list .title.modify { font-size: 20px; } .rs-counter.style1.modify .counter-wrap { border-radius: 0; padding: 0; } .rs-counter.style1.modify .counter-wrap .rs-counter-list { background: #263043; padding: 30px 20px 41px; } .rs-counter.style2.fly { position: relative; z-index: 8; } .rs-counter.style2 .counter-wrap { padding: 31px 15px; } .rs-counter.style2 .counter-wrap .rs-counter-list { text-align: center; } .rs-counter.style2 .counter-wrap .rs-counter-list .counter-text { padding: 24px 20px 51px; position: relative; } .rs-counter.style2 .counter-wrap .rs-counter-list .counter-text .rs-count { font-size: 45px; line-height: 45px; color: #ffffff; font-family: "Playfair Display", serif; margin-bottom: 8px; position: relative; display: inline-block; } .rs-counter.style2 .counter-wrap .rs-counter-list .counter-text .rs-count:after { content: "\f155"; font-family: Flaticon; right: -22px; position: absolute; color: #fff; top: 62%; transform: translateY(-50%) rotate(45deg); font-size: 13px; font-weight: 300; } .rs-counter.style2 .counter-wrap .rs-counter-list .counter-text .title { color: #d1d1d1; font-size: 20px; line-height: 20px; margin: 20px 0 0; } .rs-counter.style2 .counter-wrap div[class*="col-"] + div[class*="col-"] .counter-text:before { content: ""; position: absolute; height: calc(80%); width: 1px; background-color: rgba(255, 255, 255, 0.5); bottom: 0; display: block; left: 1px; } .rs-counter.style2 .counter-wrap div[class*="col-"] + div[class*="col-"] .counter-text:after { content: ""; position: absolute; height: calc(80%); width: 1px; top: 0; background-color: rgba(255, 255, 255, 0.5); left: -3px; } /* ------------------------------------ 17. Our Practice CSS ---------------------------------------*/ .rs-our-practice.style1 .practice-inner { background: #263043; display: flex; padding: 55px 55px 50px; /* Bootstrap 4's .row is itself flex (align-items:stretch by default), so the surrounding .col-lg-4 already matches height across a row — but this card only fills its own content height inside that column, leaving cards with longer wrapped titles/descriptions taller than their neighbours. Fill the stretched column so card edges align. */ height: 100%; } .rs-our-practice.style1 .practice-inner .content-part { padding-left: 35px; } .rs-our-practice.style1 .practice-inner .content-part .title { margin-bottom: 10px; font-size: 22px; text-transform: capitalize; line-height: 40px; } .rs-our-practice.style1 .practice-inner .content-part .title a { color: #ffffff; } .rs-our-practice.style1 .practice-inner .content-part .title a:hover { color: #b69d74; } .rs-our-practice.style1 .practice-inner .content-part .desc { color: #d1d1d1; } .rs-our-practice.style2 .content-details { background: transparent; padding: 51px 30px 50px; transition: all 0.3s ease; background-image: url(images/bg/test_wraper_bg.png); background-repeat: repeat; position: relative; } .rs-our-practice.style2 .content-details:after { background: url(images/bg/practice-item-bg.png); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ""; width: 260px; height: 286px; } .rs-our-practice.style2 .content-details .top-bar { overflow: hidden; } .rs-our-practice.style2 .content-details .top-bar img { max-width: 100%; width: 36px; margin: 0 auto; } .rs-our-practice.style2 .content-details .top-bar h4 { margin: 24px 0 16px; font-size: 20px; line-height: 28px; } .rs-our-practice.style2 .des { margin-bottom: 22px; } .rs-our-practice.style2 .top-bar, .rs-our-practice.style2 .des, .rs-our-practice.style2 .readon { position: relative; z-index: 11; } .rs-our-practice.style2 .readon { background: transparent; border: 1px solid #b69d74; color: #b69d74; text-transform: capitalize; height: 40px; line-height: 40px; padding: 0 14px; padding-right: 40px; } .rs-our-practice.style2 .readon:before { right: 20px; } .rs-our-practice.style2 .readon:hover:before { right: 15px; } .rs-our-practice.style3 .practice-tabs-section .nav { margin: 0; padding: 0; display: block; } .rs-our-practice.style3 .practice-tabs-section .nav li { display: inline-block; border: 1px solid #b69d74; border-radius: 3px; padding: 38px 20px 25px; margin: 0 8px; min-width: 210px; } .rs-our-practice.style3 .practice-tabs-section .nav li i { display: block; color: #b69d74; margin-bottom: 20px; } .rs-our-practice.style3 .practice-tabs-section .nav li i, .rs-our-practice.style3 .practice-tabs-section .nav li i:before { font-size: 40px; } .rs-our-practice.style3 .practice-tabs-section .nav li h4 { color: #ffffff; margin: 0; text-transform: capitalize; transition: all 0.3s ease; font-size: 20px; } .rs-our-practice.style3 .practice-tabs-section .nav li a.active h4, .rs-our-practice.style3 .practice-tabs-section .nav li a:hover h4 { color: #b69d74; } .rs-our-practice.style3 .tab-content { margin-top: 47px; } .rs-our-practice.style3 .tab-content .rs-vertical-middle .col-lg-6:first-child { padding-right: 30px; } .rs-our-practice.style3 .tab-content .rs-vertical-middle .col-lg-6:last-child { padding-left: 30px; } .rs-our-practice.style3 .tab-content .practice-image { margin-top: 13px; } .rs-our-practice.style3 .tab-content .content-inner { color: #ffffff; } .rs-our-practice.style3 .tab-content ul { padding-bottom: 24px; } .rs-our-practice.style3 .tab-content ul li { position: relative; padding-left: 30px; padding-bottom: 10px; } .rs-our-practice.style3 .tab-content ul li:before { position: absolute; top: 0; left: 0; z-index: 0; content: "\f05d"; font-family: "FontAwesome"; color: #b69d74; font-size: 20px; } .rs-our-practice.style4 .practice-wrap { border: 1px solid #29303c; transition: all 0.3s ease; padding: 48px 30px 43px; } .rs-our-practice.style4 .practice-wrap .icon-part { margin-bottom: 8px; } .rs-our-practice.style4 .practice-wrap .icon-part i { line-height: 60px; } .rs-our-practice.style4 .practice-wrap .icon-part i:before { color: #b69d74; font-size: 40px; transition: all 0.3s ease; } .rs-our-practice.style4 .practice-wrap .title { font-size: 24px; margin-bottom: 15px; } .rs-our-practice.style4 .practice-wrap .title a { color: #ffffff; } .rs-our-practice.style4 .practice-wrap .desc { color: #ccc; } .rs-our-practice.style4 .practice-wrap:hover { background: rgba(31, 40, 57, 0.5); } .rs-our-practice.style4 .practice-wrap:hover .icon-part i:before { color: #ffffff; } /* ------------------------------------ 18. Practice Single CSS ---------------------------------------*/ .rs-practice-single .mian-content .title-text { font-size: 30px; line-height: 40px; } .rs-practice-single .mian-content .choose-wrap { padding: 41px 35px; } .rs-practice-single .mian-content .choose-wrap .inner-item { padding-left: 15px; } .rs-practice-single .mian-content .choose-wrap .inner-item .title-inner { color: #b69d74; margin-bottom: 7px; } .rs-practice-single .mian-content .overview-wrap .accordion { border-width: 12px; } .rs-practice-single .mian-content .overview-wrap .accordion .card { margin-bottom: 15px; border: none; background-color: transparent; } .rs-practice-single .mian-content .overview-wrap .accordion .card:last-child { margin-bottom: 0; } .rs-practice-single .mian-content .overview-wrap .accordion .card .card-header { padding: 0 !important; border: none; background-color: transparent; } .rs-practice-single .mian-content .overview-wrap .accordion .card .card-header .card-link { font-family: "Playfair Display", serif; font-size: 17px; font-weight: 400; line-height: 28px; color: #1f2839; display: block; padding: 14px 20px; background: transparent; border: 1px solid #f0f0f0; } .rs-practice-single .mian-content .overview-wrap .accordion .card .card-body { background: transparent; font-size: 15px; font-weight: 400; line-height: 25px; padding: 23px 20px 25px !important; border: 1px solid; border-color: #f0f0f0; border-top: none; } .rs-practice-single .mian-content .overview-wrap .accordion .card .card-header .card-link { position: relative; padding-right: 45px !important; } .rs-practice-single .mian-content .overview-wrap .accordion .card .card-header .card-link:after { content: "\f068"; font-family: FontAwesome; position: absolute; right: 20px; color: #b69d74; } .rs-practice-single .mian-content .overview-wrap .accordion .card .card-header .card-link.collapsed:after { content: "\f067"; } .rs-practice-single .practice-sidebar .sidebar-common { background: #f8f8f8; padding: 41px 30px 43px; } .rs-practice-single .practice-sidebar .sidebar-title { font-size: 22px; line-height: 30px; } .rs-practice-single .practice-sidebar .consultation-inner { padding-bottom: 50px; } .rs-practice-single .practice-sidebar .consultation-inner input, .rs-practice-single .practice-sidebar .consultation-inner textarea, .rs-practice-single .practice-sidebar .consultation-inner button { width: 100%; border: none; outline: none; } .rs-practice-single .practice-sidebar .consultation-inner input, .rs-practice-single .practice-sidebar .consultation-inner textarea { background: #ffffff; padding: 10px 18px; color: #767676; } .rs-practice-single .practice-sidebar .consultation-inner input { height: 45px; margin-bottom: 20px; } .rs-practice-single .practice-sidebar .consultation-inner textarea { height: 150px; margin-bottom: 40px; display: inherit; } .rs-practice-single .practice-sidebar .consultation-inner button { padding: 10.5px 35px; font-size: 14px; color: #ffffff; background: #b69d74; text-transform: capitalize; transition: all 0.3s ease; } .rs-practice-single .practice-sidebar .consultation-inner button:hover { background: #bfa985; } .rs-practice-single .practice-sidebar .practice-area-meta li { padding-left: 15px; margin-bottom: 6px; position: relative; } .rs-practice-single .practice-sidebar .practice-area-meta li a { color: #767676; } .rs-practice-single .practice-sidebar .practice-area-meta li a:hover { color: #b69d74; } .rs-practice-single .practice-sidebar .practice-area-meta li:before { font-family: FontAwesome; content: "\f105"; color: #b69d74; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .rs-practice-single .practice-sidebar .practice-area-meta li:last-child { margin: 0; } .rs-practice-single .practice-sidebar .certification ul { display: inline-flex; } .rs-practice-single .practice-sidebar .certification ul li { padding: 0 15px; } /*-------------------------------------- 19. Gallery Section CSS --------------------------------------*/ .rs-gallery .gallery-wrap { position: relative; overflow: hidden; } .rs-gallery .gallery-wrap .title, .rs-gallery .gallery-wrap .fly { position: absolute; z-index: 1; } .rs-gallery .gallery-wrap .title { bottom: -70px; left: 0; transition: all 0.5s; padding: 0 30px 30px 30px; margin: 0; color: #ffffff; font-size: 18px; } .rs-gallery .gallery-wrap .fly { left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-block; color: #ffffff; width: 45px; height: 45px; line-height: 41px; font-size: 20px; opacity: 0; visibility: hidden; border: 1.5px solid #ffffff; border-radius: 50%; text-align: center; transition: all 0.5s; } .rs-gallery .gallery-wrap:after { position: absolute; content: ""; left: 0; top: 101%; width: 100%; height: 100%; background: #1f2839; opacity: 0; visibility: hidden; transition: all 0.5s; } .rs-gallery .gallery-wrap:hover .title { bottom: 0; } .rs-gallery .gallery-wrap:hover .fly { opacity: 1; visibility: visible; } .rs-gallery .gallery-wrap:hover:after { opacity: 0.8; visibility: visible; top: 0; } /* ------------------------------------ 20. Case Result CSS ---------------------------------------*/ .rs-case-result.style1 .item { position: relative; overflow: hidden; } .rs-case-result.style1 .item > img { transition: all 0.5s ease; transform: scale(1); } .rs-case-result.style1 .item .result-contents { position: absolute; bottom: -100px; left: 0; width: 100%; text-align: center; z-index: 1; padding-bottom: 33px; transition: all 0.5s ease; visibility: hidden; opacity: 0; } .rs-case-result.style1 .item .result-contents .title { font-size: 22px; margin-bottom: 5px; } .rs-case-result.style1 .item .result-contents .title a { color: #ffffff; } .rs-case-result.style1 .item .result-contents .title a:hover { color: #b69d74; } .rs-case-result.style1 .item .result-contents .categories { text-transform: capitalize; font-family: "Playfair Display", serif; } .rs-case-result.style1 .item .result-contents .categories a { color: #b69d74; } .rs-case-result.style1 .item .result-contents .categories a:hover { color: #ffffff; } .rs-case-result.style1 .item:after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transition: all 0.5s ease; } .rs-case-result.style1 .item:hover > img { transform: scale(1.07); } .rs-case-result.style1 .item:hover .result-contents { bottom: 0; opacity: 1; visibility: visible; } .rs-case-result.style1 .item:hover:after { opacity: 1; visibility: visible; } .rs-case-result.inner-style .case-bg { background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important; } .rs-case-result.inner-style .case-bg.case1 { background: url(images/case-result/inner/1.jpg); } .rs-case-result.inner-style .case-bg.case2 { background: url(images/case-result/inner/2.jpg); } .rs-case-result.inner-style .case-bg.case3 { background: url(images/case-result/inner/3.jpg); } .rs-case-result.inner-style .content-part { padding: 70px 50px 50px; } .rs-case-result.inner-style .content-part .grid-title .sub-title { color: #b69d74; font-size: 18px; line-height: 28px; margin-bottom: 10px; } .rs-case-result.inner-style .content-part .grid-title .title { font-size: 30px; line-height: 40px; } .rs-case-result.inner-style .content-part .grid-title .title a { color: #ffffff; } .rs-case-result.inner-style .content-part .case-content { overflow: hidden; } .rs-case-result.inner-style .content-part .case-content h4 { float: left; width: 140px; margin: 0 0 8px; font-size: 18px; color: #ffffff; } .rs-case-result.inner-style .content-part .case-content .desc { overflow: hidden; } .rs-case-result.inner-style .content-part .case-content .desc p { color: #ccc; } /*------------------------------------- 21. Partner Section CSS -------------------------------------*/ .rs-partner .owl-carousel .owl-item img { width: auto; } .rs-partner .owl-carousel .owl-item .partner-item a img { width: 150px; filter: grayscale(100%); transition: all 0.5s ease; } .rs-partner .owl-carousel .owl-item .partner-item a:hover img { filter: grayscale(0); } .rs-partner .owl-nav { display: none !important; } /* ----------------------- 22. Blog Section CSS --------------------------*/ .rs-blog.style1 .owl-item .blog-item .blog-image { position: relative; } .rs-blog.style1 .owl-item .blog-item .blog-image .blog-date { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; padding: 8px 25px; border-radius: 5px 5px 0 0; opacity: 1; background: #b69d74; color: #ffffff; } .rs-blog.style1 .owl-item .blog-item .text-bottom { padding: 40px; background: #263043; border-radius: 0 0 5px 5px; position: relative; z-index: 1; } .rs-blog.style1 .owl-item .blog-item .text-bottom .title { margin-bottom: 8px; font-size: 22px; text-transform: capitalize; line-height: normal; } .rs-blog.style1 .owl-item .blog-item .text-bottom .title a { color: #ffffff; } .rs-blog.style1 .owl-item .blog-item .text-bottom .title a:hover { color: #b69d74; } .rs-blog.style1 .owl-item .blog-item .text-bottom .blog-meta { margin-bottom: 16px; } .rs-blog.style1 .owl-item .blog-item .text-bottom .blog-meta li { position: relative; margin-right: 5px; padding-right: 15px; display: inline-block; } .rs-blog.style1 .owl-item .blog-item .text-bottom .blog-meta li a { color: #d1d1d1; } .rs-blog.style1 .owl-item .blog-item .text-bottom .blog-meta li:last-child { margin: 0; padding: 0; } .rs-blog.style1 .owl-item .blog-item .text-bottom .blog-meta li:after { content: "."; font-size: 27px; color: #d1d1d1; position: absolute; right: 0; line-height: 0; top: 7px; } .rs-blog.style1 .owl-item .blog-item .text-bottom .blog-meta li:last-child:after { display: none; } .rs-blog.style1 .owl-item .blog-item .text-bottom .blog-desc { color: #d1d1d1; } .rs-blog.style1.modify .owl-item .blog-item .text-bottom { background: #f8f8f8; } .rs-blog.style1.modify .owl-item .blog-item .text-bottom .title a { color: #333333; } .rs-blog.style1.modify .owl-item .blog-item .text-bottom .title a:hover { color: #b69d74; } .rs-blog.style1.modify .owl-item .blog-item .text-bottom .blog-meta li a { color: #767676; } .rs-blog.style1.modify .owl-item .blog-item .text-bottom .blog-meta li:after { color: #767676; } .rs-blog.style1.modify .owl-item .blog-item .text-bottom .blog-desc { color: #767676; margin-bottom: 3px; } .rs-blog.style1.modify2 .owl-item .blog-item .text-bottom { background: #ffffff; } .rs-blog.style1.modify2 .owl-item .blog-item .text-bottom .title a { color: #333333; } .rs-blog.style1.modify2 .owl-item .blog-item .text-bottom .title a:hover { color: #b69d74; } .rs-blog.style1.modify2 .owl-item .blog-item .text-bottom .blog-meta li a { color: #767676; } .rs-blog.style1.modify2 .owl-item .blog-item .text-bottom .blog-meta li:after { color: #767676; } .rs-blog.style1.modify2 .owl-item .blog-item .text-bottom .blog-desc { color: #767676; margin-bottom: 3px; } .rs-blog.style2 .blog-item .image-part { overflow: hidden; height: 100%; } .rs-blog.style2 .blog-item .image-part a img { transition: all 0.5s; transform: scale(1); height: 100%; } .rs-blog.style2 .blog-item .blog-content { padding: 27px 30px 30px; } .rs-blog.style2 .blog-item .blog-content .title { margin-bottom: 6px; } .rs-blog.style2 .blog-item .blog-content .title a { color: #1f2839; } .rs-blog.style2 .blog-item .blog-content .title a:hover { color: #b69d74; } .rs-blog.style2 .blog-item .blog-content .blog-meta { margin-bottom: 16px; } .rs-blog.style2 .blog-item .blog-content .blog-meta li { position: relative; margin-right: 5px; padding-right: 15px; display: inline-block; } .rs-blog.style2 .blog-item .blog-content .blog-meta li a { color: #767676; } .rs-blog.style2 .blog-item .blog-content .blog-meta li:last-child { margin: 0; padding: 0; } .rs-blog.style2 .blog-item .blog-content .blog-meta li:after { content: "."; font-size: 27px; position: absolute; right: 0; line-height: 0; top: 7px; color: #1f2839; } .rs-blog.style2 .blog-item .blog-content .blog-meta li:last-child:after { display: none; } .rs-blog.style2 .blog-item:hover .image-part a img { transform: scale(1.07); } .rs-blog.style2.modify .blog-item .blog-content { background: #faf9f7; height: 100%; display: grid; align-items: center; } .rs-blog.inner .blog-item { background: #ffffff; box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); } .rs-blog.inner .blog-item .text-bottom { padding: 43px 50px 45px; border-radius: 0 0 5px 5px; position: relative; z-index: 1; } .rs-blog.inner .blog-item .text-bottom .title { margin-bottom: 13px; font-size: 30px; text-transform: capitalize; line-height: normal; line-height: 40px; } .rs-blog.inner .blog-item .text-bottom .title a { color: #1f2839; } .rs-blog.inner .blog-item .text-bottom .title a:hover { color: #b69d74; } .rs-blog.inner .blog-item .text-bottom .title2 { margin-bottom: 13px; font-size: 24px; text-transform: capitalize; line-height: 500; line-height: 35px; } .rs-blog.inner .blog-item .text-bottom .title2 a { color: #1f2839; } .rs-blog.inner .blog-item .text-bottom .title2 a:hover { color: #b69d74; } .rs-blog.inner .blog-item .text-bottom .blog-meta { margin-bottom: 23px; } .rs-blog.inner .blog-item .text-bottom .blog-meta li { position: relative; margin-right: 5px; padding-right: 15px; display: inline-block; } .rs-blog.inner .blog-item .text-bottom .blog-meta li a { color: #767676; } .rs-blog.inner .blog-item .text-bottom .blog-meta li:last-child { margin: 0; padding: 0; } .rs-blog.inner .blog-item .text-bottom .blog-meta li:after { content: "."; font-size: 27px; color: #1f2839; position: absolute; right: 0; line-height: 0; top: 7px; } .rs-blog.inner .blog-item .text-bottom .blog-meta li:last-child:after { display: none; } .rs-blog.inner.modify .blog-item .blog-image { overflow: hidden; } .rs-blog.inner.modify .blog-item .blog-image img { transform: scale(1); transition: all 0.3s ease; } .rs-blog.inner.modify .blog-item .text-bottom { padding: 30px 38px; } .rs-blog.inner.modify .blog-item .text-bottom .blog-meta { margin-bottom: 20px; } .rs-blog.inner.modify .blog-item:hover .blog-image img { transform: scale(1.1); } .rs-blog.single .content-wrap { padding: 30px 40px 28px; } .rs-blog.single .content-wrap blockquote { margin: 40px 0; padding: 45px 60px 45px 85px; color: #666; position: relative; font-size: 18px; font-weight: 400; font-style: italic; line-height: 30px; background: #f8f8f8; } .rs-blog.single .content-wrap blockquote:after { font-family: Flaticon; content: "\f150" !important; position: absolute; left: 40px; top: 36px; z-index: 99; font-size: 60px; font-weight: 600; display: block; color: #101010; opacity: 0.05; transform: rotate(180deg); } .rs-blog.single .content-wrap ul.list-disc { list-style: disc; margin: 0 0 1.5em 3em; } .rs-blog.single .content-wrap .tags-part { padding-top: 28px; border-top: 1px solid rgba(170, 170, 170, 0.25); } .rs-blog.single .content-wrap .tags-part .tagcloud a { display: inline-block; margin: 0 6px 6px 0; line-height: 20px; padding: 2px 10px; font-size: 14px; text-transform: capitalize; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; background: #b69d74; color: #ffffff; border: 1px solid #b69d74; border-radius: 5px; } .rs-blog.single .content-wrap .tags-part .tagcloud a:hover { color: #ffffff; border-color: #b69d74; } .rs-blog.single .ps-navigation { border-bottom: 1px solid rgba(170, 170, 170, 0.25); padding: 0 0 30px; margin: 0 0 55px; } .rs-blog.single .ps-navigation li.prev { width: 50%; float: left; text-align: left; display: inline-block; } .rs-blog.single .ps-navigation li.prev .next_link { margin-left: 23px; } .rs-blog.single .ps-navigation li.prev .link_text i { margin-right: 10px; } .rs-blog.single .ps-navigation li.next { width: 50%; float: right; text-align: right; display: inline-block; } .rs-blog.single .ps-navigation li.next .next_link { margin-right: 23px; } .rs-blog.single .ps-navigation li.next .link_text i { margin-left: 10px; } .rs-blog.single .ps-navigation li a { background: 0 0; color: #767676; border-radius: 3px; } .rs-blog.single .ps-navigation li a span { vertical-align: middle; display: block; font-weight: 400; } .rs-blog.single .ps-navigation li a span.next_link { text-transform: uppercase; color: #909090 !important; } .rs-blog.single .ps-navigation li a span.link_text { font-size: 13px; color: #1f2839; display: inline-block; text-transform: capitalize; transition: all 0.3s ease; } .rs-blog.single .ps-navigation li a span.link_text i { vertical-align: text-top; color: #909090; margin-top: -25px; } .rs-blog.single .ps-navigation li a span:first-child { margin-top: 0; } .rs-blog.single .ps-navigation li a:hover .link_text { color: #b69d74; } .rs-blog.single .comment-post h3 { position: relative; padding-bottom: 12px; margin-bottom: 30px; } .rs-blog.single .comment-post h3:after { width: 50px; height: 2px; left: 0; bottom: 0; position: absolute; content: ""; background: #b69d74; } .rs-blog.single .comment-post form .cmnt-form input, .rs-blog.single .comment-post form .cmnt-form textarea { width: 100%; outline: none; border: none; background: #ffffff; border-radius: 3px; padding: 5px 10px; } .rs-blog.single .comment-post form .cmnt-form input { height: 50px; } .rs-blog.single .comment-post form .cmnt-form textarea { display: inherit; margin-bottom: 40px; height: 160px; } .rs-blog .blog-sidebar { background: #fff; padding: 35px 40px 40px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); } .rs-blog .blog-sidebar .sb-title { font-size: 22px; line-height: 26px; } .rs-blog .blog-sidebar .sb-search-box form { position: relative; } .rs-blog .blog-sidebar .sb-search-box form input { width: 100%; border: 1px solid rgba(170, 170, 170, 0.25); padding: 12px 17px; color: #767676; height: 46px; outline: none; } .rs-blog .blog-sidebar .sb-search-box form button { position: absolute; background: transparent; border: none; outline: none; padding: 0; top: 0; right: 0; width: 46px; height: 46px; font-size: 20px; color: #767676; } .rs-blog .blog-sidebar .sb-categories-box li { padding-left: 15px; margin-bottom: 11px; position: relative; } .rs-blog .blog-sidebar .sb-categories-box li a { color: #101010; } .rs-blog .blog-sidebar .sb-categories-box li a:hover { color: #b69d74; } .rs-blog .blog-sidebar .sb-categories-box li:before { font-family: FontAwesome; content: "\f105"; color: #101010; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .rs-blog .blog-sidebar .sb-categories-box li:last-child { margin: 0; } .rs-blog .blog-sidebar .sb-recent-post .post-item { clear: both; overflow: hidden; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .rs-blog .blog-sidebar .sb-recent-post .post-item .image-part { width: 100px; float: left; padding-right: 15px; } .rs-blog .blog-sidebar .sb-recent-post .post-item .image-part img { border-radius: 3px; } .rs-blog .blog-sidebar .sb-recent-post .post-item .content-part { line-height: 22px; } .rs-blog .blog-sidebar .sb-recent-post .post-item .content-part a.title { color: #101010; } .rs-blog .blog-sidebar .sb-recent-post .post-item .content-part a.title:hover { color: #b69d74; } .rs-blog .blog-sidebar .sb-recent-post .post-item .content-part .date { display: block; font-size: 13px; margin-top: 4px; } .rs-blog .blog-sidebar .sb-recent-post .post-item:last-child { margin: 0; padding: 0; border: none; } .rs-blog .blog-sidebar .sb-tags .tagcloud a { display: inline-block; margin: 10px 3px 0 0; line-height: 20px; padding: 6px 12px; font-size: 13px !important; text-transform: capitalize; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; background: #ffffff; color: #767676; border: 1px solid #f0f0f0; border-radius: 5px; } .rs-blog .blog-sidebar .sb-tags .tagcloud a:hover { background: #b69d74; color: #ffffff; border-color: #b69d74; } /*---------------------------------------- 23. Checkout Section CSS ----------------------------------------*/ .rs-checkout .checkout-title { margin-bottom: 30px; } .rs-checkout .checkout-title h3 { font-size: 30px; line-height: 40px; margin: 0; } .rs-checkout .coupon-toggle .accordion .card { border: unset; border-top: 3px solid #b69d74; border-radius: 0; } .rs-checkout .coupon-toggle .accordion .card .card-header { border: none; margin: 0; border-radius: unset; } .rs-checkout .coupon-toggle .accordion .card .card-header .card-title { margin: 0; } .rs-checkout .coupon-toggle .accordion .card .card-header .card-title span i { margin-right: 10px; } .rs-checkout .coupon-toggle .accordion .card .card-header .card-title button { background: unset; border: none; color: #263043; transition: all 0.3s ease; outline: none; cursor: pointer; } .rs-checkout .coupon-toggle .accordion .card .card-header .card-title button:hover { color: #b69d74; } .rs-checkout .coupon-toggle .accordion .card .card-body { border: 1px solid #d3ced2; padding: 20px 20px 50px 20px; margin-top: 2em; text-align: left; } .rs-checkout .coupon-toggle .accordion .card .card-body .coupon-code-input { width: 47%; float: left; margin-right: 50px; } .rs-checkout .coupon-toggle .accordion .card .card-body .coupon-code-input input { width: 100%; height: 45px; outline: none; padding: 10px 18px; color: #767676; border: 1px solid rgba(54, 54, 54, 0.1); } .rs-checkout .full-grid { margin-top: 25px; } .rs-checkout .full-grid .form-content-box { margin-bottom: 50px; } .rs-checkout .full-grid .form-content-box .form-group label { line-height: 2; display: block; margin-bottom: 5px; } .rs-checkout .full-grid .form-content-box .form-group label .req { color: #ff0000; } .rs-checkout .full-grid .form-content-box .form-group select { color: #666666; opacity: 0.5; padding-left: 8px; padding-right: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid #ccc; border-radius: 0; height: 45px; line-height: 45px; cursor: pointer; width: 100%; outline: none; } .rs-checkout .full-grid .form-content-box .form-group textarea { height: 4em; line-height: 1.5; display: block; box-shadow: none; width: 100%; border: 1px solid rgba(54, 54, 54, 0.1); padding: 10px 18px; margin: 0; outline: none; } .rs-checkout .full-grid .form-content-box .form-group .form-control-mod { border: 1px solid rgba(54, 54, 54, 0.1); height: 45px; padding: 10px 18px; width: 100%; margin: 0; outline: none; line-height: normal; border-radius: unset; } .rs-checkout .full-grid .form-content-box .form-group .form-control-mod.margin-bottom { margin-bottom: 10px !important; } .rs-checkout .full-grid .ordered-product table { width: 100%; } .rs-checkout .full-grid .ordered-product table tr th { border: 1px solid #ccc; padding: 9px 12px; } .rs-checkout .full-grid .ordered-product table tr td { border: 1px solid #ccc; padding: 6px 12px; } .rs-checkout .full-grid .payment-method .top-area { border-bottom: 1px solid #d3ced2; } .rs-checkout .full-grid .payment-method .top-area .payment-co { margin-bottom: 20px; } .rs-checkout .full-grid .payment-method .top-area .payment-co span { font-weight: 600; margin-right: 10px; } .rs-checkout .full-grid .payment-method .top-area .p-msg { position: relative; box-sizing: border-box; width: 100%; padding: 1em; margin: 1em 0 2em; font-size: 0.92em; border-radius: 2px; line-height: 1.5; background-color: #f9f9f9; } .rs-checkout .full-grid .payment-method .top-area .p-msg:before { content: ""; display: block; border: 1em solid #f9f9f9; border-right-color: transparent; border-left-color: transparent; border-top-color: transparent; position: absolute; top: -0.75em; left: 0; margin: -1em 0 0 2em; } /*---------------------------------------- 24. Cart Section CSS ----------------------------------------*/ .rs-cart .cart-wrap table.cart-table { border: 1px solid rgba(0, 0, 0, 0.1); width: 100%; border-collapse: collapse; } .rs-cart .cart-wrap table.cart-table td, .rs-cart .cart-wrap table.cart-table th { padding: 25px; text-align: center; border: 1px solid #ccc; } .rs-cart .cart-wrap table.cart-table th { border: none; font-size: 18px; padding: 25px; text-align: center; vertical-align: middle; font-weight: 700; } .rs-cart .cart-wrap table.cart-table td { border-bottom: none; border-left: none; border-right: none; border-top: 1px solid #e6e6e6; } .rs-cart .cart-wrap table.cart-table .product-remove a { margin: 0 auto; color: #1f2839; display: block; border-radius: 100%; border: 1px solid #ddd; font-size: 16px; font-weight: 400; height: 20px; width: 20px; line-height: 17px; text-align: center; } .rs-cart .cart-wrap table.cart-table .product-remove a:hover { background: #ff0000; color: #ffffff; } .rs-cart .cart-wrap table.cart-table .product-thumbnail { min-width: 32px; } .rs-cart .cart-wrap table.cart-table .product-thumbnail a img { width: 80px; height: auto; } .rs-cart .cart-wrap table.cart-table .product-name a { color: #767676; font-weight: 700; } .rs-cart .cart-wrap table.cart-table .product-name a:hover { color: #b69d74; } .rs-cart .cart-wrap table.cart-table .product-price { font-weight: 700; } .rs-cart .cart-wrap table.cart-table .product-quantity input { border: 1px solid #e6e6e6; border-radius: 4px; padding: 0 0 0 10px; max-width: 65px; margin: 0 auto; outline: none; } .rs-cart .cart-wrap table.cart-table .action .coupon { float: left; } .rs-cart .cart-wrap table.cart-table .action .coupon input { box-sizing: border-box; border: 1px solid #d3ced2; padding: 6px 6px 5px; margin: 0 4px 0 0; outline: none; width: 320px; border-radius: 4px; height: 45px; margin-right: 20px; text-align: left; padding-left: 22px; } .rs-cart .cart-collaterals { width: 100%; overflow: hidden; } .rs-cart .cart-collaterals .cart-totals { float: right; width: 48%; } .rs-cart .cart-collaterals .cart-totals .title { font-weight: 700; color: #767676; text-transform: capitalize; } .rs-cart .cart-collaterals .cart-totals table.cart-total-table { text-align: left; width: 100%; border-collapse: collapse; border-radius: 5px; } .rs-cart .cart-collaterals .cart-totals table.cart-total-table tr { border-top: 1px solid rgba(0, 0, 0, 0.1); } .rs-cart .cart-collaterals .cart-totals table.cart-total-table tr th { font-size: 18px; font-weight: 700; } .rs-cart .cart-collaterals .cart-totals table.cart-total-table tr td, .rs-cart .cart-collaterals .cart-totals table.cart-total-table tr th { padding: 30px 10px; } /*---------------------------------------- 25. Shop Section CSS ----------------------------------------*/ .inner-shop-part .woocommerce-result-count { font-size: 15px; line-height: 26px; color: #767676; font-weight: 400; margin: 0; } .inner-shop-part .from-control { float: right; font-size: 15px; color: #767676; font-weight: 400; vertical-align: top; padding: 10px; border: 1px solid #ced4da; border-radius: 5px; } .inner-shop-part .product-list .image-product { position: relative; } .inner-shop-part .product-list .image-product img { width: 100%; } .inner-shop-part .product-list .image-product .overley i { position: absolute; bottom: 150px; right: 13px; background: transparent; opacity: 0; visibility: hidden; transition: 0.4s; } .inner-shop-part .product-list .image-product .overley i:before { font-size: 30px; color: #494949; font-weight: 400; background: #ffffff; border: none; padding: 8px 10px 8px; height: 45px; width: 45px; line-height: 45px; } .inner-shop-part .product-list .image-product .onsale { font-size: 13px; color: #ffffff; font-weight: 700; line-height: 40px; background: #b69d74; width: 40px; height: 40px; text-align: center; border-radius: 50%; display: inline-block; position: absolute; top: 13px; right: 13px; } .inner-shop-part .product-list .content-desc .loop-product-title { margin: 0; font-size: 20px; line-height: 46px; color: #1f2839; } .inner-shop-part .product-list .content-desc .loop-product-title a { color: #1f2839; } .inner-shop-part .product-list .content-desc .loop-product-title a:hover { color: #b69d74; } .inner-shop-part .product-list .content-desc .price { font-size: 20px; line-height: 30px; color: #b69d74; font-weight: 600; margin: 0; } .inner-shop-part .product-list .content-desc .price del { opacity: 0.6; padding-right: 10px; } .inner-shop-part .product-list:hover .image-product .overley i { opacity: 1; visibility: visible; bottom: 13px; } /*---------------------------------------- 26. Single Shop Section CSS ----------------------------------------*/ .rs-single-shop .single-product-image img { width: 100%; } .rs-single-shop .single-price-info .product-title { font-size: 25px; font-weight: 700; margin-bottom: 12px; } .rs-single-shop .single-price-info .single-price { color: #b69d74; font-weight: 600; } .rs-single-shop .single-price-info .some-text { margin-top: 15px; } .rs-single-shop .single-price-info form { margin-bottom: 30px; } .rs-single-shop .single-price-info form input { height: 40px; width: 70px; line-height: 40px; text-align: center; padding-left: 10px; border: 1px solid rgba(54, 54, 54, 0.1); outline: none; } .rs-single-shop .single-price-info p.category { margin: 0; padding-top: 25px; border-top: 1px solid #e6e6e6; font-size: 14px; } .rs-single-shop .single-price-info p.category span { font-weight: 700; padding-right: 10px; } .rs-single-shop .single-price-info p.category a { color: #767676; } .rs-single-shop .single-price-info p.category a:hover { color: #b69d74; } .rs-single-shop .single-price-info .tag { margin: 0; } .rs-single-shop .single-price-info .tag span { font-weight: 700; } .rs-single-shop .tab-area { margin-top: 50px; } .rs-single-shop .tab-area ul.nav-tabs { border-bottom: 1px solid #f0f0f0; margin-bottom: 32px; } .rs-single-shop .tab-area ul.nav-tabs li { margin-right: 12px; } .rs-single-shop .tab-area ul.nav-tabs li a { padding: 20px 45px; display: inline-block; border-radius: 5px 5px 0 0; background: #f0f0f0; color: #1f2839; font-size: 18px; font-weight: 500; } .rs-single-shop .tab-area ul.nav-tabs li a:hover, .rs-single-shop .tab-area ul.nav-tabs li a.active { background: #b69d74; color: #ffffff; } .rs-single-shop .tab-area ul.nav-tabs li:last-child { margin-right: 0; } .rs-single-shop .tab-area .tab-content .tab-pane .tab-title { font-weight: 700; margin-bottom: 34px; } .rs-single-shop .tab-area .tab-content .tab-pane .dsc-p { margin: 0; } .rs-single-shop .tab-area .tab-content .tab-pane .reviews-grid .top-area { margin-bottom: 5px; } .rs-single-shop .tab-area .tab-content .tab-pane .reviews-grid .top-area p { margin-bottom: 23px; } .rs-single-shop .tab-area .tab-content .tab-pane .reviews-grid .top-area h4 { font-weight: 400; color: unset; } .rs-single-shop .tab-area .tab-content .tab-pane .reviews-grid .comment-form { max-width: 600px; } .rs-single-shop .tab-area .tab-content .tab-pane .reviews-grid .comment-form p.comment-notes { margin-bottom: 15px; } .rs-single-shop .tab-area .tab-content .tab-pane .reviews-grid .comment-form .placeholder-cntrl label { font-weight: 600; display: block; } .rs-single-shop .tab-area .tab-content .tab-pane .reviews-grid .comment-form .placeholder-cntrl input { border: 1px solid rgba(54, 54, 54, 0.1); padding: 10px 15px; margin-bottom: 10px; width: 100%; } .rs-single-shop .tab-area .tab-content .tab-pane .reviews-grid .comment-form .placeholder-cntrl textarea { width: 100%; padding: 10px 15px; height: 75px; border: 1px solid rgba(54, 54, 54, 0.1); margin-bottom: 20px; } .rs-single-shop .tab-area .tab-content .tab-pane .reviews-grid .comment-form .ratings { font-weight: 600; margin-bottom: 18px; display: block; } .rs-single-shop .tab-area .tab-content .tab-pane .reviews-grid .comment-form .ratings ul li { display: inline; } .rs-single-shop .tab-area .tab-content .tab-pane .reviews-grid .comment-form .ratings ul li i { color: #b69d74; font-weight: normal; } .rs-single-shop .tab-area .tab-content .tab-pane .reviews-grid .comment-form .readon { text-transform: uppercase; font-weight: 600; font-size: 15px; padding: 0 22px; } /*---------------------------------------- 27. Contact Section CSS ----------------------------------------*/ .rs-contact.inner .contact-wrap { background: #ffffff; padding: 60px 70px 90px; } .rs-contact.inner .contact-inner-page input, .rs-contact.inner .contact-inner-page textarea { background: #f8f8f8; padding: 10px 18px 14px; color: #767676; width: 100%; border: none; outline: none; border-radius: 3px; } .rs-contact.inner .contact-inner-page input { margin-bottom: 30px; } .rs-contact.inner .contact-inner-page textarea { height: 130px; margin-bottom: 40px; display: inherit; } .rs-contact.inner .contact-sidebar { background: #ffffff; } .rs-contact.inner .contact-sidebar .content-part { padding: 35px 50px 50px; } .rs-contact.inner .contact-sidebar .content-part .title { font-size: 30px; line-height: 40px; margin-bottom: 25px; } .rs-contact.inner .contact-sidebar .content-part .address-item { overflow: hidden; } .rs-contact.inner .contact-sidebar .content-part .address-item .address-icon { float: left; padding-top: 5px; height: 40px; line-height: 40px; } .rs-contact.inner .contact-sidebar .content-part .address-item .address-icon i { font-size: 25px; } .rs-contact.inner .contact-sidebar .content-part .address-item .address-text { float: left; width: 80%; padding-left: 15px; } .rs-contact.inner .contact-sidebar .content-part .address-item .address-text .contact-title { font-size: 16px; line-height: 40px; margin: 0; } .rs-contact.inner .contact-sidebar .content-part .address-item .address-text a { color: #b69d74; } .rs-contact.inner .contact-sidebar .content-part .address-item .address-text a:hover { color: #1f2839; } .rs-contact.inner .g-map { padding: 0 5px 5px; } .rs-contact.inner .g-map iframe { width: 100%; height: 460px; border: none; filter: grayscale(100%); display: inherit; } .rs-contact.inner .g-map2 iframe { height: 270px; width: 100%; border: 5px solid #d1d1d1; display: inherit; } .rs-contact.inner.modify .contact-wrap { padding: 50px 70px 80px; } .rs-contact.inner.modify .contact-sidebar { height: 100%; } .rs-contact.inner.modify .contact-sidebar .content-part { padding: 55px 50px 50px; } .rs-contact.inner.modify .contact-sidebar .content-part .title { margin-bottom: 35px; } /*------------------------------------ 28. Footer CSS ------------------------------------*/ .rs-footer { background: #1f2839; color: #ffffff; } .rs-footer .footer-desc .sub-text { margin-bottom: 10px; font-weight: 500; display: block; } .rs-footer .footer-top { padding: 105px 0 100px; color: #d1d1d1; } .rs-footer .footer-top .footer-title { margin-bottom: 40px; padding-bottom: 5px; color: #ffffff; position: relative; font-size: 20px; line-height: 28px; padding-left: 18px; } .rs-footer .footer-top .footer-title:before { position: absolute; content: ""; top: 0; left: 0; width: 2px; height: 30px; background: #b69d74; } .rs-footer .footer-top .about-widget img { margin-bottom: 32px; margin-top: -6px; max-width: 240px; } .rs-footer .footer-top .about-widget .footer-desc { color: #d1d1d1; } .rs-footer .footer-top .about-widget .social-links { margin-top: 40px; } .rs-footer .footer-top .about-widget .social-links li { display: inline; margin-right: 10px; } .rs-footer .footer-top .about-widget .social-links li a { color: #1f2839; } .rs-footer .footer-top .about-widget .social-links li a i { width: 30px; height: 30px; line-height: 30px; border-radius: 50%; background: #263043; text-align: center; transition: all 0.3s ease; color: #d1d1d1; } .rs-footer .footer-top .about-widget .social-links li a i:hover { opacity: 0.82; background: #b69d74; color: #ffffff; } .rs-footer .footer-top .about-widget .social-links li:last-child { margin-right: 0; } .rs-footer .footer-top .footer-news .news-item { clear: both; overflow: hidden; margin-bottom: 30px; } .rs-footer .footer-top .footer-news .news-item .image-part { width: 100px; float: left; padding-right: 15px; } .rs-footer .footer-top .footer-news .news-item .image-part img { border-radius: 3px; } .rs-footer .footer-top .footer-news .news-item .content-part { line-height: 22px; } .rs-footer .footer-top .footer-news .news-item .content-part a.title { color: #b69d74; } .rs-footer .footer-top .footer-news .news-item .content-part .date { color: #d1d1d1; display: block; font-size: 13px; margin-top: 4px; } .rs-footer .footer-top .footer-news .news-item:last-child { margin: 0; } .rs-footer .footer-top .footer-address li { font-size: 15px; margin-bottom: 15px; position: relative; padding-left: 30px; } .rs-footer .footer-top .footer-address li i { color: #b69d74; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 20px; } .rs-footer .footer-top .footer-address li span { overflow: hidden; } .rs-footer .footer-top .footer-address li a { color: #d1d1d1; } .rs-footer .footer-top .footer-address li a:hover { color: #b69d74; } .rs-footer .footer-top .footer-address li p { display: inline; } .rs-footer .footer-top .footer-address li:last-child { margin-bottom: 0; } .rs-footer .footer-top .footer-newsletter { position: relative; } .rs-footer .footer-top .footer-newsletter input, .rs-footer .footer-top .footer-newsletter button { border: none; outline: none; } .rs-footer .footer-top .footer-newsletter input:focus, .rs-footer .footer-top .footer-newsletter button:focus { outline: none; } .rs-footer .footer-top .footer-newsletter input { width: 100%; background: #263043; height: 50px; padding: 5px 15px; padding-left: 20px; border-radius: 3px; color: #ffffff; font-size: 14px; } .rs-footer .footer-top .footer-newsletter button { position: absolute; right: 0; top: 0; width: 75px; transition: all 0.3s ease; border-radius: 0 3px 3px 0; cursor: pointer; padding: 0; height: 50px; font-size: 22px; line-height: 50px; background: #b69d74; color: #ffffff; } .rs-footer .footer-top .footer-newsletter button:hover { background: #a28555; } .rs-footer .footer-top .footer-newsletter ::placeholder { color: #d1d1d1; } .rs-footer .footer-top .footer-newsletter :-ms-input-placeholder { color: #d1d1d1; } .rs-footer .footer-top .footer-newsletter ::-ms-input-placeholder { color: #d1d1d1; } .rs-footer .footer-bottom { padding: 15px 0; background: #192336; } .rs-footer .footer-bottom .copyright p { margin-bottom: 0; color: #d1d1d1; } .rs-footer .footer-bottom .copyright a { color: #d1d1d1; } /* ------------------------------------- Membership Application Form CSS (src/components/MembershipForm.tsx — new component, not part of the ported Advokat template, so it isn't in the numbered sections above. Input/textarea treatment matches .rs-contact.inner .contact-inner-page.) --------------------------------------*/ .rs-membership-application .membership-application-wrap { background: #ffffff; padding: 60px 70px 90px; max-width: 900px; margin: 0 auto; } .rs-membership-application .membership-application-intro { margin-bottom: 40px; color: #767676; } .rs-membership-application fieldset { border: none; padding: 0; margin: 0 0 40px; } .rs-membership-application legend { font-size: 22px; font-weight: 600; color: #1f2839; margin-bottom: 6px; padding: 0; } .rs-membership-application .field-note { color: #767676; font-size: 14px; margin-bottom: 20px; } .rs-membership-application .field-subheading { font-size: 18px; font-weight: 600; color: #1f2839; margin: 10px 0 15px; } .rs-membership-application .field-label { display: block; margin-bottom: 8px; color: #1f2839; font-weight: 500; } .rs-membership-application .field-hint { font-weight: 400; color: #999999; font-size: 13px; } .rs-membership-application input, .rs-membership-application textarea { background: #f8f8f8; padding: 10px 18px 14px; color: #767676; width: 100%; border: none; outline: none; border-radius: 3px; margin-bottom: 25px; } .rs-membership-application textarea { height: 130px; display: inherit; } .rs-membership-application input[type="file"] { padding: 10px 18px; } .rs-membership-application .membership-radio-fieldset { margin-bottom: 20px; } .rs-membership-application .membership-radio-legend { font-size: 16px; font-weight: 600; color: #1f2839; margin-bottom: 15px; } .rs-membership-application .membership-radio-list label { display: flex; align-items: center; margin-bottom: 12px; color: #494949; cursor: pointer; } .rs-membership-application .membership-radio-list input[type="radio"] { width: auto; margin: 0 10px 0 0; } .rs-membership-application .membership-bank-box { background: #f8f8f8; border-radius: 3px; padding: 25px 30px; margin-bottom: 20px; } .rs-membership-application .membership-bank-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 20px; margin: 0 0 15px; } .rs-membership-application .membership-bank-dl dt { color: #767676; font-weight: 500; } .rs-membership-application .membership-bank-dl dd { margin: 0; color: #1f2839; font-weight: 600; } .rs-membership-application .membership-signature { color: #b69d74; font-weight: 500; } .rs-membership-application .membership-status { margin-top: 15px; font-weight: 500; } .rs-membership-application .membership-status.success { color: #2e7d32; } .rs-membership-application .membership-status.error { color: #c62828; } /* Contact page form (ContactForm.tsx) status message — same colors as the membership form's .membership-status above, just under the vendor .rs-contact section instead of the membership page's own wrapper. */ .rs-contact .contact-form-status { margin-top: 15px; font-weight: 500; } .rs-contact .contact-form-status.success { color: #2e7d32; } .rs-contact .contact-form-status.error { color: #c62828; } @media only screen and (max-width: 767px) { .rs-membership-application .membership-application-wrap { padding: 40px 25px 50px; } } /* ------------------------------------- 29. Error 404 CSS --------------------------------------*/ .rs-page-error { height: 100vh; display: grid; align-items: center; } .rs-page-error .error-text { color: #b69d74; text-align: center; } .rs-page-error .error-text .error-code { font-size: 250px; line-height: 250px; font-weight: 700; margin-bottom: 5px; color: #1f2839; } .rs-page-error .error-text h3.error-message { color: #1f2839; font-size: 35px; line-height: 35px; font-weight: 700; } .rs-page-error .error-text form { position: relative; max-width: 400px; margin: 0 auto; } .rs-page-error .error-text form input { border: 1px solid #ddd; color: #444444; padding: 0 17px; height: 50px; line-height: 50px; width: 100%; outline: none; margin-bottom: 30px; } .rs-page-error .error-text form button { background: transparent; border: medium none; color: #666666; padding: 0 16px; height: 48px; line-height: 48px; position: absolute; right: 1px; top: 1px; z-index: 10; font-size: 20px; cursor: pointer; outline: none; transition: all 0.3s ease; } .rs-page-error .error-text form button:hover { background: #b69d74; color: #ffffff; } /* ----------------------- 30. Scroll Up CSS --------------------------*/ #scrollUp { text-align: center; bottom: 40px; cursor: pointer; display: none; position: fixed; right: 20px; z-index: 999; border-radius: 50px 50px 4px 4px; } #scrollUp i { background: #b69d74; border-radius: 50%; height: 40px; font-size: 24px; font-weight: 600; width: 42px; color: #fff; line-height: 36px; transition: all 0.3s ease; margin-left: 2px; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4); } #scrollUp i:hover { background-color: #222222; } /*----------------------------------------------- 31. Header Cart Modal Css -----------------------------------------------*/ .woocommerce-mini-cart { position: absolute; padding: 30px 20px; background: #fff; right: 0; top: 200%; transition: all 0.3s ease; width: 270px; z-index: 11; opacity: 0; visibility: hidden; overflow: hidden; } .woocommerce-mini-cart.left-view { right: unset; left: 0; } .woocommerce-mini-cart li { border-bottom: 1px solid rgba(170, 170, 170, 0.25); padding: 0 0 20px 0 !important; margin: 0 0 20px 0 !important; margin-right: 0 !important; border: none !important; display: flex !important; justify-content: center; align-items: center; } .woocommerce-mini-cart li:last-child { margin: 0 !important; } .woocommerce-mini-cart .product-info { padding: 0 26px; } .woocommerce-mini-cart .product-info a { color: #767676 !important; font-weight: 700; } .woocommerce-mini-cart .product-info a:hover { color: #767676 !important; } .woocommerce-mini-cart .total-price { padding: 0 0 20px; } .woocommerce-mini-cart .icon-cart i { color: #767676; width: 18px; height: 18px; line-height: 16px; border: 1px solid #767676; border-radius: 30px; font-weight: 500; font-size: 12px; text-align: center; transition: all 0.3s ease; } .woocommerce-mini-cart .icon-cart i:hover { color: red; } .woocommerce-mini-cart .icon-cart, .woocommerce-mini-cart .product-image { margin-top: 2px; } .woocommerce-mini-cart .product-image { display: block; float: right; text-align: right; width: 56px; } .woocommerce-mini-cart .crt-btn { padding: 5px 10px; background: #b69d74; color: #ffffff; display: inline-block; border-radius: 3px; } .woocommerce-mini-cart .crt-btn:hover { background: #bfa985; color: #ffffff; } .woocommerce-mini-cart .crt-btn.btn1 { margin-right: 10px; } .mini-cart-active:hover .woocommerce-mini-cart { visibility: visible; opacity: 1; top: 100%; } /* ------------------------------------ 32. Preloader CSS ---------------------------------------*/ #loading { background-color: #ffffff; height: 100%; width: 100%; position: fixed; z-index: 1; margin-top: 0px; top: 0px; z-index: 999999; } #loading.image-preloader .loader { position: absolute; width: 300px; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } #loading.image-preloader .loader img { max-width: 240px; animation: shake 2s; /* When the animation is finished, start again */ animation-iteration-count: infinite; animation: shake 2s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; transform: translate3d(0, 0, 0); } .loader { position: absolute; width: 75px; height: 100px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .loader__bar { position: absolute; bottom: 0; width: 10px; height: 50%; background: #b69d74; transform-origin: center bottom; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); } .loader__bar:nth-child(1) { left: 0px; transform: scale(1, 0.2); animation: barUp1 4s infinite; } .loader__bar:nth-child(2) { left: 15px; transform: scale(1, 0.4); animation: barUp2 4s infinite; } .loader__bar:nth-child(3) { left: 30px; transform: scale(1, 0.6); animation: barUp3 4s infinite; } .loader__bar:nth-child(4) { left: 45px; transform: scale(1, 0.8); animation: barUp4 4s infinite; } .loader__bar:nth-child(5) { left: 60px; transform: scale(1, 1); animation: barUp5 4s infinite; } .loader__ball { position: absolute; bottom: 10px; left: 0; width: 10px; height: 10px; background: #fff; border-radius: 50%; animation: ball 4s infinite; } @keyframes ball { 0% { transform: translate(0, 0); } 5% { transform: translate(8px, -14px); } 10% { transform: translate(15px, -10px); } 17% { transform: translate(23px, -24px); } 20% { transform: translate(30px, -20px); } 27% { transform: translate(38px, -34px); } 30% { transform: translate(45px, -30px); } 37% { transform: translate(53px, -44px); } 40% { transform: translate(60px, -40px); } 50% { transform: translate(60px, 0); } 57% { transform: translate(53px, -14px); } 60% { transform: translate(45px, -10px); } 67% { transform: translate(37px, -24px); } 70% { transform: translate(30px, -20px); } 77% { transform: translate(22px, -34px); } 80% { transform: translate(15px, -30px); } 87% { transform: translate(7px, -44px); } 90% { transform: translate(0, -40px); } 100% { transform: translate(0, 0); } } @keyframes barUp1 { 0% { transform: scale(1, 0.2); } 40% { transform: scale(1, 0.2); } 50% { transform: scale(1, 1); } 90% { transform: scale(1, 1); } 100% { transform: scale(1, 0.2); } } @keyframes barUp2 { 0% { transform: scale(1, 0.4); } 40% { transform: scale(1, 0.4); } 50% { transform: scale(1, 0.8); } 90% { transform: scale(1, 0.8); } 100% { transform: scale(1, 0.4); } } @keyframes barUp3 { 0% { transform: scale(1, 0.6); } 100% { transform: scale(1, 0.6); } } @keyframes barUp4 { 0% { transform: scale(1, 0.8); } 40% { transform: scale(1, 0.8); } 50% { transform: scale(1, 0.4); } 90% { transform: scale(1, 0.4); } 100% { transform: scale(1, 0.8); } } @keyframes barUp5 { 0% { transform: scale(1, 1); } 40% { transform: scale(1, 1); } 50% { transform: scale(1, 0.2); } 90% { transform: scale(1, 0.2); } 100% { transform: scale(1, 1); } } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } /*Pulse Border Animation*/ @keyframes pulse-border { 0% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } @-webkit-keyframes pulse-border { 0% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } @-webkit-keyframes fadeInRightShotr { from { opacity: 0.5; -webkit-transform: translate3d(30px, 30px, 0); transform: translate3d(30px, 30px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightShotr { from { opacity: 0.5; -webkit-transform: translate3d(30px, 30px, 0); transform: translate3d(30px, 30px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightShotr { -webkit-animation-name: fadeInRightShotr; animation-name: fadeInRightShotr; } @-webkit-keyframes fadeInLeftShotr { from { opacity: 0.5; -webkit-transform: translate3d(-30px, -30px, 0); transform: translate3d(-30px, -30px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftShotr { from { opacity: 0.5; -webkit-transform: translate3d(-30px, -30px, 0); transform: translate3d(-30px, -30px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftShotr { -webkit-animation-name: fadeInLeftShotr; animation-name: fadeInLeftShotr; } /* ------------------------------------- Home Announcements Marquee CSS (src/components/NewsMarquee.tsx — new component, not part of the ported Advokat template. Modelled on the auto-scrolling news strip on PICPA Australia's sister site, apcci.au — pure CSS loop, no JS.) Sits above "Trusted Advisors", i.e. at the very top of the home page, directly under .full-width-header.header-transparent — which is position:absolute (floats over whatever comes first in the page), with its nav text forced white (.rs-menu > li > a { color: #fff !important } in rsmenu-main.css) for legibility over the dark hero image it's designed to overlay. Two things follow from that: 1. padding-top has to clear the header's real height, or the header renders on top of/through the marquee's own card row instead of floating cleanly above it. There's no scoped "header height" token in this codebase to reuse, so this reuses the exact top-padding values .rs-breadcrumbs (PageBanner) already uses at each breakpoint for the same problem — proven in production on every other page — rather than a new guess. 2. The section needs a dark background (not a light card strip), because that white nav text renders with no backdrop of its own at the top of the page (menu-area's background is transparent until scrolled) — a light background here would wash it out. --------------------------------------*/ .picpa-news-marquee { background: linear-gradient(90deg, #1a2333 0%, #1f2839 45%, #1a2333 100%); padding: 260px 0 1rem; } @media only screen and (max-width: 1199px) { .picpa-news-marquee { padding-top: 250px; } } @media only screen and (max-width: 991px) { .picpa-news-marquee { padding-top: 180px; } } @media only screen and (max-width: 767px) { .picpa-news-marquee { padding-top: 130px; } } .picpa-news-marquee__viewport { overflow: hidden; width: 100%; } .picpa-news-marquee__track { display: flex; align-items: stretch; width: max-content; animation: picpa-marquee-scroll 30s linear infinite; } .picpa-news-marquee__track:hover { animation-play-state: paused; } .picpa-news-marquee__item { flex: 0 0 auto; display: flex; text-decoration: none; color: inherit; padding: 0 0.75rem; outline: none; } .picpa-news-marquee__item:focus-visible .picpa-news-marquee__card { outline: 3px solid #b69d74; outline-offset: 4px; } .picpa-news-marquee__card { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.75rem 1.5rem; border-radius: 8px; border: 1px solid rgba(182, 157, 116, 0.3); border-left: 3px solid #b69d74; background: #ffffff; box-shadow: 0 4px 16px rgba(31, 40, 57, 0.06); transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; min-width: 260px; max-width: min(88vw, 480px); } .picpa-news-marquee__item:hover .picpa-news-marquee__card, .picpa-news-marquee__item:focus-visible .picpa-news-marquee__card { border-color: #b69d74; box-shadow: 0 8px 24px rgba(182, 157, 116, 0.2); transform: translateY(-1px); } .picpa-news-marquee__pre { font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #b69d74; } .picpa-news-marquee__title { font-family: "Playfair Display", serif; font-size: 16px; font-weight: 700; line-height: 1.35; color: #1f2839; } .picpa-news-marquee__cta { font-family: "Open Sans", sans-serif; font-size: 13px; font-weight: 600; color: #b69d74; } @keyframes picpa-marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .picpa-news-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; } .picpa-news-marquee__item[aria-hidden="true"] { display: none; } }