/*common css*/ body, h1, h2, h3, h4,h5, h6, p, ul { margin: 0; padding: 0; } ul{list-style: none;} a{text-decoration: none !important;} body{font-family: 'Raleway', sans-serif;} p{font-family: 'Open Sans', sans-serif;} .raleway{font-family: 'Raleway', sans-serif;} .opensan{font-family: 'Open Sans', sans-serif;} html{scroll-behavior: smooth;} /*body css*/ /*navigation css*/ .header_nav { position: relative; } .header_wraper { position: absolute; top: 0; left: 0; background: transparent; width: 100%; padding-top: 4rem; z-index: 99; transition: 0.3s; } .logo_area img { width: 80%; transition: 0.3s; } .nav_links { text-align: right; float: right; margin-top: 11px; } .nav_links ul li { display: inline-block; margin-left: 25px; position: relative; padding-bottom: 2px; } .nav_links ul li a { color: white; text-transform: capitalize; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 16px; transition: 0.3s; } .nav_links>ul>li::after { content: ""; background: #468FCC; width: 18px; height: 1px; position: absolute; bottom: 0; left: 0; opacity: 0; transition: 0.3s; } .nav_links ul li span svg { color: white; margin-left: -2px; font-size: 18px; padding-bottom: 3px; cursor: pointer; transition: 0.3s; } .nav_links ul li ul { position: absolute; background: #353535; top: 100%; left: -39%; width: 9.5rem; text-align: left; border-radius: 2px; margin-top: 32px; visibility: hidden; opacity: 0; transition: all 0.3s; padding: 10px 0; } .nav_links ul li ul li { display: block; margin: 6px 0; padding-left: 18px; transition: 0.3s; } .nav_links>ul>li>ul>li>a { transition: 0.3s; } .special_list { background: #468FCC; padding: 1px 12px; border-radius: 2px; transition: 0.3s; cursor: pointer; } .special_list:hover{ background: white; } .special_list:hover::after{ display: none; } .sticky_nav { position: fixed; background: #2b2828; padding: 1rem 0; } .sticky_nav .logo_area img { width: 65%; } .nav_links>ul>li:hover>ul { visibility: visible; opacity: 1; margin-top: 0; } .nav_links>ul>li>ul>li:hover { background: white; border-radius: 2px; } .nav_links>ul>li>ul>li:hover>a { color: #468FCC; } .nav_links>ul>li:hover>a, .nav_links>ul>li.active>a { color: #468FCC; } .nav_links>ul>li:hover::after, .nav_links>ul>li.active::after { opacity: 1; } .nav_links ul li:hover span svg, .nav_links ul li.active span svg { color: #468FCC; } /*home section*/ .slide-desc { position: absolute; bottom: 15%; right: 6%; z-index: 99; } .home_content { text-align: right; position: relative; z-index: 9; } .home_slider_item::after { content: ""; background: #000000a6; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .home_content h2 { color: white; text-transform: uppercase; font-weight: 700; font-size: 65px; } .home_content h2 span { color: #468FCC; } .home_content h3 { color: white; font-size: 35px; font-weight: 400; margin-top: 2px; } .home_line { background: white; width: 15rem; height: 1px; position: absolute; right: 0; top: 61%; } .home_content p { color: white; display: block; font-size: 15px; margin-top: 3rem; } .g_bttn { width: 36%; float: right; background: #468FCC; text-align: center; padding: 9.6px 0; border-radius: 5px; margin-top: 3rem; margin-right: 12px; cursor: pointer; transition: 0.3s; } .g_bttn a { display: flex; } .g_icon { flex-basis: 40%; } .g_text { flex-basis: 70%; text-align: left; color: white; font-size: 18px; font-weight: 600; line-height: 1; transition: 0.3s; } .g_icon svg { font-size: 35px; color: white; transition: 0.3s; } .g_text span { font-size: 16px; font-weight: 500; } .g_bttn:hover { background: white; } .g_bttn:hover .g_icon svg{ color: #000000c2; } .g_bttn:hover .g_text { color: #000000c2; } .ap_bttn { width: 36%; float: right; background: white; margin-top: 3rem; padding: 8px 0; text-align: center; border-radius: 5px; transition: 0.3s; } .ap_bttn a { display: flex; } .ap_icon { flex-basis: 30%; } .ap_icon svg { color: #000000c2; font-size: 38px; transition: 0.3s; } .ap_text { flex-basis: 70%; text-align: left; color: #000000e6; font-size: 20px; font-weight: 600; line-height: 1; transition: 0.3s; } .ap_text span { font-size: 16px; font-weight: 500; } .ap_bttn:hover { background: #468FCC; } .ap_bttn:hover .ap_icon svg { color: white; } .ap_bttn:hover .ap_text { color: white; } .home-dots { position: absolute; top: 51%; right: 30px; } .home-dots li { border: none; border: 3.5px solid white; width: 20px; height: 20px; border-radius: 50%; position: relative; margin: 15px 0; transition: 0.3s; cursor: pointer; } .home-dots li button { border: none; background: white; width: 7px; height: 7px; border-radius: 50%; padding: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; } .home_btn { position: absolute; top: 49%; right: 32px; z-index: 9; } .home_btn svg { color: white; } .home-dots li.slick-active { border-color: #468FCC; } .home-dots li.slick-active button { background: #468FCC; opacity: 1; } /*css for about section*/ .about_section { padding: 6rem 0; } .about_content { text-align: center; } .about_content h3 { text-transform: uppercase; font-weight: 700; font-size: 24px; margin-bottom: 5px; } .about_content img { margin-bottom: 2rem; } .about_content p { margin-bottom: 2rem; color: #000000d1; font-weight: 400; } .about_img img { width: 100%; } /*features css*/ .features_section { background: #f1f1f1; padding: 6rem 0; } .features_heaading { text-align: center; margin-bottom: 4rem; } .features_heaading h2 { text-transform: uppercase; font-weight: 600; font-size: 27px; } .features_tab .nav-link { color: #000000bf; display: flex; transition: 0.3s; position: relative; padding: 0; padding-bottom: 2px; margin-bottom: 22px; } .features_tab .nav-link::after { content: ""; background: black; height: 1px; width: 68%; position: absolute; bottom: 0; left: 0; margin-bottom: 2; transition: 0.3s; } .media_left { flex-basis: 12%; font-size: 35px; } .media_body { flex-basis: 75%; } .media_body h4 { text-transform: uppercase; font-weight: 700; font-size: 18px; } .media_body p { font-weight: 400; font-size: 16px; } .features_tab.nav-pills .nav-link.active, .features_tab.nav-pills .show > .nav-link { color: #468FCC; background: transparent; } .features_tab .nav-link:hover { color: #468FCC; } .features_tab .nav-link:hover::after, .features_tab .nav-link.active::after { background: #468FCC; width: 90%; } .featur_img { width: 40%; float: left; } .feature_content { width: 52%; float: right; text-align: right; margin-left: 3rem; margin-top: 4rem; } .featur_img img { width: 100%; } .feature_content h3 { text-transform: uppercase; font-weight: 700; font-size: 20px; margin-bottom: 2rem; } .feature_content p { margin-bottom: 1rem; color: #000000db; font-size: 16px; } /*screen shot section*/ .screenshot_section { padding: 4rem 0; } .screenshot_heading { text-align: center; margin-bottom: 4rem; } .screenshot_heading h2 { text-transform: uppercase; font-weight: 700; font-size: 25px; } .screen-dots { text-align: center; margin-top: 1.5rem; } .screen-dots li { border: 3px solid #000000bd; display: inline-block; border-radius: 50%; width: 18px; height: 18px; padding: 0; margin: 0 3px; position: relative; cursor: pointer; transition: 0.3s; } .screen-dots li button { border-radius: 50%; border: 0; width: 7px; height: 7px; background: black; padding: 0; outline: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; opacity: 0; } .screen-dots li.slick-active { border-color: #468FCC; } .screen-dots li.slick-active button { background: #468FCC; opacity: 1; } /*video section*/ .video_section { padding: 5rem 0; } .video_heading { text-align: center; margin-bottom: 5rem; } .video_heading h2 { text-transform: uppercase; font-weight: 700; font-size: 25px; } .video_par { background-image: linear-gradient(#0000008f, #0000008f), url('img/video_img.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; padding: 13rem 0; } .video_content { text-align: center; } .video_content>button { background: no-repeat; border: none; outline: none; font-size: 5rem; color: white; padding: 0; transition: 0.3s; } .video_body.modal-body iframe{ height: 75vh; width: 100%; } .video_dialoge.modal-dialog { max-width: 60rem; } .video_close.close { font-size: 30px; outline: none; } .video_close.close:hover { color: #468FCC; } #video_title { font-weight: 600; font-size: 20px; } #video_title span { color: #468FCC; } .video_content>button:hover { color: #468FCC; } /*price section*/ .price_section { padding: 6rem 0; } .price_heading { text-align: center; margin-bottom: 4rem; } .price_heading h2 { text-transform: uppercase; font-weight: 700; font-size: 25px; } .single_price { background: #F1F1F1; text-align: center; border-radius: 15px; position: relative; padding-bottom: 2rem; border: 1px solid #0000000f; } .single_price_heading { background: transparent; border-radius: 15px 15px 0 0; padding: 17px 0; transition: 0.3s; } .single_price_heading h3 { text-transform: uppercase; font-weight: 700; font-size: 19px; transition: 0.3s; } .price_plan { background: white; padding: 2rem 0; } .price_circle { border: 2px solid #00000021; width: 110px; height: 110px; margin: 0 auto; border-radius: 50%; color: #000000c7; font-weight: 700; font-size: 16px; line-height: 1.1; padding-top: 12px; } .price_circle span { font-size: 50px; } .price_text p { margin: 13px 0; color: #000000d6; text-transform: capitalize; font-weight: 500; font-size: 16px; } .price_btn { background: white; position: absolute; width: 6rem; border: 1px solid black; border-radius: 5px; left: 50%; transform: translate(-50%, 0); bottom: -2%; padding: 3px; transition: 0.3s; } .price_btn a { color: black; text-transform: capitalize; font-weight: 600; transition: 0.3s; } .single_price:hover .single_price_heading { background: #468FCC; } .single_price:hover .price_btn { background: #468FCC; border-color: transparent; } .single_price:hover .single_price_heading h3 { color: white; } .single_price:hover .price_btn a { color: white; } /*css for team*/ .team_section { padding: 6rem 0; } .team_heading { text-align: center; margin-bottom: 4rem; } .team_heading h2 { color: black; font-weight: 700; text-transform: uppercase; font-size: 25px; } .team_content { position: relative; transition: 0.3s; margin: 85px 10px; } .team_img { position: relative; width: 100%; } .team_img img { width: 100%; } .team_hover_one { position: absolute; top: 0; left: 0; background: #00000082; width: 100%; height: 100%; border-radius: 15px 15px 0 0; text-align: center; padding-top: 50%; opacity: 0; transition: 0.3s; } .team_hover_one ul li { display: inline-block; margin: 0 10px; background: white; width: 45px; height: 45px; border-radius: 50%; padding-top: 7px; cursor: pointer; transition: 0.3s; } .team_hover_one ul li a { color: #000000d1; font-size: 20px; transition: 0.3s; } .team_hover_second { position: absolute; bottom: 0; text-align: center; padding: 15px 0; border: 1px solid #00000029; border-radius: 0 0 15px 15px; border-top: none; background: white; z-index: -1; height: 170px; visibility: hidden; opacity: 0; transition: 0.3s; } .team_hover_second h4 { text-transform: uppercase; font-weight: 700; font-size: 20px; margin-bottom: 8px; } .team_hover_second h5 { font-weight: 500; font-size: 16px; } .team_hover_second p { width: 75%; margin: 12px auto; color: #000000d6; font-size: 16px; } .team_content:hover { margin-top: 0; } .team_content:hover .team_hover_one { opacity: 1; } .team_content:hover .team_hover_second { transform: translateY(100%); visibility: visible; opacity: 1; } .team_hover_one ul li:hover { background: #468FCC; } .team_hover_one ul li:hover a { color: white; } /*feedback section*/ .feedback_section { padding: 6rem 0; } .feedback_heading { text-align: center; margin-bottom: 4rem; } .feedback_heading h2 { text-transform: uppercase; font-weight: 700; font-size: 25px; } .feedback_part { background-image: linear-gradient(#0000007a, #0000007a) ,url('img/feedback_img.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; padding: 2.5rem 0; } .feedback_for { background: white; border-radius: 15px; margin-bottom: 3rem; position: relative; } .feedback_for::after { content: ""; background: white; width: 35px; height: 35px; position: absolute; top: 89%; left: 49.7%; transform: rotate(45deg) translateY(50%); border-radius: 0 0 7px 0; } .feedback_content { text-align: center; padding: 30px 5rem; } .feedback_content p { color: #000000c7; } .feedback_star p { display: inline-block; margin: 0 auto; margin: 0 3px; margin-top: 1.5rem; } .blue_star svg{ color: #468FCC; } .feedback_content h3 { text-transform: uppercase; font-weight: 700; font-size: 22px; margin-top: 4px; } .feedback_content h6 { text-transform: uppercase; font-weight: 600; font-size: 14px; margin-top: 2px; } .feedback_img { border-radius: 50%; margin: 26px auto; position: relative; transform: scale(1); width: 59%; height: 100%; transition: 0.3s; } .feedback_img img { border-radius: 100%; border: 3px solid white; transition: 0.3s; } .feedback_opa { background: black; top: 0; position: absolute; width: 100%; height: 100%; border-radius: 50%; opacity: 0.4; transition: 0.3s; } .feedback_item.slick-current .feedback_img { transform: scale(1.5); border-color: #468FCC; } .feedback_item.slick-current .feedback_img img { border-color: #468FCC; } .feedback_item.slick-current .feedback_img .feedback_opa { opacity: 0; } .feedback-dots { margin-top: 2rem; } .feedback-dots li { display: inline-block; margin: 0 5px; border: 4px solid white; width: 20px; height: 20px; padding: 0; border-radius: 50%; position: relative; transition: 0.3s; cursor: pointer; } .feedback-dots li button { background: white; border: none; width: 7px; height: 7px; padding: 0; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; outline: none; } .feedback-dots li.slick-active { border-color: #468FCC; } .feedback-dots li.slick-active button{ background: #468FCC; opacity: 1; } /*contact css*/ .contact_section { padding: 6rem 0; } .contact_heading { text-align: center; margin-bottom: 4rem; } .contact_heading h2 { text-transform: uppercase; font-weight: 700; font-size: 25px; } .input_box { margin-bottom: 2rem; } .input_box p input { width: 100%; padding: 8px 8px; font-size: 17px; border: 1px solid #000000e6; border-radius: 6px; } .input_box textarea { width: 100%; height: 12rem; border-radius: 6px; border: 1px solid #000000e6; padding: 8px 8px; } .input_btn { background: #468FCC; border: 1px solid #468FCC; padding: 4px 22px; text-transform: capitalize; font-weight: 700; color: white; font-size: 19px; border-radius: 3px; outline: none; transition: 0.3s; } .input_btn:hover { background: white; color: #468FCC; outline: none; } /*footer Section*/ .footer { background: #353535; text-align: center; padding: 3rem 0; } .footer_logo { width: 22%; margin: 0 auto; margin-bottom: 2rem; } .footer_logo img { width: 100%; } .footer_social { margin-bottom: 1rem; } .footer_social ul li { display: inline-block; margin: 0 4px; background: white; width: 50px; height: 50px; border-radius: 50%; padding-top: 6px; transition: 0.3s; cursor: pointer; } .footer_social ul li a { color: #000000c4; font-size: 25px; transition: 0.3s; } .footer_copyright p { color: white; font-weight: 400; margin-top: 2rem; } .footer_social ul li:hover { background: #468FCC; } .footer_social ul li:hover a { color: white; }