/*=============================================== Template Name: Hosting - HTML5 Template Author: https://themeforest.net/user/dreamit-solution Description: Description Version: 1.0.0 Text Domain: Hosting Tags: consulting, finance, corporate, business, consultant, multipurpose, technology, it-solution, software, agency, company, portfolio, bangking, insurance, digital-agency, digital-marketing. ================================================*/ /*TABLE OF CONTENTS*/ /*===================== 01. Hosting Nav Menu Area Css 02. Hosting Slider Area Css 03. Hosting Section Title Css 04. Hosting Service Area css 05. Hosting About Area Css 06. Hosting Domain Area Css 07. Hosting Why Choose Area Css 08. Hosting Testimonial Area Css 09. Hosting Priching Area Css 10. Hosting Faq Area Css 12. Hosting Brand Section Css 13. Hosting Call Do Section Css 14. Hosting Form Box Css 15. Hosting Blog Area Css 16. Hosting footer Area Css 17. Hosting Subscribe Area Css 18. Hosting Category Area CSS 19. Hosting Prossess Ber Css 20. Hosting Scrollup Section 21. Hosting Bounce Animation Css 22. Hosting Animation Dance 23. Hosting Breadcumb Area Css 24. Hosting abouts_areas Css 25. Hosting Feture-Area Css 26. Hosting Pricing Section Css 27. Hosting Web Development Section CSS 28. Hosting Contact US Css 29. Hosting Blog Sidber Widget CSS 30. Hosting Feature Area Css 31. Hosting Hosting Area Css 32. Hosting Error Area Css 33. Hosting Registion Area Css 34. Hosting Login Area Css 35. Hosting Sing Up Area Css 36. Hosting Support Area Css 37. Hosting Search Box Css 38. Hosting Loader Css =======================*/ /*================================ <-- Hosting Header Top Area Css --> ==================================*/ .header-top-section { background: url(../images/home/slider/top_bg-home.jpg); padding: 9px 0 9px; position: relative; z-index: 2; } .header-address-info { display: inline-block; margin-left: 150px; position: relative; z-index: 1; } .header-address-info::before { position: absolute; content: ""; left: -47px; top: 2px; height: 100%; background: url(../images/home/slider/top-icon.png); width: 100%; z-index: -1; background-repeat: no-repeat; } .header-address-info p { margin-bottom: 3px; font-size: 16px; color: #ffffff; font-weight: 400; font-family: "Mulish"; position: relative; } .top-view-btn { display: inline-block; margin-left: 15px; } .top-view-btn a { display: inline-block; font-size: 16px; color: #ffffff; font-weight: 500; font-family: "Urbanist"; position: relative; z-index: 1; } .top-view-btn a:before { position: absolute; content: ""; left: 0; bottom: 3px; width: 100%; height: 1px; background: #ffffff82; z-index: -1; } .top-view-btn a:after { position: absolute; content: ""; right: -133px; top: 3px; width: 100%; height: 100%; background: url(../images/home/slider/top-star.png); z-index: -1; background-repeat: no-repeat; } .top-view-btn a i { font-size: 16px; margin-left: 10px; } .header-top-section.home-three { padding: 10px 0 10px; position: relative; z-index: 1; } .header-top-section.home-three .header-address-info p { margin-bottom: 3px; font-size: 15px; color: #ffffff; font-weight: 400; font-family: "Yantramanav"; } .header-address-info p i { display: inline-block; padding-right: 5px; color: #FF5D13; font-size: 12px; } i.flaticon-send.style { transform: rotate(-45deg); position: relative; top: -4px; } .header-top-offer p { color: #fff; margin: 11px 0 11px; font-size: 15px; } /*header left right*/ .heder-top-left { text-align: right; } .login-signe-button { display: inline-block; } .login-signe-button button i { margin-right: 8px; color: #21c58e; } .login-signe-button button { background-color: transparent; color: #ffff; border: none; cursor: pointer; width: 100%; position: relative; left: 7px; } /* Full-width input fields */ .container_form input { width: 100%; padding: 12px 20px; margin: 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; margin-bottom: 20px; } /* Extra styles for the cancel button */ .login-camcel { display: flex; margin: 20px 40px 30px; align-items: center; justify-content: space-between; } .cancelbtn { width: auto; padding: 10px 23px; background-image: linear-gradient(90deg, #f98123 0%, #ff0965 100%); outline: 0; border: none; border-radius: 5px; color: #fff; display: inline-block; } /* Center the image and position the close button */ .imgcontainer { text-align: center; margin: 24px 0 12px 0; position: relative; } img.avatar { width: 40%; border-radius: 50%; } span.psw { display: inline-block; margin-left: 50px; } .container_form { margin: 0 40px 0; } .container_form.style_two { margin: 0 40px 30px; } .container_form label { color: #0A1328; cursor: pointer; font-size: 14px; font-weight: 400; text-align: left; display: block; margin-bottom: 5px; } .container_form button { background-image: linear-gradient(90deg, #f98123 0%, #ff0965 100%); outline: 0; border: none; width: 100%; margin-top: 10px; padding: 8px 0; color: #fff; margin-bottom: 10px; } /* Modal Content/Box */ .modal-content { background-color: #fefefe; margin: 7% auto 15% auto; width: 25%; } /* The Close Button (x) */ .close { position: absolute; right: 25px; top: 0; color: #000; font-size: 35px; font-weight: bold; cursor: pointer; } /* Add Zoom Animation */ .animate { -webkit-animation: animatezoom 0.6s; animation: animatezoom 0.6s } @-webkit-keyframes animatezoom { from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)} } @keyframes animatezoom { from {transform: scale(0)} to {transform: scale(1)} } /* Change styles for span and cancel button on extra small screens */ @media screen and (max-width: 300px) { span.psw { display: block; float: none; } .cancelbtn { width: 100%; } } /*================================ <-- Hosting Nav Menu Area Css --> ==================================*/ .hosting_nav_manu { border-bottom: 1px solid rgba(255,255,255,0.10196078431372549); position: relative; z-index: 2; } .hosting_nav_manu.home-tow { border: none; } .sticky { left: 0; margin: auto; position: fixed !important; top: 0; width: 100%; -webkit-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1); background: #000D65 !important; transition: .5s; z-index: 9; } .sticky .header-top-section { display: none; } .sticky .row.header_top_style-one { display: none !important; } .row.header_bg { background: #fff; margin: 0; border-radius: 5px; padding: 0 9px 0px 13px; } .header-top-offer span { color: #F96D2F; } /* Hosting Menu Css*/ nav.hosting_menu { text-align: right; } .hosting_menu ul { list-style: none; display: inline-block; } .hosting_menu>ul>li { display: inline-block; position: relative; z-index: 1; } .hosting_menu>ul>li>a { display: block; padding: 35px 17px; transition: .5s; text-transform: capitalize; font-size: 16px; color: #ffffff; font-weight: 500; font-family: "Mulish"; } .hosting_menu>ul>li>a:hover { color: #F98323; } .hosting_menu>ul>li>a span i { font-size: 13px; margin-left: 5px; } .sidebar-btn { display: inline-block; } .nav-btn span i { display: inline-block; color: #041341; font-size: 30px; cursor: pointer; } /* country select */ .country-list { display: inline-block; margin-left: 10px; margin-right: 31px; position: relative; z-index: 1; } .country-list:before { position: absolute; top: 5px; left: -21px; content: ""; width: 2px; height: 20px; background-color: rgba(255,255,255,0.2); } .counry-flag { float: left; margin-right: 5px; } select.select_box { background: transparent; border: none; outline: 0; color: #fff; margin: 0; } select.select_box option { color: #0470FF; } .menu-btn { display: inline-block; } .menu-btn a { display: inline-block; font-size: 16px; color: #ffffff; font-weight: 500; font-family: "Mulish"; border-radius: 5px; background-image: linear-gradient(113deg, #0054ff 0%, #0781ff 100%); padding: 11px 31px; position: relative; z-index: 1; } .menu-btn a::before { position: absolute; content: ""; background-image: linear-gradient(113deg, #fa4b05 0%, #ff9038 100%); left: 0; top: 0; height: 100%; width: 100%; border-radius: 5px; z-index: -1; transform: scale(0); transition: .5s; } .menu-btn a:hover:before { transform: scale(1); } .menu-btn a i { margin-right: 8px; } /*** Sub Menu Style ***/ .hosting_menu ul .sub-menu { position: absolute; left: 0; top: 130%; width: 217px; text-align: left; background: #fff; margin: 0; z-index: 1; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); transition: .5s; visibility: hidden; border-top: 2px solid #000D65; opacity: 0; } .hosting_menu ul li:hover>.sub-menu { visibility: visible; top: 100%; opacity: 1; } .hosting_menu ul .sub-menu li { position: relative; } .hosting_menu ul .sub-menu li a { display: block; padding: 12px 20px; margin: 0; line-height: 1.3; letter-spacing: normal; transition: .1s; visibility: inherit !important; color: #041341 !important; font-size: 16px; font-weight: 500; } ul.sub-menu.style_one { left: 217px; border-top: 2px solid #FFA200; } .hosting_menu ul .sub-menu li:hover>a{ background: #ff9038; color: #fff !important; } /* seb menu style Three */ .hosting_nav_manu.style_three .hosting_menu ul li a { display: block; font-size: 17px; color: #041341; padding: 26px 18px; } .hosting_nav_manu.style_three .hosting_menu ul .sub-menu li a { padding: 12px 20px; } /* Hosting nav menu style four */ .hosting_nav_manu.style_four .logo_img { display: none; } .sticky.hosting_nav_manu.style_four .logo_img { display: block; } .sticky.hosting_nav_manu.style_four .logo_img3 { display: none; } .hosting_nav_manu.style_four { margin-bottom: 0; } .hosting_nav_manu.style_four .hosting_menu>ul>li>a { color: #041341; } .hosting_nav_manu.style_four select.select_box { color: #041341; } .hosting_nav_manu.style_four .header-search-button.style-one a { color: #041341; } .hosting_nav_manu.style_four .country-list:before { background-color: #475272; } .sticky.hosting_nav_manu.style_four .hosting_menu>ul>li>a { color: #ffff !important; } .sticky.hosting_nav_manu.style_four .header-search-button.style-one a { color: #fff; } .sticky.hosting_nav_manu.style_four select.select_box { color: #fff; } /* Hosting nav menu style six */ .hosting_nav_manu.style_six .country-list:before { top: 8px; left: -63px; width: 1px; height: 15px; background-color: #041341 !important; } .hosting_nav_manu.style_six .country-list { margin-left: 25px; margin-right: 0; } .hosting_nav_manu.style_six .nav-btn span i { font-size: 18px; } .slider-area.style_six .hosting-button { float: left; margin-right: 27px; } .hero-offer { display: flex; align-items: center; } .hero-offer h2 { font-size: 60px; color: #ffffff; font-weight: 700; position: relative; z-index: 1; margin-top: 0; } .hero-offer span { font-size: 18px; position: absolute; bottom: 8px; left: 68px; font-family: 'Mulish'; } .hero_limited { margin-left: 28px; } .hero_limited h5 { font-size: 25px; color: #ffffff; font-weight: 700; margin-left: 0; margin-top: 0; margin-bottom: -4px; } h6.style_1 { margin-top: 0; font-size: 12px; color: #041341; font-weight: 700; font-family: "Mulish"; background: #fff; display: inline-block; padding: 6px 9px; border-radius: 2px; } .sticky.hosting_nav_manu.style_six .nav-btn span i { color: #fff !important; } .sticky.hosting_nav_manu.style_six .country-list:before { background-color: #fff !important; } /* */ .slider-area { background: url(../images/home/slider/banner-home.jpg); height: 955px; position: relative; z-index: 1; background-repeat: no-repeat; background-size: cover; background-position: center center; margin-top: -99px; } .slider-content h4 { font-size: 16px; color: #ffffff; font-weight: 400; font-family: "Urbanist"; border-radius: 4px; background-image: linear-gradient(90deg, rgba(0,45,191,0.9999999999999999) 0%, rgba(8,47,200,0.2497888010938575) 70%, rgba(8,47,200,0) 100%); display: inline-block; padding: 12px 40px; position: relative; z-index: 1; margin-bottom: 9px; } .slider-content h4:before { position: absolute; content: ""; left: -119px; top: 0; height: 100%; width: 100%; background: url(../images/home/slider/hero-icon.png); background-repeat: no-repeat; background-position: center center; background-size: inherit; } .slider-content h1 { font-size: 56px; line-height: 68px; color: #ffffff; font-weight: 700; font-family: "Urbanist"; } .slider-content p { width: 100%; color: #ccd0e2; margin: 30px 0 38px; } /*slider button*/ .slider-all-btn { display: flex; align-items: center; } .hosting-button a { padding: 16px 40px; display: inline-block; position: relative; z-index: 1; font-size: 16px; color: #ffffff; font-weight: 500; font-family: "Mulish"; background-image: linear-gradient(113deg, #fa4b05 0%, #ff9038 100%); border-radius: 5px; } .hosting-button a:after { position: absolute; content: ""; height: 100%; width: 0%; background-image: linear-gradient(113deg, #ff9038 0%, #fa4b05 100%); left: 0; top: 0; z-index: -1; transition: 0.5s; transform: scale(0); opacity: 0; border-radius: 5px; } .hosting-button a:hover { color: #fff; } .hosting-button a:hover:after { transform: scale(1); opacity: 1; height: 100%; width: 100%; } .hosting-button a i { font-size: 13px; font-weight: 600; margin-left: 12px; display: inline-block; transform: revert; } .trustpilot-rating { margin-left: 33px; } span.out-of-rating { display: inline-block; font-size: 18px; color: #ffffff; font-weight: 500; font-family: "Mulish"; margin: 0; position: relative; z-index: 1; padding-left: 36px; } span.out-of-rating:before { position: absolute; content: ""; left: 19px; top: 5px; width: 2px; height: 20px; background-color: rgba(255,255,255,0.2); z-index: -1; } .hero-left { position: relative; margin-top: 0; left: 48px; } .hero_thumb-shpe { position: absolute; top: 42%; right: -28px; } /* slider all shape */ .slider_shpe_1 { position: absolute; top: -50px; left: -6px; z-index: -1; } .slider_shpe_2 { position: absolute; bottom: -6px; right: -20px; z-index: -1; } .slider_shpe_3 { position: absolute; bottom: 27%; right: 21%; z-index: -1; } .slider_shpe_4 { position: absolute; top: 15%; left: 10%; z-index: -1; } .slider_shpe_5 { position: absolute; top: 23%; right: 46%; z-index: -1; } .slider_shpe_6 { position: absolute; top: 23%; right: 14%; z-index: -1; } .slider_shpe_7 { position: absolute; top: 75%; right: 49%; z-index: -1; } /* */ .domain-area { background: #010C5C; margin-top: -105px; } .row.domain_bg { background: url(../images/home/resource/domain_bg01.png); margin: 0; background-repeat: no-repeat; background-size: contain; background-position: center center; padding: 48px 30px 44px 48px; position: relative; z-index: 1; } .domain-right form { position: relative; } .domain-right form input { width: 100%; height: 70px; background-color: #ffffff; border-radius: 4px; border: none; outline: 0; position: relative; z-index: 1; padding: 0 25px; } button.src-icon { position: absolute; right: 8px; top: 7px; z-index: 1; border: 0; outline: 0; color: #fff; font-weight: 500; font-family: "Mulish"; padding: 14px 40px; border-radius: 4px; background-image: linear-gradient(113deg, #0f58ff 0%, #1387ff 100%); } button.src-icon i { float: left; position: relative; top: 7px; margin-right: 10px; } .domain-list { margin-top: 24px; } .domain-single-item { margin-right: 30px; } .domain-right form input::placeholder { opacity: 0.502; font-size: 16px; color: #636363; font-weight: 500; font-family: "Mulish"; } .domain-list { margin-top: 20px; } .domain-single-item { display: inline-block; margin-right: 45px; } h5.domain-title { font-size: 22px; color: #fefefe; font-weight: 500; font-family: "mulish"; } .domain-content span { font-size: 13px; color: #fefefe; font-weight: 400; font-family: "Mulish"; } h5.domain-title.style_1 { font-size: 22px; color: #58C2FC; font-weight: 600; } h5.domain-title.style_2 { color: #00fae5; } h5.domain-title.style_3 { color: #FDC42F; } h5.domain-title.style_4 { color: #FF8488; } h5.domain-title.style_1 span { font-size: 16px; color: #ffffff; font-weight: 400; font-family: "Mulish"; margin-left: 3px; } .domain-left { text-align: right; margin-right: 85px; } /* */ .feature-area { background: url(../images/home/resource/feature_bg.jpg); padding: 98px 0 154px; background-repeat: no-repeat; background-size: auto; background-position: bottom; } .feature-single-box.style_1 { border-radius: 4px; background-color: #01176C; position: relative; z-index: 1; padding: 0px 0px 22px; margin-bottom: 30px; } .feature-single-box.style_1:before { position: absolute; content: ""; left: 0; top: 0; width: 90px; height: 90px; background-color: #000c5c; border-radius: 0px 0 30px 0; } .feature-single-box.style_1:after { position: absolute; content: ""; right: 0%; top: 0; height: 100%; width: 0%; z-index: -1; background: #0575FF; border-radius: 4px; transition: .5s; } .feature-single-box.style_1:hover:after { width: 100%; left: 0%; } .feature-icon.style_1 { float: left; width: 75px; height: 75px; background-image: linear-gradient(0deg, #000d63 0%, #01169f 100%); position: relative; z-index: 1; margin-right: 50px; border-radius: 10px 10px 15px 15px; line-height: 70px; text-align: center; transition: .5s; } .feature-content.style_one { overflow: hidden; } h3.feature-title.style_1 { font-size: 24px; color: #ffffff; font-weight: 600; font-family: "Urbanist"; margin: 37px 0 14px; } .feature-content.style_one p { font-size: 16px; line-height: 26px; color: #ccd0e2; font-weight: 400; font-family: "Mulish"; transition: .5s; } /* all hover */ .feature-single-box.style_1:hover .feature-icon.style_1 { background: #0575FF; border-radius: 50%; } .feature-single-box.style_1:hover .feature-content.style_one p { color: #fff; } /** ====================================================== <-- Hosting Section Title Css --> ======================================================**/ .section-title { margin-bottom: 50px; } .section-title.text-center { margin-bottom: 50px; } .section-title h1 { font-size: 45px; font-weight: 700; line-height: 52px; } .section-title h1 span { color: #fe8731; } .section-title h4 { font-size: 17px; color: #fe8731; font-weight: 500; font-family: "Mulish"; text-align: center; background: #fff; display: inline-block; padding: 10px 35px; border-radius: 20px; margin-bottom: 10px; } .section-title.style_3 h4 { background: #F6F4F5; } .section-title.style_four h4 { background: transparent; color: #fff; border: 1px solid #ffffff40; padding: 7px 21px; } .section-title.style_five h4 { color: #041341; border: 1px solid #D6E8FF; } .section-title.text-center p { width: 77%; text-align: center; margin: auto; left: 0; right: 0; } .section-title.style { margin-bottom: 32px; } .section-title.style h1 { color: #fff; } .section-title.style_one p { font-size: 16px; line-height: 26px; color: #ccd0e2; width: 90%; } .section-title.style_one { border-bottom: 1px solid #ccd0e229; margin-bottom: 27px; padding-bottom: 11px; } .section-title.style_one h1 { margin-bottom: 18px; } .section-title.text-center.style1 { margin-bottom: 60px; } .section-title.style_home_one h1 { margin-bottom: 12px; } .section-title.text-center.style-two { margin-bottom: 25px; } .section-title.text-center h1 { margin-bottom: 17px; } .section-title.style_1 h1 { color: #fff; } .section-title.style_4 h1 { margin-bottom: 18px; } .section-title.text-center.style1.pb_10 { margin-bottom: 50px; } .section-title.style_six h4 { background: transparent; padding: 0; font-size: 18px; color: #f88220; font-weight: 600; } /* rating thumb */ .hosting-rating-right { text-align: right; margin-top: -52px; } /* */ .about-area { background: #000D65; padding: 120px 0 120px; position: relative; overflow: hidden; margin-top: -67px; z-index: 1; } .about_thumb { position: relative; z-index: 1; } .about-thumb_2 { position: absolute; top: 107px; left: 52px; } .about-list ul li { font-size: 18px; color: #ffffff; font-weight: 500; font-family: "Urbanist"; margin-bottom: 25px; } .about-list ul li img { margin-right: 12px; } .about-single-item.style_one { border-radius: 5px; background-image: linear-gradient(0deg, rgba(0,13,101,0.9999999999999999) 0%, rgba(0,20,157,0.5019607843137254) 100%); border-top: 2px solid #0448B3; padding: 10px 30px 6px; position: relative; z-index: 1; margin-bottom: 30px; } .about-single-item.style_one:before { position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 2px; background-image: linear-gradient(to bottom, #0448B3, #0448b305); } .about-single-item.style_one:after { position: absolute; content: ""; right: 0; top: 0; height: 100%; width: 2px; background-image: linear-gradient(to bottom, #0448B3, #0448b305); } h3.about-title { font-size: 42px; color: #0782ff; font-weight: 700; font-family: "Urbanist"; margin-bottom: 8px; position: relative; z-index: 1; } h3.about-title::before { position: absolute; content: ""; background: url(../images/home/about/abou_icon.png); height: 100%; width: 100%; top: 16px; right: -92px; background-repeat: no-repeat; } .about-text p { color: #ccd0e2; } /* about shape */ .abou-shpe1 { position: absolute; top: 62%; left: 11%; z-index: -1; } .abou-shpe2 { position: absolute; top: 49%; left: -4%; z-index: -1; } .abou-shpe3 { position: absolute; top: -17px; right: -4%; z-index: -1; } /* */ .pricing-area { background: #000D65; position: relative; padding: 80px 0 90px; z-index: 1; } .pricing-single-items.style_one { background-image: linear-gradient(0deg, #000d65 0%, #00149d 100%); position: relative; z-index: 1; padding: 60px 40px 40px; border-radius: 10px; margin-bottom: 30px; } .pricing-single-items.style_one:after { position: absolute; content: ""; top: 0; left: 0; height: 0%; width: 100%; background-image: linear-gradient(113deg, #0054ff 0%, #0781ff 100%); z-index: -1; border-radius: 10px; transition: .5s; } .pricing-single-items.style_one:hover:after { height: 100%; } .pricing-single-items.style_one:before { position: absolute; content: ""; background: #000D65; height: 25px; width: 40%; top: 0; right: 0; left: 0; margin: auto; clip-path: polygon(0% 0%, 100% 0%, 88% 100%, 12% 100%); } .pricing_icon { float: left; margin-right: 18px; } .pricing-title h3 { font-size: 20px; color: #ffffff; font-weight: 600; font-family: "Urbanist"; margin-bottom: 3px; } .pricing-title span { font-size: 16px; color: #ccd0e2; } span.pricing { position: absolute; top: 64px; right: 38px; font-size: 36px; color: #fe8730; font-weight: 600; font-family: "Urbanist"; transition: .5s; } /* pricing body */ .pricing-body { margin-top: 75px; position: relative; } .pricing-body:before { position: absolute; content: ""; left: -38px; top: -32px; height: 1px; width: 123%; background: #ffffff21; } .pricing-feature ul li { font-size: 16px; color: #ffffff; font-weight: 400; font-family: "Mulish"; margin-bottom: 12px; transition: .5s; } .pricing-feature ul li img { margin-right: 12px; } .pricing-btn { margin-top: 48px; } .pricing-btn a { display: inline-block; background: transparent; border: 1px solid #0782ff; text-align: center; padding: 10px 110px; font-size: 16px; color: #ffffff; font-weight: 500; font-family: "Mulish"; position: relative; z-index: 1; border-radius: 5px; } .pricing-btn a:after { position: absolute; content: ""; height: 100%; width: 0%; background: #ffff; left: 0; top: 0; z-index: -1; transition: 0.5s; transform: scale(0); opacity: 0; } .pricing-btn a i { transform: rotate(-45deg); margin-left: 10px; font-size: 16px; } /* pricing shape */ .pricing-shpe1 { position: absolute; top: 15%; left: 13%; z-index: -1; } .pricing-shpe2 { position: absolute; top: 10%; right: 8%; z-index: -1; } /* all hover */ .pricing-single-items.style_one:hover span.pricing { color: #fff; } .pricing-single-items.style_one:hover .pricing-feature ul li { color: #fff !important; } .pricing-single-items.style_one:hover .pricing-btn a:after { transform: scale(1); opacity: 1; height: 100%; width: 100%; } .pricing-single-items.style_one:hover .pricing-btn a { border: 1px solid #fff; color: #0782ff; } /* */ .category-area { background: #001EBE; padding: 100px 0 90px; position: relative; overflow: hidden; z-index: 1; } .row.category_style_one { margin: 0 160px 0; } .category_single-item { background: #263FC0; border-radius: 5px; padding: 20px 20px 30px; margin-bottom: 30px; } .category-icon { float: left; margin-right: 15px; } .category-title h3 { font-size: 20px; color: #fefeff; font-weight: 600; font-family: "Urbanist"; line-height: 28px; } /* category alla shape */ .category-shape1 { position: absolute; bottom: -27px; left: -30px; z-index: -1; } .category-shape2 { position: absolute; bottom: -31px; right: -20px; z-index: -1; } .category-shape3 { position: absolute; top: 107px; right: 10%; z-index: -1; } .category-shape4 { position: absolute; top: 20%; left: 12%; z-index: -1; } /* */ .feature-area.style_tow { background: #000D65; padding: 100px 0 90px; } .feature_left { position: relative; z-index: 1; margin-left: 40px; } .feature_left:before { position: absolute; content: ""; left: -35px; top: 64px; height: 33%; width: 2px; background: #344194; } .feature_left::after { position: absolute; content: ""; left: -35px; bottom: 87px; height: 33%; width: 2px; background: #344194; } .feature_single-item.style_one { background: #011875; padding: 16px 40px 7px 30px; border-radius: 5px; margin-bottom: 30px; position: relative; z-index: 1; } .feature_single-item.style_one:after { position: absolute; content: "'"; left: 0; top: 0; height: 100%; width: 0%; background: #0577FE; z-index: -1; border-radius: 5px; transition: .5s; } .feature_single-item.style_one:hover:after { width: 100%; } .feature_single-item.style_one:before { position: absolute; content: "'"; left: -40px; top: 50px; width: 14px; height: 14px; border-radius: 7px; border: 2px solid #344194; transition: .5s; } .feature_single-item.style_one:hover:before { background: #077EFF; border: 2px solid #077EFF; } .feature-icons { float: left; margin-right: 25px; display: inline-block; position: relative; margin-top: 14px; } .feature-icons:before { position: absolute; content: ""; left: -57px; top: 27px; height: 2px; width: 27px; background: #344194; } .feature-contents { overflow: hidden; } h3.feature_title { font-size: 22px; color: #ffffff; font-weight: 600; font-family: "Urbanist"; margin-bottom: 13px; } .feature-contents p { font-size: 16px; line-height: 26px; color: #ccd0e2; font-weight: 400; font-family: "Mulish"; } /* feature thumb */ .feature_thumb { position: relative; margin-left: 86px; } .feature_thumb1 { position: absolute; top: 46%; right: 36px; } .feature_thumb2 { position: absolute; top: 50%; left: 24px; } /* */ .testimonial-area { background: #000D66; padding: 100px 0 190px; position: relative; z-index: 1; overflow: hidden; } .testimonial-area .section-title p { color: #fff; width: 80%; } .testimonial-single-item { background: #011875; padding: 30px 30px 30px; position: relative; border-radius: 5px; z-index: 1; } .testimonial-single-item::after { position: absolute; content: ""; right: 0%; top: 0; height: 100%; width: 0%; background: #056FFF; border-radius: 5px; z-index: -1; transition: .5s; } .testimonial-single-item:hover:after { width: 100%; left: 0%; } .testimonial-single-item:before { position: absolute; content: ""; left: 0; bottom: 89px; height: 1px; width: 100%; background: #ffffff1c; } .testi-author { display: flex; } .testi-author-thumb { margin-right: 20px; } h4.name { font-size: 22px; color: #ffffff; font-weight: 600; font-family: "Urbanist"; } h5.designation { font-size: 16px; color: #ccd0e2; font-weight: 400; font-family: "Mulish"; } .testimonial-content p { color: #ffffff; margin: 22px 0 57px; } .testi-brand img { transition: .5s; } .testi-rating { position: absolute; bottom: 31px; right: 30px; transition: .5s; } .testi-rating span { color: #FDA200; margin-left: 3px; transition: .5s; } /* */ .testimonial_list .owl-dots { position: absolute; bottom: -78px; text-align: center; right: 0; left: 0; margin: auto; } .testimonial_list .owl-dot { width: 10px; height: 10px; border-radius: 5px; background-color: rgba(19,132,255,0.30196078431372547); display: inline-block; margin-right: 10px; } .testimonial_list .owl-dot.active { background-image: linear-gradient(113deg, #0f58ff 0%, #1387ff 100%); } /* all shape */ .testi-shape1 { position: absolute; bottom: 47px; left: 7%; z-index: -1; } .testi-shape2 { position: absolute; bottom: -6%; right: 0; z-index: -1; } .testi-shape3 { position: absolute; top: 19%; right: 39%; z-index: -1; } /* all hover */ .testimonial-single-item:hover .testi-rating span { color: #fff; } .testimonial-area .testimonial-single-item:hover .testi-brand img { filter: grayscale(1) brightness(3); } .testimonial-area .owl-item.active.center .testimonial-single-item::after { width: 100%; } .testimonial-area .owl-item.active.center .testi-rating span { color: #fff; } .testimonial-area .owl-item.active.center h5.designation { color: #fff; } .testimonial-area .owl-item.active.center .testi-brand img { filter: grayscale(1) brightness(3); } /* */ .faq-area { background: #000D65; padding: 0px 0 55px; } .row.faq_home_one_bg { background: url(../images/home/resource/faq_bg.png); margin: 0; padding: 80px 38px 56px; background-repeat: no-repeat; background-size: cover; background-position: center center; position: relative; z-index: 1; border-radius: 0 0 10px 10px; } /*accordion*/ .accordion li { list-style: none; padding: 2px 0px 15px; position: relative; z-index: 1; } .active .accordion li:before { background-color: rgba(255, 255, 255, 0.10196078431372549) !important; } .accordion li a { position: relative; width: 100%; display: block; cursor: pointer; color: #fff !important; border-bottom: 1px solid rgba(255,255,255,0.10196078431372549); padding: 7px 20px 25px 35px; z-index: 1; font-size: 20px; line-height: 26px; font-weight: 500; font-family: "Urbanist"; } .accordion li p { padding: 0px 65px 10px 0px; margin: 0; background: transparent; font-size: 16px; line-height: 26px; color: #ccd0e2; font-weight: 400; font-family: "Mulish"; display: none; } .accordion a:before { width: 2px; height: 10px; background: #fff; position: absolute; right: 32px; content: " "; top: 19px; transform: rotate(0deg); transition: all 0.2s ease-in-out; } .accordion a:after { width: 10px; height: 2px; background: #fff; position: absolute; right: 28px; content: " "; top: 23px; transition: all 0.2s ease-in-out; } .accordion a.active:after { transform: rotate(0deg); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; background: #fff; } .accordion a.active:before { display: none; } .accordion a.active { color: #fff !important; border-top: none; border-bottom: none; } .accordion li a span { position: relative; z-index: 1; } .accordion li a span:after { position: absolute; content: ""; z-index: -1; left: -35px; top: 0px; width: 100%; height: 100%; background: url(../images/home/resource/question.png); background-repeat: no-repeat; background-size: contain; background-position: left; } /* faq thumb */ .faq_thumb { position: relative; margin-left: 107px; } .faq-thumb2 { position: absolute; top: 30%; right: 37%; } /* */ .blog-area { background: #000D65; padding: 48px 0 90px; } .blog-area.style_eleven { padding: 100px 0 90px; } .blog-area .section-title p { color: #fff; } .single-blog-box { overflow: hidden; transition: .5s; margin-bottom: 30px; } .single-blog-thumb img { width: 100%; transition: .5s; } /* meta blog */ .meta-blog{ border-radius: 4px; background-image: linear-gradient(113deg, #0f58ff 0%, #1387ff 100%); position: absolute; padding: 14px 20px 14px; margin: 0px; top: -30px; transition: .5s; } .meta-blog p { margin: 0; color: #fff !important; } .meta-blog p span i { margin-right: 10px; font-size: 14px; } span.meta-style { margin-left: 59px; position: relative; } span.meta-style:before { position: absolute; content: ""; left: -30px; top: 0; width: 1px; height: 20px; background-color: rgba(255,255,255,0.30196078431372547); } .blog-content { background: #011974; padding: 40px 40px 22px; position: relative; border-radius: 0 0 10px 10px; } .blog-content::before { position: absolute; content: ""; left: 0; bottom: 65px; height: 1px; width: 100%; background: rgba(255,255,255,0.10196078431372549); } .blog-title h3 a { display: inline-block; font-size: 24px; line-height: 30px; color: #ffffff; font-weight: 600; font-family: "Urbanist"; margin-bottom: 10px; } .blog-title h3 a:hover { color: #F98323; } .blog-content p { color: #ccd0e2; } .blog-btn { margin-top: 48px; } a.blog-button { font-size: 16px; color: #ffffff; font-weight: 400; font-family: "Mulish"; } a.blog-right-btn { color: #fff; font-size: 16px; width: 66px; height: 66px; background-image: linear-gradient(113deg, #0f58ff 0%, #1387ff 100%); position: absolute; right: 0px; bottom: 0px; line-height: 66px; text-align: center; border-radius: 0 0 10px 0; transform: translate(30%, 30%); opacity: 0; transition: .5s; } /* all hover */ .single-blog-box:hover a.blog-right-btn { transform: translate(0%, 0%); opacity: 1; } .single-blog-box:hover .meta-blog { background-image: linear-gradient(113deg, #1387ff 0%, #0f58ff 100%); } .single-blog-box:hover .single-blog-thumb img { transform: scale(1.1); } /* ===================================================== -->*/ .brand-area { background: #046EFE; padding: 80px 0 80px; } .brand-single-item { border: 1px solid rgb(255 255 255 / 14%); padding: 30px 0px 30px; text-align: center; transition: .5s; } .brand-single-item:hover { border: 1px solid #fff; } .brand-thumb img { display: inline-block !important; } /* ===================================================== -->*/ .footer-area { background: url(../images/home/resource/footer_bg.jpg); padding: 105px 0 7px; background-repeat: no-repeat; background-size: cover; background-position: center center; } p.footer-desc { font-size: 16px; line-height: 26px; color: #ffffff; margin-top: 27px; } h3.footer-follow-title { font-size: 18px; color: #ffffff; font-weight: 500; position: relative; z-index: 1; padding-left: 35px; margin: 35px 0 26px; } h3.footer-follow-title:before { position: absolute; content: ""; left: 0; top: 8px; width: 25px; height: 2px; background-color: #0c7fff; } .footer-widget-social-icon ul li { display: inline-block; margin-right: 6px; } .footer-widget-social-icon ul li a { display: inline-block; width: 36px; height: 36px; border-radius: 18px; background-image: linear-gradient(113deg, #0f58ff 0%, #1387ff 100%); color: #fff; line-height: 36px; text-align: center; font-size: 15px; border: 1px solid transparent; } .footer-widget-social-icon ul li a:hover { border: 1px solid #fff; background: transparent; } .footer-widget-title h4 { font-size: 24px; color: #ffffff; font-weight: 600; font-family: "Urbanist"; margin-bottom: 32px; } /* footer menu */ .footer-widget-menu ul li a { display: inline-block; font-size: 16px; color: #ffffff; font-weight: 300; font-family: "Mulish"; margin-bottom: 12px; } .footer-widget-menu.hover ul li a:hover { color: #0781ff; } .footer-widget-menu ul li a i { font-size: 12px; color: #1388FE; position: relative; top: 0px; margin-right: 8px; } /* footer form */ p.subscribe_title { opacity: 0.400; font-size: 16px; color: #ffffff; font-weight: 400; font-family: "Mulish"; margin-bottom: 12px; } .subscribe_form { position: relative; } .subscribe_form input { width: 100%; height: 66px; border-radius: 5px; background-color: transparent; border: 1px solid rgba(255,255,255,0.2); outline: 0; color: #fff !important; } .subscribe_form input::placeholder { opacity: 0.502; font-size: 15px; color: #ffffff; font-weight: 300; font-family: "Mulish"; } .subscribe_form .form-control:focus { color: #212529; background-color: transparent; border-color: none; outline: 0; } .subscribe_form button.btn { border-radius: 3px; background-image: linear-gradient(113deg, #0f58ff 0%, #1387ff 100%); font-size: 14px; line-height: 26px; color: #ffffff; font-weight: 500; font-family: "Mulish"; text-transform: uppercase; position: absolute; right: 9px; top: 8px; padding: 11px 25px; } h6.payment-title { font-size: 18px; color: #ffffff; font-weight: 500; font-family: "Urbanist"; margin: 28px 0 20px; } .subscribe_payment a { display: inline-block; border: 1px solid rgba(255,255,255,0.2); padding: 5px 20px; border-radius: 4px; margin-right: 6px; } /* footer bottom */ .footer-bottom-content { text-align: center; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 22px; margin-top: 119px; } .footer-bottom-content-copy p { font-size: 16px; line-height: 26px; color: #ffffff; font-weight: 300; font-family: "Mulish"; } /* ===================================================== -->*/ .slider-area.home_one { background: url(../images/home1/resource/banner1.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; height: 900px; position: relative; z-index: 1; } .slider-content.style_one h4 { font-size: 17px; background: #003ec5; border-radius: 20px; padding: 12px 20px; padding-left: 40px; z-index: 1; margin-bottom: 10px; } .slider-content.style_one h4:before { background: url(../images/home1/resource/hero-icon1.png); background-repeat: no-repeat; left: 16px; top: 12px; z-index: -1; } .slider-content.style_one h1 { font-size: 50px; line-height: 60px; color: #ffffff; font-weight: 700; } .slider-content.style_one p { color: #fff; font-weight: 500; width: 80%; font-size: 18px; margin: 15px 0 42px; } /* hero button */ .hosting-button.style_one { margin-right: 40px; } .hosting-button.style_one a { background: #fe8731; padding: 14px 35px; } .slider_video a { font-size: 17px; color: #ffffff; font-weight: 500; font-family: "Mulish"; width: 60px; height: 60px; border-radius: 30px; background-color: #1356e4; display: inline-block; line-height: 60px; text-align: center; -webkit-animation: ripple-white 1s linear infinite; animation: ripple-blue 1s linear infinite; } @-webkit-keyframes ripple-blue { 0% { -webkit-box-shadow: 0 0 0 0 rgba(19,86,228, 0.3), 0 0 0 10px rgba(19,86,228, 0.3), 0 0 0 20px rgba(19,86,228, 0.3); box-shadow: 0 0 0 0 rgba(19,86,228, 0.3), 0 0 0 10px rgba(19,86,228, 0.3), 0 0 0 20px rgba(19,86,228, 0.3) } 100% { -webkit-box-shadow: 0 0 0 10px rgba(19,86,228, 0.3), 0 0 0 20px rgba(19,86,228, 0.3), 0 0 0 30px rgba(19,86,228, 0); box-shadow: 0 0 0 10px rgba(19,86,228, 0.3), 0 0 0 20px rgba(19,86,228, 0.3), 0 0 0 30px rgba(19,86,228, 0) } } @keyframes ripple-blue { 0% { -webkit-box-shadow: 0 0 0 0 rgba(19,86,228, 0.3), 0 0 0 10px rgba(19,86,228, 0.3), 0 0 0 20px rgba(19,86,228, 0.3); box-shadow: 0 0 0 0 rgba(19,86,228, 0.3), 0 0 0 10px rgba(19,86,228, 0.3), 0 0 0 20px rgba(19,86,228, 0.3) } 100% { -webkit-box-shadow: 0 0 0 10px rgba(19,86,228, 0.3), 0 0 0 20px rgba(19,86,228, 0.3), 0 0 0 30px rgba(19,86,228, 0); box-shadow: 0 0 0 10px rgba(19,86,228, 0.3), 0 0 0 20px rgba(19,86,228, 0.3), 0 0 0 30px rgba(19,86,228, 0) } } .hero-left.style_one { margin-top: 40px; left: 90px; } .hero_thumb-shpe.style_one { top: 23%; right: 138px; } /* hero shape */ .slider_shpe_1.style_1 { top: 20%; left: 34%; } .slider_shpe_2.style_2 { top: 21%; right: 40%; } .slider_shpe_3.style_3 { top: 41%; right: 8%; } /* */ .domain-area.home_one { background: #F6F4F5; margin-top: -104px; } .row.domain_bg.style-one { background: #fff; padding: 70px 230px 70px; border-radius: 10px; text-align: center; } .domain-right.style_one form input { display: inline; border: 1px solid #dadada; height: 66px; } button.src-icon.style_one { background: #fe8731; position: absolute; right: 8px; top: 6px; font-family: "Mulish"; padding: 13px 24px; border-radius: 4px; font-size: 17px; } button.src-icon.style_one i { float: right; margin-left: 10px; } .domain-list.style_one { margin-top: 30px; } /* domain content */ .domain-single-item.style_one { filter: drop-shadow(0 0 23px rgba(1,37,73,0.09)); background-color: #fff; margin-right: 20px; padding: 2px 20px 10px; border-bottom: 1px solid transparent; transition: .5s; } .domain-single-item.style_one:hover{ border-bottom: 1px solid #1356e4; } h5.domain-title.style_one { color: #f98223; font-weight: 600; } .domain-content.style_one span { font-size: 13px; color: #636363; font-weight: 500; } /* */ .feature-area.home_one { background: #F6F4F5; padding: 110px 0 90px; } .feature-single-box.style-one { border-radius: 5px; background: url(../images/home1/resource/feature-img.png); padding: 35px 35px 27px; position: relative; z-index: 1; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center center; margin-bottom: 30px; } .feature-single-box.style-one::before { position: absolute; content: ""; right: 50%; top: 0; background: url(../images/home1/resource/feautre-img1.png); height: 100%; width: 0%; z-index: -1; background-repeat: no-repeat; background-position: center center; transition: .5s; border-radius: 5px; background-size: cover; } .feature-single-box.style-one:hover:before { right: 0%; width: 100%; } h3.feature-title.style_1.style { font-size: 22px; color: #041341; font-weight: 700; font-family: "Urbanist"; margin: 26px 0 17px; transition: .5s; } .feature-content p { font-size: 17px; line-height: 28px; color: #636363; transition: .5s; } .feature_btn { margin-top: 2px; } .feature_btn a { display: inline-block; font-size: 17px; color: #041341; font-weight: 500; font-family: "Mulish"; transition: .5s; } .feature_btn a i { font-size: 16px; margin-left: 10px; } /* all hover */ .feature-single-box.style-one:hover h3.feature-title.style_1.style { color: #ffff; } .feature-single-box.style-one:hover .feature-content p { color: #ffff; } .feature-single-box.style-one:hover .feature_btn a { color: #ffff; } /* */ .pricing-area.style_one { background: #fff; padding: 108px 0 60px; } .tab { position: relative; overflow: hidden; -webkit-font-smoothing: antialiased; text-align: center; } .tabs { display: inline-block; position: relative; overflow: hidden; margin: 0; background: #F6F4F5; padding: 5px 9px; border-radius: 20px; margin-bottom: 20px; } .tabs li { float: left; overflow: hidden; padding: 0; position: relative; } .tabs li a { outline: none; padding: 2px 18px; transition: all 0.2s ease-in-out; font-size: 16px; color: #fe8731; font-weight: 600; font-family: "Mulish"; display: inline-block; border-radius: 20px; } .tabs_item { display: none; padding: 30px 0; } .tabs_item:first-child { display: block; } li.current a { background: #fe8731 !important; color: #fff; } /* pricing single items */ .pricing-single-items.style_one.style_tow { background: url(../images/home1/resource/pricing-img.png); background-repeat: no-repeat; background-size: cover; background-position: center center; margin-left: 20px; padding: 60px 25px 40px; text-align: left; } .pricing-single-items.style_one.style_tow:after { background: url(../images/home1/resource/pricing-img2.png); background-repeat: no-repeat; background-size: cover; background-position: center center; } .pricing-single-items.style_one.style_tow:before { content: ""; position: absolute; left: -21px; top: 89px; transform: rotate(0deg); border-top: 22px solid #C95A01; border-left: 26px solid transparent; transition: .5s; background: radial-gradient(black, transparent); transition: .5s; height: 0; width: 0; margin: initial; clip-path: polygon(0% 0%, 87% 0%, 79% 100%, 0% 100%); } h3.pricing-plan { position: absolute; top: 29px; left: -20px; background-color: #fe8731; padding: 13px 47px; font-size: 22px; color: #ffffff; font-weight: 700; font-family: "Urbanist"; clip-path: polygon(0% 0%, 87% 0%, 97% 100%, 0% 100%); padding-left: 60px; } .pricing-money h3 { font-size: 32px; color: #041341; font-weight: 700; font-family: "Urbanist"; margin: 68px 0 24px; } p.pricing-text { font-size: 17px; color: #636363; font-weight: 400; font-family: "Mulish"; transition: .5s; } .pricing-body.style_one { margin-top: 38px; } .pricing-body.style_one:before { display: none; } .pricing-feature.style_1 ul li { font-size: 15px; color: #636363; font-weight: 400; font-family: "Mulish"; margin-bottom: 15px; position: relative; z-index: 1; padding-left: 25px; transition: .5s; } .pricing-feature.style_1 ul li:before { position: absolute; content: ""; left: 0; top: 7px; width: 13px; height: 13px; border-radius: 7px; background-color: #f98223; z-index: -1; } .pricing-btn.style_one { margin-top: 40px; } .pricing-btn.style_one a { display: inline-block; border: 1px solid #F98323; padding: 10px 99px; color: #F98323; border-radius: 5px; } .pricing-btn.style_one a:after { background: #F98323; border-radius: 5px; } .pricing-single-items.style_one.style_tow:hover .pricing-btn.style_one a { color: #fff; border: 1px solid #F98323; } .pricing-single-items.style_one.style_tow:hover .pricing-feature.style_1 ul li { color: #fff; } .pricing-single-items.style_one.style_tow:hover .pricing-money h3 { color: #fff; } .pricing-single-items.style_one.style_tow:hover p.pricing-text { color: #fff; } /* */ .proved-area { background: url(../images/home1/resource/proved_bg.png); background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 15px 0 15px; } .proved-area .section-title p { width: 85%; color: #fff; } .proved-btn a { display: inline-block; font-size: 17px; color: #ffffff; font-weight: 500; font-family: "Mulish"; background: #fe8731; padding: 13px 29px; margin-right: 16px; border-radius: 5px; border: 1px solid #fe8731; position: relative; z-index: 1; } .proved-btn a:after { position: absolute; content: ""; height: 100%; width: 0%; background: #fff; left: 0; top: 0; z-index: -1; transition: 0.5s; transform: scale(0); opacity: 0; border-radius: 5px; } .proved-btn a:hover { color: #fe8731; border: 1px solid #ffff; } .proved-btn a:hover:after { transform: scale(1); opacity: 1; height: 100%; width: 100%; } a.proved-active { background: transparent; border: 1px solid #fff; } /* proved thumb */ .proved-thumb { position: relative; text-align: right; } .proved-img { position: absolute; top: 104px; left: 31%; } /* */ .service-area { padding: 58px 0 50px; background: #F6F4F5; } .service-single-box { background: url(../images/home1/resource/service-img.png); text-align: center; padding: 35px 30px 40px; margin-bottom: 30px; position: relative; z-index: 1; border-radius: 5px; background-repeat: no-repeat; background-size: cover; background-position: center center; } .service-single-box:before { position: absolute; content: ""; right: 50%; top: 0; height: 100%; width: 0%; background: url(../images/home1/resource/service-img1.png); z-index: -1; transition: .5s; border-radius: 5px; background-repeat: no-repeat; background-size: cover; background-position: center center; } .service-single-box:hover:before { width: 100%; right: 0%; } h3.service-title { font-size: 22px; color: #041341; font-weight: 700; font-family: "Urbanist"; padding: 14px 0 16px; } .service-content p { transition: .5s; } .hosting-button.style_tow { margin-top: 32px; } .hosting-button.style_tow a { display: inline-block; border: 1px solid #FF8731; background: transparent; color: #FF8731; padding: 9px 31px; } .hosting-button.style_tow a:hover { color: #fff; border: 1px solid #FF8731 !important; } /* all hver */ .service-single-box:hover h3.service-title { color: #ffff; } .service-single-box:hover .service-content p { color: #ffff; } .service-single-box:hover .hosting-button.style_tow a{ border: 1px solid #fff; background: transparent; color: #ffff; } /* */ .why-choose-area { background: url(../images/home1/resource/choose_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 80px 0 70px; } .why-choose-single-item { background: #F6F4F5; display: flex; align-items: center; margin-bottom: 30px; position: relative; z-index: 1; padding: 30px 30px 30px; border-radius: 5px; } .why-choose-single-item::before { position: absolute; background: url(../images/home1/resource/choose--img.png) repeat no-repeat; content: ""; left: 0; top: 0; height: 100%; width: 0%; z-index: -1; border-radius: 5px; transition: .5s; background-repeat: no-repeat; background-size: cover; background-position: center center; } .why-choose-single-item:hover:before { width: 100%; } .why-choose-icon { width: 155px; height: 95px; border-radius: 50%; background-color: #ffffff; margin-right: 25px; display: inline-block; line-height: 90px; text-align: center; transition: .5s; } h3.choose-title { font-size: 22px; color: #041341; font-weight: 700; font-family: "Urbanist"; margin-bottom: 11px; margin-top: 0; transition: .5s; } .why-choose-content p { margin: 0; transition: .5s; } .choose-thumb { text-align: right; position: relative; bottom: -71px; } /* all hover */ .why-choose-single-item:hover .why-choose-icon { background: #FF8731; } .why-choose-single-item:hover h3.choose-title { color: #fff; } .why-choose-single-item:hover .why-choose-content p { color: #fff; } /* */ .category-area.style_one { background: url(../images/home1/resource/category_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; } .category_single-item.style_one { background: #263FC0; border-radius: 5px; padding: 12px 10px 12px; margin-bottom: 30px; background-color: #003ec5; border: 1px dashed #3f7dff; display: flex; align-items: center; position: relative; z-index: 1; } .category_single-item.style_one:before { position: absolute; content: ""; left: 20%; top: 0; height: 65px; border: 1px dashed #3f7dff; } .category-icon.style_one { margin-right: 35px; } .category-title.style_one h3 { font-size: 22px; color: #ffffff; font-weight: 700; font-family: "Urbanist"; margin: 0; } /* */ .testimonial-area.style_one { background: #F6F4F5; padding: 110px 0 150px; } .testimonial-single-item.style_one { background: url(../images/home1/resource/testi_thumb.png); background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 30px 20px 27px 40px; transition: .5s; } .testimonial-single-item.style_one:before { display: none; } .testimonial-single-item.style_one::after { background: url(../images/home1/resource/testi_thumb2.png); background-repeat: no-repeat; background-size: cover; } h4.name.style_1 { font-size: 22px; color: #041341; font-weight: 700; font-family: "Urbanist"; transition: .5s; } h5.designation.style_one { color: #636363; margin-top: 7px; transition: .5; } .testimonial-content.style_one p { font-size: 17px; color: #636363; font-weight: 400; font-family: "Mulish"; margin: 22px 0 0px; transition: .5s; } .testi-rating.style_one { top: 17%; right: 25%; transition: .5s; } /* all hover */ .testimonial-single-item.style_one:hover h4.name.style_1{ color: #fff; } .testimonial-single-item.style_one:hover h5.designation.style_one{ color: #fff; } .testimonial-single-item.style_one:hover .testimonial-content.style_one p{ color: #fff; } .testi_list .owl-nav { position: relative; left: 0; right: 0; margin: auto; text-align: center; top: 30px; } .testi_list .owl-prev { display: inline-block; margin-right: 20px; width: 40px; height: 40px; border-radius: 21px; background-color: transparent; line-height: 37px; font-size: 16px; color: #FE8733; border: 2px solid #FE8733; text-align: center; } .testi_list .owl-next { display: inline-block; width: 40px; height: 40px; border-radius: 21px; background-color: transparent; line-height: 37px; font-size: 16px; color: #FE8733; border: 2px solid #FE8733; text-align: center; } .testi_list .owl-prev:hover { background: #1356e4; color: #fff; border: 2px solid #1356e4; } .testi_list .owl-next:hover { background: #1356e4; color: #fff; border: 2px solid #1356e4; } /* */ .blog-area.style_one { background: #fff; padding: 110px 0 90px; } .blog-area.style_one.style_nine { background: #F5F8FD; } .single-blog-box.style_one .blog-content { background: url(../images/home1/resource/blog-content-img.png); background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 25px 40px 27px; border-bottom: 1px solid #fe8731; transition: .5s; } .blog-date p { position: absolute; top: -25px; font-size: 18px; color: #ffffff; font-weight: 500; font-family: "Yantramanav"; right: 0; background-color: #fe8731; padding: 11px 33px; border-radius: 30px 0 0px 30px; } .meta-blogs p { color: #636363; margin-bottom: 0; } .meta-blogs p a { display: inline-block; font-size: 16px; color: #636363; font-weight: 400; font-family: "Mulish"; margin-right: 30px; } .single-blog-box.style_one .blog-title h3 a { font-size: 22px; line-height: 32px; color: #041341; font-weight: 700; font-family: "Urbanist"; display: inline-block; } .single-blog-box.style_one .blog-title h3 a:hover { color: #1356E4; } .blog-btn.style-one { margin-top: 3px; } .blog-btn.style-one a { display: inline-block; font-size: 17px; color: #041341; font-weight: 500; font-family: "Mulish"; } .blog-btn.style-one a i { margin-left: 8px; font-size: 16px; } /* all hover */ .single-blog-box.style_one:hover .blog-btn.style-one a { color: #1356E4; } .single-blog-box.style_one:hover .blog-content { border-bottom: 1px solid #1356E3; } /* */ .footer-area.style_one { padding: 120px 0 60px; background: url(../images/home1/resource/footer_bg1.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; } p.footer-desc.style { width: 88%; } .footer-widget-social-icon.style_one{ margin-top: 28px; } .subscribe_form.style-one { margin-top: 39px; } .subscribe_form.style-one input { width: 100%; height: 56px; border-radius: 28px; background-color: #ffffff; padding: 0 20px; margin-bottom: 30px; } .subscribe_form.style-one input::placeholder { font-size: 16px; color: #636363; font-weight: 400; font-family: "Mulish"; opacity: 1; } .subscribe-btn button { width: 100%; height: 56px; border-radius: 28px; background-color: #fe8731; outline: 0; border: none; font-size: 16px; color: #ffffff; font-weight: 600; font-family: "Mulish"; text-align: center; text-transform: uppercase; } .row.footer_bottom_bg { background-color: #0042d3; margin: 0; padding: 20px 48px 20px; margin-top: 100px; border-radius: 5px; } h6.payment-title.style_one { float: left; margin: 20px 0 20px; margin-right: 20px; } .subscribe_payment.style-one ul li { display: inline-block; margin-right: 15px; } .footer-bottom-right { text-align: right; } .footer-bottom-right a { font-size: 16px; color: #ffffff; font-weight: 500; font-family: "Mulish"; display: inline-block; margin-left: 44px; position: relative; z-index: 1; } .footer-bottom-right a:hover { color: #fe8731; } .footer-bottom-right a:before { position: absolute; top: 6px; right: -25px; content: ""; width: 1px; height: 20px; background-color: #ffffff; z-index: -1; } a.border-none:before { display: none; } /* */ /* Start Slider Style three */ .hosting_nav_manu.style_three { border: none; margin-bottom: -130px; } .slider-area.home_three { background: url(../images/home3/resource/banner.png); height: 950px; background-repeat: no-repeat; background-size: cover; background-position: center center; } .row.style_3_bg { border-radius: 5px; background-color: #ffffff; margin: 0; padding: 0 8px 0 13px; } .slider-area.home_three .slider-content h1 { font-size: 70px; line-height: 80px; color: #ffffff; font-weight: 700; font-family: "Urbanist"; } .slider-area.home_three .slider-content p { width: 72%; margin: 26px 0 44px; font-size: 18px; color: #fff; } .slider-area.home_three .hosting-button { margin-top: 0; } .hosting-button.style_one.style_2 a { display: inline-block; border-radius: 27px; background-image: linear-gradient(90deg, #f98123 0%, #ff0965 100%); padding: 13px 30px; font-size: 14px; color: #ffffff; } .hosting-button.style_one.style_2 a:after { background: linear-gradient(90deg, #ff0965 0%, #f98123 100%); border-radius: 27px; } /* */ .feature-area.home_three { background: #fff; padding: 100px 0 90px; } .feature-single-box.style-one.style_tow { text-align: center; background: #F8F8F8; padding: 50px 23px 27px; } .feature-single-box.style-one.style_tow:before { background: url(../images/home3/resource/feature_thumb.png); background-repeat: no-repeat; } .feature-single-box.style_tow .feature-content p { color: #636363; transition: .5s; } .feature-icon.style-one { width: 65px; height: 65px; border-radius: 33px; background-color: #edf0f7; line-height: 65px; display: inline-block; } .feature-single-box.style_tow:hover .feature-content p { color: #fff; } /* */ .domain-area.style_2 { margin-top: 0; background: url(../images/home3/resource/domain_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 190px 0 195px; } .domain-area.style_2 .section-title { margin-bottom: 30px; } .domain-right.style_one.style_2 form input { height: 60px; border-radius: 30px; } .domain-single-item.style_one.style_2 { background-color: transparent; margin-right: 45px; padding: 0; border: none; } .domain-content.style_one.style_2 h5 { font-size: 22px; color: #fefefe; font-weight: 500; } .domain-content.style_one.style_2 span { font-size: 13px; color: #fefefe; font-weight: 400; font-family: "Mulish"; } select.select_box.style_one { position: absolute; top: 17px; right: 25%; color: #190E5C; z-index: 1; } button.src-icon.style_one.style-2 { width: 157px; height: 60px; background-image: linear-gradient(90deg, #f98123 0%, #ff0965 100%); border-radius: 0 30px 30px 0px; padding: 0px 19px; font-size: 16px; color: #ffffff; font-weight: 500; top: 0; right: 0px; transition: .5s; } button.src-icon.style_one.style-2:hover { background-image: linear-gradient(90deg, #ff0965 0%, #f98123 100%); } button.src-icon.style_one.style-2 i { margin-right: 20px; } /* */ .pricing-area.style_3 { background: #F8F8F8; } .pricing-area.style_3 .section-title.text-center p { width: 57%; color: #636363; } .pricing-area.style_3 .tabs { background: #fff; padding: 7px 10px; border-radius: 30px; margin-bottom: 20px; } .pricing-area.style_3 .tabs li a { outline: none; padding: 10px 28px; transition: all 0.2s ease-in-out; display: inline-block; border-radius: 25px; font-size: 15px; color: #041341; font-weight: 500; } .pricing-area.style_3 li.current a { background-color: #114FDD !important; color: #fff !important; } /* pricing single box */ .pricing-single-items.style_one.style_3 { margin-left: 0; background: #fff; padding: 35px 40px 50px; } .pricing-single-items.style_one.style_3:after { background-image: linear-gradient(-58deg, #001dab 0%, #1355e3 80%, #1355e3 100%); } .pricing-single-items.style_one.style_3:before { display: none; } .pricing-single-items.style_one.style_3 h3.pricing-plan2 { font-size: 22px; color: #041341; font-weight: 700; transition: .5s; } .pricing-single-items.style_one.style_3 .pricing-money h3 { font-family: "Urbanist"; margin: 20px 0 30px; font-size: 45px; color: #001eb1; font-weight: 700; } .pricing-single-items.style_one.style_3 .pricing-money h3 span { font-size: 20px; color: #061242 !important; font-weight: 700; transition: .5s; } .pricing-single-items.style_one.style_3 .pricing-body { margin-top: 55px; } .pricing-single-items.style_one.style_3 .pricing-body:before { height: 1px; width: 100%; background: #d7d4d44f; top: -29px; left: 0; } .pricing-single-items.style_one.style_3 .pricing-feature.style_1 ul li:before { display: none; } .pricing-single-items.style_one.style_3 .pricing-feature ul li { padding-left: 0; transition: .5s; font-size: 16px; color: #041341; } .pricing-single-items.style_one.style_3 .pricing-feature ul li i { height: 16px; width: 16px; line-height: 17px; background: #001FAE; border-radius: 50%; color: #fff; display: inline-block; text-align: center; font-size: 15px; margin-right: 15px; transition: .5s; } .pricing-single-items.style_one.style_3 .pricing-btn a { border: 1px solid transparent; padding: 12px 40px; border-radius: 30px; font-size: 14px; color: #fff; font-weight: 500; background-image: linear-gradient(-58deg, #001dab 0%, #1355e3 80%, #1355e3 100%); } .pricing-single-items.style_one.style_3:hover .pricing-btn a { color: #001dab; } .pricing-single-items.style_one.style_3 .pricing-btn a:after { border-radius: 30px; } .pricing-single-items.style_one.style_3 .pricing-btn { margin-top: 33px; } /* all hover */ .pricing-single-items.style_one.style_3:hover h3.pricing-plan2 { color: #fff; } .pricing-single-items.style_one.style_3:hover .pricing-money h3 span { color: #ffff !important; } .pricing-single-items.style_one.style_3:hover .pricing-feature ul li i { background: #fff; color: #062FBD; } /* */ .about-area.style_one { background: url(../images/home3/resource/abut_bg.png); background-repeat: no-repeat; background-size: cover; background-position: center center; margin-top: 0; } .about-area.style_one .section-title.style_one { margin-bottom: 40px; padding-bottom: 18px; } .about-icon { float: left; margin-right: 20px; position: relative; margin-top: 8px; } .about-content { overflow: hidden; } .about-content h3 { font-size: 23px; color: #ffffff; font-weight: 500; margin-bottom: 12px; } .about-content p { color: #ffffffe6; } /* */ .proved-area.style_one { background: #fff; padding: 20px 0 120px; } .row.proeved-upper { background: url(../images/home3/resource/hostting_bg.png); background-repeat: no-repeat; background-size: cover; background-position: center center; margin: 0; filter: drop-shadow(0px 10px 15px rgba(102,102,102,0.1)); padding: 100px 37px 100px; border-radius: 10px; } .proved-area.style_one .section-title { margin-bottom: 18px; } .proved-area.style_one .section-title p { color: #636363; width: 96%; } p.proved-contant { font-size: 16px; color: #041341; font-weight: 600; } .proved-btn.style_one { margin-top: 27px; } .proved-btn.style_one a { font-size: 14px; color: #ffffff; font-weight: 500; background-image: linear-gradient(-58deg, #001dab 0%, #1355e3 80%, #1355e3 100%); border: 1px solid transparent; border-radius: 25px; padding: 10px 34px; } .proved-btn.style_one a:hover { color: #001dab; } .proved-btn.style_one a:after { border-radius: 25px; } .proved-btn.style_one a img { margin-right: 10px; } /* */ .service-area.style_one { padding: 100px 0 90px; background: url(../images/home3/resource/service_bg.jpg); } .service-area.style_one .section-title.text-center p { width: 59%; color: #ffffffbf; } .service-single-box.style_1 { background: transparent; border: 1.5px solid #ffffff38; padding: 50px 30px 40px; transition: .5s; } .service-single-box.style_1:hover { border: 1px solid transparent; } .service-single-box.style_1:before { background: url(../images/home3/resource/service_img.png); background-repeat: no-repeat; background-size: cover; background-position: center center; } .service-single-box.style_1 h3.service-title { color: #fff; padding: 25px 0 17px; } .service-single-box.style_1 .service-content p { color: #fff; } .service-single-box.style_1 .hosting-button a { display: inline-block; font-size: 14px; color: #ffffff; font-weight: 500; background: transparent; text-transform: uppercase; margin-top: 7px; padding: 0; } .service-single-box.style_1 .hosting-button a:after { display: none; } /* */ .testimonial-area.style_two { background: url(../images/home3/resource/testi_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 100px 0 180px; } .testimonial-area.style_two { background: url(../images/home3/resource/testi_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; } .testimonial-area.style_two .section-title p { color: #636363; width: 92%; margin-left: 40px; } /* testimonial single item */ .testimonial-single-item.style_2 { padding: 35px 43px 40px 40px; background: #ffff; } .testimonial-single-item.style_2:after { display: none; } .testimonial-single-item.style_2 .testi-rating { position: initial; transition: .5s; } .testimonial-single-item.style_2 .testi-rating span { color: #0F4AD8; font-size: 18px; } .testimonial-single-item.style_2 .testimonial-content p { color: #636363; margin: 20px 0 26px; } .testimonial-single-item.style_2 h4.name { font-size: 20px; color: #041341; font-weight: 700; margin-top: 5px; } .testimonial-single-item.style_2 h5.designation { color: #636363; margin-top: 9px; } .testi_list2 .owl-dots { position: absolute; left: 0; right: 0; margin: auto; text-align: center; bottom: -69px; } .testi_list2 .owl-dot { width: 10px; height: 10px; border-radius: 5px; background-color: #cccccc; display: inline-block; margin-right: 10px; } .testi_list2 .owl-dot.active { background: #0E48D7; } /* */ .faq-area.style_one { background: url(../images/home3/resource/faq_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 100px 0 120px; } .faq-area.style_one .section-title.text-center p { width: 54%; color: #ffffffbf; } .tab_container.style_one { background: #0925B4; padding: 19px 25px 16px; } .accordion.style1 li a { font-size: 18px; color: #ffffff; font-weight: 500; padding: 20px 20px 2px 0px; border-bottom: 0; border-top: 1px solid rgba(255,255,255,0.10196078431372549); } .accordion.style1 li a span:after { display: none; right: 0; } .accordion.style1 li p { padding: 13px 43px 13px 0px; } .accordion.style1 a:before { width: 7%; height: 100%; background: url(../images/home3/resource/faq-icon.png); background-repeat: no-repeat; right: 0; top: 28px; } .accordion.style1 a:after { width: 7%; height: 100%; background: transparent; background-repeat: no-repeat; right: 0; top: 28px; } .accordion.style1 a.active:after { background: url(../images/home3/resource/faq-icon2.png); background-repeat: no-repeat; } .accordion.style1 a.active { border-top: 0; border-bottom: 0; } /* */ .blog-area.style_three { background: #F7F7F7; padding: 100px 0 205px; } .blog-area.style_one.style_teen { padding: 100px 0 90px; } .blog-area.style_three .section-title p { color: #636363; width: 80%; } .single-blog-box.style_2 { background: #ffff; text-align: center; padding: 30px 0 13px; border-radius: 5px; } .single-blog-box.style_one.style_2 .blog-content::before { display: none; } .single-blog-box.style_2 .single-blog-thumb img { width: inherit; } .single-blog-box.style_2:hover .single-blog-thumb img { transform: none; } .single-blog-box.style_2 .meta-blog { position: inherit; padding: 6px 0 2px; background: transparent; top: 0; } .single-blog-box.style_2 .meta-blog p { font-size: 14px; color: #636363 !important; font-weight: 500; } .single-blog-box.style_2 .meta-blog p span i { color: #1356E4; } .single-blog-box.style_2 span.meta-style { margin-left: 30px; } .single-blog-box.style_2 .blog-content p { color: #636363; } .single-blog-box.style_2 .blog-content { background: #fff; border: none; text-align: left; padding: 25px 10px 27px 30px; } .single-blog-box.style_2 .blog-btn { margin-top: 32px; } .single-blog-box.style_2 .blog-btn a { background: #F7F7F7; padding: 12px 32px; font-size: 14px; color: #041341; font-weight: 500; border-radius: 25px; text-transform: uppercase; } .single-blog-box.style_2:hover .blog-btn a { background: #0C3FCE; color: #ffff !important; } .hosting-button.style_3 { text-align: right; margin-right: 0; } .hosting-button.style_3 a { display: inline-block; font-size: 14px; color: #ffffff; font-weight: 500; text-transform: uppercase; background-image: linear-gradient(-58deg, #001dab 0%, #1355e3 80%, #1355e3 100%) !important; } .hosting-button.style_four { text-align: left; margin-top: 28px; } .hosting-button.style_four a { background: linear-gradient(90deg, #ff0965 0%, #f98123 100%); } .hosting-button.style_four a:afer { background: linear-gradient(90deg, #1355e3 0%, #1355e3 100%); } /* all hover */ .single-blog-box.style_2:hover .blog-content { border: none; } /* */ .row.newsletter_bg { background: url(../images/home3/resource/news_bg.png); background-repeat: no-repeat; background-size: cover; background-position: center center; margin: 0; padding: 70px 73px 70px; position: relative; z-index: 1; margin-top: -112px; margin-bottom: -115px; } .news-title h1 { margin-top: 10px; font-size: 45px; font-weight: 700; } .dpx label { cursor: pointer; margin-right: 15px; color: #041341; font-weight: 400; font-family: "Mulish"; font-size: 16px; } .option-input { -webkit-appearance: none; appearance: none; top: 3px; left: 0; height: 15px; width: 15px; transition: all 0.15s ease-out 0s; background: transparent; border: 2px solid #0B3DCB; cursor: pointer; display: inline-block; margin-right: 0.4rem; outline: none; position: relative; z-index: 1; border-radius: 50%; } .option-input:checked { background: #0B3DCB; } .newsletter-form form { position: relative; } .newsletter-form input { border: 1px solid #1356E3; width: 100%; height: 60px; border-radius: 30px; background-color: transparent; padding: 0 48px; } .newsletter-form input::placeholder { color: #989898; } button.news-btn { position: absolute; right: 0; border: none; font-size: 16px; color: #ffffff; font-weight: 400; background-image: linear-gradient(-58deg, #001dab 0%, #1355e3 80%, #1355e3 100%); width: 158px; height: 60px; border-radius: 0px 30px 30px 0px; } .newsletter-form img { position: absolute; left: 22px; top: 24px; } /* */ .footer-area.style_3 { background: url(../images/home3/resource/footer_bg3.png); padding: 220px 0 105px; } .footer-area.style_3 p.footer-desc { width: 71%; color: #cccccc; line-height: 28px; } .footer-area.style_3 .footer-widget-social-icon { margin-top: 22px; } .footer-area.style_3 .footer-widget-menu ul li a{ color: #cccccc; } a.social-style_2 { background: #f70000 !important; } a.social-style_2:hover { background: #187DFF !important; border: 1px solid #fff !important; } a.social-style_1 { background: #E24860 !important; } a.social-style_1:hover { background: #187DFF !important; border: 1px solid #fff !important; } .footer-area.style_3 .footer-widget-title h4 { font-size: 22px; margin-bottom: 55px; position: relative; z-index: 1; } .footer-area.style_3 .footer-widget-title h4:before { position: absolute; content: ""; left: 0; top: 40px; width: 50px; height: 2px; background-image: linear-gradient(-90deg, #f98123 0%, #ff0965 100%); z-index: -1; } .subscribe_form.style_2 input { width: 100%; height: 56px; border-radius: 5px; background-color: #ffffff1f; border: 1px transparent; margin-bottom: 0; } .subscribe_form.style_2 input::placeholder { font-size: 15px; color: #ffffff45; } .subscribe_form.style_2 .subscribe-btn button { right: 0; position: absolute; top: 0; height: 56px; width: 55px; border-radius: 0 5px 5px 0; background-image: linear-gradient(-90deg, #f98123 0%, #ff0965 100%); } .footer-area.style_3 h6.payment-title { margin: 26px 0 25px; font-size: 22px; } .footer-area.style_3 .subscribe_payment a { padding: 12px 20px; } /* copy right area */ .copy-right-area { background: #00157E; padding: 30px 0 30px; } .copy-right-text { text-align: right; } .copy-right-text p { color: #cccccc; margin: 0; } .copy-right-text span { color: #BB6739; } /* */ /* Slider area style four */ .slider-area.style_four { background: url(../images/home4/resource/banner.jpg); height: 610px; background-position: center center; background-size: cover; background-repeat: no-repeat; margin-top: 0; } .slider-area.style_four .slider-content h1 { font-size: 55px; line-height: 70px; font-weight: 800; position: relative; z-index: 1; -webkit-animation: 1s 1.7s fadeInUp both; animation: 1s 1.7s fadeInUp both; } .slider-area.style_four .slider-content h1:before { position: absolute; content: ""; width: 37%; height: 18px; filter: drop-shadow(0px 14px 2.5px rgba(0,0,0,0.15)); background-color: #f98223; clip-path: polygon(11% -100%, 95% 0%, 100% 100%, 0% 100%); bottom: 5px; right: 203px; z-index: -1; } .slider-area.style_four .slider-content p { width: 74%; color: #fff; margin: 14px 0 27px; -webkit-animation: 1s 1.5s fadeInUp both; animation: 1s 1.5s fadeInUp both; } .hosting-button.style_three a { padding: 10px 20px; background: #F98323; margin-right: 15px; -webkit-animation: 1s 1.4s fadeInUp both; animation: 1s 1.4s fadeInUp both; } .hosting-button.style_three a.active { background: #fff !important; color: #F98323; } .hosting-button.style_three a.active:hover { color: #ffff; } .hosting-button.style_three a.active i{ margin-right: 10px; } .slider-area.style_four .hero-left { text-align: right; margin-top: 54px; -webkit-animation: 1s 1.7s fadeInUp both; animation: 1s 1.7s fadeInUp both; } /* */ .feature-area.style_four { background: #F6F4F5; padding: 120px 0 40px; } .feature-single-box.style_four { padding: 35px 40px 10px; background: url(../images/home4/resource/feature_img.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; } .feature-single-box.style_four:before { background: url(../images/home4/resource/feature_thumb.png); background-repeat: no-repeat; background-size: cover; background-position: center center; } .feature-single-box.style_four .feature-content h3 { font-size: 20px; margin: 24px 0 8px; } h2.feature-number { opacity: 0.478; font-size: 46px; color: #fe7c0f; font-weight: 900; position: absolute; right: 40px; top: 15px; } /* */ .pricing-area.style_four { background: #F6F4F5; padding: 40px 0 90px; } .pricing-area.style_seven { padding: 110px 0 90px; } .pricing-area.style_eight { padding: 110px 0 90px; } .pricing-area.style_four .section-title.text-center { margin-bottom: 0; } .pricing-toggle { display: flex; align-items: center; justify-content: center; margin-bottom: 40px; } .pricing-toggle span { font-size: 16px; color: #636363; font-weight: 600; } .switch { position: relative; display: inline-block; width: 45px; height: 20px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #007aff; transition: 0.4s; border-radius: 10px; } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 2px; background-color: #F78222; transition: 0.4s; border-radius: 50%; } input:checked + .slider { background-color: #5F29F9; } input:checked + .slider:before { transform: translateX(26px); } h2.price-yearly { display: none; } /* pricing single items style four */ .pricing-single-items.style_one.style_four { text-align: center; padding: 35px 60px 50px; overflow: hidden; } .pricing-single-items.style_four:after { display: none; } span.popular { width: 100%; height: 35px; background-color: #f98223; position: absolute; right: -8em; top: 43px; color: #fff; transform: rotate(47deg); } .pricing-single-items.style_four h3.pricing-plan2 { font-size: 20px; color: #041341 !important; } h4.pricing-from { font-size: 14px; color: #041341; font-weight: 500; border: 1px solid #007aff47; display: inline-block; border-radius: 14px; padding: 6px 14px; margin: 15px 0 13px; } .pricing-single-items.style_four .pricing-plan h2 { margin-bottom: 20px; font-size: 28px; color: #f98223; font-weight: 700; } .pricing-single-items.style_four .pricing-plan h2 span { font-size: 14px; color: #041341; font-weight: 500; } /* pricing body */ .pricing-single-items.style_one.style_four .pricing-body { margin-top: 45px; } .pricing-single-items.style_one.style_four .pricing-body:before { top: -23px; } .pricing-single-items.style_four p.pricing-text { font-size: 16px; } .pricing-single-items.style_one.style_four .pricing-feature ul li { padding-left: 0; font-size: 16px; color: #363636 !important; margin-bottom: 3px; } .pricing-single-items.style_one.style_four .pricing-feature ul li img { margin-right: 10px; position: relative; margin-top: -3px; } h4.guarantee_title { font-size: 20px; color: #041341; font-weight: 700; margin: 18px 0 18px; } .pricing-single-items.style_one.style_four .pricing-btn a { border: 1px solid transparent; padding: 5px 18px; border-radius: 5px; font-size: 16px; color: #fff; background: #f98223; } .pricing-single-items.style_one.style_four .pricing-btn a:after { border-radius: 5px; } .pricing-single-items.style_one.style_four:hover .pricing-btn a { color: #f98223; } /* */ .support-area { background: url(../images/home4/resource/contact_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 120px 0 112px; } .support-area .section-title.style_one p { color: #fff; width: 93%; } h3.support-title { font-size: 20px; color: #ffffff; font-weight: 600; margin-bottom: 35px; } .hosting-button.style_four a { padding: 10px 38px; background: #fff; color: #f98223; } .hosting-button.style_four a:hover { color: #fff; } .support_img { position: relative; margin-left: 32%; } /* */ .domain-area.style_four { background: url(../images/home4/resource/domain_bg.png); background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 108px 0 120px; margin-top: 0; } .row.domain_upper { text-align: center; } .domain-right.style_three form { position: relative; margin-top: 238px; z-index: 1; margin-bottom: 60px; } .domain-right.style_three input { width: 50%; height: 60px; border-radius: 30px; background-color: #efefef; } .domain-right.style_three button.src-icon { width: 190px; height: 60px; border-radius: 30px; top: 0; right: 25%; background: #FD7B0F; } .domain-img img { position: absolute; top: -210px; left: 0; right: 0; margin: auto; z-index: 1; } .domain-single-item.style_three { border-radius: 4px; filter: drop-shadow(0 0 7.5px rgba(0,0,0,0.15)); background-color: #ffffff; margin-right: 20px; padding: 10px 26px 22px; width: 173px; transition: .5s; } .domain-single-item.style_three:hover { background: #FD7B0F; } .domain-single-item.style_three .domain-content h5 { font-size: 24px; color: #222222; font-weight: 600; margin-bottom: 5px; transition: .5s; } .domain-single-item.style_three .domain-content p { font-size: 16px; line-height: 32px; color: #222222; margin: 0; transition: .5s; } .domain-single-item.style_three .domain-content span { font-size: 24px; color: #222222; font-weight: 600; font-family: "Urbanist"; transition: .5s; } /* all hover */ .domain-single-item.style_three:hover .domain-content h5 { color: #fff; } .domain-single-item.style_three:hover .domain-content span { color: #fff; } .domain-single-item.style_three:hover .domain-content p { color: #fff; } /* */ .service-area.style_two { background: url(../images/home4/resource/service_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; } .service-single-box.style_two { text-align: left; filter: drop-shadow(0 0 7.5px rgba(0,0,0,0.15)); background: #ffffff; padding: 50px 40px 40px; transition: .5s; } .service-single-box.style_two:before { display: none; } .service-single-box.style_two:after { display: none; } .service-single-box.style_two h3.service-title { font-size: 20px; color: #041341; padding: 25px 0 13px; } .service-single-box.style_two .service-content p { color: #636363; } .service-single-box.style_two .hosting-button { margin-top: -2px; } .service-single-box.style_two .hosting-button a { background: transparent; padding: 0; display: inline-block; color: #FE7B0F; } .service-single-box.style_two .hosting-button a:after { display: none; } .service_shape { position: absolute; top: 40px; right: 10%; } /* */ .faq-area.style_two { background: url(../images/home4/resource/faq_bg.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 60px 0 55px; } .faq-area.style_two .section-title { margin-bottom: 24px; } .accordion li.style_two { list-style: none; padding: 0px 0px 17px; position: relative; z-index: 1; } .accordion.style_two li a { font-size: 20px; color: #ffffff; font-weight: 600; padding: 12px 8px 12px 50px; border: 1px solid #ffffff70; background: #6734F9; } .accordion.style_two a.active { border: 1px solid #fff; border-bottom: 0; } .accordion.style_two a:before { width: 100%; height: 100%; background: url(../images/home4/resource/faq-icon01.png); left: 20px; top: 18px; background-repeat: no-repeat; } .accordion.style_two a.active:after { background: url(../images/home4/resource/faq-icon02.png); background-repeat: no-repeat; left: 20px; top: 18px; display: inline-block; } .accordion.style_two li p { padding: 23px 114px 23px 50px; background: #6835F9; } p.active { border: 1px solid #fff; border-top: 0; } .faq-thumb { position: relative; bottom: -55px; } /* */ .why-choose-area.style_two { background: url(../images/home4/resource/choose_bg.jpg); padding: 110px 0 90px; } .why-choose-single-item.style_two { display: inherit; text-align: center; filter: drop-shadow(0 0 5px rgba(0,0,0,0.1)); background-color: #ffffff; padding: 30px 0 23px; } .why-choose-single-item.style_two:before { display: none; } .why-choose-single-item.style_two .why-choose-content h3 { font-size: 20px; color: #041341; margin-bottom: 0; margin-top: 18px; } .why-choose-content h4 { font-size: 36px; color: #fe7c0f; font-weight: 700; display: inline-block; } .why-choose-content span { font-size: 36px; color: #fe7c0f; font-weight: 700; } /* */ .blog-area.style_four { background: #F6F5F5; padding: 108px 0 90px; } .single-blog-box.style_three .meta-blog { padding: 0; margin-left: 10px; top: -18px; width: 308px; border-radius: 18px; filter: drop-shadow(0 0 7.5px rgba(0,0,0,0.15)); background: #ffffff; } .single-blog-box.style_three .meta-blog p { color: #636363 !important; } .single-blog-box.style_three .meta-blog img { margin-right: 10px; } .single-blog-box.style_three span.meta-style { margin-left: 40px; } .single-blog-box.style_three span.meta-style:before { display: none; } /* blog content */ .single-blog-box.style_three .blog-content { background: #fff; padding: 28px 40px 31px; position: relative; } .single-blog-box.style_three .blog-content::before { display: none; } .single-blog-box.style_three .blog-title h3 a { font-size: 20px; color: #041341; } .single-blog-box.style_three .blog-title h3 a:hover { color: #f98223; } .single-blog-box.style_three .blog-content p { color: #636363; } /* blog button */ .single-blog-box.style_three .blog-btn { margin-top: 17px; } .single-blog-box.style_three .blog-btn a { font-size: 16px; color: #fd7b0f; font-weight: 400; } .single-blog-box.style_three .blog-btn a i { font-size: 16px; margin-left: 8px; } .single-blog-box.style_three a.blog-right-btn { height: 30px; width: 30px; line-height: 30px; background: #FFE7D4; opacity: 1; transform: translate(0%, 0%); bottom: 28px; right: 30px; border-radius: 50%; text-align: center !important; display: inline-block; } .single-blog-box.style_three a.blog-right-btn i { margin-left: 0; color: #041341; } /* all hover */ .single-blog-box.style_three:hover .meta-blog p { color: #041341 !important; } /* */ .category-area.style_three { background: url(../images/home4/resource/category_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 108px 0 90px; } .row.category_style_two.align-items-center { justify-content: center; margin-left: 20px; } .category-area.style_three .row.category_style_one { margin: 0 39px 0; justify-content: center; align-items: center; } .category_single-item.style_three { display: flex; align-items: center; border-radius: 4px; filter: drop-shadow(0 0 5px rgba(0,0,0,0.1)); background-color: #ffffff; padding: 16px 29px 18px; margin-right: 23px; position: relative; z-index: 1; } .category_single-item.style_three:before { left: 0; top: 0; height: 100%; position: absolute; content: ""; width: 0%; background: #FF7C10; z-index: -1; border-radius: 5px; transition: .5s; } .category_single-item.style_three:hover:before { width: 100%; } .category-icon img { transition: .5s; } .category-area.style_three .category-title h3 { margin: 0; font-size: 20px; color: #041341; font-weight: 600; } /* all hover */ .category_single-item.style_three:hover .category-icon img { filter: brightness(0)invert(1); } /* */ .testimonial-area.style_three { background: url(../images/home4/resource/testi_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; position: relative; padding: 152px 0 209px; } .testimonial-single-item.style_three { background: #fff; padding: 25px 0 20px 40px; display: flex; align-items: center; } .testimonial-single-item.style_three:before { display: none; } .testimonial-single-item.style_three:after { display: none; } .testimonial-single-item.style_three .testi-author { float: left; } .testimonial-single-item.style_three .testi-author-thumb { margin-right: 35px; } /* testi content */ .testimonial-single-item.style_three .testimonial-content { overflow: hidden; } .testi-icon { margin-bottom: 10px; } .testimonial-single-item.style_three .testimonial-content p { margin: 0; font-size: 18px; line-height: 30px; color: #636363; } .testi_information h4 { font-size: 18px; color: #fe7c0f; font-weight: 500; margin-top: 7px; } .testi_information h4 span { color: #363636; } .testi_shape { position: relative; } .testi_thumb { position: absolute; margin-top: -13rem; right: -38px; } .testi-shape { position: absolute; top: 34%; left: 13%; } /* owl carousel */ .testi_list_3 .owl-dots { position: absolute; left: 8%; text-align: center; bottom: -54%; } .testi_list_3 .owl-dot { width: 10px; height: 10px; border-radius: 5px; background-color: #B095FC; display: inline-block; margin-right: 10px; } .testi_list_3 .owl-dot.active { background: #FC7C11; position: relative; z-index: 1; } .testi_list_3 .owl-dot.active:before { content: ""; position: absolute; width: 18px; height: 19px; top: -4px; left: -4px; border: 2px dashed #fff; border-radius: 50%; } /* */ .brand-area.style_two { background: #012EA3; padding: 90px 0 80px; } .row.brand_bg { border-bottom: 1px solid #ffffff61; padding-bottom: 70px; margin-bottom: 85px; } .brand-single-item.style_two { border: 0; } .brand_thumb img { filter: brightness(0)invert(1); transition: .5s; } .brand-single-item.style_two:hover .brand_thumb img{ filter: brightness(1)invert(0); } .owl-carousel .owl-item img { display: inline-block; } /* */ .footer-area.style_four { background: url(../images/home4/resource/footer_bg.jpg); padding: 90px 0 2px; background-repeat: no-repeat; background-size: cover; background-position: center center; } .footer-area.style_four .footer-bottom-content { padding-top: 15px; margin-top: 118px; } .footer-area.style_four .footer-widget-title h4 { margin-bottom: 32px; font-size: 20px; color: #e0e0e0; font-weight: 700; } .footer-area.style_four p.footer-desc.style { width: 75%; margin-bottom: 19px; } .footer-widget-icon { display: flex; margin-bottom: 6px; } .footer-widget-icon span i { color: #ffff; margin-right: 15px; } .footer-widget-icon p { color: #fff; margin: 0; } .footer-area.style_four .footer-widget-social-icon { margin-top: 25px; } .footer-area.style_four .footer-widget-social-icon ul li a { color: #ff5e14; line-height: 27px; text-align: center; font-size: 15px; border: 0; width: 26px; height: 26px; border-radius: 2px; background: #ffffff; } .footer-area.style_four .footer-widget-social-icon ul li a:hover { background: #ff5e14 !important; color: #fff !important; } .footer-area.style_four .footer-widget-menu ul li a { margin-bottom: 8px; font-weight: 400; } .footer-area.style_four .footer-widget-menu ul li a:hover { color: #ff5e14; } /* subscribe form */ .subscribe_form.style_three { margin-bottom: 31px; margin-top: 40px; } .subscribe_form.style_three input { height: 45px; background-color: #8258FA; border: 1px solid #8258FA; padding: 0 20px; } .subscribe_form.style_three input::placeholder { color: #ffffff91; opacity: 1; } .subscribe_form.style_three button.btn { width: 130px; height: 45px; border-radius: 4px; background: #ff5e14 !important; padding: 0; top: 0; right: 0; } .customer-support h3 { margin-bottom: 24px; color: #e0e0e0; font-weight: 700; font-size: 20px; } .customer-support ul li { font-size: 20px; color: #e0e0e0; font-weight: 500; font-family: 'Urbanist', sans-serif; margin-bottom: 11px; } /* */ /* slider area style five */ .slider-area.style_five { background: url(../images/home5/banner.jpg); height: 1000px; position: relative; z-index: 1; background-repeat: no-repeat; background-size: cover; background-position: center center; } .slider-area.style_five .slider-content h4 { border-radius: 0; display: inline-block; padding: 8px 22px; margin-bottom: 9px; font-size: 16px; color: #ffffffc2; font-weight: 400; background-color: #1380ff42; } .slider-area.style_five .slider-content h4:before { display: none; } .slider-area.style_five .slider-content h1 span { color: #FB560D; } .slider-area.style_five .slider-content p { width: 100%; color: #ccd0e2; margin: 12px 0 37px; } .hosting-button.style_five a { margin-right: 15px; border: 1px solid transparent; padding: 15px 39px; } .slider-area.style_five a.active { background: transparent; border: 1px solid #fff !important; } .slider-area.style_five a.active:hover { border: 1px solid #FB560D !important; } /* */ .domain-area.style_five { background: #fff; margin-top: -158px; } .domain-area.style_five .section-title p { width: 100%; color: #636363; } .domain-area.style_five .row.domain_bg.style-one { background: #fff; padding: 70px 310px 70px; border-radius: 10px; text-align: center; filter: drop-shadow(0px 15px 30px rgba(0,0,0,0.15)); } .domain-area.style_five .domain-right form input { height: 70px; background: #f6f9ff; border: none; } .domain-area.style_five button.src-icon.style_one { background: #002ea2; padding: 14px 38px; } .domain-area.style_five .domain-list.style_one { margin-top: -5px; } .domain-area.style_five .domain-single-item { margin-right: 28px; } .domain-area.style_five h5.domain-title { font-size: 22px; color: #002ea2; font-weight: 700; } h5.domain-title.two { color: #fc6115 !important; } .domain-area.style_five .domain-content span { font-size: 16px; color: #636363; font-weight: 400; } /* domain shape */ .domain-shape_one { position: absolute; top: 34%; left: 5%; z-index: -1; text-align: left; } .domain-shape_two { position: absolute; top: 27%; right: 5%; z-index: -1; text-align: right; } /* */ .service-area.style_three { background: #ffff; } .service-area.style_three .section-title p { width: 53%; } /* service single box style Three */ .service-single-box.style_three { background: #f6f9ff; padding: 40px 30px 30px; border-radius: 0px; } .service-single-box.style_three:before { background: #002ea2; border-radius: 0; } .service-single-box.style_three h3.service-title { font-size: 24px; padding: 15px 0 15px; } .service-single-box.style_three .hosting-button a { background: transparent; padding: 0; color: #ff9038; margin-top: 7px; } .service-single-box.style_three .hosting-button a:after { display: none; } .service-single-box.style_three:hover .hosting-button a { color: #fff; } /* */ .about-area.style_three { background: #F6F9FF; margin-top: 0; } .about-area.style_three .section-title { margin-bottom: 27px; } .about-area.style_three .section-title p { width: 88%; } .about_list ul li { margin-bottom: 13px; } .about_list ul li img { margin-right: 10px; } .about-area.style_three .hosting-button { margin-top: 40px; } .about-area.style_three .hosting-button a { padding: 11px 40px; background-image: linear-gradient(113deg, #0054ff 0%, #0781ff 100%); } /* */ .pricing-area.style_one.style_five { background: #fff; padding: 100px 0 90px; } .pricing-area.style_one.style_five .section-title.text-center p { width: 54%; } .pricing-single-items.style_one.style_five { background: #F6F9FF !important; padding: 40px 33px 40px; text-align: center; border-radius: 0px; } .pricing-single-items.style_one.style_five:after { border-radius: 0px; } .pricing-icon { width: 60px; height: 60px; border-radius: 30px; background-color: #002ea2; display: inline-block; line-height: 60px; margin-bottom: 16px; transition: .5s; } .pricing-icon img { filter: brightness(0)invert(1); transition: .5s; } .pricing-single-items.style_five .pricing-plan h2 { margin-bottom: 0; font-size: 40px; color: #041341 !important; font-weight: 700; margin-top: 17px; } .pricing-single-items.style_five:hover .pricing-plan h2 { color: #fff !important; } .pricing-single-items.style_five .pricing-plan span { font-size: 16px; } .pricing-single-items.style_one.style_five .pricing-body { margin-top: 13px; } .pricing-single-items.style_five .pricing-body:before { display: none; } .pricing-single-items.style_one.style_five .pricing-feature { text-align: left; display: flex; justify-content: center; margin-top: 23px; padding-left: 56px; } .pricing-single-items.style_one.style_five .pricing-feature ul li img { filter: brightness(1)invert(0); transition: .5s; } .pricing-single-items.style_one.style_five .pricing-btn a { background: #087dfc !important; padding: 12px 38px; border: 1px transparent; border-radius: 5px; } .pricing-single-items.style_one.style_3.style_five .pricing-btn a:after { border-radius: 5px; } /* all hover */ .pricing-single-items.style_one.style_five:hover .pricing-icon { background: #fff; } .pricing-single-items.style_one.style_five:hover .pricing-icon img { filter: brightness(1)invert(0); } .pricing-single-items.style_five:hover .pricing-plan h2{ color: #fff; } .pricing-single-items.style_five:hover p.pricing-text { color: #fff; } .pricing-single-items.style_one.style_five:hover .pricing-feature ul li img { filter: brightness(0)invert(1); } .pricing-single-items.style_one.style_five:hover .pricing-btn a { border: 1px transparent; color: #035BFC; } /* */ .testimonial-area.style_four { background: #012EA3; padding: 100px 0 100px; } .testimonial-area.style_four { background: #012EA3; } .testimonial-area.style_four .section-title p { width: 91%; } .testimonial-single-item.style_five { padding: 24px 30px 27px; border-radius: 0px; } .testimonial-single-item.style_five .testimonial-content p { color: #636363; margin: 15px 0 22px; } .testimonial-single-item.style_five .testi-rating { margin-bottom: -4px; } .testimonial-single-item.style_five .testi-rating span { color: #FF8730; font-size: 16px; } .testimonial-single-item.style_five h4.name { font-size: 18px; color: #041341; font-weight: 700; margin-top: 5px; margin-bottom: -5px; } .testimonial-single-item.style_five h5.designation { font-size: 12px; } .testimonial-single-item.style_five .testi-shape { top: 68%; left: 79%; } .testimonial-area.style_four .hosting-button a { padding: 13px 40px; border-radius: 0; background: #1356E3 !important; } .testimonial-area.style_four .hosting-button a:after { border-radius: 0px; } .testimonial-area.style_four .hosting-button { margin-top: 38px; } /* */ .faq-area.style_three { background: #fff; padding: 100px 0 120px; } .faq-area.style_three .tab_container.style_two { border: 1px solid #a7a6a6; } .accordion.style_three li { padding: 2px 0px 15px; border-bottom: 1px solid #a7a6a6; } .accordion.style_three li.style_none { border: none; } .accordion.style_two.style_three li a { font-size: 22px; color: #041341 !important; font-weight: 700; padding: 26px 0 14px 30px; background: transparent; border: 0; } .accordion.style_three li a i { width: 30px; height: 30px; background-color: #002ea2; display: inline-block; line-height: 30px; font-size: 12px; text-align: center; margin-right: 30px; color: #fff; transform: rotate(180deg); } .accordion.style_three a.active i { transform: rotate(0deg); } .accordion.style_two.style_three a:before { display: none; } .accordion.style_two.style_three a.active:after { display: none; } .accordion.style_three li p { padding: 0px 92px 12px 50px; background: none; color: #636363; margin-top: -5px; } .accordion.style_three a.active { border: none; } .contact_from_box { border: 1px solid #a7a6a6; padding: 30px 30px 30px; border-radius: 5px; } .form_box input { background-color: #F6F9FF; width: 100%; border: 0; outline: 0; padding: 0 20px; margin-bottom: 30px; height: 55px; border-radius: 4px; } .form_box input::placeholder { font-size: 16px; color: #636363; font-weight: 400; } .form_box textarea { width: 100%; height: 218px; padding: 15px 20px; background-color: #F6F9FF; border: none; border-radius: 4px; } .form_box textarea::placeholder { font-size: 16px; color: #636363; font-weight: 400; } .quote_button { margin-top: 20px; } .quote_button button { font-size: 16px; color: #ffffff; font-weight: 500; outline: 0; border: 0; background: #1356e4; padding: 13px 40px; border-radius: 5px; transition: .5s; } .quote_button button:hover { background: #FF8931; } button.btn:after { position: absolute; content: ""; height: 100%; width: 0%; background: #fff; left: 0; top: 0; z-index: -1; transition: 0.5s; transform: scale(0); opacity: 0; } button.btn:hover:after { transform: scale(1); opacity: 1; height: 100%; width: 100%; } /* */ .blog-area.style_five { background: #FFFFFF; padding: 100px 0 60px; } .blog-area.style_five .section-title p { color: #636363; width: 52%; } .single-blog-box.style_four { position: relative; z-index: 1; overflow: inherit; } .single-blog-box.style_four .single-blog-thumb img { transform: scale(1); } .single-blog-box.style_four .blog-content { width: 360px; background-color: #F6F9FF !important; left: 0; right: 0; margin: auto; position: relative; bottom: 30px; padding: 30px 30px 22px; border-radius: 0; } .blog-category span { background: #FE8730; font-size: 12px; color: #ffffff; padding: 8px 18px; border-radius: 5px; } .single-blog-box.style_four .blog-title h3 a { font-size: 22px; color: #041341; font-weight: 700; margin-top: 14px; border-bottom: 1px solid rgba(4,19,65,0.10196078431372549); padding-bottom: 22px; margin-bottom: 20px; } .single-blog-box.style_four .blog-title h3 a:hover { color: #FE8730; } .single-blog-box.style_four .meta-blogs p span i { color: #FE8730; margin-right: 10px; font-size: 16px; } .single-blog-box.style_four span.style_two { margin-left: 16px; } /* */ .footer-area.style_five { background: #012EA3; padding: 120px 0 120px; } .footer-area.style_five h3.footer-follow-title { font-size: 22px; font-weight: 700; padding-left: 0; margin: 22px 0 25px; } .footer-area.style_five h3.footer-follow-title:before { display: none; } .footer-area.style_five .footer-widget-social-icon ul li a { border-radius: 2px; width: 30px; height: 30px; background: transparent; line-height: 30px; border: 1px solid #ff5e14; } .footer-area.style_five .footer-widget-social-icon ul li a:hover { background: #ff5e14; } .footer-area.style_five .footer-widget-menu ul li a { position: relative; padding-left: 20px; z-index: 1; } .footer-area.style_five .footer-widget-menu ul li a:before { position: absolute; content: ""; left: 0; top: 13px; width: 5px; height: 5px; background-color: #f88221; z-index: -1; } .form-title h3 { font-size: 16px; color: #ffffff; font-weight: 400; margin-top: 39px; } .footer-area.style_five .subscribe_form.style-one { margin-top: 26px; } .footer-area.style_five .subscribe_form.style-one input { border-radius: 5px; } .subscribe-btn button { border-radius: 5px; background-image: linear-gradient(90deg, #6b12ff 0%, #6b12ff 15%, #ff610c 64%, #ffd40f 93%, #ffd40f 100%); } /* copy right area style two */ .copy-right-area.style_two { background-image: linear-gradient(90deg, #6b12ff 0%, #6b12ff 15%, #ff610c 64%, #ffd40f 93%, #ffd40f 100%); padding: 35px 0 35px; } .copy-right-area.style_two .copy-right-text { text-align: left; } .copy-right-area.style_two .footer-bottom-right a:before { display: none; } .copy-right-area.style_two .footer-bottom-right a { margin-left: 20px; } .copy-right-area.style_two .footer-bottom-right a:hover { color: #012EA3 !important; } /* */ /* slider area style six */ .slider-area.style_six { background: url(../images/home6/banner.jpg); height: 815px; position: relative; z-index: 1; background-repeat: no-repeat; background-position: center center; margin-top: -8px; background-size: cover; } .slider-area.style_six .slider-content img { margin-bottom: 14px; } .slider-area.style_six .slider-content h1 { font-size: 55px; line-height: 61px; color: #ffffff; font-weight: 800; position: relative; z-index: 1; } .slider-area.style_six .slider-content h4 { font-size: 18px; line-height: 45px; color: #ffffff; font-weight: 300; background: transparent; padding: 0; margin-top: 21px; padding-left: 25px; } .slider-area.style_six .slider-content h4:before { position: absolute; content: ""; left: 0; top: 15px; height: 100%; width: 100%; background: url(../images/home6/icon.png); background-repeat: no-repeat; } .slider-area.style_six .slider-content p { width: 100%; margin: 23px 0 34px; font-size: 19px; color: #ffffff; font-weight: 500; } .slider-area.style_six .hosting-button a { padding: 11px 24px; } .slider-area.style_six .hosting-button a i { transform: rotate(-45deg); } /* hero thumb */ .slider-area.style_six .hero-thumb { position: relative; z-index: 1; margin-top: -34px; margin-left: 60px; } .slider-area.style_six .hero-shape { position: absolute; top: 25px; right: -60px; } /* */ .about-area.style_four { padding: 120px 0 85px; margin-top: 0; } .about-area.style_four .about_thumb { margin-left: -70px; } .about-area.style_four .about_list ul li { margin-bottom: 9px; font-size: 18px; color: #041341; font-weight: 600; } .about-area.style_four .about_list ul li img { position: relative; top: -2px; } .about-area.style_four .hosting-button { margin-top: 37px; } .about-area.style_four .hosting-button a { padding: 10px 35px; background-image: linear-gradient(113deg, #fa4b05 0%, #ff9038 100%); } .about-area.style_four .hosting-button a i { transform: rotate(-45deg); } /* */ .pricing-area.style_six { background: #F6F4F5; position: relative; z-index: 1; padding: 106px 0 90px; } .pricing-single-items.style_one.style_six { text-align: left; padding: 25px 30px 33px; background: #fff !important; border-radius: 5px; } .pricing-icons { position: absolute; right: 45px; top: 44px; opacity: 1; transition: .5s; } .pricing-icons2 { position: absolute; right: 45px; top: 44px; opacity: 0; transition: .5s; } .pricing-single-items.style_one.style_six:after { display: none; } .pricing-single-items.style_one.style_six h3.pricing-plan2 { transition: .5s; font-size: 24px; color: #041341 !important; } span.pricing-from { font-size: 14px; color: #0054ff; font-weight: 500; margin-top: 16px; display: inline-block; } .pricing-single-items.style_one.style_six p.pricing-text { font-size: 16px; color: #636363; font-weight: 400; } .pricing-single-items.style_one.style_six .pricing-plan h2 { margin-bottom: 0; margin-top: 8px; font-size: 45px; color: #041341 !important; font-weight: 700; } .pricing-single-items.style_one.style_six .pricing-feature { text-align: left; display: inherit; margin-top: 32px; padding-left: 0; } .pricing-single-items.style_one.style_six .pricing-feature ul li { padding-left: 0; font-size: 14px; color: #636363 !important; font-weight: 400; margin-bottom: 2px; } .pricing-single-items.style_one.style_six .pricing-feature ul li img { filter: brightness(1)invert(0) !important; transition: .5s; } .pricing-single-items.style_one.style_six .pricing-btn { margin-top: 32px; } .pricing-single-items.style_one.style_six .pricing-btn a { background: #F6F4F5 !important; padding: 15px 120px; border: 1px transparent; border-radius: 5px; font-size: 17px; color: #f88222; font-weight: 500; } .pricing-single-items.style_one.style_six .pricing-btn a:after { border-radius: 5px; background-image: linear-gradient(113deg, #0054ff 0%, #0781ff 100%); } /* pricing-shape */ .pricing-shape { position: absolute; top: 107px; right: 67px; } /* all hover */ .pricing-single-items.style_one.style_six:hover .pricing-btn a{ color: #fff !important; } .pricing-single-items.style_one.style_six:hover .pricing-icons { opacity: 0; } .pricing-single-items.style_one.style_six:hover .pricing-icons2 { opacity: 1; } /* */ .domain-area.style_six { background: #00117D; margin-top: 0; padding: 108px 0 270px; position: relative; z-index: 1; } .domain-area.style_six .section-title.style_one p { font-size: 17px; line-height: 26px; color: #fff; width: 102%; } .domain-area.style_six .section-title.style_one { border-bottom: 1px solid transparent; margin-bottom: 22px; padding-bottom: 0; } .domain-area.style_six .domain-right form input { height: 60px; border-radius: 4px; background-color: transparent; border: 1px solid #ffffff73; color: #fff; } .domain-area.style_six .domain-right form input::placeholder { color: #fff; opacity: 1; } .domain-area.style_six button.src-icon { width: 136px; height: 60px; border-radius: 4px; background: #f78121 !important; top: 0; right: 0; } .domain-area.style_six select.select_box.style_one { top: 17px; right: 23%; color: #fff; } .domain-area.style_six .domain-list { margin-top: 1px; } .domain-area.style_six h5.domain-title { font-size: 22px; font-weight: 900; font-family: "Urbanist"; margin-bottom: -4px; } .domain-area.style_six h5.domain-title.style_1 { color: #F98223 !important; } .domain-area.style_six h5.domain-title.style_2 { color: #00DD80 !important; } .domain-area.style_six h5.domain-title.style_3 { color: #FACB17 !important; } .domain-area.style_six h5.domain-title.style_4 { color: #F88221 !important; } /* */ .feature-area.style_five { background: #FAFAFA; padding: 0; margin-top: -150px; } .feature-area.style_five .feature-single-box { text-align: center; position: relative; z-index: 1; padding-top: 1px; border-radius: 5px; transition: .5s; } .feature-area.style_five .feature-single-box:before { position: absolute; content: ""; left: 0; top: 0; height: 85%; width: 100%; background-color: rgba(16,95,255,0.14901960784313725); z-index: -1; border-radius: 5px; } .feature-inner { background-image: linear-gradient(0deg, #000b5b 0%, #001185 100%); margin: 18px; padding: 65px 0 30px; border-radius: 5px; position: relative; z-index: 1; border-top: 2px solid #0d6efd99; transition: .5s; } .feature-inner:before { position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 2px; background-image: linear-gradient(to bottom, #0d6efd99, #0448b300); z-index: -1; border-radius: 5px; transition: .5s; } .feature-inner:after { position: absolute; content: ""; right: 0; top: 0; height: 100%; width: 2px; background-image: linear-gradient(to bottom, #0d6efd99, #0448b300); z-index: -1; border-radius: 5px; transition: .5s; } .feature-inner:hover:before { background-image: linear-gradient(to bottom, #548EFC, #0448b300); } .feature-inner:hover:after { background-image: linear-gradient(to bottom, #548EFC, #0448b300); } .feature-inner:hover { background-image: linear-gradient(0deg, #000b5b 0%, #0157ff 100%); border-top: 2px solid #548EFC; } .feature-area.style_five .feature-content h3 { font-size: 24px; color: #ffffff; font-weight: 600; margin: 35px 0 17px; } .feature-area.style_five .feature-content p { color: #ccd0e2; } /* all shape */ .feature-shape1 { position: absolute; top: 0px; left: 0px; opacity: 0; transition: .5s; } .feature-shape2 { position: absolute; top: 20px; right: 0px; transition: .5s; opacity: 0; } /* all hover */ .feature-inner:hover .feature-shape1 { opacity: 1; top: 40px; left: 40px; } .feature-inner:hover .feature-shape2 { opacity: 1; right: 20px; } /* */ .testimonial-area.style_five { background: #f8f8f8b8; padding: 85px 0 118px; } .testimonial-single-item.style_six { padding: 29px 0 30px 35px; border-radius: 0px; background: #fff; } .testimonial-single-item.style_six:after { background-image: linear-gradient(0deg, #000b5b 0%, #0157ff 100%); display: block; } .testimonial-single-item.style_six .testimonial-content p { margin: 26px 0 32px; font-size: 18px; line-height: 27px; transition: .5s; } .testimonial-single-item.style_six h4.name { margin-top: 5px; margin-bottom: -2px; font-size: 22px; color: #041341; font-weight: 800; transition: .5s; } .testimonial-single-item.style_six h5.designation { font-size: 15px; color: #f88221; transition: .5s; } .testimonial-single-item.style_six .testi-shape { top: 74%; left: 85%; transform: rotate(-180deg); } .testimonial-single-item.style_six .testi-shape img { filter: brightness(1) invert(0); transition: .5s; } /* all hover */ .testimonial-single-item.style_six:hover .testimonial-content p { color: #fff; } .testimonial-single-item.style_six:hover h4.name { color: #fff; } .testimonial-single-item.style_six:hover h5.designation { color: #fff; } .testimonial-single-item.style_six:hover .testi-shape img { filter: brightness(0) invert(1); } /* */ .service-area.style_four { background: #F6F4F5; padding: 105px 0 90px; } .hosting-button.style_six { text-align: right; } .hosting-button.style_six a { padding: 11px 23px; background: #1356e4 !important; text-transform: uppercase; } .service-single-box.style_four { background: #ffff!important; padding: 35px 26px 25px; border-radius: 5px; } .service-single-box.style_four:before { border-radius: 5px; background-image: linear-gradient(0deg, #000b5b 0%, #0157ff 100%); } .service-single-box.style_four .service-icon img { filter: brightness(1) invert(0); transition: .5s; } .service-single-box.style_four h3.service-title { padding: 15px 0 17px; } .service-single-box.style_four .service-content p { font-size: 17px; margin-bottom: 12px; } .service-single-box.style_four .hosting-button a { font-size: 17px; } .service-single-box.style_four .hosting-button a i { transform: rotate(-45deg); } .service-single-box.style_four:hover .service-icon img { filter: brightness(0) invert(1); } .service_list .owl-prev { position: absolute; left: -95px; top: 50%; bottom: 0; transform: translateY(-48px); width: 55px; height: 55px; border-radius: 28px; background-color: rgba(19,136,255,0); border: 1px solid #105fff; line-height: 55px; text-align: center; font-size: 19px; transition: .5s; } .service_list .owl-next { position: absolute; right: -95px; top: 50%; bottom: 0; transform: translateY(-48px); width: 55px; height: 55px; border-radius: 28px; background-color: rgba(19,136,255,0); border: 1px solid #105fff; line-height: 55px; text-align: center; font-size: 19px; transition: .5s; } .service_list .owl-prev:hover{ background: #105fff; color: #fff; } .service_list .owl-next:hover{ background: #105fff; color: #fff; } /* */ .why-choose-area.style_three { background: #fff; padding: 118px 0 118px; } .why-choose-area.style_three .choose-thumb { text-align: left; position: relative; bottom: 0; } .why-choose-single-item.style_three { margin-left: 30px; padding: 25px 8px 20px 55px; background: transparent; border: 1px solid #0413411f; } .why-choose-single-item.style_three:before { background-image: linear-gradient(0deg, #000b5b 0%, #0157ff 100%); } .why-choose-single-item.style_three .why-choose-icon { line-height: 75px; text-align: center; position: absolute; left: -39px; width: 75px; height: 75px; border-radius: 50%; filter: drop-shadow(0px 3px 8px rgba(189,189,189,0.26)); background-color: #ffffff; } .why-choose-single-item.style_three:hover .why-choose-icon.style_two { opacity: 0; } .why-choose-single-item.style_three h3.choose-title { font-size: 24px; font-weight: 600; margin-bottom: 18px; } .why-choose-single-item.style_three .why-choose-content p { font-size: 18px; } .why-choose-area.style_three .hosting-button { margin-top: 19px; } .why-choose-area.style_three .hosting-button a { padding: 10px 35px; background-image: linear-gradient(113deg, #fa4b05 0%, #ff9038 100%); } .why-choose-area.style_three .hosting-button a i { transform: rotate(-45deg); } /* */ .category-area.style_four { background: url(../images/home6/category-bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 100px 0 120px; } .category-area.style_four .category_single-item.style_one { background: transparent; } /* brand style_upper */ .row.brand-style_upper { margin-top: 90px; } .brand-title h2 { font-size: 26px; color: #ffffff; font-weight: 700; position: relative; z-index: 1; } .brand-title h2:before { position: absolute; content: ""; right: 32px; top: 16px; width: 136px; height: 1px; background-color: #3f7dff; } .brand-single-item.style_three { border: 1px dashed transparent; border-radius: 5px; padding: 18px 0px 18px; background: #2161E9; transition: .5s; } .brand-single-item.style_three:hover { border: 1px dashed #f88222; } .brand-single-item.style_three .brand_thumb img { filter: brightness(1)invert(0); transition: .5s; } .brand-single-item.style_three:hover .brand_thumb img { filter: brightness(0)invert(1); } /* */ .blog-area.style_six { background: #F6F4F5; padding: 106px 0 90px; } .blog-area.style_six .section-title p { color: #636363; } .blog-area.style_six .single-blog-box:hover .meta-blog { background-image: linear-gradient(113deg, #fa4b05 0%, #ff9038 100%); } .blog-area.style_six .blog-content { background: #fff; padding: 40px 40px 22px; position: relative; border-radius: 0 0 10px 10px; } .blog-area.style_six .blog-content::before { background-color: rgba(4,19,65,0.10196078431372549); } .blog-area.style_six .blog-title h3 a { display: inline-block; margin-bottom: 10px; font-size: 24px; line-height: 30px; color: #041341; font-weight: 600; } .blog-area.style_six .blog-content p { color: #636363; } .blog-area.style_six a.blog-button { color: #041341; } /* */ .footer-area.style_six { background: url(../images/home6/footer_bg.jpg); padding: 105px 0 7px; background-repeat: no-repeat; background-size: cover; background-position: center center; } .footer-area.style_six h3.footer-follow-title { margin: 29px 0 15px; } /* START HOSTING INNER PAGE CSS */ /*--==============================================-> ==================================================-*/ .breadcumb-area { background: #00149d; height: 600px; } .breadcumb-content h1 { margin-bottom: 10px; font-size: 56px; color: #ffffff; font-weight: 700; text-transform: uppercase; } .breadcumb-content ul li { text-transform: uppercase; display: inline-block; font-size: 16px; color: #ffffff; font-weight: 400; margin-right: 6px; } .breadcumb-content ul li a { text-transform: uppercase; padding-right: 30px; position: relative; z-index: 1; font-size: 16px; color: #ffffff; font-weight: 500; } .breadcumb-content ul li a:before { position: absolute; content: ""; right: 8px; top: 5px; background: #fff; width: 2px; height: 12px; transition: .5s; transform: rotate(17deg); } /*--==============================================-> ==================================================-*/ .breadcumb_two { background: url(../images/inner-page/breadcomb_bg.png); background-repeat: no-repeat; background-size: cover; background-position: center center; height: 955px; margin-top: -99px; } .breadcumb_content h1 { font-size: 60px; line-height: 70px; color: #ffffff; font-weight: 700; } .breadcumb_content p { font-size: 18px; color: #ffffff; margin: 25px 0 29px; } .breadcumb_content p span { color: #FC6F1D; } .breadcumb-list li { color: #ffffff; margin-bottom: 11px; } .breadcumb-list li img { margin-right: 10px; } /* breabcum btn */ .breadcumb_two .hosting-button { margin-top: 33px; } .breadcumb_two .hosting-button a { padding: 16px 30px; display: inline-block; background-image: linear-gradient(113deg, #0054ff 0%, #0781ff 100%); } .bradcumb-thumb { text-align: right; } /*--==============================================-> ==================================================-*/ .feature-area.style_six { background: transparent; padding: 0; } .feature_upper { background: #0164FF; padding: 60px 48px 30px; margin: 0; border-radius: 10px; margin-top: -120px; } .feature-single-box.style_six { background: #ffff; padding: 48px 50px 24px; border-radius: 5px; margin-bottom: 30px; } .feature-single-box.style_six .feature-content { overflow: hidden; } .feature-single-box.style_six .feature-icon { float: left; margin-right: 30px; margin-top: 3px; } .feature-single-box.style_six .feature-content h3 { margin-top: 0; font-size: 24px; font-weight: 600; margin-bottom: 18px; } .pricing-area.style_sevens { padding: 100px 0 90px; background: #fff; } .pricing-area.style_sevens .section-title.text-center.style1 { margin-bottom: 48px; } .pricing-toggle.style_two { margin-bottom: 38px; } .pricing-toggle.style_two span { color: #000e52 !important; font-weight: 500; font-family: "Urbanist"; } .slider.two { position: absolute; cursor: pointer; top: -6px; left: -5px; right: -5px; bottom: -6px; background-color: transparent; transition: 0.4s; border-radius: 16px; border: 2px solid rgba(0,14,82,0.1); } .slider.two:before { bottom: 6px; background-color: #026CFF; border-radius: 50%; } input:checked + .slider.two { background-color: transparent; } .pricing-single-items.style_one.style_seven { text-align: left; padding: 30px 30px 25px; background: #F5F8FD !important; border-radius: 5px; border-top: 5px solid #0055FF; } .pricing-single-items.style_one.style_eight { background: #ffff !important; } .pricing-area.style_sevens.style_eight.style_nine { margin-top: 0; padding: 110px 0 90px; } .pricing-single-items.style_one.upper { margin-top: -10px; } .pricing-single-items.style_one.style_seven h3.pricing-plan2 { font-size: 24px; color: #041341 !important; font-weight: 600; } .pricing-single-items.style_one.style_seven span.pricing-from { margin-top: 13px; font-family: "Urbanist"; font-weight: 500; font-size: 18px; } .pricing-single-items.style_one.style_seven .pricing-plan h2 { margin-bottom: 0; margin-top: 14px; font-size: 32px; position: relative; z-index: 1; padding-left: 20px; } .pricing-single-items.style_one.style_seven .pricing-plan h2 span { font-size: 18px; line-height: 26px; color: #616161; font-weight: 400; } .pricing-single-items.style_one.style_seven .pricing-plan h2 .price_style { font-size: 18px; line-height: 26px; color: #041341 !important; font-weight: 700; font-family: 'Urbanist'; position: absolute; top: 0; left: 0; } .pricing-single-items.style_one.style_seven .pricing-body { margin-top: 28px; } .pricing-single-items.style_one.style_seven .pricing-body:before { top: -12px; } .pricing-single-items.style_one.style_seven .pricing-feature ul li { margin-bottom: 7px; font-size: 15px; font-weight: 400; font-family: "Mulish"; } .pricing-single-items.style_one.style_seven .pricing-btn a { background: transparent !important; padding: 10px 122px; border: 1px solid #0782ff; border-radius: 25px; font-size: 16px; color: #041341; font-weight: 500; } .pricing-single-items.style_one.style_seven .pricing-btn a:after { border-radius: 25px; } .pricing-single-items.style_one.style_seven .pricing-btn a i { transform: rotate(-69deg); margin-left: 5px; font-size: 11px; display: inline-block; font-weight: 600; } /* pagination btn */ .paginatin { margin-top: 22px; } a.pagination_btn { font-size: 16px; color: #077FFF; font-weight: 500; display: inline-block; } a.pagination_btn i { transform: rotate(-45deg); display: inline-block; font-size: 15px; font-weight: 600; margin-left: 10px; } /*--==============================================-> ==================================================-*/ .about-area.style_six { margin-top: 0; background: #ffff; padding: 120px 0 120px; } .about-area.style_six .section-title p { color: #636363; } .about-area.style_six .section-title.style_one { border-bottom: none; margin-bottom: 5px; padding-bottom: 5px; } .about-area.style_six .about_thumb { position: relative; z-index: 1; margin-left: -91px; } .about-area.style_six .about-list ul li { color: #000e52; margin-bottom: 15px; } .about-area.style_six .about-single-item { padding: 15px 30px 11px; margin-bottom: 30px; border-radius: 0; filter: none; background-color: #F5F7FD; border-bottom: 3px solid #1387FF; transition: .5s; margin-top: 25px; } .about-area.style_six .about-single-item:hover { border-bottom: 3px solid #fe8730; } .about-area.style_six .about-single-item .about-text p { color: #636363; } .about-area.style_six h3.about-title { font-size: 42px; color: #0782ff; font-weight: 700; font-family: "Urbanist"; margin-bottom: 8px; position: relative; z-index: 1; transition: .5s; } .about-area.style_six .about-single-item h3.about-title::before { position: absolute; content: ""; background: url(../images/home/about/abou_icon.png); height: 100%; width: 100%; top: 16px; right: -92px; background-repeat: no-repeat; } .about-area.style_six .about-single-item .about-single-item:hover h3.about-title { color: #fe8730; } /*--==============================================-> ==================================================-*/ .testimonial-area.style_six { background: url(../images/inner-page/testi_bg.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 100px 0 120px; } .testimonial-area.style_six .section-title p { color: #636363; } .testimonial-single-item.style_seven { filter: drop-shadow(0px 10px 20px rgba(214,214,214,0.35)); background-color: #ffffff; transition: .5s; } .testimonial-single-item.style_seven h4.name { color: #000e52; transition: .5s; } .testimonial-single-item.style_seven h5.designation { color: #636363; transition: .5s; } .testimonial-single-item.style_seven .testimonial-content p { transition: .5s; color: #636363; } /* all hover */ .testimonial-single-item.style_seven:hover h4.name { color: #fff; } .testimonial-single-item.style_seven:hover h5.designation { color: #fff; } .testimonial-single-item.style_seven:hover .testimonial-content p { color: #fff; } /* active center color */ .testimonial-area.style_six .owl-item.active.center h4.name { color: #fff; } .testimonial-area.style_six .owl-item.active.center h5.designation { color: #fff; } .testimonial-area.style_six .owl-item.active.center .testimonial-content p { color: #fff; } /*--==============================================-> ==================================================-*/ .call-do-action { background: url(../images/inner-page/col_do_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 100px 0 108px; } .call-do-action .section-title { margin-bottom: 0; } /*--==============================================-> ==================================================-*/ .faq-area.style_seven { background: #F5F8FD; padding: 100px 0 105px; } .faq-item { display: flex; align-items: center; background: #FFFFFF; padding: 22px 30px 22px; border-radius: 5px; margin-bottom: 20px; position: relative; z-index: 1; } .faq-item:before { position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 0%; background: #067AFF; z-index: -1; transition: .5s; border-radius: 5px; } .faq-item:hover:before { width: 100%; } .faq-icon { background: #E6EFFE; height: 60px; width: 60px; line-height: 60px; text-align: center; border-radius: 50%; margin-right: 20px; transition: .5s; } .faq-icon img { filter: brightness(1) invert(0); transition: .5s; } h3.faq-title { margin-top: 0; font-size: 20px; color: #000e52; font-weight: 500; transition: .5s; } /* all hover */ .faq-item:hover .faq-icon img { filter: brightness(0) invert(1); } .faq-item:hover .faq-icon { background: #347DFE; } .faq-item:hover h3.faq-title { color: #fff; } .accordion.style_four li a { font-size: 18px; color: #000e52 !important; font-weight: 500; padding: 21px 8px 21px 35px; border: 1px solid #DCE0EC; background: #fff; border-radius: 5px; } .accordion.style_four li p { padding: 0px 114px 33px 35px; background: #ffff; color: #636363; } .accordion.style_four li a i { font-size: 16px; position: absolute; right: 30px; color: #067CFF; } .accordion.style_four a.active i { transform: rotate(-180deg); } .accordion.style_four a.active { border: 1px solid #DCE0EC; border-bottom: 0; } .accordion.style_four p.active { border: 1px solid #DCE0EC; border-top: 0; } .accordion.style_four a:before { display: none; } .accordion.style_four a.active:after { display: none; } /*--==============================================-> ==================================================-*/ .feature-area.style_seven { background: transparent; padding: 0; position: relative; z-index: 2; } .row.feature_upper2 { margin-top: -40px; position: relative; z-index: 1; } /* feature box */ .feature-single-box.style_seven { background: #fff; margin-bottom: 30px; padding: 40px 40px 32px; border-radius: 5px; border-bottom: 4px solid transparent; transition: .5s; } .feature-single-box.style_seven:hover { border-bottom: 4px solid #1387ff; } .feature-single-box.style_seven h3 { font-size: 20px; color: #041341; font-weight: 600; margin-top: 30px; } .pricing-area.style_sevens.style_eight { background: url(../images/inner-page/pricing-bg.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; margin-top: -175px; position: relative; padding: 246px 0 95px; } /* */ .feature-area.style_eight { background: url(../images/inner-page/feature_bg.jpg); padding: 100px 0 90px; background-repeat: no-repeat; background-size: cover; background-position: center center; } .feature-area.style_nine { background: url(../images/inner-page/feature_bg.png); padding: 110px 0 90px; background-repeat: no-repeat; background-size: cover; background-position: center center; } .feature-single-box.style_eight { border-radius: 5px; background: #fff; padding: 50px 35px 27px; margin-bottom: 30px; text-align: center; border-bottom: 5px solid transparent; transition: .5s; } .feature-single-box.style_eight:hover { border-bottom: 5px solid #1387FF; } .feature-single-box.style_eight .feature-content h3 { margin-top: 35px; font-size: 24px; color: #041341; font-weight: 600; margin-bottom: 18px; } .feature-single-box.style_eight .feature-content p { font-size: 17px; line-height: 28px; color: #636363; transition: .5s; } .feature_btn { margin-top: 2px; } .feature_btn a { display: inline-block; font-size: 17px; color: #041341; font-weight: 500; font-family: "Mulish"; transition: .5s; } .feature_btn a i { font-size: 16px; margin-left: 10px; } /*--==============================================-> ==================================================-*/ .category-area.style_five { background: url(../images/inner-page/categry_bg.jpg); padding: 100px 0 90px; background-repeat: no-repeat; background-size: cover; background-position: center center; } .category_single-item.style_four { background: #ffff; } .category_single-item.style_four .category-title h3 { color: #000F52; } /*--==============================================-> ==================================================-*/ .breadcumb_two.style_three { background: url(../images/inner-page/breadcumb_bg.png); background-repeat: no-repeat; background-size: cover; background-position: center center; height: 955px; } .breadcumb_content h4 { font-size: 18px; color: #ffffff; font-weight: 400; font-style: italic; text-transform: uppercase; margin-bottom: 15px; } /*--==============================================-> ==================================================-*/ .vps-price-slider { background: #F5F8FD; padding: 0 0 50px; } .vps-price-slider .section-title.text-center { margin-bottom: 25px; } .price-slider-wrapper { background: #fff; margin: 0; padding: 60px 80px 80px; margin-top: -90px; border-radius: 10px; } .tab-container { margin: 20px 0 33px; } /* range btn */ .range_btn { display: flex; justify-content: space-around; } .vps_labels { text-align: center; margin-bottom: 25px; } .vps_labels span { font-size: 18px; color: #006cff; font-weight: 500; font-family: "Urbanist"; } /* Range btn */ .ramge_btn { justify-content: space-around; display: flex; } /* cps pp feature item */ .vps_pp_feature_item { border-radius: 10px; background-color: #ffffff; border: 1px solid rgba(0,14,82,0.1); margin-bottom: 30px; padding: 15px 20px 15px; transition: .5s; } .vps_pp_feature_item:hover { background: rgba(0,108,255,0.10196078431372549); border: 1px solid rgba(0,108,255,0.10196078431372549); } .vps_icon { margin-right: 20px; } .vps_pp_feature_item_content h6 { font-size: 16px; color: #006cff; font-weight: 500; font-family: "Urbanist"; margin-top: 0; margin-bottom: 4px !important; } .vps_pp_feature_item_content span { font-size: 20px; color: #000e52; font-weight: 500; font-family: "Urbanist"; } span.price-yearly { display: none; } .tab-button { border: none !important; cursor: pointer; background: transparent; font-size: 18px; color: #006cff; font-weight: 500; font-family: "Urbanist"; text-align: center; } .tab-content { display: none; } .tab-content input { width: 100%; border: none; -webkit-appearance: none; box-shadow: none; outline: none; height: 8px; border-radius: 4px; background: rgba(0,108,255,0.2); } .tab-content input::-moz-range-progress { background: blue; } .tab-content input::-webkit-slider-thumb { height: 25px; width: 25px; background: #fff; border-radius: 50%; border: 6px solid #0082f8; -webkit-appearance: none; } .vps-price-slider .hosting-button.style_seven { margin-top: 27px; text-align: center; } .vps-price-slider .hosting-button.style_seven a { padding: 14px 30px; } /*--==============================================-> ==================================================-*/ .vps_plan { padding: 70px 0 120px; background: #F5F8FD; } /* vps priving Table */ .vps-pricing-table { overflow-x: auto; } .vps-pricing-table table thead tr th { padding: 15px 50px; color: #fff; background-image: linear-gradient(0deg, #0781ff 0%, #0054ff 100%); font-size: 18px; color: #ffffff; font-weight: 500; font-family: "Urbanist"; } /* cps priceing table child */ .vps-pricing-table table thead tr th:nth-child(5) { min-width: 242px; } .vps-pricing-table table thead tr th:nth-child(3) { min-width: 188px; } .vps-pricing-table table thead tr th:nth-child(7) { min-width: 220px; } .vps-pricing-table table tbody tr td { font-size: 14px; color: #000e52; font-weight: 500; font-family: 'Mulish'; text-align: center; border: 1px solid #E9E9E9; padding: 16px 0; } .vps-pricing-table table tbody tr td h6 { font-size: 14px; color: #838ba4; font-weight: 400; margin-top: 0; } .vps-pricing-table table tbody tr td:nth-child(5) { text-align: left; padding: 0 48px 0; position: relative; z-index: 1; } .vps-pricing-table table tbody tr td:nth-child(7) { color: #046BFF !important; font-size: 18px; color: #006cff; font-weight: 600; } span.color_style { font-size: 14px; color: #000e52ba; font-weight: 400; } /*prossess ber*/ .barfiller { position: relative; margin-top: -21px; width: 100px; height: 14px; border-radius: 7px; background-color: #e4ebf6; left: 47px; } span.fill { background: #006BFF; } .barfiller .fill { display: block; position: relative; width: 0px; height: 100%; background: transparent; z-index: 1; left: 0; } .barfiller .tip { margin-top: -9px; padding: 2px 4px; left: 0px; border-radius: 0; position: absolute; z-index: 2; font-size: 10px; color: #ffffff; font-weight: 300; } .vps-pricing-table table tbody tr td a { display: inline-block; font-size: 12px; color: #ffffff; font-weight: 500; background-image: linear-gradient(113deg, #0054ff 0%, #0781ff 100%); padding: 1px 18px; border-radius: 30px; } /*--==============================================-> ==================================================-*/ .about-area.style_seven { background: #fff; margin-top: 0; padding: 110px 0 120px; } .about-area.style_seven .about-list ul li { color: #000e52; margin-bottom: 20px; background: #F5F7FD; padding: 15px 20px; } .hosting-button.style_seven { margin-top: 20px; } .hosting-button.style_seven a { padding: 16px 30px; background-image: linear-gradient(113deg, #0054ff 0%, #0781ff 100%); } /*==================================================== --< Start Hosting Vedio area Css --> ======================================================*/ .video-area { padding: 120px 0 120px; } .row.video_bg { background: url(../images/inner-page/video_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; height: 550px; } .video-area .video_btn a { font-size: 20px; color: #ffffff; font-family: "Mulish"; display: inline-block; line-height: 100px; text-align: center; -webkit-animation: ripple-white 1s linear infinite; animation: ripple-blue 1s linear infinite; background: #fe7c0f; border-radius: 50%; width: 100px; height: 100px; } /*==================================================== --< Start Hosting Breadcumb_two Style Four Css --> ======================================================*/ .breadcumb_two.style_four { background: url(../images/inner-page/bread_bg3.png); background-repeat: no-repeat; background-size: cover; background-position: center center; height: 900px; } .breadcumb_two.style_four .breadcumb-list { display: inline-block; } .breadcumb_two.style_four .breadcumb-list li { color: #ffffff; margin-bottom: 18px; } .breadcumb_two.style_four .bradcumb-thumb { margin-top: 98px; } .breadcumb_two.style_four .breadcumb_content p { margin: 25px 0 25px; } .breadcumb-list.style_two { margin-left: 39px; } /*==================================================== --< Start Hosting Pricing area Style Nine Css --> ======================================================*/ .pricing-area.style_nine { background: url(../images/inner-page/pricing-bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; } /* pricing single item */ .pricing-single-items.style_one.style_nine { background: #fff; position: relative; z-index: 1; padding: 35px 30px 23px; margin-bottom: 30px; border-top: 4px solid rgba(0,108,255,0.10196078431372549); transition: .5s; } .pricing-single-items.style_one.style_nine:hover { border-top: 4px solid #1388ff; } .pricing-single-items.style_one.style_nine .pricing_icon { float: inherit; margin-right: 0; margin-bottom: 25px; } .pricing-single-items.style_one.style_nine h2.price { font-size: 32px; color: #1388ff; font-weight: 700; } .pricing-single-items.style_one.style_nine .price span { font-size: 16px; line-height: 26px; color: #636363; font-weight: 400; font-family: 'Mulish'; } .pricing-single-items.style_one.style_nine .price sup { font-size: 18px; font-family: "Urbanist"; position: relative; top: -12px; } .pricing-single-items.style_one.style_nine .pricing-title { position: relative; z-index: 1; margin-top: 13px; padding-top: 6px; } .pricing-single-items.style_one.style_nine .pricing-title span { font-size: 16px; color: #636363; } .pricing-single-items.style_one.style_nine .pricing-title:before { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 1px; background-color: rgba(0,14,82,0.10196078431372549); } .pricing-single-items.style_one.style_nine .pricing-title h3 { margin-bottom: 5px; font-size: 22px; color: #041341; font-weight: 700; } .pricing-single-items.style_one.style_nine span.pricing { position: absolute; top: 64px; right: 38px; font-size: 36px; color: #fe8730; font-weight: 600; font-family: "Urbanist"; transition: .5s; } /* pricing body */ .pricing-single-items.style_one.style_nine .pricing-body { margin-top: 25px; } .pricing-single-items.style_one.style_nine .pricing-body:before { display: none; } .pricing-single-items.style_one.style_nine .pricing-feature ul li { margin-bottom: 8px; color: #636363; transition: .5s; font-size: 16px; } .pricing-single-items.style_one.style_nine .pricing-feature ul li img { margin-right: 12px; position: relative; top: -2px; } /* pricing button */ .pricing-single-items.style_one.style_nine .pricing-btn a { background: transparent !important; border: 1px solid #0782ff; padding: 10px 61px; font-size: 16px; color: #041341; font-weight: 500; border-radius: 5px; } .pricing-single-itemss.style_one.style_nine .pricing-btn a:after { background-image: linear-gradient(113deg, #0054ff 0%, #0781ff 100%); border-radius: 5px !important; } .pricing-single-items.style_one.style_nine .pricing-btn a i { transform: rotate(-45deg); margin-left: 6px; font-size: 20px; display: inline-block; position: relative; top: 3px; color: #1281FF; transition: .5s; } .pricing-single-items.style_one.style_nine:hover .pricing-btn a i { color: #fff; } /* about area style eight */ .about-area.style_eight .about_thumb { margin-left: 0; text-align: right; } .about-area.style_eight .about-single-item { border-radius: 0; background: #F5F8FD; padding: 10px 30px 3px; filter: inherit; } .about-area.style_eight .section-title.style_one { margin-bottom: 15px; } /* category area styl six */ .category-area.style_six { background: #F5F7FD; } /* brand area styl three */ .brand-area.style_three { background: #fff; padding: 120px 0 120px; } .brand-area.style_three .brand-single-item { border: 1px dashed #9AA2AC; } /*==================================================== --< Start Hosting Breadcumb two Style Five Css --> ======================================================*/ .breadcumb_two.style_five { background: url(../images/inner-page/bred_bg5.png); background-repeat: no-repeat; background-size: cover; background-position: center center; position: relative; z-index: 1; } .breadcumb_content h1 span { color: #FE8731; } .breadcumb_two.style_five .breadcumb-list { margin-top: 24px; } .breadcumb_two.style_five .breadcumb-list li { display: inline-block; margin-right: 35px; } .breadcumb_two.style_five .hosting-button { margin-top: 25px; } /* breadvumb_shape */ .breadcumb-shape1 { position: absolute; top: 45%; transform: translate(50%); right: 262px; } .breadcumb-shape2 { position: absolute; top: 45%; transform: translate(50%); left: 13%; } /*==================================================== --< Start Hosting Feature area Style Ten Css --> ======================================================*/ .feature-area.style_ten { background: #F5F8FD; z-index: inherit; } .feature-area.style_ten .row.feature_upper2 { margin-top: -50px; } .feature-single-box.style_ten { text-align: center; border-bottom: 0; padding: 40px 60px 32px; filter: drop-shadow(0px 5px 15px rgba(187,190,192,0.1)); } .feature-single-box.style_ten:hover{ border-bottom: inherit; } .feature-single-box.style_ten h3 { line-height: 28px; margin-top: 25px; } /*==================================================== --< Start Hosting Feature area Style Eleven Css --> ======================================================*/ .feature-area.style_eleven { background: url(../images/inner-page/feature_bg.png); padding: 110px 0 90px; background-repeat: no-repeat; background-size: cover; background-position: center center; } .feature-single-box.style_eleven { padding: 48px 30px 20px; } .feature-single-box.style_eleven { padding: 48px 30px 20px; position: relative; z-index: 1; } .feature-single-box.style_eleven:before { position: absolute; content: ""; left: 0%; top: 0; height: 100%; width:0%; background: #0162FF; z-index: -1; border-radius: 5px; transition: .5s; } .feature-single-box.style_eleven:hover:before { width: 100%; } .feature-area.style_eleven .feature-icon { width: 75px; height: 75px; border-radius: 5px; line-height: 75px; background: #E5F0FF; text-align: center; } .feature-area.style_eleven .feature-content h3 { font-size: 22px; margin-bottom: 11px; transition: .5s; } /* all hover */ .feature-single-box.style_eleven:hover .feature-content h3 { color: #fff; } .feature-single-box.style_eleven:hover .feature-content p{ color: #fff; } /*==================================================== --< Start Hosting Reseller Pricing Css --> ======================================================*/ .reseller_pricing { background: #F5F8FD; padding: 100px 0 120px; } .reseller_pricing .section-title.text-center { margin-bottom: 39px; } .reseller_pricing .pricing-toggle.style_two { margin-bottom: 30px; } .reseller_pricing .slider.two { position: absolute; cursor: pointer; top: -7px; left: -7px; right: -7px; bottom: -7px; background-color: transparent; transition: 0.4s; border-radius: 16px; border: 2px solid rgba(0,14,82,0.1); } .reseller_pricing .slider.two:before { bottom: 6px; background-color: #026CFF; border-radius: 50%; height: 18px; width: 18px; } .reseller_pricing table { width: 100%; } .reseller_price-change { margin-bottom: 15px; background: #000E52; border-radius: 10px 10px 0 0; } .reseller_price-change table thead tr th { padding: 35px 0px 50px 50px; color: #fff; background: #000E52; font-size: 18px; color: #ffffff; font-weight: 500; font-family: "Urbanist"; border: 1px solid #e9e9e961; margin-bottom: 20px; width: 25%; border-radius: 10px 10px 0 0; } th.plan-title { font-size: 24px !important; font-weight: 600 !important; } .pricing-plan.table h6 { font-size: 20px; color: #ffffff; font-weight: 500; } .pricing-plan.table h2 { color: #0260FE; } .pricing-plan h3 { text-align: center; font-size: 24px; color: #ffffff; font-weight: 600; } .pricing_btn a { display: inline-block; font-size: 14px; color: #ffffff; font-weight: 400; border: 2px solid #ffffff38; border-radius: 25px; padding: 9px 23px; } .pricing_btn a:hover { background: #0361FF; border: 2px solid #0361FF; } .reseller-pricing-table table tbody tr td { border: 1px solid #E9E9E9; padding: 11px 40px; width: 25%; font-size: 16px; color: #000e52; font-weight: 400; font-family: "Urbanist"; background: #fff; } /* about area style eight */ .about-area.style_eight { background: #F5F8FD; padding: 85px 0 120px; } .about-area.style_eight .about-list ul li { background: #fff; } .about-area.style_five { padding: 120px 0 150px; margin-top: 0; } .blog-area.style_seven { background: #F6F5F5; padding: 120px 0 90px; } /*==================================================== --< Start Hosting Blog area Sinmgle blog Css --> ======================================================*/ .blog-area.single_blog { background: #fff; padding: 120px 0 120px; } .blog-thumb img { width: 100%; } /* single-src-bar */ .blog-src-bar { background: #fff; box-shadow: 6px 5px 16px 0px rgb(0 0 0 / 8%); padding: 20px 30px 42px; margin-bottom: 30px; } .blog-src-bar h2 { font-size: 22px; font-weight: 700; position: relative; margin-bottom: 14px; } .blog-src-bar h2:before { position: absolute; content: ""; top: 2px; left: -9px; background: #056FFF; height: 20px; width: 2px; } .src-bar form { position: relative; z-index: 1; } input.blog-control { width: 100%; height: 53px; outline: 0; border: 1px solid #DCE1E3; padding-left: 20px; } .blog-src-bar .blog-btn { right: 0; background: #056FFF; color: #fff; display: inline-block; padding: 12px 25px; position: absolute; border: none; bottom: 0px; } .blog-latest { background: #fff; padding: 10px 30px 38px; box-shadow: 6px 5px 16px 0px rgb(0 0 0 / 8%); } .blog-latest h2 { font-size: 22px; position: relative; margin-bottom: 20px; transition: .5s; } .blog-latest h2:hover{ color: #056FFF; } .blog-latest h2:before { position: absolute; content: ""; top: 2px; left: -9px; background: #056FFF; height: 20px; width: 2px; } .blog-latest-items { display: flex; align-items: center; margin-bottom: 20px; } .blog-latest-items.style_one { margin-bottom: 0; } .b-thumb { margin-right: 15px; } .b-thumb img { border-radius: 5px; } .b-content h3 { font-size: 18px; cursor: pointer; line-height: 22px; margin-top: 4px; } .b-content span { font-size: 14px; } .b-content span i { color: #FDA200; } .top-catagories { background: #fff; padding: 10px 30px 38px; box-shadow: 6px 5px 16px 0px rgb(0 0 0 / 8%); margin-top: 30px; } .top-catagories h2 { font-size: 22px; position: relative; } .top-catagories h2:before { position: absolute; content: ""; top: 3px; left: -9px; background: #056FFF; height: 20px; width: 2px; } .top-catagories span { display: block; font-size: 15px; background: #056FFF; padding: 5px 22px; margin-bottom: 15px; color: #fff; margin-top: 20px; } .follow-us { background: #fff; padding: 10px 30px 30px; box-shadow: 6px 5px 16px 0px rgb(0 0 0 / 8%); margin-top: 30px; } .follow-us h2 { font-size: 22px; position: relative; margin-bottom: -20px; } .follow-us h2:before { position: absolute; content: ""; top: 7px; left: -9px; background: #D00A2B; height: 20px; width: 2px; } .follow-us .about-me-soical { margin-left: -29px; } .tags{ background: #fff; padding: 10px 30px 30px; box-shadow: 6px 5px 16px 0px rgb(0 0 0 / 8%); margin-top: 30px; } .tags h2 { font-size: 22px; position: relative; margin-bottom: 20px; } .tags h2:before { position: absolute; content: ""; top: 3px; left: -9px; background: #056FFF; height: 20px; width: 2px; } .tags span { font-size: 14px; border: 2px solid #056FFF; padding: 2px 20px 2px; text-align: center; display: inline-block; margin-bottom: 20px; margin-right: 15px; transition: .5s; } .tags span:hover { background: #056FFF; color: #fff; } .single-blog-content { margin-left: 35px; margin-top: 40px; margin-right: 30px; } span.color { color: #056FFF; } .blog-meta-top2 span { color: #056FFF; margin-left: 5px; } .blog-title-2 h2 { font-size: 35px; margin: 0 0 15px; font-weight: 700; } .blog-title h2 { font-size: 40px; margin-bottom: 18px; font-weight: 700; } .blog-bullets h2 { font-size: 35px; font-weight: 700; margin: 0 0 14px; } .blog-bullets ul li { font-size: 16px; font-weight: 500; list-style: inherit; margin-bottom: 10px; } #contact_form3 { background: #F7F7F7; padding: 58px 44px 42px 30px; margin-bottom: 30px; } .contact-form_2 { position: relative; } .contact-form_2 i { position: absolute; left: 22px; right: 0; margin-top: 20px; font-size: 11px; color: #5C727D; top: -2px; } .contact-form-msg-2 i { position: absolute; left: 64%; right: 0; margin-top: 29px; font-size: 12px; color: #5C727D; margin-left: 15px; } .contact-style_2 { width: 100%; height: 45px; padding-left: 20px; background: #fff; border: none; outline: 0; margin-bottom: 20px; } .contact-style-msg2 { width: 100%; height: 185px; padding-left: 20px; background: #fff; border: none; outline: 0; padding-top: 20px; } .blog-drop-form h2 { margin-top: -20px; margin-bottom: 28px; } .blog-checkbox { display: flex; align-items: center; } label.checkbox-control { color: #232323; margin-bottom: 0; margin-left: 15px; } .blog-drop-form h2 { margin-top: -20px; margin-bottom: 28px; font-size: 28px; } .single-blog-items { margin-top: 0; background: #fff; box-shadow: 0 3px 19px rgb(0 0 0 / 8%); padding: 2px 2px 20px; } input.blog-button { width: 100%; margin-top: 27px; color: #fff; background: #056FFF; border: none; padding: 10px 0 10px; } /*--==============================================-> ==================================================-*/ .contact-us-section { background: #F6F4F5; padding: 110px 0 120px; } .contact-us-section .form-box input { height: 60px; background-color: #fff; border: 0; transition: .5s; padding: 0px 25px; display: block; width: 100%; color: #0D0E14; margin-bottom: 20px; border-radius: 4px; } .contact-us-section .form-box textarea { height: 180px; width: 100%; padding: 15px 22px 0px; background: #fff; border: 0; border-radius: 4px; color: #0D0E14; } .contact-form { text-align: center; margin-top: 33px; } .contact-form button { border: 0; background-image: linear-gradient(113deg, #fa4b05 0%, #ff9038 100%); color: #fff; padding: 12px 24px; font-weight: 500; border-radius: 5px; } /*contact info*/ .contact-info-section { background: #F6F9FF; padding: 100px 0 190px; } .contact-information { margin-bottom: 30px; } /*contact icon*/ .contacts-icon { float: left; margin-right: 20px; } .contacts-icon i { width: 60px; height: 60px; line-height: 60px; background: #189FFF; text-align: center; color: #fff; font-size: 20px; border-radius: 50%; display: inline-block; } .contacts-title h5 { color: #636363; font-weight: 400; font-size: 16px; } .contacts-title h6 { font-size: 18px; font-weight: 600; padding: 4px 0 0; } .upper.contacts-icon i { background: #fe8731; } .upper2.contacts-icon i { background: #0781ff ; } .map-section { padding: 0 0 120px; } .row.map-bg { margin-top: -130px; } /*--==============================================-> ==================================================-*/ .error-area { background: #00149d; height: 100vh; } h2.error-title { font-size: 4rem; color: #fff; margin: 10px 0 20px; display: inline-block; } h1.error-text { color: #fff; font-size: 90px; font-weight: 900; } small.small { font-size: 25px; color: #636363; } p.lead { color: #fff; width: 52%; text-align: center; margin: auto; font-weight: 500; } .error-info a { background-color: transparent; border: 1px solid #ffff; color: #ffffff; font-size: 16px; font-weight: 500; padding: 12px 24px; margin-top: 40px; display: inline-block; border-radius: 5px; } .error-info a:hover { background: #0a58ca; border: 1px solid #0a58ca; } /*--==============================================-> ==================================================-*/ .register-area { padding: 105px 0 103px; } .header-lined { justify-content: center; display: grid; } .header-lined h1 { margin-top: 0; margin-bottom: 15px; padding: 6px 0; border-bottom: 1px solid #ccc; font-weight: 400; color: #000D65; } .header-lined .breadcrumb { color: #636363; margin-top: -15px; padding-left: 0; background: 0 0; font-size: 12px; border-radius: 0 0 4px 4px; } .header-lined .breadcrumb>.active { color: #0e5077; } .breadcrumb>li+li:before { padding: 0 5px; color: #ccc; content: "/\00a0"; } .sub-heading { height: 0; border-top: 1px solid #ddd; text-align: center; margin-top: 20px; margin-bottom: 30px; } .sub-heading span { display: inline-block; position: relative; padding: 0 17px; top: -17px; font-size: 16px; color: #000D65; background-color: #fff; } .form-group { position: relative; z-index: 1; margin-bottom: 30px; } .register-area label.field-icon { position: absolute; left: 15px; top: 8px; color: #636363; } .register-area .form-group input { height: 45px; padding-left: 40px; font-size: 15px; width: 100%; border: 1px solid #ced4da; } .field.form-control.custom-select { height: 45px; } .register-area .btn-primary { color: #fff; background-color: #0d6efd; border-color: #0d6efd; padding: 13px 67px; font-size: 16px; font-weight: 500; } /*--==============================================-> ==================================================-*/ .hosting-area { background: #00149d; height: 700px; } .hosting-thumb { text-align: right; } .hosting-contnet h1 { color: #ffff; font-size: 60px; font-weight: 800; } .hosting-contnet p { color: #fff; font-size: 18px; font-weight: 500; margin-top: 18px; } /* */ /* bounce-animate */ .bounce-animate { animation-name: float-bob; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; -moz-animation-name: float-bob; -moz-animation-duration: 2s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: float-bob; -ms-animation-duration: 2s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: float-bob; -o-animation-duration: 2s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } .bounce-animate2 { animation-name: float-bob2; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: linear; -moz-animation-name: float-bob2; -moz-animation-duration: 3s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: float-bob2; -ms-animation-duration: 3s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: float-bob2; -o-animation-duration: 3s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } .bounce-animate3 { animation-name: float-bob3; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: linear; -moz-animation-name: float-bob3; -moz-animation-duration: 3s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: float-bob3; -ms-animation-duration: 3s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: float-bob3; -o-animation-duration: 3s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } .bounce-animate4 { animation-name: float-bob4; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; -moz-animation-name: float-bob4; -moz-animation-duration: 5s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: float-bob4; -ms-animation-duration: 5s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: float-bob4; -o-animation-duration: 5s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } .bounce-animate5 { animation-name: float-bob5; animation-duration: 6s; animation-iteration-count: infinite; animation-timing-function: linear; -moz-animation-name: float-bob5; -moz-animation-duration: 6s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: float-bob5; -ms-animation-duration: 6s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: float-bob5; -o-animation-duration: 6s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } .bounce-animate-slow { animation-name: float-bob5; animation-duration: 15s; animation-iteration-count: infinite; animation-timing-function: linear; -moz-animation-name: float-bob5; -moz-animation-duration: 15s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: float-bob5; -ms-animation-duration: 15s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: float-bob5; -o-animation-duration: 15s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } .bounce-animate-3 { animation-name: float-bob6; animation-duration: 6s; animation-iteration-count: infinite; animation-timing-function: linear; -moz-animation-name: float-bob6; -moz-animation-duration: 6s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: float-bob6; -ms-animation-duration: 6s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: float-bob6; -o-animation-duration: 6s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } @keyframes float-bob { 0% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 50% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } 100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @keyframes float-bob2 { 0% { -webkit-transform: translateY(-60px); transform: translateY(-60px); } 50% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 100% { -webkit-transform: translateY(-60px); transform: translateY(-60px); } } @keyframes float-bob3 { 0% { -webkit-transform: translateY(-50px); transform: translateY(-50px); } 50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { -webkit-transform: translateY(-50px); transform: translateY(-50px); } } @keyframes float-bob4 { 0% { -webkit-transform: translateY(-50px); transform: translateY(-50px); } 50% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } 100% { -webkit-transform: translateY(-50px); transform: translateY(-50px); } } @keyframes float-bob5 { 0% { -webkit-transform: translateY(-50px); transform: translateY(-50px); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(-50px); transform: translateY(-50px); } } @keyframes float-bob6 { 0% { -webkit-transform: translateY(-40px); transform: translateY(-40px); } 50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { -webkit-transform: translateY(-40px); transform: translateY(-40px); } } @keyframes movebounce { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes moveleftbounce { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } } /*--==============================================-> ==================================================-*/ /**/ .dance3 { -webkit-animation: dance3 8s alternate infinite; animation: dance3 8s alternate infinite; } @keyframes dance3 { 0% { -webkit-transform: scale(0.5); } 100% { -webkit-transform: scale(1); } } .dance { -webkit-animation: dance 2s alternate infinite; animation: dance 2s alternate infinite; } @keyframes dance { 0% { -webkit-transform: scale(0.5); } 100% { -webkit-transform: scale(1.2); } } .dance2 { -webkit-animation: dance2 4s alternate infinite; animation: dance2 4s alternate infinite; } @keyframes dance2 { 0% { -webkit-transform: translate3d(0, 0, 0); } 50% { -webkit-transform: translate3d(25px, -25px, 0); } 100% { -webkit-transform: translate3d(0, -25px, 25px); } } .watermark-animate { -webkit-animation: watermark-animate 8s infinite; animation: watermark-animate 8s infinite; animation-direction: alternate-reverse; -webkit-animation-timing-function: linear; animation-timing-function: linear; } @keyframes watermark-animate { 0% { left: 0; } 100% { left: 100%; } } .rotateme { -webkit-animation-name: rotateme; animation-name: rotateme; -webkit-animation-duration: 20s; animation-duration: 20s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } /*===================================== <-- Constre Search Box Css --> =======================================*/ /*nav button*/ .search-box-btn.search-box-outer { display: inline-block; } .nav-btn.navSidebar-button { display: inline-block; position: relative; top: 2px; } .nav-btn.navSidebar-button a i { font-size: 15px; width: 32px; line-height: 35px; height: 32px; border-radius: 50px; text-align: center; background: #efefef; display: inline-block; color: #232323; position: relative; z-index: 1; margin-left: 15px; transition: .5s; cursor: pointer; } .nav-btn.navSidebar-button a i:after { position: absolute; content: ""; z-index: -1; left: 0; top: 0; right: 0; bottom: 0; background: #FF3C00; border-radius: 50%; transition: .5s; transform: scale(0); } .nav-btn.navSidebar-button a i:hover:after { transform: scale(1); } .nav-btn.navSidebar-button a i:hover { color: #fff; } .xs-sidebar-group .xs-overlay { left: 100%; top: 0; position: fixed; z-index: 101; height: 100%; opacity: 0; width: 100%; visibility: hidden; -webkit-transition: all 0.4s ease-in 0.8s; -o-transition: all 0.4s ease-in 0.8s; transition: all 0.4s ease-in 0.8s; } .xs-sidebar-group .widget-heading { position: absolute; top: 23px; right: 0; padding: 25px; } .xs-sidebar-widget { position: fixed; right: -100%; top: 0; bottom: 0; width: 100%; max-width: 360px; z-index: 999999; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; background-color: #ff9038; -webkit-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s; -o-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s; transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s; visibility: hidden; opacity: 0; } .xs-sidebar-group.isActive .xs-overlay { opacity: 0.7; visibility: visible; -webkit-transition: all 0.8s ease-out 0s; -o-transition: all 0.8s ease-out 0s; transition: all 0.8s ease-out 0s; left: 0; } .xs-sidebar-group.isActive .xs-sidebar-widget { opacity: 1; visibility: visible; right: 0; -webkit-transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s; -o-transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s; transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s; } .sidebar-textwidget { padding: 40px 32px; } .close-side-widget i { color: #fff; font-size: 28px; display: block; } .sidebar-widget-container { position: relative; top: 150px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-in 0.3s; -o-transition: all 0.3s ease-in 0.3s; transition: all 0.3s ease-in 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .xs-sidebar-group.isActive .sidebar-widget-container { top: 0px; opacity: 1; visibility: visible; -webkit-transition: all 1s ease-out 1.2s; -o-transition: all 1s ease-out 1.2s; transition: all 1s ease-out 1.2s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .xs-overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.5; z-index: 0; } .xs-bg-black { background-color: #1c18d9ed; } /*html css*/ .nav-logo { margin: 0 0 50px; } .content-thumb-box { margin-bottom: 20px; } .content-thumb-box img { width: 100%; } .content-box h2 { color: #fff; font-size: 26px; font-weight: 600; } .content-box p { display: inline-block; color: #fff; padding: 15px 0 0; } a.theme-btn.btn-style-two span { color: #fff; font-size: 20px; } a.theme-btn.btn-style-two i { color: #011EAC; } .contact-info h2 { color: #fff; font-size: 26px; margin-bottom: 15px; font-weight: 600; } ul.list-style-one li { display: block; list-style: none; color: #fff; padding: 16px 0 0; overflow: hidden; } ul.list-style-one li i { margin-right: 10px; } ul.list-style-one li span { font-size: 20px; font-weight: 600; color: #011EAC; margin: 0 10px 0 0px; } ul.social-box { margin: 30px 0 0; } ul.social-box li { display: inline-block; list-style: none; margin: 0 6px 0 0; } ul.social-box li a { display: inline-block; width: 35px; height: 35px; line-height: 36px; text-align: center; background: #fff; color: #011EAC; transition: .5s; font-size: 18px; border-radius: 3px; } ul.social-box li a:hover { background: #011EAC; color: #fff; } /*** ==================================================================== Search Popup ==================================================================== ***/ .search-popup{ position: fixed; left: 0; top: 0; height: 100vh; width: 100%; z-index: 99999; margin-top: -540px; transform: translateY(-100%); background-color: rgba(0,0,0,0.90); -webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */ -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */ } .search-popup{ width: 100%; } .search-active .search-popup{ transform: translateY(0%); margin-top: 0; } .search-popup .close-search { position: absolute; left: 0; right: 0; margin: 0 auto; margin-top: -200px; border-radius: 50%; text-align: center; background-color: #171717; width: 70px; cursor: pointer; box-shadow: 0 0 10px rgba(0,0,0,0.05); border-bottom: 3px solid #fff; border-top: 3px solid #fff; border-right: 3px solid #FF5E14; border-left: 3px solid #FF5E14; -webkit-transition: all 500ms ease; height: 70px; line-height: 70px; text-align: center; } .search-active .search-popup .close-search{ visibility: visible; opacity: 1; top: 50%; -webkit-transition-delay: 1500ms; -moz-transition-delay: 1500ms; -ms-transition-delay: 1500ms; -o-transition-delay: 1500ms; transition-delay: 1500ms; } .search-popup form{ position: absolute; max-width: 700px; top: 50%; left: 15px; right: 15px; margin:-35px auto 0; transform: scaleX(0); transform-origin: center; background-color: #111111; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .search-active .search-popup form{ transform: scaleX(1); -webkit-transition-delay: 1200ms; -moz-transition-delay: 1200ms; -ms-transition-delay: 1200ms; -o-transition-delay: 1200ms; transition-delay: 1200ms; } .search-popup .form-group{ position:relative; margin:0px; overflow: hidden; } .search-popup .form-group input[type="text"], .search-popup .form-group input[type="search"]{ position:relative; display:block; font-size:18px; line-height: 50px; color:#000000; height:70px; width:100%; padding: 10px 30px; background-color: #ffffff; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; font-weight:500; text-transform:capitalize; } .search-popup .form-group input[type="submit"], .search-popup .form-group button { position: absolute; right: 30px; top: 0px; height: 70px; line-height: 70px; background: transparent; text-align: center; font-size: 24px; color: #FF5E14; padding: 0; cursor: pointer; -webkit-transition: all 500ms ease; border: none; } .search-popup .form-group input[type="submit"]:hover, .search-popup .form-group button:hover{ color: #000000; } .search-popup input::placeholder, .search-popup textarea::placeholder{ color:#000000; } .search-popup .close-search.style-two{ position: absolute; right: 25px; left: auto; color:#ffffff; width:auto; height:auto; top:25px; margin:0px; border:none; background:none !important; box-shadow:none !important; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .search-box-btn { display: inline-block; padding-left: 22px; } .search-box-btn i { display: inline-block; color: #fff; line-height: 30px; text-align: center; font-size: 18px; cursor: pointer; transition: .5s; } .upp.search-box-btn i { color: #9E9FA1; } .search-box-btn.search-box-outer span i { font-size: 20px; display: inline-block; color: #fff; padding-left: 17px; position: relative; z-index: 1; } .upp.search-box-btn.search-box-outer span i { color: #9E9FA1; } .search-box-btn.search-box-outer span i:after { position: absolute; content: "0"; right: -10px; top: -4px; width: 16px; height: 16px; line-height: 16px; text-align: center; background: #FF5E14; color: #fff; border-radius: 50%; display: inline-block; font-size: 12px; } .flaticon-multiply:before { content: inherit; } button.close-search i { font-size: 25px; color: #fff; display: inline-block; } span.flaticon-multiply i { display: inline-block; color: #FF5E14; } .header-search-button { padding: 0px 25px 0 37px; display: inline-block; } .header-search-button.style-one a { display: inline-block; opacity: 0.502; font-size: 16px; color: #ffffff; } .header-search-button a { color: #031440e8; display: inline-block; font-size: 16px; } .header-search-button.style-one.style_3 { padding: 0px 22px 0 20px; border-right: 1px solid #55555530; margin-right: 10px; } .header-search-button.style-one.style_3 a { color: #041341; opacity: 1; } /* */ /*------back-to-top------------*/ .prgoress_indicator { position: fixed; right: 50px; bottom: 75px; height: 46px; width: 46px; cursor: pointer; display: block; border-radius: 50px; box-shadow: inset 0 0 0 2px rgba(17, 85, 233, 0.2); z-index: 10000; opacity: 0; visibility: hidden; transform: translateY(15px); transform: translateY(15px) !important; transition: all 200ms linear !important; } .prgoress_indicator.active-progress { opacity: 1; visibility: visible; transform: translateY(0) !important; } .prgoress_indicator::after { position: absolute; content: "\f106"; font-family: "Font Awesome 5 Free"; text-align: center; line-height: 46px; font-size: 18px; color: #FF5E14; left: 0; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; font-weight: 900; z-index: 1; transition: all 200ms linear !important; } .prgoress_indicator::before { position: absolute; content: "\f633"; font-family: "Font Awesome 5 Free"; text-align: center; line-height: 46px; font-size: 18px; font-weight: 900; opacity: 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; left: 0; font-family: bootstrap-icons !important; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; z-index: 2; transition: all 200ms linear !important; } .prgoress_indicator:hover ::after { color: var(--primary-color-one); } .prgoress_indicator:hover ::before { opacity: 1; } .prgoress_indicator svg path { fill: none; } .prgoress_indicator svg.progress-circle path { stroke: #FF5E14; stroke-width: 4; box-sizing: border-box; transition: all 200ms linear !important; } /*=========================== <-- Hosting Loader Css --> =============================*/ .loader-wrapper { position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; transition: 0.8s 1s ease; z-index: 666; } .loader { position: relative; display: block; z-index: 201; top: 50%; left: 50%; margin: -50px 0 0 -50px; transition: all 2s 1s ease; width: 96px; box-sizing: content-box; height: 48px; background: #FFF; border-color: #FF5E14; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative; animation: 3s yinYang linear infinite; } .loader:before { content: ""; position: absolute; top: 50%; left: 0; background: #FFF; border: 18px solid #FF5E14; border-radius: 100%; width: 12px; height: 12px; box-sizing: content-box; } .loader:after { content: ""; position: absolute; top: 50%; left: 50%; background: #FF5E14; border: 18px solid #FFF; border-radius: 100%; width: 12px; height: 12px; box-sizing: content-box; } @keyframes yinYang { 100%{transform: rotate(360deg)} } .loader-wrapper .loder-section { position: fixed; top: 0; width: 50%; height: 100%; background: #0575FF; z-index: 2; } .loader-wrapper .loder-section.left-section { left: 0; transition: all 1s 1.6s ease; } .loader-wrapper .loder-section.right-section { right: 0; transition: all 1s 1.6s ease; } /*/ When page loaded /*/ .loaded .loder-section.left-section { left: -100%; } .loaded .loder-section.right-section { right: -100%; } .loaded .loader-wrapper { visibility: hidden; } .loaded .loader { top: -100%; opacity: 0; } /*curser point */ .curser { position: fixed; top: 0; left: 0; width: 50px; height: 50px; border: 1px solid #FFA200 ; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); z-index: 9999; transition: .1s; } .curser2 { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background: #FFA200 ; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); z-index: 9999; transition: .15s; animation: Ripple 1.6s ease-in-out infinite; -webkit-animation: Ripple 1.6s ease-in-out infinite; -moz-animation: Ripple 1.6s ease-in-out infinite; } #navbar { display: flex; z-index: 10; justify-content: space-between; align-items: center; padding: 20px; background-color: transparent; color: #fff; position: sticky; top: 0; } #navbar ul { list-style: none; margin: 0; padding: 0; display: flex; } #navbar li { margin: 0 10px; opacity: 0; transform: translateX(30px); -webkit-animation: apparition 0.8s 1s ease-out forwards; animation: apparition 0.8s 1s ease-out forwards; } #navbar a { color: #fff; text-decoration: none; } .slide-line { position: relative; text-decoration: none; } .slideshow { position: absolute; z-index: 1; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; } .slideshow .slider { width: 100vw; height: 100vw; z-index: 2; } .slideshow .slider * { outline: none; } .slideshow .slider .item { height: 100vh; width: 100vw; position: relative; overflow: hidden; border: none; } .slideshow .slider .item .text { display: none; } .slideshow .slider .item img { min-width: 101%; min-height: 101%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .slideshow .slick-dots { position: fixed; z-index: 100; width: 40px; height: auto; bottom: auto; top: 50%; right: 0; transform: translateY(-50%); left: auto; color: #fff; display: block; } .slideshow .slick-dots li { display: block; width: 100%; height: auto; } .slideshow .slick-dots li button { position: relative; width: 20px; height: 15px; text-align: center; } .slideshow .slick-dots li button:before { content: ""; background: #fff; color: #fff; height: 2px; width: 20px; border-radius: 0; position: absolute; top: 50%; right: 0; left: auto; transform: translateY(-50%); transition: all 0.3s ease-in-out; opacity: 0.6; } .slideshow .slick-dots li.slick-active button:before { width: 40px; opacity: 1; } .slideshow.slideshow-right { left: 0; z-index: 1; width: 50vw; pointer-events: none; } .slideshow.slideshow-right .slider { left: 0; position: absolute; } .slideshow-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; font-size: 80px; width: 100vw; text-align: center; color: #fff; font-family: "Roboto Condensed", sans-serif; font-weight: 100; pointer-events: none; text-transform: uppercase; letter-spacing: 20px; line-height: 0.8; } @media (max-width: 767px) { .slideshow-text { font-size: 40px; } } .the-most { position: fixed; z-index: 1; bottom: 0; left: 0; width: 50vw; max-width: 200px; padding: 10px; } .the-most img { max-width: 100%; } .pause-button { width: 30px; height: 30px; position: fixed; z-index: 10; bottom: 0; left: 0; background-color: #000; border: none; cursor: pointer; } .pause-button.paused { background-color: #ccc; } @-webkit-keyframes apparition { 80%, 100% { opacity: 1; transform: none; } } @keyframes apparition { 80%, 100% { opacity: 1; transform: none; } }