/*common css*/ body, h1, h2, h3, h4, h5, h6, p, ul { margin: 0; padding: 0; } li{list-style: none;} a{text-decoration: none;} body{font-family: 'Lato', sans-serif; overflow-x: hidden;} h1{font-family: 'Varela Round', sans-serif;} /*body css*/ /*navigation css*/ .header_section { background: transparent; position: fixed; width: 100%; z-index: 99; left: 0; top: 0; padding: 44px 0; font-size: 17px; transition: padding 0.37s; } .left_nav { margin-top: 13px; } .left_nav ul li { display: inline-block; margin-right: 2rem; } .left_nav ul li a { color: black; text-transform: capitalize; text-decoration: none; font-weight: 400; transition: 0.2s; } .side_bar_icon { color: black; cursor: pointer; transition: 0.2s; } .logo_area { text-align: center; margin-top: 13px; } .right_nav { float: right; } .right_nav ul li { display: inline-block; margin-left: 2.5rem; } .right_nav ul li a { text-transform: capitalize; text-decoration: none; font-weight: 400; } .help a { color: #00000080; transition: 0.2s; } .contact a { color: black; transition: 0.2s; } .get_app { background: #267df4; padding: 0.8rem 1rem; border-radius: 150px; } .get_app a { color: white; } .get_app a svg { margin-right: 3px; } .sticky_nav { background: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); padding: 27px 0; } .left_nav ul li:hover a { color: #267df4; } .side_bar_icon:hover { color: #267df4; } .help:hover a { color: #267df4; } .contact:hover a { color: #267df4; } /*home section css*/ .home_section { background-image: url('img/banner_background.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; padding-top: 14rem; } .home_content { text-align: center; } .home_content h1 { font-size: 3.8rem; color: black; margin-bottom: 8px; } .home_content p { width: 71%; margin: 0 auto; font-size: 23px; color: #000000b3; font-weight: 400; margin-bottom: 3rem; } .watch_btn { border: 1px solid #0000004d; background: white; width: 18%; margin: 0 auto; margin-bottom: 3rem; padding: 12px 0; border-radius: 60px; cursor: pointer; } .watch_btn a { text-decoration: none; color: black; text-transform: capitalize; font-weight: 400; font-size: 17px; } .watch_btn a svg { margin-right: 20px; font-size: 15px; } /*side bar css*/ .side_bar { position: fixed; background: #26272D; top: 0; left: -30%; width: 30%; height: 100%; z-index: 999; padding-left: 2rem; transition: left 0.7s cubic-bezier(0.545, 0, 0.05, 1); } .slide_bar { position: relative; } .slide_cross { color: white; position: absolute; right: 4%; top:3%; font-size: 20px; cursor: pointer; transition: 0.2s; } .Silde_logo_area { text-align: left; margin-top: 2rem; margin-bottom: 2rem; } .slide_nav { margin: 0; } .slide_nav ul li { margin: 9px 0; } .slide_nav ul li a { color: white; text-transform: capitalize; font-weight: 600; text-decoration: none; transition: 0.2s; } .slide_get_app { width: 37%; padding: 11px 0; text-align: center; } .slide_footer { margin-top: 16rem; } .slide_footer p { color: white; text-transform: capitalize; font-weight: 400; } .slide_footer p a { color: #267df4; } .slide_social { margin-top: 1rem; } .slide_social ul li { display: inline-block; margin-right: 22px; } .slide_social ul li a { color: white; text-decoration: none; font-size: 17px; } .SlideOpen { left: 0; } .slide_hover:hover a { color: #267df4; } .slide_cross:hover { color: #267df4; } /*feature section css*/ .feature_section { padding: 6rem 0; background: white; z-index: 9; } .single_features span { font-size: 4rem; color: #267df4; } .single_features h2 { font-weight: 300; font-size: 30px; margin-top: 2.7rem; margin-bottom: 1.6rem; } .single_features p { font-size: 20px; font-weight: 400; color: #00000080; width: 92%; } /*feature 2 section*/ .features_2_section { padding: 15rem 0; position: relative; } .feature_iphone { position: absolute; width: 70%; top: 12%; left: -19.5%; } .feature_iphone img { width: 100%; } .feature_2_contetn h1 { font-size: 3.5rem; margin-bottom: 3rem; } .feature_2_contetn p { margin: 2rem 0; font-size: 20px; color: #000000b8; } .hack_btn { background: #267df4; width: 43%; text-align: center; padding: 7px 0; border-radius: 32px; float: left; } .hack_btn a { color: white; text-decoration: none; font-size: 18px; } .hack_btn a svg { margin-left: 37px; padding-top: 2px; } .learn_more_btn { width: 40%; float: left; margin-left: 3rem; margin-top: 7px; } .learn_more_btn a { text-transform: capitalize; font-size: 18px; color: black; text-decoration: none; } /*feature 3 section*/ .feature_3_section { padding-top: 15rem; position: relative; padding-bottom: 5rem; } .feature_map { position: absolute; width: 56%; right: 0; top: 29%; height: 44%; } .feature_map img { width: 100%; } .feature_3_content h1 { font-size: 3.5rem; margin-bottom: 3rem; } .feature_3_content p { margin: 2rem 0; font-size: 20px; color: #000000a6; } .feature_3_content span { display: block; margin-bottom: 1.7rem; margin-top: 3rem; font-weight: 700; text-transform: uppercase; font-size: 14px; } .dropbox { margin-right: 3rem; } /*screen section css*/ .screen_section { padding: 6rem 0; background: #f5f5f8; } .screen_hading { text-align: center; } .screen_hading h1 { font-size: 3.5rem; text-transform: capitalize; color: black; } .screen_line { background: #267df4; width: 4rem; height: 2px; margin: 2rem auto; } .screen_hading p { color: black; text-transform: uppercase; font-size: 14px; font-weight: 700; } .interface_list { width: 100%; position: relative; } .interface_list li { position: absolute; width: 320px; top: 92px; box-shadow: 10px 10px 16px 0px rgba(61, 61, 62, 0.15); } .interface_list li img { max-width: 100%; } .interface_list li:nth-child(1) { left: 50%; margin-left: -880px; } .interface_list li:nth-child(2) { left: 50%; margin-left: -530px; } .interface_list li:nth-child(4) { right: 50%; margin-right: -530px; } .interface_list li:nth-child(5) { right: 50%; margin-right: -880px; } .interface_list li.screen_main { width: 395px; top: 0; left: 50%; margin-left: -193px; box-shadow: none; } .interface_list li.screen_main img { max-width: 100%; } /*buy section*/ .buy_section { margin-top: 55rem; text-align: center; } .buy_content p { text-transform: uppercase; font-size: 14px; } .buy_content p span { font-weight: 700; } .buy_content h1 { margin: 1rem 0; color: black; font-size: 50px; } .serch_bar { margin: 3rem 0; } .input_search { position: relative; } .input_search input { width: 45%; padding: 11px 18px; border-radius: 25px; background: white; border: 1px solid #00000047; font-size: 17px; } .buy_serch_btn { position: absolute; top: 3px; right: 308px; background: #6fc754; border: none; padding: 10px 10px; color: white; text-transform: capitalize; font-weight: 700; width: 13%; border-radius: 29px; outline: none; } .buy_content h6 { text-transform: uppercase; font-weight: 700; font-size: 13px; color: #00000075; margin-top: 4rem; } .buy_serch_btn span { margin-left: 17px; color: white; } .apple_dow_btn { background: black; width: 19%; margin: 1rem auto; border-radius: 50px; outline: none; } .apple_dow_btn a { display: flex; text-decoration: none; } .dow_app_icon { flex-basis: 25%; font-size: 40px; color: white; text-align: right; } .down_text { flex-basis: 65%; font-size: 24px; line-height: 1; color: white; text-align: left; margin-left: 1rem; } .down_text span { font-size: 12px; } /*slider css*/ .testi_content { text-align: center; } .testimonial_section { padding: 6rem 0; } .carousel-indicators { position: absolute; top: 0; left: 0; width: 100%; bottom: auto; margin-left: 0; } .testi_slider { width: 100%; } .carousel-indicators li { border: none; border-radius: 50%; margin: 0 2.5rem; width: 33%; height: 130px; text-indent: initial; background: none; transform: scale(0.8); transition: all 0.97s cubic-bezier(0.545, 0, 0.05, 1); } .carousel-indicators li img { border-radius: 100%; opacity: 0.7; transition: all 0.97s cubic-bezier(0.545, 0, 0.05, 1); } .carousel-indicators li.active { transform: scale(1); } .carousel-indicators li.active img { opacity: 1; box-shadow: -10px 12px 30px 0px rgba(92, 95, 101, 0.18); } .testi_content { padding-top: 10rem; } .carousel-control-prev { left: -100px; width: 20px; height: 25px; top: 55px; } .carousel-control-next { right: -100px; width: 20px; height: 25px; top: 55px; } .carousel-control-prev svg, .carousel-control-next svg { color: #8c8f94; font-size: 35px; } .testi_content h3 { color: black; font-weight: 300; font-size: 35px; margin-bottom: 2rem; } .testi_content p { font-size: 20px; color: #00000082; margin-bottom: 0.7rem; } .testi_star-rating svg { display: inline-block; margin: 0 2px; } .testi_star-rating .gold-star { color: #f2bc3b; } .testi_star-rating { margin-bottom: 2.5rem; } .testi_content span { color: black; font-size: 16px; text-transform: uppercase; font-weight: 700; } /*plan section*/ .plan_section { background: #F4F4F5; padding-top: 10rem; padding-bottom: 16rem; } .plan_content h1 { font-weight: 700; font-size: 46px; margin-bottom: 3rem; } .plan_title { text-transform: uppercase; font-weight: 700; font-size: 13px; margin-bottom: 1rem; } .plan_toggle { display: flex; width: 72%; padding: 10px 0; border: 1px solid #00000059; border-radius: 50px; margin-bottom: 4rem; position: relative; } .individual, .company { flex-basis: 50%; text-align: center; font-size: 18px; text-transform: capitalize; color: #0009; cursor: pointer; z-index: 9; transition: color 0.7s cubic-bezier(0.545, 0, 0.05, 1); } .individual.active, .company.active { color: black; } .plan_intro { color: #000000d1; font-size: 18px; margin-bottom: 1.5rem; } .plan_about { color: #000000b3; font-size: 17px; } .plan_about a { color: #267DF4; text-transform: capitalize; } .plan_toggle::after { content: ""; background: #d5d5d5; width: 122px; height: 41.5px; position: absolute; border-radius: 50px; top: 2.9px; left: 3px; transition: all 0.7s cubic-bezier(0.545, 0, 0.05, 1); } .plan_toggle.active::after { top: 2.9px; left: 125px; } .plane_table { display: flex; } .single_price { flex-basis: 50%; text-align: center; background: #EBEBED; padding: 4rem 1rem; display: none; } .single_price h3 { text-transform: capitalize; font-size: 35px; margin-bottom: 2rem; } .plane_price { background: transparent; padding: 5px 19px; border: 1px solid black; border-radius: 50px; text-transform: uppercase; font-weight: 700; font-size: 13px; } .plane_text { margin-top: 3rem; font-size: 22px; color: #000000b3; margin-bottom: 2rem; } .plane_price_list { margin-bottom: 2rem; } .plane_price_list ul li { margin: 8px 0; } .plane_price_list ul li svg { margin-right: 10px; color: #6fc754; } .plane_btn { background: #267DF4; width: 75%; margin: 0 auto; padding: 7px 0; border-radius: 50px; } .plane_btn a { color: #ffffffcf; text-transform: capitalize; font-size: 18px; font-weight: 700; text-decoration: none; } .plane_btn_2 { width: 75%; margin: 0 auto; border: 1px solid #267DF4; padding: 7px 0; border-radius: 50px; } .plane_btn_2 a { color: #267DF4; font-size: 18px; text-decoration: none; } .high_lighted { background: white; transform: scale(1.1, 1.1); } .price_plan_table { position: relative; } .individual_cf { position: absolute; opacity: 0; top: 0; left: 15px; width: 95%; transform: scale(0.95); transition: opacity 0.97s, transform 0.97s; transition-timing-function: cubic-bezier(0.545, 0, 0.05, 1); } .company_cf { position: absolute; top: 0; opacity: 0; left: 15px; width: 95%; transform: scale(0.95); transition: opacity 0.97s, transform 0.97s; transition-timing-function: cubic-bezier(0.545, 0, 0.05, 1); } .individual_cf.active, .company_cf.active { opacity: 1; transform: scale(1); } .individual_cf.active .single_price, .company_cf.active .single_price { display: block; } /*subscribe section*/ .subscribe_section { padding: 5rem 0; text-align: center; } .subscrie_text { margin-top: -2rem; color: #00000085; font-size: 18px; } /*top footer*/ .top_footer { padding: 4rem 0; } .footer_logo { margin-bottom: 2rem; width: 60%; } .footer_logo img { width: 100%; } .footer_left p { font-size: 16px; color: #000000b5; margin-bottom: 2rem; } .footer_apple { width: 78%; margin: 0; border-radius: 8px; } .footer_social { margin-top: 2rem; } .footer_social ul li { display: inline-block; margin-right: 20px; } .footer_social ul li a { font-size: 20px; color: #0000005e; text-decoration: none; } .single_footer { margin-top: 1rem; } .single_footer h5 { text-transform: uppercase; font-weight: 700; font-size: 16px; margin-bottom: 1rem; } .single_footer p { margin-bottom: 10px; color: black; } .single_footer p a { color: #000000a1; text-decoration: none; font-size: 17px; } .single_footer p a:hover, .footer_social ul li:hover a { color: black; } /*bottom Footer*/ .bottom_footer { padding: 2.5rem 0; } .copyright_text { color: #000000c9; } .copyright_text a { color: #267DF4; } .develeoped_by { text-align: right; font-size: 13px; font-weight: 700; } .develeoped_by a { font-size: 20px; font-family: 'Lobster', cursive; text-decoration: none; color: #267df4; } @media only screen and (max-width: 992px) { /*** Main Nav ***/ #main-nav .col-md-4:first-child, #main-nav .col-md-4:last-child { display: none; } #main-nav .logo { padding-top: 0px; } #main-nav #slide_out_menu { position: fixed; display: block; width: 300px; height: 100%; left: -300px; } #main-nav #slide_out_menu .menu-close { top: 41px; } /*** Features ***/ #features { padding: 100px 0; } #features .feature-item { margin-bottom: 80px; } #features .feature-item:last-child { margin-bottom: 0; } #features .feature { padding: 0px 0px; } #features .feature .f-icon { margin-bottom: 48px; } #features .feature .f-icon i { font-size: 42px; color: #267df4; } /*** iPhone Feature ***/ #iphone-feature { padding: 80px 0 60px; } #iphone-feature .iphone-showcase { position: relative; bottom: auto; right: auto; padding: 0 15px; margin-top: 64px; } #iphone-feature .iphone-showcase img { width: 100%; } /*** Map Feature ***/ #map-feature { padding: 80px 0 100px; } #map-feature .map-showcase { position: relative; bottom: auto; left: auto; padding: 0 15px; margin-top: 64px; } #map-feature .map-showcase img { width: 100%; } /*** iPhone Screens ***/ #iphone-screens { padding: 120px 0 620px; } #iphone-screens .images-list li { position: absolute; width: 240px; top: 68px; } #iphone-screens .images-list li img { max-width: 100%; } #iphone-screens .images-list li:nth-child(1) { margin-left: -680px; } #iphone-screens .images-list li:nth-child(2) { margin-left: -410px; } #iphone-screens .images-list li:nth-child(4) { margin-right: -410px; } #iphone-screens .images-list li:nth-child(5) { margin-right: -680px; } #iphone-screens .images-list li.main-img { width: 295px; margin-left: -148px; } /*** Customers ***/ #customers .carousel-control.left, #customers .carousel-control.right { display: none; } /*** Plan ***/ #plan { padding: 120px 0 150px; } #plan #price_tables .individual.active, #plan #price_tables .company.active { margin-top: 80px; } #plan .toggle-container .switch-toggles .individual, #plan .toggle-container .switch-toggles .company { margin-top: 0; } /*** Footer ***/ #footer .socials { margin-bottom: 60px; } #footer .footer-links { margin-bottom: 30px; } #footer .footer-links:last-child { margin-bottom: 0; } /*** Copyright Container ***/ .copyright-container .text-right { text-align: left; margin-top: 22px; } } @media only screen and (max-width: 768px) { .left_nav ul li { display: none; } .left_nav ul li:first-child { display: block; } .right_nav { display: none; } .logo_area { text-align: left; } .slide_get_app { width: 80%; } .side_bar { left: -45%; width: 45%; } .SlideOpen { left: 0; } .watch_btn { width: 40%; } .single_features { margin-bottom: 3rem; } .feature_iphone { top: unset; width: 70%; left: 13%; bottom: -115px; } .buy_serch_btn { right: 65px; width: 28%; } .apple_dow_btn { width: 45%; } .plan_toggle::after { width: 160px; } .plan_toggle.active::after { top: 2.9px; left: 202px; } .price_plan_table { margin-top: 3rem; margin-bottom: 17rem; } .copyright_textb { text-align: center; } .develeoped_by { text-align: center; } } @media only screen and (max-width: 575px) { .home_content h1 { font-size: 2.8rem; } .watch_btn { width: 65%; } .home_iphone img { width: 100%; } .hack_btn { width: 61%; } .buy_serch_btn.wow.fadeInRightBig { display: none; } .apple_dow_btn { width: 78%; } .carousel-indicators li img { width: 100%; } .side_bar { width: 30%; } .plan_toggle::after { width: 117px; } .plan_toggle.active::after { top: 2.9px; left: 115px; } .plane_btn a { font-size: 15px; } .plane_btn_2 a { font-size: 13px; } }