/********** Template CSS **********/ :root { --primary: #A1887F; /* Light Brown */ --secondary: #6D4C41; /* Medium Brown */ --success: #8D6E63; /* Earthy Brown */ --info: #A47551; /* Tan */ --warning: #D7CCC8; /* Warm Beige */ --danger: #5D4037; /* Dark Red-Brown */ --light: #F5F5F5; /* Light Cream */ --dark: #3E2723; /* Deep Brown */ } /* Override Bootstrap text colors */ .text-primary { color: var(--primary) !important; } .text-secondary { color: var(--secondary) !important; } .text-success { color: var(--success) !important; } .text-info { color: var(--info) !important; } .text-warning { color: var(--warning) !important; } .text-danger { color: var(--danger) !important; } .text-light { color: var(--light) !important; } .text-dark { color: var(--dark) !important; } /* Optional: background color classes too if needed */ .bg-primary { background-color: var(--primary) !important; } .bg-secondary { background-color: var(--secondary) !important; } .bg-success { background-color: var(--success) !important; } .bg-info { background-color: var(--info) !important; } .bg-warning { background-color: var(--warning) !important; } .bg-danger { background-color: var(--danger) !important; } .bg-light { background-color: var(--light) !important; } .bg-dark { background-color: var(--dark) !important; } .btn { font-weight: 700; transition: .5s; } .btn:hover { -webkit-box-shadow: 0 8px 6px -6px #555555; -moz-box-shadow: 0 8px 6px -6px #555555; box-shadow: 0 8px 6px -6px #555555; } .btn-light:hover, .btn-outline-light:hover { background-color: var(--dark) !important; color: #fff !important; border-color: var(--dark) !important; } .btn-primary { background-color: #A1887F !important; /* Light Brown */ border-color: #A1887F !important; color: white !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: #6D4C41 !important; /* Medium Brown on hover */ border-color: #6D4C41 !important; } .btn-primary { color: #FFFFFF; } .btn-square { width: 36px; height: 36px; } .btn-sm-square { width: 28px; height: 28px; } .btn-lg-square { width: 46px; height: 46px; } .btn-square, .btn-sm-square, .btn-lg-square { padding-left: 0; padding-right: 0; text-align: center; } .back-to-top { position: fixed; display: none; right: 30px; bottom: 0; border-radius: 50% 50% 0 0; z-index: 99; } .navbar-custom-bg { background-color: #e3f2fd !important; } .navbar { margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* ✅ Imported Jost font in HTML head (add this to your tag) */ @import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap'); /* ✅ Nav links style */ .navbar-light .navbar-nav .nav-link { font-family: 'Jost', sans-serif; position: relative; margin-left: 30px; padding: 30px 0; font-size: 18px; font-weight: 700; color: Brown !important; outline: none; transition: .5s; } /* ✅ Hover & active state */ .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active { color: #FFD700 !important; } /* ✅ Underline on hover/active */ @media (min-width: 992px) { .navbar-light .navbar-nav .nav-link::before { position: absolute; content: ""; width: 0; height: 5px; bottom: 0; left: 50%; background: #5f5f4c; transition: .5s; } .navbar-light .navbar-nav .nav-link:hover::before, .navbar-light .navbar-nav .nav-link.active::before { width: 100%; left: 0; } } /* ✅ Mobile styles */ @media (max-width: 991.98px) { .navbar-light .navbar-nav .nav-link { margin-left: 0; padding: 10px 0; color: white !important; } .navbar, .navbar-collapse { background-color: #A1887F !important; } } /* ✅ Remove extra padding from sticky-top */ .sticky-top { padding-left: 0 !important; padding-right: 0 !important; } .hero-header { background: url(../img/hero.jpg) top right no-repeat; background-size: cover; } .service-item { position: relative; height: 350px; padding: 0 30px; transition: .5s; } .service-item .service-icon { width: 150px; height: 100px; display: flex; align-items: center; justify-content: center; background: var(--primary); border-radius: 50%; transform: rotate(-14deg); } .service-item .service-icon i { transform: rotate(15deg); } .service-item a.btn { position: absolute; width: 60px; bottom: -48px; left: 50%; margin-left: -30px; opacity: 0; } .service-item:hover a.btn { bottom: -24px; opacity: 1; } .price-carousel::after { position: absolute; content: ""; width: 100%; height: 50%; bottom: 0; left: 0; background: var(--primary); border-radius: 8px 8px 50% 50%; z-index: -1; } .price-carousel .owl-nav { margin-top: 35px; width: 100%; text-align: center; display: flex; justify-content: center; } .price-carousel .owl-nav .owl-prev, .price-carousel .owl-nav .owl-next{ position: relative; margin: 0 5px; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; color: var(--primary); background: #FFFFFF; font-size: 22px; border-radius: 45px; transition: .5s; } .price-carousel .owl-nav .owl-prev:hover, .price-carousel .owl-nav .owl-next:hover { color: var(--dark); } @media (min-width: 576px) { .team-item .row { height: 350px; } } .team-carousel .owl-nav { position: absolute; padding: 0 45px; width: 100%; height: 45px; top: calc(50% - 22.5px); left: 0; display: flex; justify-content: space-between; } .team-carousel .owl-nav .owl-prev, .team-carousel .owl-nav .owl-next { position: relative; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; background: var(--primary); border-radius: 45px; font-size: 22px; transition: .5s; } .team-carousel .owl-nav .owl-prev:hover, .team-carousel .owl-nav .owl-next:hover { background: var(--dark); } .testimonial-carousel .owl-dots { margin-top: 15px; display: flex; align-items: center; justify-content: center; } .testimonial-carousel .owl-dot { position: relative; display: inline-block; margin: 0 5px; width: 20px; height: 20px; background: var(--light); border: 2px solid var(--primary); border-radius: 20px; transition: .5s; } .testimonial-carousel .owl-dot.active { width: 40px; height: 40px; background: var(--primary); } .testimonial-carousel .owl-item img { width: 150px; height: 150px; } .sticky-top { padding-left: 0 !important; padding-right: 0 !important; }