/* Global Style Start */ :root { /* Font */ --primary_font: 'DM Serif Display', serif; --secondary_font: 'Jost', sans-serif; /* Color */ --primary_color: #37474F; --secondary_color: #4D5053; --accent_color: #CDA274; --default_color: #FFFFFF; /* BG */ --primary_bg: #FBF9F6; --secondary_bg: #F4F0EC; } /* selection */ ::selection { color: var(--default_color); background: var(--primary_color); } /* selection */ html { scroll-behavior: smooth; } body { overflow-x: hidden; background: url(../images/hero_bg.png), var(--secondary_bg); background-position: top center; background-repeat: no-repeat; background-size: auto; } section { padding: 100px 0px; } a { text-decoration: none; } img { object-fit: cover; } ul { list-style-type: none; padding-left: 0px; } h1,h2,h3,h4,h5,h6 { font-family: var(--primary_font); color: var(--primary_color); font-weight: 400; } h2 { font-size: 44px; letter-spacing: 0.88px; text-transform: capitalize; } h4 { font-size: 25px; } h6 { color: var(--secondary_color); font-family: var(--secondary_font); font-size: 18px; font-weight: 400; letter-spacing: 0.18px; text-transform: capitalize; } p { color: var(--secondary_color); font-family: var(--secondary_font); font-size: 22px; font-weight: 400; letter-spacing: 0.22px; line-height: 1.3; } /* btn */ .btn { color: var(--primary_bg); font-family: var(--secondary_font); font-size: 18px; font-weight: 600; letter-spacing: 0.36px; text-transform: capitalize; padding: 9px 40px 8px; background: var(--primary_color); border-radius: 4px; border: 1px solid var(--primary_color); transition: 0.4s all; } .btn i { color: var(--accent_color); padding-left: 8px; transition: 0.4s all; } .btn:hover { color: var(--primary_color); background: transparent; border: 1px solid var(--primary_color); transition: 0.4s all; } .btn:hover i { padding-left: 16px; transition: 0.4s all; } /* Global Style End */ /* Preloader End */ .preloader { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--default_color); z-index: 9999; transition: opacity 0.5s ease; opacity: 1; } .preloader.hide { opacity: 0; pointer-events: none; } .preloader img { max-width: 200px; max-height: 50px; } /* Preloader End */ /* Navbar Start */ .navbar-brand { max-width: 106px; padding: 2px 0px 8px; } .navbar { border-radius: 70px; border: 1px solid rgba(55, 71, 79, 0.10); background: rgb(244 240 236 / 65%); box-shadow: 0px 4px 15px 0px rgba(55, 71, 79, 0.10); padding: 8px 40px; margin-top: 40px; backdrop-filter: blur(10px); } .d2c_navbar .navbar-nav .nav-item { margin: 0px 0px; display: flex; align-items: center; } .d2c_navbar .navbar-nav .nav-item:last-child { margin-right: 0; } .d2c_navbar .navbar-nav .nav-link { color: var(--primary_color); font-family: var(--secondary_font); font-size: 20px; font-weight: 400; text-transform: capitalize; padding: 0px 10px; background: transparent; transition: .4s all ease; border-radius: 4px; } .d2c_navbar .navbar-nav .nav-link:hover { color: var(--accent_color); transition: .4s all ease; } .navbar-nav .nav-link.active, .navbar-nav .show>.nav-link { color: var(--accent_color); transition: .4s all ease; } /* Nav Item Show From Side */ body .d2c_mobile_view { position: fixed; height: 100vh; inset: 0; opacity: 1; } .navbar.d2c_mobile_view_body .navbar-nav { width: 100%; } .navbar.d2c_mobile_view_body .nav-item { margin-right: 0; } .d2c_mobile_view .show_width { max-width: 14.625rem; width: 100%; height: 100vh; position: absolute; right: -380px; top: 0; transition: 0.5s; padding: 20px 15px; background-color: var(--primary_bg); overflow: scroll; z-index: 9999; box-shadow: 0px 0px 10px rgb(0 0 0 / 15%); } .d2c_mobile_view.show .show_width { right: 0; transition: 0.5s; } .hide_width { max-width: 15.625rem; width: 100%; height: 100vh; position: absolute; right: -380px !important; top: 0; transition: 0.5s !important; padding: 20px 15px; background-color: var(--default_color); overflow: scroll; z-index: 9999; } .navbar-toggler:focus { box-shadow: none; } .navbar-toggler { border: 1px solid var(--primary_color); color: var(--primary_color); padding: 7px 10px; width: 44px; margin-left: 10px; transition: .4s all ease; } .navbar-toggler:hover { background: transparent; color: var(--primary_color); transition: .4s all ease; } .d2c_cross_btn { width: auto; border: none; } @media only screen and (min-width:991px) { body .d2c_mobile_view { opacity: 0; transition: .5s; } } /* Navbar End */ /* Hero Section Start */ .d2c_hero_wrapper { padding: 110px 0px; } .d2c_hero_wrapper h2 { font-size: 64px; } .d2c_hero_wrapper p { margin-bottom: 34px; } /* Hero Section End */ /* About Section Start */ .d2c_about_wrapper { background: var(--primary_bg); } .d2c_about_content { padding-left: 50px; } .d2c_about_wrapper h2 { margin-bottom: 34px; } .d2c_about_wrapper p { margin-bottom: 26px; } .d2c_about_content p:nth-child(3) { margin-bottom: 45px; } /* About Section End */ /* Service Section Start */ .d2c_service_wrapper { background: var(--primary_bg); } .d2c_service_wrapper h2 { margin-bottom: 20px; } .d2c_service_wrapper p { margin-bottom: 50px; } .d2c_service_wrapper .d2c_card { border-radius: 20px; border: 1px solid rgba(55, 71, 79, 0.08); background: var(--secondary_bg); box-shadow: 4px 4px 24px 0px rgba(55, 71, 79, 0.05); padding: 60px 50px; } .d2c_card h4 { margin-bottom: 28px; } .d2c_card p { margin-bottom: 32px; } .d2c_card .btn { background: transparent; border: 1px solid transparent; color: var(--primary_color); transition: 0.4s all; } .d2c_card:hover .btn { background: var(--primary_color); border: 1px solid var(--primary_color); color: var(--primary_bg); transition: 0.4s all; } /* Service Section End */ /* Work Section Start */ .d2c_work_wrapper { background: var(--primary_bg); } .d2c_work { padding: 100px 0px; background: var(--secondary_bg); border-radius: 50px; } .d2c_work_wrapper h1 { font-size: 64px; } .d2c_work_wrapper .d2c_card { margin-bottom: 100px; } .d2c_work_wrapper p { margin-bottom: 50px; } .d2c_work_wrapper .d2c_card_right { margin-left: 110px; } .d2c_work_wrapper h3 { color: var(--primary_bg); font-size: 120px; } .d2c_work_wrapper h4 { font-size: 35px; margin-bottom: 24px; } .d2c_work_wrapper .d2c_card_left { padding-right: 110px; } .d2c_work_wrapper .d2c_img_wrapper { max-width: 92px; max-height: 94px; } /* Work Section End */ /* Partner Section Start */ .d2c_partner_wrapper { padding: 100px 0px; background: var(--primary_bg); } .d2c_partner_wrapper .d2c_img_wrapper { height: 102px; display: flex; align-items: center; } /* Partner Section End */ /* Team Section Start */ .d2c_team_wrapper { background: var(--primary_bg); } .d2c_team_wrapper p { margin-bottom: 70px; } .d2c_team_wrapper .d2c_img_wrapper { width: 100%; height: 433px; margin-bottom: 25px; } .d2c_team_wrapper img { border-radius: 8px; } .d2c_team_wrapper h4 { margin-bottom: 8px; } .d2c_team_wrapper h6 { margin-bottom: 18px; } .slick-slide { padding: 0px 12px; } /* Team Section End */ /* Project Section Start */ .d2c_project_wrapper { background: var(--primary_bg); } .d2c_project_wrapper p { margin-bottom: 70px } .d2c_project_wrapper .d2c_project_card { position: relative; } .d2c_project_wrapper .d2c_img_wrapper { width: 100%; height: 608px; } .d2c_project_wrapper img { border-radius: 20px; object-fit: cover; } .d2c_details_wrapper { position: absolute; left: 0px; bottom: 0px; padding: 25px; background: var(--primary_color); border-radius: 4px; opacity: 0; transition: 0.4s all; } .d2c_project_wrapper .d2c_project_card:hover .d2c_details_wrapper { left: 50px; bottom: 50px; opacity: 1; transition: 0.4s all; } .d2c_details_wrapper h4 { color: var(--secondary_bg); text-transform: capitalize; } .d2c_details_wrapper p { color: var(--secondary_bg); } .d2c_project_btn { margin-top: 42px; } /* Project Section End */ /* Counter Section Start */ .d2c_counter_wrapper { background: var(--primary_bg); padding: 30px 0px; } .d2c_counter { padding: 150px 100px; background: linear-gradient(0deg, rgba(244, 240, 236, 0.95) 0%, rgba(244, 240, 236, 0.95) 100%), url(../images/counter_bg.png), lightgray 50% / cover no-repeat; background-position: center center; background-size: cover; border-radius: 20px; } .d2c_counter h5 { color: var(--accent_color); font-size: 85px; letter-spacing: 1.7px; } .d2c_counter_wrapper p { margin-bottom: 0; } .d2c_counter_box { border-right: 1px solid var(--accent_color); } .d2c_counter_wrapper .row .d2c_counter_box:last-child { border-right: 0px; } /* Counter Section End */ /* Blog Section Start */ .d2c_blog_wrapper { background: var(--primary_bg); } .d2c_blog_wrapper p { margin-bottom: 70px; } .d2c_blog_wrapper .d2c_img_wrapper { width: 100%; height: 289px; margin-bottom: 38px; } .d2c_blog_wrapper .d2c_card { border-radius: 20px; border: 1px solid var(--secondary_bg); background: var(--primary_bg); box-shadow: 0px 10px 30px 0px rgba(255, 255, 255, 0.25); padding: 30px; transition: 0.4s all; } .d2c_blog_wrapper .d2c_card:hover { background: var(--secondary_bg); transition: 0.4s all; } .d2c_blog_wrapper img { border-radius: 8px; } .d2c_blog_wrapper span { color: var(--secondary_color); font-family: var(--secondary_font); font-size: 16px; font-weight: 400; letter-spacing: 0.16px; } .d2c_blog_wrapper i { width: 52px; height: 52px; color: var(--primary_color); background: var(--secondary_bg); border-radius: 100px; display: flex; justify-content: center; align-items: center; transition: 0.4s all; } .d2c_blog_wrapper:hover i { background: var(--primary_bg); transition: 0.4s all; } /* Blog Section End */ /* Call To Action Section Start */ .d2c_c2a_wrapper { background: var(--primary_bg); padding: 50px 0px; } .d2c_c2a_card { padding: 100px 0px; border-radius: 20px; background: linear-gradient(0deg, rgba(55, 71, 79, 0.90) 0%, rgba(55, 71, 79, 0.90) 100%), url(../images/call_to_action_bg.png), lightgray 50% / cover no-repeat; } .d2c_c2a_wrapper h2 { color: var(--default_color); } .d2c_c2a_wrapper p { color: var(--primary_bg); } .d2c_c2a_wrapper .btn { background: var(--accent_color); color: var(--primary_color); border: 1px solid var(--accent_color); transition: 0.4s all; } .d2c_c2a_wrapper .btn:hover { background: transparent; color: var(--accent_color); border: 1px solid var(--accent_color); transition: 0.4s all; } .d2c_c2a_wrapper .btn i { color: var(--primary_color); transition: 0.4s all; } .d2c_c2a_wrapper .btn:hover i { color: var(--accent_color); transition: 0.4s all; } /* Call To Action Section End */ /* Contact Section Start */ .d2c_contact_wrapper { background: var(--primary_bg); } .d2c_contact_wrapper p { margin-bottom: 70px; } .form-label { font-family: var(--primary_font); color: var(--secondary_color); font-size: 18px; font-weight: 500; text-transform: capitalize; margin-bottom: 8px !important; } .form-control { color: var(--primary_color); font-family: var(--primary_font); background: var(--primary_bg); font-size: 16px; font-weight: 400; border-radius: 4px; border: 1px solid rgba(205, 162, 116, 0.40); box-shadow: 0px 10px 30px 0px rgba(255, 255, 255, 0.25); margin-bottom: 20px; } .form-control:focus { background: var(--primary_bg); border-radius: 4px; border: 1px solid rgba(205, 162, 116, 0.40); box-shadow: 0px 10px 30px 0px rgba(255, 255, 255, 0.25); color: var(--primary_color); } textarea { margin-bottom: 40px !important; } /* Contact Section End */ /* Footer Section Start */ .d2c_footer_wrapper { padding: 100px 0px 90px; background-color: var(--secondary_bg); } .d2c_footer_wrapper img { margin-bottom: 48px; } .d2c_footer_wrapper p { margin-bottom: 32px; } .d2c_footer_wrapper h4 { margin-bottom: 50px; } .d2c_footer_wrapper ul { margin-bottom: 0; } .d2c_footer_wrapper li { padding: 5px 0px; } .d2c_footer_wrapper a { color: var(--secondary_color); font-family: var(--secondary_font); font-size: 22px; font-weight: 400; letter-spacing: 0.22px; transition: 0.4s all; } .d2c_footer_wrapper a:hover { color: var(--accent_color); transition: 0.4s all; } .d2c_social_link li { padding-right: 20px; } .d2c_social_link li a { padding: 10px; border: 1px solid var(--primary_color); border-radius: 100px; width: 42px; height: 42px; display: flex; justify-content: center; align-items: center; font-size: 18px; transition: 0.4s all; } .d2c_social_link li a:hover { border: 1px solid var(--accent_color); transition: 0.4s all; } /* Footer Section End */ /* Copy Right Section Start */ .d2c_copy_right_wrapper { background: var(--secondary_bg); padding: 25px 0px; border-top: 1px solid #D3D0CD; } .d2c_copy_right_wrapper a { color: var(--primary_color); font-weight: 700; transition: 0.4s all; } .d2c_copy_right_wrapper a:hover { color: var(--accent_color); transition: 0.4s all; } /* Copy Right Section End */ /* Scroll Button Start */ #scrollBtn { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 9999; } #scrollBtn.show { display: block; } #scrollBtn a i { background: var(--secondary_color); font-size: 20px; color: var(--default_color); border-radius: 4px; width: 35px; height: 35px; position: fixed; z-index: 9999; bottom: 7%; right: 4%; transition: all ease 0.4s; display: flex; align-items: center; justify-content: center; border: 2px solid var(--secondary_color); } #scrollBtn a i:hover { color: var(--default_color); background: var(--accent_color); border: 2px solid var(--accent_color); transition: all ease 0.4s; } /* Scroll Button End */ /* Template Name: {{Cleanlates: Professional Bootstrap 5 OnePage Cleaning Service Template}} Template URL: {{https://designtocodes.com/product/cleanlates-onepage-cleaning-service-template}} Description: {{Our user-friendly and visually stunning design makes it easy for customers to book a professional cleaning service.}} Author: DesignToCodes Author URL: https://www.designtocodes.com Text Domain: {{ Cleanlates }} */