style.css

/* common css */ body { overflow-x: hidden; } body, h1, h2, h3, h4, h5, h6, ul, p{ margin: 0; padding: 0; } ul{list-style: none;} a{text-decoration: none;} /* css for top footer */ .top_header { background: #2a363f; padding: 8px 0; } .language { background: #404a53; text-align: center; padding: 6px 0; border-radius: 5px; width: 100%; } .language ul li { color: #ffffffe8; text-transform: capitalize; font-weight: bold; font-size: 16px; position: relative; } .language ul li span img { width: 16%; margin-bottom: 2px; } .arrow_down svg { margin-left: 6px; color: #a0a5a9; } .arrow_down svg:hover{ color: white; cursor: pointer; } .language ul li ul { position: absolute; top: 100%; left: 0%; width: 100%; background: #404a53; border-radius: 5px; text-align: left; z-index: 9; display: none; } .language ul li ul li{ transition: 0.2s; } .language ul li ul li a { color: #ffffffbd; margin-left: 15px; text-decoration: none; font-weight: bold; } .language ul li ul li:hover { background: #86c724; cursor: pointer; border-radius: 5px; } .language ul li ul li:hover a{ color: white; } .top_manu { text-align: right; margin-top: 3px; } .top_manu ul li { display: inline-block; margin-left: 15px; } .top_manu ul li.active { background: #404a53; padding: 2px 8px 5px 5px; border-radius: 4px; transition: 0.3s; } .top_manu ul li.active:hover{ background: #86C724; color: white; cursor: pointer; } .top_manu ul li a { color: #ffffffdb; font-weight: bold; font-size: 15px; text-decoration: none; } .top_manu ul li a span { padding: 5px; color: #ffffff7d; margin-right: 6px; font-size: 12px; } .top_manu ul li a span.active{ border-radius: 50%; background: #404a53; } /* bottom css */ .bottom-header { box-shadow: 0 0 10px #2a363f78; padding: 20px 0; } .logo_area img { width: 100%; } .nav_area { text-align: right; margin-top: 8px; } .nav_area ul li { display: inline-block; padding-left: 20px; } .nav_area ul li a { font-size: 15px; text-transform: uppercase; color: #000000e3; text-decoration: none; font-weight: bold; transition: 0.3s; } .nav_area a.active { color: #b1bf22; } .nav_area ul li a:hover{ color: #b1bf22; } /* css for silder*/ .slide_section { background-image: url('img/slide-bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 80px 0; } .slide_content h2 { text-transform: uppercase; font-weight: bold; font-size: 28px; color: #000c; margin-top: 110px; } .slide_content h1 { text-transform: uppercase; font-size: 65px; font-weight: bold; color: #000000c4; } .slide_content h1 span { color: #86c724; } .slide_content h1 { margin-top: -10px; } .slide_content p { color: #000000d1; font-size: 17.7px; } .slide_content p span { color: #b6c33b; } .slide_section_2 { background-image: url('img/slide-bg-5.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; padding: 80px 0; } .slide_content_2 h2 { text-transform: uppercase; font-size: 28px; font-weight: bold; color: #000000ab; } .slide_content_2 h1 { font-size: 58px; text-transform: uppercase; font-weight: bold; color: #000000d4; } .slide_content_2 h1 span { color: #86C724; } .slide_text_left_2 { margin-top: 30px; } .slide_text_left_2 p { padding: 4.5px 0; color: #000000e6; font-weight: bold; text-transform: capitalize; } .slide_text_left_2 p span svg { margin-right: 10px; } .slide_text_left_2 .special_text { color: #1ED83D; } .extra_img { position: absolute; top: 100%; } .slide-right-content_2 { position: relative; } .star_at_2 { background: #86C724; width: 140px; text-align: center; height: 140px; position: absolute; border-radius: 50%; } .star_at_2 p { font-size: 16px; color: white; font-weight: bold; } .special_font { font-family: 'Parisienne', cursive; margin-top: 20px; } .star_at_2 p span { font-size: 28px; } .slide_section_3 { background-image: url('img/slide-bg-5.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; padding: 80px 0; position: relative; } .slide_content_3 h2 { text-transform: uppercase; font-weight: bold; color: #000000bf; font-size: 28px; margin-top: 64px; } .slide_content_3 h1 { font-weight: bold; text-transform: uppercase; font-size: 68px; color: #000000e6; } .slide_content_3 h1 span { color: #86c724; } .slide_content_3 p { text-transform: capitalize; margin-top: 35px; font-size: 17px; color: #0000008c; font-weight: bold; } .slide_content_3 p span { color: #b1bf22; } .owl-carousel .owl-item .extra_img_2 img { display: block; width: 75%; position: absolute; left: -10%; top: 0; } .owl-carousel .owl-item .extra_img-3 img { display: block; width: 75%; position: absolute; top: 16%; left: 10%; } .slide_section_4 { background-image: url('img/slide-bg-5.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 80px 0; position: relative; } .slide_content_4 h2 { font-size: 28px; text-transform: uppercase; font-weight: bold; color: #000000e0; margin-top: 75px; } .slide_content_4 h1 { text-transform: uppercase; font-size: 63px; font-weight: bold; color: #000000e6; } .slide_content_4 h1 span { color: #86c724; } .slide_content_4 p { text-transform: capitalize; font-size: 17px; margin-top: 30px; color: #0000008a; font-weight: bold; } .slide_content_4 p span { color: #b1bf22; } .owl-carousel .owl-item .extra_img_4 img { display: block; width: 73%; position: absolute; top: 0%; left: 28%; } .owl-carousel .owl-item .extra_img_5 img { display: block; width: 19%; position: absolute; left: 89%; top: 32%; } .star_at_4 { background: #86c724; text-align: center; width: 130px; height: 130px; border-radius: 50%; position: absolute; left: 18%; top: -13%; } .star_at_4 p { color: white; font-size: 18px; font-weight: bold; } .star_at_4 p span { font-size: 30px; } .owl-dots { position: absolute; top: 93%; left: 50%; } .get_btn { background: #2a363f; width: 34%; padding: 12px 2px; margin-top: 70px; border-radius: 4px; } .get_btn a { font-size: 16px; text-transform: uppercase; color: #ffffffb5; font-weight: bold; text-decoration: none; transition: 0.5s; } .get_btn:hover{ background: #86c724; } .up-to { background: #86c724; padding: 25px 30px 85px 30px; width: 171px; } .up-to p { color: white; font-size: 19px; text-transform: capitalize; font-weight: bold; } .up-to p span { font-weight: bold; font-size: 27px; } .start-at { background: #2a363f; width: 130px; height: 130px; text-align: center; border-radius: 50%; margin-left: 20px; margin-top: -50px; } .start-at p { padding-top: 35px; color: white; text-transform: capitalize; font-size: 17px; font-weight: bold; } .special_bold { font-size: 25px; } .line { padding: 1px; height: 85px; background: #b1bf22; width: 0; margin-top: -80px; margin-left: 78px; } .dom_search { background: #2A363F; padding-top: 50px; } .search_text { width: 300px; float: left; margin-top: 13px; } .serch_ber { width: 600px; float: left; } .send_btn { width: 185px; float: left; margin-left: 5px; background: #86c724; text-align: center; border-radius: 3px; transition: 0.7s; } .send_btn:hover{ background: white; } .send_btn:hover button{ color: #86c724; } .input_boxt p input[type="text"] { width: 100%; padding: 8.5px 20px; font-size: 20px; border-radius: 4px; border: 1px solid #0000006b; color: black; } .search_text p { color: white; font-size: 16px; text-transform: uppercase; font-weight: bold; } .send_btn button { background: transparent; border: none; color: white; text-transform: uppercase; padding: 11px 5px; font-weight: bold; font-size: 18px; } .horizental_line { border-top: 1px solid #1d262c; margin-top: 40px; } .domains_price { margin-left: 310px; } .domains_price ul li { display: inline-block; padding: 17px 12px; border-left: 1px solid #00000063; } .domains_price ul li a { color: #f5f5f5; font-size: 23px; text-decoration: none; } .domains_price ul li a span { font-weight: bold; color: #ffffff; font-size: 24px; padding-right: 5px; } .more_prices { border-left: 1px solid #00000063; margin-left: -75px; } .more_prices p { padding: 11px 12px; color: #ffffff8a; } .hosting-section { padding: 50px 0; } .hosting-title { text-align: center; margin-bottom: 70px; } .hosting-title h2 { font-size: 35px; font-weight: bold; text-transform: uppercase; color: black; padding-bottom: 5px; } .hosting-title p { color: #00000070; } .hosting-content { text-align: center; border: 1px solid #0000002e; position: relative; transition: 0.5s; } .hosting-content:hover { cursor: pointer; transform: scale(1.1,1.1); box-shadow: 0 0 30px #0000005e; } .hosting-content h4 { padding: 20px 0; text-transform: uppercase; font-weight: bold; color: #000000a3; } .bg_img img { width: 100%; } .hosting-content h2 { color: #fffffff0; position: absolute; top: 12%; left: 27%; font-weight: bold; font-size: 40px; } .hosting-content h2 span { font-size: 12px; } .hosting_text { position: absolute; top: 20.5%; left: 29%; } .hosting_text p { color: #ffffffb5; text-transform: capitalize; } .sign_btn, .sign_btnt { position: absolute; top: 27%; left: 27%; background: white; padding: 8px 28px; } .sign_btn a, .sign_btnt a { text-transform: uppercase; font-weight: bold; text-decoration: none; color: #5f686f; } .sign_btnt a.active{ color: #86c724; } .sign_btn:hover, .read_more:hover{ background-color: #86c724; } .sign_btn:hover a, .read_more:hover a{ color: white; } .sign_btnt a.active:hover{ color: #5f686f; } .hosting-paragraph p { padding: 13px; text-transform: capitalize; color: #000000b3; border-bottom: 2px solid #0000001c; } .hosting-paragraph p span { font-weight: bold; padding-right: 5px; font-size: 17px; } .best-sell { position: absolute; top: -4%; left: 28%; } .best-sell::before { content: ""; position: absolute; border-top: 14px solid transparent; border-bottom: 8px solid #6b9f1d; border-left: 3px solid transparent; border-right: 5px solid #6b9f1d; top: 1%; left: -8px; } .best-sell::after { content: ""; position: absolute; border-top: 14px solid transparent; border-bottom: 8px solid #6b9f1d; border-left: 5px solid #6b9f1d; border-right: 3px solid transparent; top: 1%; right: -6%; } .best-sell p { background: #86c724; text-transform: capitalize; color: #ffffffd9; font-size: 15px; font-weight: bold; padding: 0px 23.5px; } .best_cell-shadow { position: absolute; top: -4.5%; left: 25%; } .whyus-section { background: #f3f3f3; padding: 50px 0; } .wyus_heading h1 { text-align: center; text-transform: uppercase; font-weight: bold; padding-bottom: 55px; color: #000000b5; } .whyus-content h4 { text-transform: capitalize; color: #000000c4; padding-bottom: 20px; font-size: 20px; } .whyus-content p { text-transform: capitalize; color: #0000008a; padding-bottom: 45px; } .wyus_icon img { width: 25px; margin-top: 15px; } .wyus_icon { background: #00000014; text-align: center; border-radius: 50%; width: 55px; height: 55px; margin-top: 5px; position: relative; } .wyus_icon::after { content: ""; background: transparent; position: absolute; border: 2px solid #00000014; top: 0; bottom: 0; left: 0; right: 0; border-radius: 50%; transition: all ease 0.3s; } .wyus_icon:hover::after { top: -5px; left: -5px; bottom: -5px; right: -5px; cursor: pointer; } .services_section { padding-top: 50px; } .top_services { background: url('img/service_section_angle.png') no-repeat center bottom; background-size: 60px 30px; } .service_heading h1 { text-align: center; text-transform: uppercase; font-weight: bold; color: #86c724; margin-bottom: 96px; } .bottom_services { padding: 75px 0; background: #3f4a52; z-index: 9; position: relative; } .bottom_services::before { content: ""; position: absolute; z-index: -1; background: #2a363f; top: 0; bottom: 0; left: 0; right: 50%; display: inline-block; } .servie_content { margin-bottom: 30px; } .servie_content p { color: #ffffffb0; text-transform: uppercase; font-weight: bold; font-size: 16px; } .servie_content h1 { color: white; text-transform: uppercase; font-weight: bold; } .service_img img { margin-top: 10px; } .service_text p { padding: 11px 0; color: #ffffffba; } .service_text p span { color: #86c724; } .arrows img { margin-top: 22px; margin-left: 15px; } .whole_content_right { margin-left: 20px; } .read_more { background: white; margin-top: 35px; margin-left: 18px; } .read_more a { text-transform: uppercase; color: #000000a3; font-weight: bold; padding: 0 5px; text-decoration: none; } .video_section { background-image: url('img/video-bg-.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; padding: 50px 0; height: 500px; position: relative; } .video_left_text p { text-align: center; font-size: 19px; color: #000000ad; text-transform: uppercase; margin-top: 165px; } .video_right_text h1 { text-align: center; font-weight: bold; margin-top: 155px; } .playbutton { position: absolute; background: #90ca38 url('img/video-icon-2.png') no-repeat left top; left: 47%; top: 45%; width: 85px; height: 85px; background-size: 85px; opacity: 0.8; border-radius: 50%; } .playbutton:hover{ opacity: 1; } .blog_section { padding: 50px 0; } .blog_content_left h2 { text-transform: uppercase; padding-bottom: 30px; color: #000000bd; } .blog_img img { width: 100%; } .blog_content_pos { background: #2a363f; } .blog_text h2 { background: #90ca38; width: 100%; margin: 15px; border-radius: 3px; text-align: center; color: white; line-height: 1; font-size: 20px; padding: 12px 0; } .blog_text h2 span { font-weight: bold; font-size: 33px; } .blog_para p { text-align: left; color: white; text-transform: capitalize; padding: 0 10px; margin-top: 20px; } .blog_line { width: 55px; background: #ffffff70; padding: 1px; margin-top: 12px; margin-left: 11px; } #accordion_1 h3 { padding: 11.1px 0; background: #eeeeee; color: #000000d9; border: none; text-transform: capitalize; } .acordiaon_heading h2{ text-transform: uppercase; padding-bottom: 27px; color: #000000bd; } #accordion_1 h3 span { padding-right: 3px; } .acordion_text { border: none; background: #fafafa; color: #00000094; } .tabs_section { background-image: url('img/tabs-section-bg.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; padding: 50px 0; } .tabs_heading h2 { text-align: center; padding-bottom: 60px; text-transform: capitalize; font-weight: bold; font-size: 45px; color: #000000d4; } #tabs { background: transparent; border: none; position: relative; } #tabs ul { background: transparent; border: none; } #tabs ul li { margin: 0 52px; margin-bottom: 21px; border: none; border-radius: 5px; padding: 2px 10px; } #tabs ul li a{ text-transform: capitalize; } #tabs ul li:hover{ background: #91cb38; } #tabs ul li:hover a{ color: white; } .ui-widget-content .ui-state-active { background: #91cb38; } .tabs_img { width: 30%; float: left; } .tabs_img img { width: 100%; margin-top: 10px; } .tabs_content { width: 68%; float: left; margin-left: 21px; } .tabs_content h2 { font-weight: bold; color: #000000d4; padding-bottom: 15px; } .tabs_content p { color: #000000b5; padding-bottom: 30px; } .learn_more { border: 2px solid #91cb38; width: 20%; text-align: center; padding: 7px 0; border-radius: 5px; transition: 0.5s; } .learn_more a { text-transform: uppercase; color: #91cb38; font-weight: bold; text-decoration: none; } .learn_more:hover { background: #91cb38; cursor: pointer; } .learn_more:hover a { color: white; } #tab-1, #tab-2, #tab-3, #tab-4, #tab-5{ background: rgba(255, 255, 255, 0.753); overflow: hidden; border-radius: 3px; padding: 20px 6px; margin-top: 15px; } #tab-1::before { content: ""; border: 12px solid transparent; border-bottom: 15px solid white; position: absolute; top: 15.5%; left: 8%; } #tab-2::before { content: ""; border: 12px solid transparent; border-bottom: 15px solid white; position: absolute; top: 15.5%; left: 28%; } #tab-3::before { content: ""; border: 12px solid transparent; border-bottom: 15px solid white; position: absolute; top: 15.5%; left: 48%; } #tab-4::before { content: ""; border: 12px solid transparent; border-bottom: 15px solid white; position: absolute; top: 15.5%; left: 69%; } #tab-5::before { content: ""; border: 12px solid transparent; border-bottom: 15px solid white; position: absolute; top: 16.5%; left: 89%; } .features_section { padding: 50px 0; } .single_feature_1, .single_feature_2, .single_feature_3 { width: 33.3%; float: left; text-align: center; padding: 30px 20px; } .single_feature_1{ background: #2a363f; } .single_feature_2{ background: #86c724; } .single_feature_3{ background: #f3f3f3; } .single_feature_1 h5, .single_feature_2 h5, .single_feature_3 h5 { color: #ffffffd1; text-transform: capitalize; font-size: 21px; padding-bottom: 3px; } .single_feature_3 h5 { color: #2a363f; } .single_feature_1 h3, .single_feature_2 h3, .single_feature_3 h3 { color: white; font-weight: bold; padding-bottom: 30px; } .single_feature_3 h3 { color: black; } .single_feature_1 p, .single_feature_2 p, .single_feature_3 p { color: white; color: #ffffffd6; } .single_feature_3 p { color: black; } .features_img img { width: 25%; padding-bottom: 20px; } .features_img_spe img { width: 22%; padding-bottom: 5px; } .read_btn_1, .read_btn_2, .read_btn_3 { background: white; width: 40%; margin: 0 auto; margin-top: 40px; padding: 8px 0; border-radius: 20px; transition: 0.5s; } .read_btn_3{ background: #2a363f; } .read_btn_1 a, .read_btn_2 a, .read_btn_3 a { text-transform: uppercase; text-decoration: none; color: #2a363fe6; font-weight: bold; } .read_btn_3 a { color: white; } .read_btn_2 a { color: #86c724; } .read_btn_1:hover, .read_btn_3:hover{ background: #86c724; cursor: pointer; } .read_btn_1:hover a{ color: white; } .read_btn_2:hover{ background: #2a363f; } .read_btn_2:hover a { color: white; } .parallax.section { background-image: url('img/parallax-section-bg.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; padding: 50px 0; } .parallax_text { text-align: center; margin-bottom: 50px; } .parallax_text p { font-size: 22px; text-transform: uppercase; color: #0000009e; } .parallax_text h1 { text-transform: uppercase; font-weight: bold; color: black; } .parallax_list { text-align: center; } .parallax_list ul li { display: inline-block; padding: 25px 70px; margin: 0 5px; background: white; font-size: 18px; color: #000000d6; } .parallax_list ul li a { text-transform: capitalize; font-size: 100px; } .parallax_list ul li span { font-weight: bold; font-size: 40px; } .work_section { padding: 50px 0; } .work_content { text-align: center; } .work_content h5 { color: black; font-size: 23px; text-transform: uppercase; padding-bottom: 5px; } .work_content h2 { text-transform: uppercase; color: black; font-weight: bold; margin-bottom: 60px; } .work_content .owl-nav .owl-prev span { background: #00000091; position: absolute; left: 0; font-size: 80px; padding: 30px; top: 0; height: 93.4%; padding-top: 14%; color: white; } .work_content .owl-dots { display: none; } .work_content .owl-nav .owl-next span { background: #00000091; position: absolute; font-size: 80px; padding: 30px; top: 0; right: 0; height: 93.4%; padding-top: 14%; color: white; } .work_content .owl-nav .owl-next span:hover, .work_content .owl-nav .owl-prev span:hover { background: rgba(0, 0, 0, 0.863); } .script_section { padding: 50px 0; } .script_img img { width: 100%; } .script_heading h4 { text-transform: uppercase; font-size: 25px; padding-bottom: 25px; color: #000000d9; } .single_script { width: 25%; float: left; margin-bottom: 20px; } .people_section { background: #F3F3F3; padding: 50px 0; } .people_content { text-align: center; } .people_heading h2 { text-transform: capitalize; font-weight: bold; font-size: 40px; color: #000000db; margin-bottom: 45px; } .people_heading h2 span { color: #86c724; } .owl-carousel .owl-item .people_img img { display: block; width: 10%; margin: 0 auto; } .people_img img { width: 12%; height: 12%; border-radius: 50%; margin-top: 50px; margin-bottom: 25px; } .people_sliding p { width: 65%; margin: 0 auto; color: #000000b8; margin-bottom: 35px; } .people_sliding h3 { text-transform: capitalize; font-size: 28px; color: #86c724; font-weight: bold; } .people_sliding h5 { font-size: 15px; color: #00000091; } .client_section { padding: 50px 0; } .clients_content { text-align: center; } .clients_content ul li { display: inline-block; margin: 0; padding: 0; } .clients_content ul li img { width: 150px; } /* css for footer*/ .need_help { background-image: url('img/fotter-help-bg.png'); background-position: right; background-size: cover; background-repeat: no-repeat; padding: 25px 0; position: absolute; width: 100%; top: -38%; left: -20%; text-align: right; padding-right: 10%; } .need_help h2 { text-transform: uppercase; font-size: 21px; color: #000000c4; } .need_help h1 { font-size: 55px; font-weight: bold; color: #72be00; } .top_footer { background: #2a363f; padding: 50px 0; } .sign_up_content p { color: #ffffffe3; text-transform: capitalize; font-size: 14px; margin-bottom: 5px; margin-left: 2px; } .input_sign_ber { width: 78%; float: left; } .sign_ber_btn { width: 20%; float: left; margin-left: 8px; background: #7f868c; text-align: center; padding: 9.6px; border-radius: 5px; transition: 0.3s; } .sign_ber_btn:hover{ background: #86c724; cursor: pointer; } .input_sign_ber input[type="text"] { width: 100%; padding: 5px 10px; border-radius: 5px; border: 1px solid white; font-size: 18px; padding-bottom: 12px; } .sign_ber_btn a { color: #ffffffdb; text-transform: uppercase; font-size: 18px; font-weight: bold; text-decoration: none; } .sign_up_content { margin-bottom: 140px; } .top_footer_content { margin-bottom: 45px; } .top_footer_content h3 { color: white; text-transform: capitalize; margin-bottom: 15px; font-size: 20px; } .top_footer_content p { color: #ffffff91; text-transform: capitalize; padding: 1px; margin-left: 2px; } .top_footer_content a{ text-decoration: none; } .top_footer_content p:hover{ color: white; cursor: pointer; } .top_footer_content_spe { text-align: right; margin-bottom: 45px; } .footer_logo img { margin-bottom: 12px; } .top_footer_content_spe a{ text-decoration: none; } .top_footer_content_spe a p span:hover{ color: green; } .top_footer_content_spe p { color: #ffffffa6; font-size: 15px; padding: 3px 0; text-transform: capitalize; } .top_footer_content_spe p span { font-weight: bold; } .view_text { color: #ffffff5c; text-transform: capitalize; font-size: 13px; } .view_text:hover{ color: white; } .social_medias ul li { display: inline-block; padding: 10px; border-radius: 50%; width: 43px; text-align: center; vertical-align: middle; } .social_medias ul li a { color: white; font-size: 16px; } .facebook { background: #2B87C7; } .twitter { background: #38C0DD; } .google_plus { background: #dc6218; } .youtube { background: #b34300; } .linkedin { background: #2862d8; } .payments_icon ul li { display: inline-block; padding: 1px; } .payments_icon ul li a { font-size: 40px; color: white; } .gapp_store a img { width: 50%; float: left; margin-top: 20px; } .iapp_store a img { width: 50%; float: left; margin-top: 24px; } .bottom_footer { background: #1c2329; padding: 25px 0; } .bottom_footer_text_left { text-align: left; } .bottom_footer_text_left p { color: #ffffffe6; text-transform: capitalize; font-size: 16px; } .bottom_footer_text_left p span { text-transform: uppercase; } .bottom_footer_text_right { text-align: right; } .bottom_footer_text_right p { color: white; } .bottom_footer_text_right p a { color: #ffffffe8; text-transform: capitalize; text-decoration: none; }