style.css

@font-face{ font-family: 'themify'; src: url(fonts/themify.eot); src: url(fonts/themify.svg); src: url(fonts/themify.ttf); src: url(fonts/themify.woff); font-style: normal; font-weight: normal; } /*common css*/ body, h1, h2, h3, h4, h5, h6, p, ul{ margin: 0; padding: 0; } ul{list-style: none;} a{text-decoration: none;} body{ font-family: 'Roboto', sans-serif; } h1, h2, h3, h4, h5, h6{ font-family: 'Rufina', serif; } /*body css*/ .header{ position: relative; } .nav_links { float: right; margin-right: 18rem; margin-top: 3em; } .nav_links ul li { display: inline-block; margin: 0 20px; } .nav_links ul li a { text-transform: uppercase; color: #000000d6; font-weight: 500; text-decoration: none; transition: 0.3s; } .nav_links ul li a:hover{ color: #ff817e; } .bottom_header { background-image: url('img/leaf.png'); background-repeat: no-repeat; background-position: center left; background-size: 14%; padding: 5rem 0; } .banner_content span { text-transform: uppercase; color: #ff817e; font-size: 17px; letter-spacing: 2px; } .banner_content h2 { margin: 2rem 0; font-size: 60px; } .banner_content p { font-weight: 300; color: black; margin-top: 1rem; margin-bottom: 3rem; } .banner_btn { display: flex; } .reverse_btn_ { background: #ff817e; padding: 12px 0; width: 13%; text-align: center; cursor: pointer; } .reverse_btn_:hover a{ color: rgba(0, 0, 0, 0.904); } .reverse_btn_ a { color: white; font-weight: 500; text-transform: uppercase; text-decoration: none; transition: 0.3s; } .video_btn { margin-left: 1rem; text-align: left; padding: 12px 0; width: 16%; } .video_btn:hover a{ color: #ff817e; } .video_btn a { color: black; text-transform: capitalize; font-weight: 300; text-decoration: none; transition: 0.3s; } .video_btn a svg { color: #ff817e; margin-right: 9px; } .banner_img img { width: 43%; position: absolute; top: 0; right: 0; z-index: -1; } .about_section { padding: 50px 0; position: relative; } .flower_1 { position: absolute; top: 12%; left: 20%; } .flower_2 { position: absolute; top: 52%; right: 7%; } .about_content { text-align: center; } .about_content img { display: block; margin: 0 auto; padding-top: 4rem; margin-bottom: 2rem; } .about_content span { font-size: 20px; text-transform: uppercase; font-weight: 600; color: #0000008c; } .about_content h2 { margin: 2rem 0; font-size: 44px; font-weight: 700; } .about_content p { width: 90%; margin: 0 auto; margin-bottom: 4rem; } .about_btn { background: #ff817e; width: 15%; margin: 0 auto; padding: 15px 0; border-radius: 30px; cursor: pointer; } .about_btn a { text-transform: uppercase; color: white; text-decoration: none; font-weight: 600; transition: 0.3s; } .about_btn:hover a{ color: rgba(0, 0, 0, 0.904); } .single_service { width: 24.7%; float: left; margin: 2px; position: relative; cursor: pointer; } .single_service img { width: 100%; } .service_hover { background: #eb7a77d9; position: absolute; width: 100%; height: 100%; top: 0; text-align: center; padding-top: 9rem; opacity: 0; transition: 0.3s; } .service_hover img { width: 14%; } .service_hover p { color: white; text-transform: capitalize; margin-top: 2rem; font-weight: 400; font-family: 'Rufina', serif; } .single_service:hover .service_hover{ opacity: 1; } .procedures{ clear: both; padding: 50px 0; } .prece_heading { width: 80%; margin: 0 auto; text-align: center; margin-bottom: 4rem; } .prece_heading h2 { font-size: 40px; font-weight: 700; margin-bottom: 1rem; } .prece_heading p { font-weight: 300; } .single_procedures { text-align: center; border: 1px solid #0000001f; padding: 10px; } .single_procedures img { width: 95%; } .single_procedures h2 { text-transform: capitalize; font-size: 26px; margin: 1rem 0; } .single_procedures p { font-weight: 300; margin-bottom: 1rem; } .proce_btn { background: #30383b; width: 47%; margin: 2rem auto; padding: 10px 0; border-radius: 25px; transition: 0.3s; } .proce_btn a { color: white; text-transform: uppercase; font-weight: 600; text-decoration: none; } .single_procedures:hover .proce_btn{ background: #ff817e; } .testimonials { padding: 50px 0; } .single_testi { text-align: center; } .quote { margin: 3rem 0; } .single_testi p { margin: 1rem 0; font-family: 'Rufina', serif; font-size: 18px; } .team_img img { margin-top: 2rem; border-radius: 50%; } .team_img h4 { text-transform: capitalize; font-weight: 400; margin-top: 1rem; font-size: 25px; margin-bottom: 2rem; } .team_img h4 span { font-size: 19px; font-family: 'Roboto', sans-serif; font-weight: 300; } .owl-carousel .owl-item .quote img { display: block; width: 8%; margin: 0 auto; } .owl-carousel .owl-item .team_img img { display: block; width: 10%; margin: 0 auto; margin-top: 4rem; } .team_section { padding: 70px 0; } .team_heading { width: 80%; margin: 0 auto; text-align: center; margin-bottom: 8rem; } .team_heading h2 { text-transform: capitalize; font-size: 38px; margin-bottom: 1rem; font-weight: 700; } .team_heading p { text-transform: capitalize; color: black; font-weight: 300; } .single_team { position: relative; cursor: pointer; } .team_image img { width: 100%; } .team_details { background: white; position: absolute; width: 75%; text-align: center; top: 80%; left: 13%; transition: 0.3s; } .team_details h6 { text-transform: capitalize; font-size: 22px; font-weight: 700; letter-spacing: 1px; margin-top: 2em; margin-bottom: 0px; } .team_details p { color: black; text-transform: capitalize; font-weight: 300; } .team_soacial { padding-bottom: 2rem; margin-top: -18px; opacity: 0; transition: 0.3s; } .team_soacial ul li { display: inline-block; margin: 0 5px; width: 30px; height: 30px; border: 1px solid black; border-radius: 50%; text-align: center; padding-top: 3px; transition: 0.1s; } .team_soacial ul li a { color: black; font-size: 16px; text-decoration: none; transition: 0.1s; } .single_team:hover .team_details{ margin-top: -50px; } .single_team:hover .team_soacial{ opacity: 1; margin-top: 1rem; } .team_soacial ul li:hover{ background: #ff817e; border: none; } .team_soacial ul li:hover a{ color: white; } .apointment_section { padding: 50px 0; display: flex; } .apo_figure img { width: 100%; } .apo_figure { flex-basis: 40%; margin-right: 3rem; } .apointment_form { flex-basis: 60%; margin-left: 3rem; } .input_box { display: flex; } .input_box input { width: 45%; margin-bottom: 3rem; margin-right: 1rem; font-size: 14px; background: transparent; border: none; border-bottom: 1px solid #00000036; padding-bottom: 1rem; text-transform: uppercase; color: black; font-weight: 300; -moz-appearance: none; -webkit-appearance: none; } .input_box textarea { width: 94%; background: transparent; border: none; border-bottom: 1px solid #00000036; color: black; font-weight: 300; } .input_box select { width: 45%; height: 39px; margin-right: 1rem; background: transparent; border: none; font-weight: 300; border-bottom: 1px solid #00000036; padding-bottom: 1rem; color: #00000091; -moz-appearance: none; -webkit-appearance: none; text-transform: uppercase; font-size: 14px; } .input_box input[type="date"],.input_box input[type="time"] { color: #00000091; } .apoi_btn { margin-top: 1rem; background: #ff817e; border: navajowhite; padding: 13px 25px; color: white; text-transform: uppercase; font-weight: 700; border-radius: 25px; transition: 0.3s; } .apoi_btn:hover { color: rgba(0, 0, 0, 0.836); } .blog_section { padding: 50px 0; } .blog_heading { width: 90%; margin: 0 auto; text-align: center; margin-bottom: 8rem; } .blog_heading h2 { text-transform: capitalize; font-weight: 700; margin-bottom: 1rem; } .blog_heading p { color: black; font-weight: 300; } .single_blog h2 { font-size: 22px; margin: 2rem auto; } .blog_quote { display: flex; margin-top: 2rem; margin-left: 4.3rem; } .blog_text { text-transform: capitalize; font-weight: 300; } .blog_line { width: 2px; height: 12px; background: #000000b5; margin: 0 6px; margin-top: 6px; } .touch_section { padding: 50px 0; } .touch_heading { width: 80%; margin: 0 auto; text-align: center; margin-bottom: 6rem; } .touch_heading h2 { text-transform: capitalize; font-weight: 700; margin-bottom: 1rem; } .touch_heading p { text-transform: capitalize; font-weight: 300; } .touch_icon { float: left; background: #ff817e; margin-right: 20px; width: 40px; height: 40px; text-align: center; border-radius: 50%; padding-top: 9px; color: white; margin-top: 5px; } .touch_address { width: 76%; float: left; font-weight: 300; } .touch_content { padding-bottom: 6rem; } .touch_input p input { width: 100%; margin-bottom: 2rem; padding: 5px; text-transform: uppercase; font-weight: 300; font-size: 16px; border: 1px solid #00000029; } .touch_input p textarea { width: 100%; padding: 5px; border: 1px solid #00000029; font-weight: 300; font-size: 16px; text-transform: uppercase; } .touch_btn { background: #ff817e; margin-top: 3rem; border: navajowhite; padding: 13px 44px; text-transform: uppercase; color: white; font-weight: 700; border-radius: 25px; transition: 0.3s; } .touch_btn:hover { color: rgba(0, 0, 0, 0.863); } .footer { padding: 50px 0; text-align: center; } .footer_logo { margin: 2rem 0; } .footer_nav ul li { display: inline-block; margin: 0 1rem; } .footer_nav { margin-bottom: 1.5rem; } .footer_nav ul li a { text-transform: uppercase; color: #000000ad; font-weight: 500; transition: 0.3s; text-decoration: none; } .footer_social { margin-bottom: 1rem; } .footer_social ul li { display: inline-block; margin: 0 5px; } .footer_social ul li a { color: black; text-decoration: none; border-right: 1px solid #0000003d; padding-right: 12px; transition: 0.3s; } .copyright_text { text-transform: capitalize; margin-top: 3rem; } .copyright_text a { color: #0e0f14; text-decoration: none; transition: 0.3s; } .footer_social ul li a:hover { color: #ff817e; } .footer_nav ul li a:hover { color: #ff817e; } .copyright_text:hover a{ color: #ff817e; } .ber_icon{ display: none; }