/* Global Style Start */ :root { /* Font */ --primary_font-family: 'Satoshi', sans-serif; /* Color */ --primary_color: #EFF1F5; --secondary_color: #5E6AD2; --accent_color: #2D374C; --color_one: #131722; --color_two: #EAFBF2; --default_color: #FFFFFF; /* Text Color */ --text_color: #C0C6D6; /* BG */ --primary_bg: #0D111A; } /* selection */ ::selection { color: var(--primary_color); background: var(--secondary_color); } /* selection */ html { scroll-behavior: smooth; } body { overflow-x: hidden; font-family: var(--primary_font-family); } section { padding: 100px 0px; } a { text-decoration: none; } img { object-fit: cover; } ul { list-style-type: none; } h1,h2,h3,h4,h5,h6,p { font-family: var(--primary_font-family); } h2 { color: var(--secondary_color); font-size: 50px; font-weight: 700; text-transform: capitalize; margin-bottom: 20px; } h6 { color: var(--primary_color); font-size: 24px; font-weight: 700; text-transform: capitalize; } h4 { color: var(--primary_color); font-size: 30px; font-style: normal; font-weight: 500; } h5 { color: var(--primary_color); font-size: 24px; font-weight: 500; } p { color: var(--text_color); font-size: 18px; font-weight: 300; } .d2c_img_wrapper { width: 593px; height: 614px; } .d2c_img_wrapper img { border: 2px solid #2D374C; } .d2c_img_overlay { background: linear-gradient(180deg, rgba(14, 18, 27, 0.00) 0%, #0E121B 100%), radial-gradient(100% 100% at 50% 0%, rgba(120, 119, 198, 0.21) 16.19%, rgba(13, 17, 26, 0.00) 100%); position: absolute; inset: 0; } /* btn */ .btn { color: var(--primary_bg); background: var(--secondary_color); border: 1px solid var(--secondary_color); border-radius: 0; padding: 9px 30px 8px; font-size: 16px; font-weight: 500; text-transform: capitalize; border-radius: 4px; transition: 0.4s all; } .btn:hover { color: var(--primary_color); background: var(--color_one); border: 1px solid var(--accent_color); transition: 0.4s all; } .btn:active { color: var(--primary_color) !important; background: var(--color_one) !important; border: 1px solid var(--accent_color) !important; transition: 0.4s all; } .d2c_secondary_btn { border: 1px solid var(--accent_color); background: var(--color_one); color: var(--primary_color); transition: 0.4s all; } .d2c_secondary_btn:hover { color: var(--primary_bg); background: var(--secondary_color); border: 1px solid var(--secondary_color); transition: 0.4s all; } .d2c_secondary_btn:active { color: var(--primary_bg) !important; background: var(--secondary_color) !important; border: 1px solid var(--secondary_color) !important; transition: 0.4s all; } /* Icon */ .d2c_icon { width: 32px; height: 32px; border-radius: 100px; border-bottom: 1px solid var(--secondary_color); background: radial-gradient(100% 100% at 50% 0%, rgba(120, 119, 198, 0.35) 0%, rgba(13, 17, 26, 0.05) 100%); box-shadow: 0px 5px 20px 5px rgba(94, 106, 210, 0.22); display: inline-flex !important; justify-content: center; align-items: center; margin-right: 20px; } /* Global Style End */ /* Preloader End */ .preloader { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--default_color); z-index: 9999; transition: opacity 0.5s ease; opacity: 1; } .preloader.hide { opacity: 0; pointer-events: none; } .preloader img { max-width: 200px; max-height: 50px; } /* Preloader End */ /* Navbar Start */ .navbar-brand { max-width: 106px; } .d2c_navbar { padding: 0px 0px; background-image: url(../images/navbar_bg.png); background-repeat: no-repeat; background-size: cover; background-position: center; border-bottom: 1px solid var(--accent_color); } .d2c_navbar .navbar-nav .nav-item { margin: 0px 2px; display: flex; align-items: center; } .d2c_navbar .navbar-nav .nav-item:last-child { margin-right: 0; } .d2c_navbar .navbar-nav .nav-link { color: var(--primary_color); font-family: var(--primary_font-family); font-size: 17px; font-weight: 500; text-transform: capitalize; padding: 8px 27px 7px; background: transparent; transition: .4s all ease; border-radius: 4px; } .d2c_navbar .navbar-nav .nav-link:hover { color: var(--primary_bg); transition: .4s all ease; background: var(--secondary_color); } .navbar-nav .nav-link.active, .navbar-nav .show>.nav-link { color: var(--primary_bg); transition: .4s all ease; background: var(--secondary_color); } .d2c_navbar .d2c_nav_btn.active{ background: var(--secondary_color); color: var(--primary_color); border: 1px solid var(--primary_color); transition: 0.4s all; } /* Nav Item Show from Side */ body .d2c_mobile_view { position: fixed; height: 100vh; inset: 0; opacity: 1; } .navbar.d2c_mobile_view_body .navbar-nav { width: 100%; } .navbar.d2c_mobile_view_body .nav-item { margin-right: 0; } .d2c_mobile_view .show_width { max-width: 14.625rem; width: 100%; height: 100vh; position: absolute; right: -380px; top: 0; transition: 0.5s; padding: 20px 15px; background-color: #1B2130; overflow: scroll; z-index: 9999; box-shadow: 0px 0px 10px rgb(0 0 0 / 15%); } .d2c_mobile_view.show .show_width { right: 0; transition: 0.5s; } .hide_width { max-width: 15.625rem; width: 100%; height: 100vh; position: absolute; right: -380px !important; top: 0; transition: 0.5s !important; padding: 20px 15px; background-color: #021616; overflow: scroll; z-index: 9999; } .navbar-toggler:focus { box-shadow: none; } .navbar-toggler { border: 1px solid #495381; color: #495381; padding: 7px 10px; width: 44px; margin-left: 10px; transition: .4s all ease; } .navbar-toggler:hover { background: transparent; color: #495381; transition: .4s all ease; } .d2c_cross_btn { width: auto; border: none; } @media only screen and (min-width:991px) { body .d2c_mobile_view { opacity: 0; transition: .5s; } } /* Navbar End */ /* Section Background Start */ .d2c_hero_wrapper { background: linear-gradient(180deg, rgba(255,255,255,0) 85%, rgba(13,18,26,1) 95%), url(../images/hero_bg.jpg); background-repeat: no-repeat; background-size: cover; } .d2c_about_wrapper { background: url(../images/about_bg.jpg); background-repeat: no-repeat; background-size: cover; } .d2c_services_wrapper { background: url(../images/services_bg.jpg); background-repeat: no-repeat; background-size: cover; } .d2c_counter_choose_bg { background: url(../images/counter_choose_bg.jpg); background-repeat: no-repeat; background-size: cover; } .d2c_cta_project_bg { background: url(../images/cta_project_bg.jpg); background-repeat: no-repeat; background-size: cover; } .d2c_partner_testimonial_bg { background: url(../images/partner_testimonial_bg.jpg); background-repeat: no-repeat; background-size: cover; } .d2c_contact_wrapper { background: url(../images/contact_bg.jpg); background-repeat: no-repeat; background-size: cover; } /* Section Background End */ /* Hero Section Start */ h1 { color: var(--primary_color); font-size: 64px; font-weight: 500; line-height: 78px; text-transform: capitalize; } h1 span { color: var(--secondary_color); font-weight: 900; } .d2c_hero_wrapper h4 { letter-spacing: 6px; } .d2c_hero_wrapper h5 { letter-spacing: 5.76px; margin-bottom: 20px; } .d2c_hero_wrapper img { border-radius: 296.5px 0px 0px 5px; } .d2c_hero_wrapper .d2c_img_overlay { border-radius: 296.5px 0px 0px 5px; } .d2c_hero_wrapper p { margin-bottom: 35px; } /* Hero Section End */ /* About Section Start */ .d2c_about_wrapper img { border-radius: 0px 296.5px 0px 0px; } .d2c_about_wrapper .d2c_img_overlay { border-radius: 0px 296.5px 0px 0px; } .d2c_about_wrapper p { margin-bottom: 30px; } .d2c_about_wrapper ul { list-style-type: none; padding-left: 0; } .d2c_about_wrapper ul li { color: var(--primary_color); font-size: 17px; font-weight: 500; font-family: var(--primary_font-family); padding: 10px 0px; } .d2c_about_wrapper i { font-size: 14px; } /* About Section End */ /* Service Section Start */ .d2c_card { padding: 1px 1px 0px 1px; background: linear-gradient(180deg, rgba(94,106,210,0.5) 0%, rgba(19,23,34,0) 90%); } .d2c_card_child { padding: 10px; background: radial-gradient(100% 100% at 50% 0%, rgba(120, 119, 198, 0.17) 0%, rgba(13, 17, 26, 0) 100%), #131722; } .d2c_card_child_two { padding: 0px 1px 1px 1px; background: radial-gradient(100% 100% at 50% 0%, rgba(120, 119, 198, 0.17) 0%, rgba(13, 17, 26, 0) 100%), #131722; transition: 0.4s all; } .d2c_card_child_three { padding: 25px; background: radial-gradient(100% 100% at 50% 0%, rgba(120, 119, 198, 0.17) 0%, rgba(13, 17, 26, 0) 100%), #131722; } .d2c_card:hover .d2c_card_child_two { background: linear-gradient(0deg, rgba(94,106,210,0.3) 0%, rgba(27,31,47,1) 30%); transition: 0.4s all; } .d2c_icon_wrapper { width: 75px; height: 75px; padding: 0px 1px 1px 1px; border-radius: 100px; background: linear-gradient(180deg, rgba(32,35,55,1) 0%, rgba(57,59,96,1) 100%); margin: 0 auto 30px; } .d2c_service_icon { width: 74px; height: 74px; font-size: 30px; color: var(--secondary_color); border-radius: 100px; background: radial-gradient(100% 100% at 50% 0%, rgba(120, 119, 198, 0.35) 0%, rgba(13, 17, 26, 0.5) 100%); display: flex; justify-content: center; align-items: center; } .d2c_card h6 { margin-bottom: 10px; } /* Service Section End */ /* Counter Section Start */ .d2c_border_bg { background: linear-gradient(180deg, rgba(87,98,193,0.5) 0%, rgba(50,57,106,0.5) 100%); padding: 1px; } .d2c_count_wrapper { background-image: url(../images/d2c_box_bg.png); background-position: center; background-size: cover; background-repeat: no-repeat; padding: 80px 100px; } .d2c_counter_wrapper h1 span { color: var(--primary_color); font-weight: 700; } .d2c_counter_wrapper h6 { color: var(--secondary_color); } /* Counter Section End */ /* Why Choose Me Section Start */ .d2c_choose_me_wrapper h4 { color: var(--secondary_color); font-size: 27px; font-weight: 700; text-transform: capitalize; margin-bottom: 15px; } .d2c_choose_me_wrapper .d2c_icon { width: 42px; height: 42px; font-size: 16px; color: var(--text_color); } .d2c_choose_me_wrapper h6 { color: var(--secondary_color); font-size: 18px; font-weight: 500; } .d2c_choose_me_wrapper img { border-radius: 296.5px 0px 0px 0px; } .d2c_choose_me_wrapper .d2c_img_overlay { border-radius: 296.5px 0px 0px 0px; } .d2c_choose_me_wrapper li { margin: 7px 0px; } /* Why Choose Me Section End */ /* Call To Action Start */ .d2c_c2a_card { padding: 70px 80px; background-image: url(../images/d2c_box_bg.png); background-position: center; background-size: cover; background-repeat: no-repeat; } .d2c_c2a_card h2 { padding: 0px 101px; margin-bottom: 30px; } .d2c_c2a_card p { margin-bottom: 40px; } /* Call To Action End */ /* Project Section Start */ .d2c_project_wrapper h2 { margin-bottom: 20px; } .d2c_project_wrapper p { margin-bottom: 65px; } .d2c_project_wrapper .d2c_large_img { height: 700px; } .d2c_project_wrapper .d2c_small_img { height: 338px; } .d2c_project_wrapper .d2c_overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13, 17, 26, 0.80) 0%, rgba(13, 17, 26, 0.80) 100%); opacity: 1; transition: 0.4s all; } .d2c_project_wrapper .d2c_card { width: 100%; height: 100%; position: absolute; inset: 0; opacity: 0; transition: 0.4s all; } .d2c_project_wrapper .d2c_img_wrapper:hover .d2c_overlay { opacity: 0; transition: 0.4s all; } .d2c_project_wrapper .d2c_img_wrapper:hover .d2c_card { opacity: 1; transition: 0.4s all; } .d2c_project_wrapper .d2c_card_child_three { height: 100%; padding: 0px 10px 10px 10px; } .d2c_content_wrapper { position: absolute; top: 50%; transform: translateY(-50%); } .d2c_project_wrapper h3 { color: var(--default_color); font-size: 22px; font-weight: 700; text-transform: capitalize; margin-bottom: 16px; } .d2c_project_wrapper .d2c_card_child_three p { color: var(--color_two); font-size: 16px; font-weight: 400; margin-bottom: 26px; } .d2c_project_wrapper h4 { color: var(--default_color); font-size: 16px; font-weight: 700; margin-bottom: 10px; } .d2c_project_wrapper ul { padding-left: 0; } .d2c_project_wrapper ul li { padding: 7px 0px; color: var(--color_two); } .d2c_project_wrapper .d2c_icon { width: 24px; height: 24px; color: var(--default_color); font-size: 10px; margin-right: 10px; } /* Project Section End */ /* Partner Section Start */ .d2c_partner_box { background-image: url(../images/d2c_box_bg.png); background-position: center; background-size: cover; background-repeat: no-repeat; padding: 70px 80px 60px; } .d2c_partner_box img { margin: 0 auto; } .slick-slide { padding: 0px 12px; } /* Partner Section End */ /* Testimonial Section Start */ .d2c_testimonial_wrapper h2 { margin-bottom: 60px; } .d2c_testimonial_wrapper h4 { color: var(--text_color); font-size: 20px; font-weight: 500; line-height: 30px; text-transform: capitalize; margin-bottom: 40px; } .d2c_testimonial_wrapper h6 { font-size: 18px; color: var(--secondary_color); margin-bottom: 5px; } .d2c_testimonial_wrapper p { font-size: 16px; color: var(--text_color); } .d2c_carousel_left_btn { position: absolute; top: 30%; transform: translateY(-50%); left: -100px; } .d2c_carousel_right_btn { position: absolute; top: 30%; transform: translateY(-50%); right: -100px; } .slick-arrow { width: 56px; height: 56px; font-size: 18px; border-radius: 100px; color: var(--primary_color); border: 1px solid #2e3358; background: radial-gradient(100% 100% at 50% 0%, rgba(120, 119, 198, 0.35) 0%, rgba(13, 17, 26, 0.05) 100%); box-shadow: 0px 5px 20px 5px rgba(94, 106, 210, 0.22); display: inline-flex !important; justify-content: center; align-items: center; } /* Testimonial Section End */ /* Contact Section Start */ .form-label { color: var(--secondary_color); font-size: 18px; font-weight: 500; text-transform: capitalize; margin-bottom: 6px !important; } .form-control { background: radial-gradient(100% 100% at 50% 0%, rgba(120, 119, 198, 0.17) 0%, rgba(13, 17, 26, 0) 100%), #131722; color: var(--text_color) !important; font-family: var(--secondary_font); border-radius: 4px; border: 1px solid #333B6D; font-size: 15px; font-weight: 400; padding: 10px; margin-bottom: 20px; } .form-control:focus { background: radial-gradient(100% 100% at 50% 0%, rgba(120, 119, 198, 0.17) 0%, rgba(13, 17, 26, 0.00) 100%), #131722; box-shadow: none; border: 1px solid #333B6D; color: var(--primary_text_color); } .d2c_contact_wrapper ::placeholder { color: var(--text_color) !important; opacity: 0.4; } textarea { margin-bottom: 30px !important; } /* Contact Section End */ /* Footer Section Start */ .d2c_footer_wrapper { background: url(../images/group.png), url(../images/footer_bg.jpg), var(--primary_bg); background-repeat: no-repeat; background-size: cover; padding: 100px 0px; border-top: 1px solid #34396679; } .d2c_footer_card { height: 100%; padding: 30px; border: 1px solid rgba(94, 106, 210, 0.20); background: radial-gradient(100% 100% at 50% 0%, rgba(120, 119, 198, 0.17) 0%, rgba(13, 17, 26, 0) 100%), #131722; } .d2c_footer_card img { margin-bottom: 18px; } .d2c_footer_card h3 { color: var(--secondary_color); font-size: 22px; font-weight: 700; text-transform: capitalize; margin-bottom: 42px; } .d2c_footer_card ul { list-style-type: none; padding-left: 0; } .d2c_footer_card ul li a { color: var(--text_color); font-size: 18px; font-weight: 500; text-transform: capitalize; } .d2c_footer_wrapper .btn { background: var(--secondary_color); color: var(--color_one); border: 1px solid var(--secondary_color); height: 100%; transition: 0.4s all; } .d2c_footer_wrapper .form-control { background: radial-gradient(100% 100% at 50% 0%, rgba(120, 119, 198, 0.17) 0%, rgba(13, 17, 26, 0.00) 100%), #131722; color: var(--text_color); padding: 8px 10px; border: 1px solid #333B6D; font-family: var(--primary_font-family); font-size: 16px; font-weight: 500 !important; margin-bottom: 0; } .d2c_footer_wrapper .btn:hover { background: var(--secondary_color); color: var(--text_color); border: 1px solid var(--secondary_color); transition: 0.4s all; } .d2c_footer_wrapper .btn:active { background: var(--secondary_color) !important; color: var(--text_color) !important; border: 1px solid var(--secondary_color) !important; transition: 0.4s all; } .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-left: 0px; } .d2c_footer_wrapper .input-group { background: radial-gradient(100% 100% at 50% 0%, rgba(120, 119, 198, 0.17) 0%, rgba(13, 17, 26, 0.00) 100%), #131722; } /* Footer Section End */ /* Copy Right Section Start */ .d2c_copy_right_wrapper { padding: 12px 0px; background: var(--secondary_color); } .d2c_copy_right_wrapper p { color: var(--text_color); font-size: 18px; font-weight: 400; text-transform: capitalize; } .d2c_copy_right_wrapper p a { font-weight: 700; color: var(--text_color); transition: 0.4s all; } .d2c_copy_right_wrapper p a:hover { font-weight: 700; color: var(--color_one); transition: 0.4s all; } .d2c_copy_right_wrapper ul { list-style-type: none; } .d2c_copy_right_wrapper ul li { padding: 0px 5px; } .d2c_copy_right_wrapper ul li:last-child { padding-right: 0; } .d2c_copy_right_wrapper .d2c_icon { width: 36px; height: 36px; background: radial-gradient(100% 100% at 50% 0%, rgba(120, 119, 198, 0.35) 0%, rgba(13, 17, 26, 0.05) 100%), var(--primary_bg); color: var(--secondary_color); margin-right: 0; transition: 0.4s all; } .d2c_copy_right_wrapper .d2c_icon:hover { color: var(--primary_color); transition: 0.4s all; } /* Copy Right Section End */ /* Scroll Button Start */ #scrollBtn { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 9999; } #scrollBtn.show { display: block; } #scrollBtn a i { background: var(--secondary_color); font-size: 20px; color: var(--default_color); border-radius: 4px; width: 35px; height: 35px; position: fixed; z-index: 9999; bottom: 7%; right: 4%; transition: all ease 0.4s; display: flex; align-items: center; justify-content: center; border: 2px solid var(--secondary_color); } #scrollBtn a i:hover { color: var(--default_color); background: var(--accent_color); border: 2px solid var(--accent_color); transition: all ease 0.4s; } /* Scroll Button End */ /* Template Name: {{CSUME V3 - Cyber Security Expert One Page Website Template}} Template URL: {{https://designtocodes.com/product/csume-v3-cyber-security-expert-one-page-template}} Description: {{Invest in Csume V3 onepage cyber security template today and take your cyber security expertise to new heights.}} Author: DesignToCodes Author URL: https://www.designtocodes.com Text Domain: {{ CSUME V3 }} */