style.css

/* common css */ body, h1, h2, h3, h4, h5, h6, ul, p{ margin: 0; padding: 0; } a{text-decoration: none;} li{list-style: none;} /* header css */ .header { background-image: url('img/1st-slide-bg-2.png'); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 10px 0; } .logo_area img { width: 100%; } .ber_icon{ display: none; } .manu_area { text-align: right; } .manu_area ul li { display: inline-block; padding: 2px 20px; } .manu_area ul li a { font-size: 15px; color: #fffffff2; text-transform: uppercase; font-weight: bold; text-decoration: none; } .manu_area ul li:hover, .manu_area ul li.active{ background: #FF0000; border-radius: 5px; padding-bottom: 5px ; } .top_header { margin-bottom: 35px; } .bottom_header { position: relative; padding-bottom: 170px; } .b_header_content { width: 37%; margin-left: 125px; } .b_header_content h3 { color: #ffffffd9; text-transform: capitalize; font-size: 30px; font-weight: bold; margin-top: 55px; } .b_header_content h2 { color: #790404; text-transform: capitalize; font-weight: bold; font-size: 45px; margin-bottom: 8px; } .b_header_content p { color: white; margin-bottom: 35px; } .get_btn { background: #fdba01; width: 38%; text-align: center; padding: 9px; border-radius: 5px; transition: 0.3s; } .get_btn:hover{ background: white; cursor: pointer; } .get_btn a { text-transform: uppercase; color: black; font-weight: bold; font-size: 16px; text-decoration: none; } .right_img { width: 40%; position: absolute; top: 14%; left: 49%; z-index: 1; } .right_img img { width: 100%; } .circle_icon { background-image: url('img/cirle-2.png'); background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; top: 107%; height: 63%; width: 17%; left: 9%; } .circle_icon h2 { text-align: center; margin-top: 52px; color: #ff0000; font-weight: bold; font-size: 30px; } /* css for body */ .features_section { padding: 80px 0; background: #f7f8f9; position: relative; } .features_content { text-align: center; margin-bottom: 65px; background: white; border-radius: 5px; padding: 5px; } .icon_img img { width: 20%; margin-bottom: 7px; } .features_content h4 { color: #000000db; text-transform: capitalize; font-weight: bold; margin-bottom: 6px; } .features_content p { color: #000000a3; margin-bottom: 15px; } .readmore_btn a { font-size: 18px; text-transform: capitalize; text-decoration: none; color: #ff4e50; } .icon_img_spe img { width: 16.5%; } .features_content_hover { background: white; border-radius: 5px; text-align: center; position: absolute; top: 0%; z-index: 99; height: 100%; display: none; } .features_content_hover h4 { font-size: 42px; text-transform: capitalize; margin-bottom: 10px; } .features_content_hover p { color: #000000ba; } .features_content:hover + .features_content_hover{ display: block; } .about_section { padding: 50px 0px; } .about_img img { width: 100%; } .about_content h3 { text-transform: capitalize; font-weight: bold; font-size: 33px; color: #000000e3; margin-bottom: 25px; } .about_text { color: #000000e6; margin-bottom: 50px; } .about_mid_content { margin-bottom: 50px; } .about_mid_content p span svg { background: #f32c2e; padding: 3px; font-size: 26px; border-radius: 50%; height: 16px; padding-left: 4px; color: white; } .about_mid_content p { margin-bottom: 10px; } .service_section { background: #ff4e50; padding: 80px 0; } .service_content { text-align: center; width: 50%; margin: 0 auto; } .service_content h1 { color: white; text-transform: capitalize; font-weight: bold; margin-bottom: 10px; } .service_content p { margin-bottom: 80px; color: #ffffffdb; } .single_service { background: #f32c2e; padding: 35px 10px; text-align: center; } .service_icon img { width: 33%; margin-bottom: 23px; } .single_service h4 { text-transform: capitalize; color: white; margin-bottom: 10px; font-weight: bold; } .single_service p { color: #ffffffdb; margin-bottom: 35px; } .read_2_btn a { color: white; text-transform: capitalize; text-decoration: none; font-size: 19px; } .service_icon_spe_1 img { width: 36.3%; margin-bottom: 20px; } .service_icon_spe_2 img { margin-bottom: 20px; width: 43%; } .work-section { padding: 80px 0; } .work_content { width: 50%; text-align: center; margin: 0 auto; } .work_content h1 { text-transform: uppercase; font-weight: bold; color: #000000e0; } .work_content p { color: #000000d6; margin-top: 20px; margin-bottom: 20px; } .work_icon svg { font-size: 55px; color: white; rotate: 90deg; } .single_work { position: relative; } .work_img { width: 95%; margin-top: 20px; cursor: pointer; } .work_img img { width: 100%; } .work_icon { position: absolute; top: 40%; left: 40%; width: 12%; z-index: 1; display: none; transition: 0.3s; } .work_img::before{ content: ""; background: #be4243; left: 2%; right: 5%; bottom: 0%; top: 0%; position: absolute; opacity: 0; transition: 0.3s; } .work_img:hover::before{ opacity: 1; } .work_img:hover + .work_icon{ display: block; } .view_btn { background: #fdba01; width: 16%; text-align: center; margin: 0 auto; margin-top: 27px; padding: 6px; border-radius: 5px; transition: 0.3s; } .view_btn a { text-transform: uppercase; color: black; font-weight: bold; text-decoration: none; transition: 0.3s; } .view_btn:hover{ background: #ff0000; cursor: pointer; } .view_btn:hover a{ color: white; } .testimony_section { padding: 80px 0; } .testi_heading h2 { text-align: center; text-transform: uppercase; font-weight: bold; margin-bottom: 90px; color: #000000d9; } .owl-carousel .owl-item .cottation img { display: block; width: 10%; } .testi_text p { margin-left: 22px; margin-bottom: 40px; } .testi_text { background: #f1f1f1; padding-bottom: 1px; width: 90%; margin: 0 auto; padding-right: 5px; } .testi_circle { background: transparent; width: 50px; height: 50px; border-radius: 50%; float: left; margin-left: 40px; margin-right: 12px; } .testi_circle img { border-radius: 50%; } .testi_people p { margin-top: 19px; margin-left: 38px; font-size: 12px; } .testi_people p span { font-size: 20px; color: black; text-transform: capitalize; font-weight: bold; } .testimoy_slider .owl-nav .owl-prev span { font-size: 84px; position: absolute; padding: 9px; top: 13%; left: -4%; background: white; color: black; } .testimoy_slider .owl-nav .owl-next span { font-size: 84px; position: absolute; padding: 9px; top: 13%; right: -4%; background: white; color: black; } .plans_heading { text-align: center; margin-bottom: 65px; } .our_plans { padding: 80px 0; background: #ff4e50; } .plans_heading h2 { text-transform: uppercase; font-weight: bold; color: white; } .plans_heading p { color: white; } .single_plans { background: white; padding-bottom: 30px; transition: 0.3s; } .plans_top_content { background: #f32c2e; padding: 15px; margin-bottom: 22px; } .plans_top_content p { text-transform: capitalize; color: white; font-weight: bold; } .plans_top_content h2 { font-size: 75px; color: white; font-weight: bold; margin-left: 6px; } .spe_de { position: absolute; } .plans_top_content h2 span { font-size: 17px; } .plans_bottom_content p { margin: 10px 0; margin-left: 20px; color: #000000c2; transition: 0.3s; } .buy_btn { padding: 8px; text-align: center; border: 1px solid #00000052; width: 90%; margin: 0 auto; border-radius: 5px; margin-top: 57px; transition: 0.3s; } .buy_btn a { text-transform: uppercase; color: #000000a3; font-weight: bold; text-decoration: none; } .single_plans:hover { transform: scale(1.1,1.1); background: #f32c2e; cursor: pointer; } .single_plans:hover .buy_btn{ background: #fdba01; } .single_plans:hover .plans_bottom_content p{ color: white; } .blog_section { padding: 80px 0; background: #f1f1f1; } .blog_heading { width: 50%; text-align: center; margin: 0 auto; } .blog_heading h2 { text-transform: uppercase; font-weight: bold; color: #000000e6; margin-bottom: 2px; } .blog_heading p { color: #000000bf; margin-bottom: 40px; } .blog_bg { background: transparent; width: 200px; height: 185px; margin-left: 75px; margin-bottom: 20px; } .blog_bg img { width: 100%; } .blog_content { text-align: center; } .blog_content h3 { font-size: 19px; font-weight: bold; color: #000000d4; margin-bottom: 10px; } .blog_content h6 { color: #00000082; margin-bottom: 32px; } .blog_content p { color: #000000a3; } .goto_btn { background: #fdba01; width: 12%; text-align: center; padding: 5px; margin: 0 auto; margin-top: 39px; border-radius: 4px; transition: 0.3s; } .goto_btn a { color: black; text-transform: uppercase; font-weight: bold; text-decoration: none; transition: 0.3s; } .goto_btn:hover{ background: #ff0000; } .goto_btn:hover a{ color: white; } .seen-section { padding: 80px 0; } .seen_heading h2 { text-align: center; text-transform: uppercase; font-weight: bold; color: #000000c4; margin-bottom: 60px; } .owl-carousel .owl-item .single_seen img { display: block; width: 75%; margin-top: 3px; } .view_customer { text-align: center; margin-top: 5px; } .view_customer a { color: black; text-decoration: none; } .view_customer a span svg { padding-top: 6px; font-size: 18px; } .view_customer a:hover{ color: #ff0000; } .view_customer a:hover span{ color: #F3AD00; } /* css for foooter */ footer { padding: 80px 0; } .footer_nav { text-align: center; margin-bottom: 50px; margin-top: 40px; } .footer_nav ul li { display: inline-block; padding: 0 20px; } .footer_nav ul li a { color: #000000e6; text-transform: uppercase; font-weight: bold; text-decoration: none; } .footer_nav ul li a:hover{ color: #f3ad00; } .footer_number { text-align: right; font-size: 25px; color: #000000bf; font-weight: bold; } .footer_number { text-align: right; font-size: 25px; color: #000000bf; font-weight: bold; } .social_medias { text-align: left; margin-top: 2px; } .social_medias ul li { display: inline-block; padding: 0 5px; } .social_medias ul li a { font-size: 22px; color: black; text-decoration: none; } .social_medias ul li a:hover{ color: #f3ad00; }