* { box-sizing: border-box; padding: 0; margin: 0; } body { font-family: "Outfit", sans-serif; line-height: 1.6; font-weight: 400; background-color: #fff; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: "Times New Roman", Times, serif; margin-top: 0px; line-height: 1.5; font-weight: 600; margin-bottom: 0px; color: #855E38; } select { color: #858585; } ul, li { list-style: none; padding-left: 0; margin-bottom: 0; } a, a:hover { text-decoration: none; color: #333333; cursor: pointer; transition: all 0.5s; } a:hover { color: #855E38; } img { max-width: 100%; height: auto; } /* height:auto: images carry width/height attributes (prevents layout shift) */ p { color: #636160; font-size: 18px; } p:last-of-type { margin-bottom: 0 !important } button { cursor: pointer; } .overflow { overflow: hidden; } .custom-container { padding: 0px 160px; } .common-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; align-items: center; } .common-section { padding: 100px 0; } .common-top-section { padding-top: 100px; } .common-bottom-section { padding-bottom: 100px; } .common-btn { padding: 12px 24px; color: #fff; background-color: #333333; border-radius: 12px; font-weight: 500; align-items: center; text-transform: capitalize; transition: all 0.5s; display: inline-flex; gap: 10px; border: 1px solid transparent; font-size: 16px; } .common-btn:hover { background-color: #956A3F; color: #fff; } .common-btn:hover svg path { fill: #fff; stroke: #fff; } /* header */ header { position: relative; left: 0; right: 0; width: 100%; z-index: 1000; background: #EAE7DF; } .header { display: flex; justify-content: space-between; align-items: center; position: relative; } /* header .logo-box a img, header .log-box a img { width: 120px; } */ nav.header-menu { display: flex; } header .right-box { display: flex; align-items: center; justify-content: end; } header .right-boxa:hover { color: #fff; } header .color-logo, .mobile-menu-close-box, .mobile-menu-open-btn, header .center-box.contact-menu-box .common-btn { display: none; } header .logo-box a { padding: 0px !important; } /* */ header li { position: relative; display: flex; align-items: center; } header .dropdown-menu ul li { width: 280px; } header li:last-child a::after { content: none; } header .common-grid { grid-template-columns: 120px auto 200px; align-items: center; } header .header-menu ul { display: flex; justify-content: end; gap: 35px; } header a { display: flex; padding: 35px 0px; text-align: center; font-size: 18px; text-transform: capitalize; } header ul li:first-child a { padding-left: 0px; } header a:hover { color: #956A3F; } header a:hover svg path { stroke: #956A3F; } header.shrink { position: fixed; background: #EAE7DF; top: 0; left: 0; right: 0; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); -webkit-animation-name: slideInDown; -moz-animation-name: slideInDown; -ms-animation-name: slideInDown; -o-animation-name: slideInDown; animation-name: slideInDown; -webkit-animation-duration: 1s; animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; } @keyframes slideInDown { from { top: -100%; visibility: visible } to { top: 0 } } @-webkit-keyframes slideInDown { from { top: -100%; visibility: visible } to { top: 0 } } .menu-box { display: none; } .menu-box span { transition: all 500ms ease-in-out; } header a.dropdown-toggle { align-items: center; } .common-list-style li:last-child { margin-bottom: 0 } li a.active, .banner-inner-section a.active { color: #956A3F; } /* dropdown-menu */ .dropdown-menu { position: absolute; } .dropdown ul.dropdown-menu { background-color: rgb(0, 0, 0); border-radius: 0px 0px 12px 12px; border: none; width: 320px; display: none; } .dropdown ul.dropdown-menu a { padding: 10px; } .dropdown.open ul.dropdown-menu { display: block; } .dropdown .dropdown-menu { display: none; } header .dropdown a.dropdown-toggle svg { width: 30px; height: 30px; } header .dropdown.open a.dropdown-toggle svg { transform: rotate(180deg); transition: all 0.5s; } .dropdown-toggle::after { border: none; } /* back to top */ #backToTop { background-color: #956A3F; text-decoration: none; cursor: pointer; width: 56px; height: 56px; z-index: 999; position: fixed; right: 32px; bottom: 32px; display: flex; align-items: center; justify-content: center; border: 0; opacity: 0; border-radius: 100%; box-shadow: 0 4px 16px 0 rgba(black, 0.4); } #backToTop:hover { background-color: #141414 } #backToTop.show { opacity: 1; visibility: visible; } #backToTop svg.icon__arrow-up { fill: #fff; width: 32px; height: 32px; } /* title-box */ .title-box { margin-bottom: 50px; } .title-box span, .heading-box span { padding: 6px 24px; font-size: 18px; background-color: #FAF8F2; border-radius: 50px; line-height: 30px; color: #956A3F; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; } .title-box span svg path, .heading-box span svg path { fill: #956A3F } .title-box h2 { font-size: 48px; font-weight: 500; color: #956A3F; font-weight: bold; } .center-title-box { text-align: center; } /* banner-section */ .banner-section .left-box { background: #956A3F url('../images/home-banner-bg.png') center center / cover no-repeat; } .banner-section .title-box h1 { font-size: 64px; color: #fff; } .banner-section .title-box span { margin-bottom: 24px; } .banner-section .title-box p { color: #fff; margin-top: 24px; font-size: 18px; } .banner-section .title-box { margin-bottom: 32px; width: 82%; } .banner-section { display: flex; } .banner-section .left-box { width: 50%; display: flex; flex-direction: column; align-items: baseline; justify-content: center; padding: 0px 0px 0px 160px; } .banner-section .right-box { width: 50%; } .banner-section .common-btn { background-color: #fff; color: #956A3F; } .banner-section .common-btn svg path { stroke: #956A3F } .banner-section .common-btn:hover { background-color: #333333; color: #fff } .banner-section .common-btn:hover svg path { stroke: #fff } .client-logo-slider { padding: 50px 0px; position: relative; overflow: hidden; } .client-logo-slider::before { content: ''; position: absolute; background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%); left: 0; width: 200px; max-width: 25%; height: 100%; z-index: 2; pointer-events: none; } .client-logo-slider .owl-dots { display: none; } .client-logo-slider .owl-carousel .owl-item img { max-height: 32px; width: auto; margin: auto; } /* services-section */ .our-services { padding-top: 50px; } .our-services .common-grid { align-items: stretch; } .our-services .common-box { background-color: #F1F1F1; padding: 30px; border-radius: 16px; display: flex; flex-direction: column; gap: 80px; transition: all 0.5; position: relative; overflow: hidden; } .our-services .common-box .top-box { display: flex; justify-content: space-between; align-items: flex-start; z-index: 1; } .our-services .common-box .top-box .icon-box { display: flex; gap: 24px; align-items: center; } .our-services .common-box .top-box .icon-box h5 { font-size: 40px; color: #333333 } .our-services .common-box p { font-size: 18px; color: #636160; z-index: 1; } .our-services .common-box:hover .top-box .icon-box h5, .our-services .common-box:hover p { color: #fff; transition: all 0.5; } .our-services .common-box:hover .top-box .icon-box span svg circle { fill: #fff; transition: all 0.5; } .our-services .common-box:hover .top-box .icon-box span svg path { fill: #333333; transition: all 0.5; } .our-services .common-box:hover .top-box svg path { fill: rgba(255, 255, 255, 0.1); stroke: #fff; transition: all 0.5; } .our-services .common-box:hover .top-box svg circle { fill: #fff; transition: all 0.5; } .our-services .common-box:hover { background: url('../images/services-img.png') center center / cover no-repeat; } .our-services .common-box::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(51, 51, 51, 0.33); opacity: 0; transition: opacity 0.3s ease; } .our-services .common-box:hover::after { opacity: 1; } /* power-of-reguaitions */ .power-of-regulation-section { padding: 50px 0px; background: url(../images/power-of-bg.png) right center no-repeat; } .power-of-regulation-section .common-grid { grid-template-columns: 580px auto; } .power-of-regulation-section .left-box { position: relative; } .power-of-regulation-section .left-box img { border-radius: 270px 270px 0px 0px; z-index: 2; position: relative } .power-of-regulation-section .left-box .border { position: absolute; border: 2px solid #333333 !important; border-radius: 270px 270px 0 0; position: absolute; inset: 0%; z-index: 1; left: 10%; bottom: 10% } .power-of-regulation-section .right-box { flex-direction: column; } .power-of-regulation-section .right-box .title-box span { background-color: #fff } .power-of-regulation-section .right-box .title-box, .power-of-regulation-section .right-box .title-box h2 { margin-bottom: 24px } .power-of-regulation-section .left-box img.circle-img { position: absolute; top: 0; right: 40px; } /* Step Process */ .step-process-section .common-grid { grid-template-columns: repeat(3, 1fr); } .step-process-section .common-box .img-box { width: 330px; height: 330px; background-color: #ECE7DF; border-radius: 50%; display: flex; align-content: center; align-items: center; position: relative; justify-content: center; overflow: hidden; transition: transform 0.5s ease-out, box-shadow 0.5s ease-out; will-change: transform; } .step-process-section .common-box .img-box span { position: absolute; background-color: #333333; border-radius: 50px; color: #fff; padding: 8px 24px; left: -10%; top: 12%; z-index: 11; } .step-process-section .common-box { display: flex; flex-direction: column; justify-content: center; text-align: center; align-items: center; cursor: pointer; } .step-process-section .common-box .img-box .border { border: 2px solid #878583 !important; border-radius: 50%; position: absolute; inset: -4%; z-index: 1; left: 4%; top: 4%; } .step-process-section .common-box { gap: 50px; } .step-process-section .common-box .content-box { display: flex; flex-direction: column; gap: 24px; justify-content: center } .step-process-section .common-box .content-box h4 { font-size: 32px; font-weight: bold; color: #333333 } .step-process-section .common-box .content-box p { width: 70%; margin: 0 auto } .step-process-section .common-box .img-box img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease-out; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } @media (hover: hover) and (pointer: fine) { .step-process-section .common-box:hover .img-box { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(51, 51, 51, 0.12); } .step-process-section .common-box:hover .img-box img, .step-process-section .img-box:hover img { transform: scale(1.08); } } @media (prefers-reduced-motion: reduce) { .step-process-section .common-box .img-box, .step-process-section .common-box .img-box img { transition: none !important; transform: none !important; box-shadow: none !important; } } /* */ .consultation-section { background: #333333 url('../images/consultation.png') center center / cover no-repeat; } .consultation-section .custom-container { display: flex; gap: 40px; align-items: center; } .consultation-section .title-box { margin-bottom: 0px; flex: 1; } .consultation-section .title-box h2 { font-size: 64px; color: #fff; } .consultation-section .circle-badge { position: relative; width: 200px; height: 200px; border-radius: 50%; background: url('../images/circle-badge.png') center center / cover no-repeat; /* brown background */ display: flex; align-items: center; justify-content: center; overflow: hidden; } .consultation-section .text-circle { position: absolute; width: 100%; height: 100%; font-size: 24px; font-weight: bold; fill: #fff; letter-spacing: 2.5px; } .consultation-section .arrow { font-size: 40px; color: white; transform: rotate(0deg); /* optional */ } /* latest-blog-section */ .latest-blog-section .common-grid { grid-template-columns: repeat(3, 1fr); } .common-blog-box { background-color: #F7F5F0; padding: 30px; border-radius: 16px; display: flex; flex-direction: column; gap: 24px; } .common-blog-box img { border-radius: 12px } .common-blog-box .content-box h6 { font-family: "Outfit", sans-serif; font-size: 24px } .common-blog-box .content-box { display: flex; flex-direction: column; gap: 16px; } .common-blog-box .common-btn { display: flex; justify-content: space-between; padding: 12px; background-color: #ECE7DF; color: #333333; font-size: 18px; } .common-blog-box .common-btn span { width: 38px; height: 38px; display: flex; justify-content: center; align-items: center; border-radius: 12px; background-color: #333333 } .common-blog-box .common-btn:hover { background-color: #333333; color: #fff; } .common-blog-box .common-btn:hover span { background-color: #956A3F; } /* footer */ footer { background-color: #333333; } footer .top-footer { display: flex; } footer .top-footer .left-box, footer .top-footer .right-box { display: flex; flex-direction: column; gap: 30px; width: 50%; padding: 60px 0px; } footer .top-footer h5 { color: #fff; font-size: 24px; font-weight: 500; font-family: "Outfit", sans-serif; } footer .top-footer .right-box div { display: flex; flex-direction: column; gap: 30px; width: auto } input { padding: 12px 24px; border-radius: 24px; border: none; background-color: rgba(255, 255, 255, .2); color: #fff; } input:placeholder { color: #fff; } footer .top-footer button.common-btn { padding: 12px 52px; border-radius: 50px; background-color: #fff; color: #333; margin-left: 16px; } /* footer .top-footer input { width : 440px; } */ footer .top-footer .left-box { border-right: 1px solid rgba(255, 255, 255, 0.16); justify-content: center; } footer .top-footer .right-box { align-items: center; } footer .top-footer .right-box ul { display: flex; flex-direction: column; gap: 24px; } footer .top-footer .right-box ul li { display: flex; gap: 12px; align-items: center; } footer .top-footer .right-box ul li span { width: 48px; height: 48px; background-color: #B78D61; border-radius: 12px; display: flex; justify-content: center; align-items: center; } footer .top-footer .right-box ul li a { font-size: 18px; color: #fff; } footer .bottom-footer { border-top: 1px solid rgba(255, 255, 255, 0.16); padding: 24px 0px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.16); } footer .bottom-footer .left-box img { border-radius: 12px; } footer .bottom-footer .right-box { display: flex; gap: 24px; } footer .bottom-footer .center-box ul { display: flex; gap: 24px; } footer .bottom-footer .center-box ul li { position: relative; padding-left: 26px; } footer .bottom-footer .center-box ul li:before { position: absolute; content: ''; width: 6px; height: 6px; background-color: #B78D61; border-radius: 50%; top: 50%; transform: translateY(-50%); left: 0 } footer .bottom-footer .center-box ul li a { font-size: 18px; color: #fff; } footer .bottom-footer .center-box ul li:first-child { padding-left: 0px; } footer .bottom-footer .center-box ul li:first-child:before { content: none; } footer .bottom-footer .center-box ul li a:hover, .copy-right span a:hover { color: #B78D61; } footer .copy-right { display: flex; justify-content: space-between; padding: 24px 0px } footer .copy-right p, .copy-right span, .copy-right span a { color: #fff; font-size: 18px; } footer .top-footer form { display: flex; } footer .top-footer form input { width: 60%; border-radius: 50px; } /* about-us-page */ .common-flex-box { display: flex; gap: 40px; align-items: center; } .the-power-section .left-box { width: 60%; } .the-power-section .right-box { background-color: #B78D61; width: 40%; align-items: center; justify-content: center; display: flex; position: relative; border-radius: 24px; padding: 100px 40px; } .the-power-section .right-box .border-img, .the-power-section .right-box .circle-img { position: absolute; } .the-power-section .right-box .border-img { bottom: 70px } .the-power-section .right-box .circle-img { top: 60px; left: 30px; } .the-power-section .left-box .title-box { margin-bottom: 0px; } .empower-section .common-flex-box .left-box { width: 40%; background-color: #F0E9DD; border-radius: 24px; padding: 50px 88px; position: relative; } .empower-section .common-flex-box .right-box { width: 60%; } .empower-section .common-flex-box .left-box .border { position: absolute; border: 2px solid #333333 !important; border-radius: 223px; position: absolute; inset: 0%; z-index: 1; left: 18%; bottom: 5%; top: 8%; right: 10%; } .empower-section .common-flex-box .left-box .circle-img { position: absolute; right: 10%; z-index: 2; } .empower-section .right-box .bottom-box { display: flex; justify-content: space-between; } .empower-section .right-box .bottom-box .common-box { padding: 60px 0px 0px; width: 40%; display: flex; flex-direction: column; gap: 40px; } .sub-title-box h6 { color: #000; font-size: 24px; font-family: outfit; } .sub-title-box { display: flex; flex-direction: column; gap: 16px; } .form-control { display: block; width: 100%; padding: 12px 24px; font-size: 18px; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border-radius: 16px; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; } .pricing-section { background-color: #333333; } .pricing-section .title-box span { background-color: #fff; color: #956A3F; } .pricing-section .title-box h2 { color: #fff; } .pricing-section .common-grid { grid-template-columns: repeat(3, 1fr); align-content: stretch; align-items: stretch; } .pricing-section .common-grid .common-box { background: linear-gradient(90deg, #FFFFFF 0%, #FFFAF2 100%); padding: 30px; border-radius: 24px; display: flex; flex-direction: column; justify-content: stretch; } .pricing-section .common-grid .common-box .heading-box span { background-color: #ece7df; color: #956a3f; } .pricing-section .common-grid .common-box p { color: #636160; } .pricing-section .common-grid .common-box .border { margin: 16px 0px } .pricing-section .common-grid .common-box h3 { font-size: 48px } .pricing-section .common-grid .common-box h3 sub { font-size: 32px; } .pricing-section .common-grid .common-box span { font-size: 24px; color: #636160; } .pricing-section .common-grid .common-box .common-btn { margin: 24px 0px; justify-content: center; } .common-list { padding-left: 24px; display: flex; flex-direction: column; gap: 8px; } .common-list li { position: relative; } .common-list li:before { position: absolute; content: ''; background: url('../images/common-list.png'); width: 16px; height: 16px; left: -24px; top: 6px; } .pricing-section .common-grid .common-box.book-appoinment { background: #F0E9DD; } .pricing-section .common-grid .common-box.book-appoinment h3 { font-family: "Outfit", sans-serif; font-size: 24px; } .pricing-section .common-grid .common-box.book-appoinment { gap: 24px } .pricing-section .common-grid .common-box.book-appoinment form { display: flex; gap: 16px; flex-direction: column; } .pricing-section .common-grid .common-box.book-appoinment .common-btn { margin: 0px; width: fit-content; } .stroy-section .left-box .title-box { margin-bottom: 0px; } .stroy-section .right-box { background-color: #F0E9DD; position: relative; border-radius: 24px; display: flex; justify-content: center; align-items: center; padding: 90px; } .stroy-section .right-box .border, .stroy-section .right-box .circle-img { position: absolute; } .stroy-section .right-box .border { position: absolute; border: 2px solid #333333 !important; border-radius: 50%; position: absolute; inset: 0%; z-index: 1; left: 18%; bottom: 9%; top: 15%; right: 10%; } .stroy-section .right-box .circle-img { right: 13%; top: 15%; z-index: 2; } .marquee-section { background-color: #B78D61; padding: 28px 0; overflow: hidden; white-space: nowrap; } .marquee-track { display: inline-block; will-change: transform; animation: marquee 16s linear infinite; } /* Each item */ .marquee-item { display: inline-flex; align-items: center; gap: 24px; color: white; font-size: 36px; font-weight: 500; margin-right: 24px; /* Space between items */ white-space: nowrap; } /* Animation */ @keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } /* Only 50% because we duplicated */ } /* */ .wellness-journey-section { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .background-video { position: relative; object-fit: cover; width: 100%; height: 700px; z-index: -1; } .wellness-journey-section .content-box { position: absolute; left: 10%; display: flex; gap: 60px; align-items: center; z-index: 3; } .wellness-journey-section .play-pause-btn { background-color: #fff; border-spacing: 15px; outline: 1px solid #fff; outline-offset: 10px; border: none; width: 98px; height: 98px; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: background-color 0.3s, transform 0.1s; } .wellness-journey-section .play-pause-btn svg { fill: #855E38; width: 36px; height: 36px; } .wellness-journey-section .content-box h2 { font-size: 48px; width: 50%; color: #fff; } .wellness-journey-section:before { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0, 0, 0, 0.76) 0%, rgba(0, 0, 0, 0.1) 76%, transparent 100%); z-index: 1; } .wellness-journey-section:after { position: absolute; content: ''; width: 2px; height: 100%; background-color: #fff; left: 241px; z-index: 2; } .play-pause-btn:hover { background-color: #855E38; } .play-pause-btn:hover svg { fill: #fff; } .client-say-section { overflow: hidden; position: relative; padding-bottom: 60px; } .client-say-section .owl-carousel { overflow: hidden; } .client-say-section .item { position: relative; padding: 40px; border: 1px solid #855e38; border-radius: 24px; background-color: #FAF8F2; display: flex; flex-direction: column; gap: 30px; } .client-say-section .item .client-box { position: absolute; display: flex; border: 1px solid #855e38; padding: 12px; bottom: -50px; background-color: #fff; width: 83%; border-radius: 24px; align-items: center; gap: 16px; } .client-say-section .item .client-box img { width: 76px; border-radius: 24px; } .client-say-section .owl-carousel .owl-stage-outer { overflow: hidden; } .client-say-section .item .client-box span { font-size: 24px; color: #000; } .client-say-section .item p { font-size: 24px; color: #4E4D4C; } .client-say-section .item.box p { height: 270px; } .client-say-section .item.box-2 p { height: 170px; } .banner-section .title-box a { display: inline-block; } .our-services .common-grid { grid-template-columns: repeat(3, 1fr); } .our-services .common-box:hover { background: #212529; } .our-services .common-box:hover .top-box svg path { stroke: #3333; } footer .top-footer button.common-btn:hover { background-color: transparent; color: #fff; border: 1px solid #956A3F; background-color: #956A3F; } /* ========================================================================== Services Page Scoped Styles (.services-page) Safely scoped so NO other pages are affected. ========================================================================== */ /* Banner adjustments */ .services-page .banner-section .left-box .title-box { margin-bottom: 0px; } .services-page .banner-section .right-box img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Service Items Base */ .services-page .services-item { border-bottom: 1px solid #ECE7DF; } .services-page .services-item:last-of-type { border-bottom: none; } .services-page .services-item .title-box { margin-bottom: 0px; } .services-page .services-item .title-box h2 { font-size: 44px; font-weight: bold; color: #855E38; margin-bottom: 15px; } .services-page .services-item .title-box p { font-size: 18px; color: #636160; } .services-page .services-item .title-box p:last-of-type { margin-bottom: 0 !important; } /* Service 1: Healing (IMAGE on Left, CONTENT on Right) */ .services-page .healing-section .left-box { width: 40%; background-color: #F0E9DD; border-radius: 24px; padding: 50px 70px; position: relative; display: flex; justify-content: center; align-items: center; } .services-page .healing-section .left-box img { border-radius: 270px 270px 0 0; position: relative; z-index: 2; max-width: 100%; height: auto; } .services-page .healing-section .left-box .border { position: absolute; border: 2px solid #333333 !important; border-radius: 270px 270px 0 0; inset: 0%; z-index: 1; left: 14%; bottom: 5%; top: 8%; right: 10%; } .services-page .healing-section .left-box .circle-img { position: absolute; right: 10%; top: 8%; z-index: 2; } .services-page .healing-section .right-box { width: 60%; } /* Service 2: Reading (CONTENT on Left, IMAGE on Right) */ .services-page .reading-section { background-color: #FAF8F2; } .services-page .reading-section .left-box { width: 60%; } .services-page .reading-section .right-box { width: 40%; background-color: #B78D61; border-radius: 24px; padding: 50px 70px; position: relative; display: flex; justify-content: center; align-items: center; } .services-page .reading-section .right-box img { border-radius: 270px 270px 0 0; position: relative; z-index: 2; max-width: 100%; height: auto; } .services-page .reading-section .right-box .border { position: absolute; border: 2px solid #fff !important; border-radius: 270px 270px 0 0; inset: 0%; z-index: 1; left: 14%; bottom: 5%; top: 8%; right: 10%; } .services-page .reading-section .right-box .circle-img { position: absolute; right: 10%; top: 8%; z-index: 2; } /* Service 3: Kaartlegging (IMAGE on Left, CONTENT on Right) */ .services-page .kaartlegging-section .left-box { width: 40%; background-color: #F0E9DD; border-radius: 24px; padding: 50px 70px; position: relative; display: flex; justify-content: center; align-items: center; } .services-page .kaartlegging-section .left-box img { border-radius: 270px 270px 0 0; position: relative; z-index: 2; max-width: 100%; height: auto; } .services-page .kaartlegging-section .left-box .border { position: absolute; border: 2px solid #333333 !important; border-radius: 270px 270px 0 0; inset: 0%; z-index: 1; left: 14%; bottom: 5%; top: 8%; right: 10%; } .services-page .kaartlegging-section .left-box .circle-img { position: absolute; right: 10%; top: 8%; z-index: 2; } .services-page .kaartlegging-section .right-box { width: 60%; } /* ========================================================================== Contact Us Page Scoped Styles (.contact-page) Safely scoped so NO other pages are affected. ========================================================================== */ /* Banner adjustments */ .contact-page .banner-section .left-box .title-box { margin-bottom: 0px; } .contact-page .banner-section .right-box img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Contact Form Section */ .contact-page .contact-form-section { padding: 90px 0; } .contact-page .contact-form-section .common-flex-box { display: flex; gap: 60px; align-items: center; } .contact-page .contact-form-section .left-box { width: 38%; display: flex; justify-content: center; } .contact-page .contact-form-section .right-box { width: 62%; } .contact-page .contact-form-section .right-box .title-box { margin-bottom: 40px; } /* Contact Image Box (Signature Warm Card with Oval Photo, Border & Star) */ .contact-page .contact-img-box { background-color: #B78D61; border-radius: 24px; padding: 70px 40px; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 440px; } .contact-page .contact-img-box .main-img { border-radius: 220px; position: relative; z-index: 2; max-width: 260px; width: 100%; height: auto; display: block; } .contact-page .contact-img-box .border-circle { position: absolute; border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 50%; width: 290px; height: 360px; z-index: 1; pointer-events: none; } .contact-page .contact-img-box .circle-img { position: absolute; top: 45px; right: 45px; z-index: 3; width: 48px; height: 48px; display: block; } /* Contact Form */ .contact-page .contact-form { display: flex; flex-direction: column; gap: 24px; } .contact-page .contact-form .form-row { display: flex; gap: 20px; } .contact-page .contact-form .form-row .form-group { flex: 1; } .contact-page .contact-form .form-group { display: flex; flex-direction: column; gap: 8px; } .contact-page .contact-form .form-group label { font-size: 18px; color: #333333; font-weight: 500; font-family: "Outfit", sans-serif; } .contact-page .contact-form .form-group .form-control { border: 1px solid #0006; border-radius: 12px; padding: 16px 24px; font-size: 15px; color: #333333; background-color: #FAF8F2; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .contact-page .contact-form .form-group .form-control:focus { border-color: #B78D61; outline: none; box-shadow: 0 0 0 3px rgba(183, 141, 97, 0.12); } .contact-page .contact-form .form-group .form-control::placeholder { color: #636160; font-size: 18px; } .contact-page .contact-form .form-group select.form-control { appearance: auto; cursor: pointer; color: #555555; } .contact-page .contact-form .form-group textarea.form-control { resize: none; min-height: 110px; } .contact-page .contact-form .form-group.full-width { width: 100%; } .contact-page .contact-form .common-btn { align-self: flex-start; margin-top: 4px; } /* Contact Info Section — FULL-WIDTH DARK BACKGROUND */ .contact-page .contact-info-section { background-color: #333333; padding: 80px 0; width: 100%; } .contact-page .contact-info-grid { display: grid; grid-template-columns: 507px 1fr; gap: 60px; align-items: stretch; } .contact-page .contact-details { display: flex; flex-direction: column; gap: 30px; } .contact-page .contact-detail-box { background-color: #FAF8F2; border-radius: 24px; padding: 30px; display: flex; align-items: flex-start; gap: 16px; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid rgba(232, 228, 221, 0.6); } .contact-page .contact-detail-box:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } .contact-page .contact-detail-box .contact-icon { padding: 18px; background-color: #B78D61; border-radius: 24px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; } .contact-page .contact-detail-box h6 { font-size: 24px; color: #636160; margin-bottom: 3px; font-family: "Outfit", sans-serif; font-weight: normal; } .contact-page .contact-detail-box a { font-size: 24px; color: #855E38; display: block; line-height: 1.4; font-weight: 600; text-decoration: none; transition: color 0.3s ease; font-family: Times New Roman; } .contact-page .contact-detail-box a:hover { color: #B78D61; } /* Contact Map — Static Image stretched cleanly */ .contact-page .contact-map { border-radius: 24px; overflow: hidden; display: flex; } .contact-page .contact-map img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 24px; } /* FAQ Section */ .contact-page .faq-section { padding: 90px 0 100px 0; background-color: #ffffff; } .contact-page .faq-grid { display: grid; grid-template-columns: 38% 1fr; gap: 70px; align-items: flex-start; } .contact-page .faq-left .title-box { margin-bottom: 24px; } .contact-page .faq-left .title-box span { margin-bottom: 16px; } .contact-page .faq-left .title-box h2 { margin-bottom: 24px; } .contact-page .faq-left .title-box p { color: #636160; font-size: 18px; } .contact-page .faq-contact-info { display: flex; flex-direction: column; gap: 4px; margin-top: 60px; } .contact-page .faq-contact-info .faq-msg-title { font-size: 18px; color: #000; } .contact-page .faq-contact-info .faq-msg-email { font-size: 24px; color: #B78D61; font-weight: 600; text-decoration: none; transition: color 0.3s ease; } .contact-page .faq-contact-info .faq-msg-email:hover { color: #855E38; } /* FAQ Accordion */ .contact-page .faq-accordion { display: flex; flex-direction: column; gap: 16px; } .contact-page .faq-accordion-item { background-color: #F6EFE9; border-radius: 24px; border: none; overflow: hidden; transition: background-color 0.3s ease, box-shadow 0.3s ease; } .contact-page .faq-accordion-item:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); } .contact-page .faq-accordion-header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 24px 30px; background: transparent; border: none; outline: none; cursor: pointer; text-align: left; gap: 20px; box-shadow: none; } .contact-page .faq-accordion-header:focus { outline: none; box-shadow: none; } .contact-page .faq-accordion-header .faq-q { font-size: 24px; font-weight: 500; color: #000; font-family: "Outfit", sans-serif; line-height: 1.4; } .contact-page .faq-accordion-header .faq-icon { width: 34px; height: 34px; border-radius: 50%; background-color: #ffffff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.3s ease, background-color 0.3s ease; } .contact-page .faq-accordion-header .faq-icon svg { width: 14px; height: 14px; } .contact-page .faq-accordion-header .faq-icon svg path { transition: stroke 0.3s ease; } .contact-page .faq-accordion-header:not(.collapsed) .faq-icon { transform: rotate(45deg); background-color: #333333; } .contact-page .faq-accordion-header:not(.collapsed) .faq-icon svg path { stroke: #ffffff; } .contact-page .faq-accordion-body { padding: 0 28px 24px 28px; color: #666666; font-size: 15px; line-height: 1.6; } .contact-page .faq-accordion-body p { margin: 0; } .contact-page .common-flex-box .left-box { width: 40%; background-color: #B78D61; border-radius: 24px; padding: 50px 88px; position: relative; } .contact-page .common-flex-box .left-box .border { position: absolute; border: 2px solid #fff !important; border-radius: 223px; inset: 0%; z-index: 1; left: 18%; bottom: 5%; top: 8%; right: 10%; } .contact-page .left-box .circle-img { position: absolute; right: 10%; z-index: 2; } /* ========================================================================== Inner Blog Section (.inner-blog-section) ========================================================================== */ .inner-blog-section .common-flex-box { align-items: center; } .inner-blog-section .inner-blog-hero-left { width: 60%; } .inner-blog-container .title-box { margin-bottom: 24px; } .inner-blog-intro-text p:last-child { margin-bottom: 0; } .inner-blog-section .right-box { width: 40%; background-color: #F0E9DD; border-radius: 24px; padding: 50px 88px; position: relative; display: flex; justify-content: center; align-items: center; } .inner-blog-section .right-box img { max-width: 100%; height: auto; position: relative; z-index: 2; display: block; } .inner-blog-section .right-box .border { position: absolute; border: 2px solid #333333 !important; border-radius: 223px; inset: 0%; z-index: 1; left: 18%; bottom: 5%; top: 8%; right: 10%; } .inner-blog-section .right-box .circle-img { position: absolute; right: 10%; z-index: 2; } .inner-blog-article-body { margin-top: 50px; width: 100%; } .inner-blog-section-heading { font-family: "Outfit", sans-serif; font-size: 24px; font-weight: 600; color: #855E38; line-height: 1.3; margin-bottom: 16px; } .inner-blog-article-body > .inner-blog-section-heading:first-child { margin-top: 0; } .inner-blog-article-body p:last-child { margin-bottom: 0; } .common-btn span {font-size: 0 !important; } .client-say-section .owl-carousel,.client-say-section .owl-carousel .owl-stage-outer {overflow: visible;} .client-logo-slider {display: none !important;} .the-power-section .title-box h2 {margin-bottom: 20px;} /*.banner-section .title-box {margin-bottom: 0 !important; text-align: center;}*/ /*.banner-section .left-box .title-box {text-align: left; margin-bottom: 30px !important; }*/ .contact-page .contact-detail-box {width: 100%;} .contact-page .contact-info-grid {grid-template-columns: auto;} .contact-page .contact-details { flex-direction: unset;} .step-process-section .common-box .img-box {width: auto !important;height: auto !important;padding: 0;background-color: transparent;} footer .copy-right { border-top: 1px solid rgba(255,255,255, 0.16);} /* ========================================================================== Tarieven Section ========================================================================== */ .tarieven-section { background: linear-gradient(180deg, #f7f3ee 0%, #f9f4ef 100%); } .tarieven-section .title-box { margin-bottom: 36px; } .tarieven-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .tarieven-item { background: #ffffff; border: 1px solid rgba(133, 94, 56, 0.18); border-radius: 20px; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; box-shadow: 0 10px 30px rgba(51, 51, 51, 0.04); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; } .tarieven-item:hover { transform: translateY(-4px); border-color: rgba(133, 94, 56, 0.45); box-shadow: 0 18px 34px rgba(133, 94, 56, 0.12); background: linear-gradient(180deg, #ffffff 0%, #faf7f2 100%); } .tarieven-name { flex: 1 1 auto; min-width: 0; font-size: 20px; line-height: 1.5; color: #333333; font-weight: 500; } .tarieven-price { flex-shrink: 0; color: #855E38; font-size: 24px; line-height: 1.2; font-weight: 700; white-space: nowrap; } .top-footer .left-box img {width: 166px; border-radius: 12px;} footer .top-footer .left-box ul { display: flex; gap: 24px; } footer .top-footer .left-box ul li { position: relative; padding-left: 26px; } footer .top-footer .left-box ul li:before { position: absolute; content: ''; width: 6px; height: 6px; background-color: #B78D61; border-radius: 50%; top: 50%; transform: translateY(-50%); left: 0 } footer .top-footer .left-box ul li a { font-size: 18px; color: #fff; } footer .top-footer .left-box ul li:first-child { padding-left: 0px; } footer .top-footer .left-box ul li:first-child:before { content: none; } .banner-section .title-box h1{text-align: center; } .banner-section .title-box {margin-bottom: 0 !important;} .banner-section.main-banner-section .left-box .title-box h1 {text-align: left; } .banner-section.main-banner-section .left-box .title-box {margin-bottom: 30px !important;} /* ========================================================================== WordPress theme additions (keep when updating from the HTML design) ========================================================================== */ /* Blog post titles are links in WordPress: keep the heading colour */ .common-blog-box .content-box h6 a { color: inherit; text-decoration: none; } .common-blog-box .content-box h6 a:hover { color: #B78D61; } /* Contact page: Customizer icons are 24px (footer), shown larger here */ .contact-page .contact-detail-box .contact-icon svg { width: 38px; height: 38px; } /* Testimonials: the slider dots are unstyled/invisible; hide them so the space above the footer does not depend on the number of testimonials (the design's dots row added ~26px on large screens) */ .client-say-section .owl-dots { display: none !important; } @media (min-width: 1440px) { .client-say-section { padding-bottom: 86px; } } /* Menu: current page highlighted (the walker adds "active"); the design colours it, plus an underline on desktop */ header .header-menu ul li a.active { color: #956A3F; } @media (min-width: 1280px) { header .header-menu ul li a:not(.common-btn) { position: relative; } header .header-menu ul li a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 26px; height: 2px; border-radius: 2px; background-color: #956A3F; } } footer .top-footer .left-box ul li a.active { color: #B78D61; } /* FAQ answers with more than one paragraph: small gap between the paragraphs */ .contact-page .faq-accordion-body p + p { margin-top: 12px; } /* Blog articles: bullet lists with brown dots (the global "ul, li { list-style: none }" is meant for menus) */ .inner-blog-article-body ul { margin: 0 0 1rem; padding-left: 24px; } .inner-blog-article-body ul li { list-style: disc; display: list-item; color: #636160; font-size: 18px; line-height: 1.6; margin-bottom: 6px; padding-left: 4px; } .inner-blog-article-body ul li::marker { color: #855E38; font-size: 1.1em; } @media (max-width: 767px) { .inner-blog-article-body ul li { font-size: 16px; line-height: 1.7; } } @media (max-width: 479px) { .inner-blog-article-body ul li { font-size: 14px; } } @media (max-width: 359px) { .inner-blog-article-body ul li { font-size: 15px; line-height: 1.65; } } /* Header menu + button: show the labels exactly as typed (Dutch: "Over mij", "Maak een afspraak met mij") */ header a, header a.common-btn { text-transform: none; } .common-blog-box .content-box h6 {height: 108px;} /* About "Over mij": show only the shaped image, without the brown box around it (all screen sizes) */ .the-power-section .common-flex-box .right-box { background-color: transparent; border-radius: 0; padding: 0; } /* About story: the "liefs kim" signature sits below the poem */ .stroy-section .left-box .title-box > span { margin: 12px 0 0; } /* Legal pages (Privacyverklaring / Algemene voorwaarden) */ .legal-content { max-width: 960px; margin: 0 auto; } .legal-content .legal-updated { font-size: 16px; color: #956A3F; margin-bottom: 32px; } .legal-content h2 { font-size: 28px; font-weight: 600; color: #855E38; margin: 40px 0 12px; } .legal-content h2:first-of-type { margin-top: 0; } .legal-content p { margin-bottom: 1rem; } .legal-content a { color: #855E38; text-decoration: underline; } .legal-content ul { margin: 0 0 1rem; padding-left: 24px; } .legal-content ul li { list-style: disc; display: list-item; color: #636160; font-size: 18px; line-height: 1.6; margin-bottom: 6px; padding-left: 4px; } .legal-content ul li::marker { color: #855E38; } @media (max-width: 767px) { .legal-content h2 { font-size: 22px; margin-top: 32px; } .legal-content p, .legal-content ul li { font-size: 16px; } } /* Footer: privacy / terms links next to the copyright */ footer .copy-right-left { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; } footer .copy-right-left p { margin: 0; } footer .copy-right .legal-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; } footer .copy-right .legal-links a { color: #fff; font-size: 18px; } footer .copy-right .legal-links a:hover { color: #B78D61; } @media (max-width: 767px) { footer .copy-right-left { flex-direction: column; } footer .copy-right .legal-links { justify-content: center; } footer .copy-right .legal-links a { font-size: 14px; } } @media (min-width: 768px) { footer .copy-right { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; } footer .copy-right > span { justify-self: end; text-align: right; } }