/* global style start */ :root { /* font */ --primary_font: 'Syne', sans-serif; --secondary_font: 'Sora', sans-serif; /* color */ --primary_color: #FF6DBA; --secondary_color: #121820; --default_color: #FFFFFF; --primary_text_color: #F0F0F0; --secondary_text_color: rgba(18, 24, 32, 0.40); /* text shade */ --primary_text_shade: #999999; --secondary_text_shade: rgba(240, 240, 240, 0.40); /* shade bg */ --primary_bg: rgba(255, 109, 186, 0.04); /* border */ --primary_radius: 8px; --secondary_radius: 4px; } html { scroll-behavior: smooth; } body { overflow-x: hidden; } section { padding: 100px 0px; } /* selection */ ::selection { color: var(--default_color); background: var(--primary_color); } /* selection */ /* typography */ h1,h2,h3,h4,h5,h6 { color: var(--primary_text_color); font-family: var(--primary_font); font-weight: 600; text-transform: capitalize; } h2 { font-size: 42px; margin-bottom: 54px; } h2 span { color: var(--primary_color); } .d2c_title::after { content: ''; width: 100%; height: 30px; background: url(../images/about_line.png); background-repeat: no-repeat; position: absolute; top: 100px; left: -21px; } h3 { font-size: 22px; margin-bottom: 10px; } h3 span { color: var(--primary_color); } .d2c_sub_title::after { content: ''; width: 12px; height: 12px; border: 3px solid var(--primary_color); background: transparent; border-radius: 50px; position: absolute; top: -14px; left: -6px; } h4 { color: var(--primary_color); font-size: 18px; font-weight: 700; } p { color: var(--primary_text_color); font-family: var(--secondary_font); font-size: 15px; font-weight: 400; } a { text-decoration: none; } img { object-fit: cover; } /* button */ .btn { color: var(--secondary_color); font-family: var(--secondary_font); font-size: 16px; font-weight: 500; text-transform: capitalize; background: var(--primary_color); border-radius: var(--primary_radius); border: 1px solid var(--primary_color); padding: 11px 35px 10px; transition: 0.4s all; } .btn:hover { color: var(--primary_color); background: var(--secondary_color); border: 1px solid var(--primary_color); transition: 0.4s all; } .btn.active { color: var(--primary_color); background: var(--secondary_color); border: 1px solid var(--primary_color); transition: 0.4s all; } /* about and feature section img style start */ .d2c_img_container .d2c_img_wrapper:first-child { width: 390px; position: absolute; top: -92px; left: 30px; z-index: 1; } .d2c_img_container .d2c_img_wrapper:first-child img { border: 2px solid var(--primary_color); } .d2c_img_container .d2c_img_wrapper::after { content: ''; position: absolute; inset: 0; } .d2c_img_container .d2c_img_wrapper:first-child::after { background: linear-gradient(0deg, rgba(18, 24, 32, 0.25) 0%, rgba(18, 24, 32, 0.25) 100%); border-radius: 8px; } .d2c_img_container .d2c_img_wrapper:nth-child(2) { width: 370px; position: absolute; bottom: 30px; right: 28px; z-index: 0; } .d2c_img_container .d2c_img_wrapper:nth-child(2)::after { border-radius: 8px; background: linear-gradient(0deg, rgba(18, 24, 32, 0.60) 0%, rgba(18, 24, 32, 0.60) 100%); } .d2c_img_container img:last-child { width: 100%; } /* about and feature section img style end */ /* global style end */ /* preloader start */ .preloader { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--secondary_color); z-index: 9999; transition: opacity 2.5s ease; opacity: 1; } .preloader.hide { opacity: 0; pointer-events: none; } .preloader img { max-width: 120px; max-height: 50px; } /* preloader end */ /* Navbar Start */ .navbar-brand { max-width: 180px; } .d2c_navbar { padding: 22px 0px; background: var(--secondary_color); } .d2c_navbar .navbar-nav .nav-item { margin: 5px 12px; display: flex; align-items: center; } .d2c_navbar .navbar-nav .nav-item:last-child { margin-right: 45px; } .d2c_navbar .navbar-nav .nav-link { color: var(--primary_text_color); font-family: var(--secondary_font); font-weight: 400; font-size: 18px; text-transform: capitalize; padding: 0; transition: .4s all ease; } .d2c_navbar .navbar-nav .nav-link:hover { color: var(--primary_color); transition: .4s all ease; } .navbar-nav .nav-link.active, .navbar-nav .show>.nav-link { color: var(--primary_color) !important; } .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: var(--secondary_color); 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: var(--primary_bg); overflow: scroll; z-index: 9999; } .navbar-toggler:focus { box-shadow: none; } .navbar-toggler { border: 1px solid var(--primary_shade); color: var(--primary_text_color); padding: 5px 10px; width: 44px; margin-left: 10px; transition: .4s all ease; } .navbar-toggler:hover { background: transparent; 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 */ /* hero start */ .d2c_hero_bg { background: linear-gradient(180deg, rgba(18, 24, 32, 0.40) 0%, rgba(18, 24, 32, 0.79) 80.96%, #121820 100%), url(../images/hero_bg.png); background-position: center; background-repeat: no-repeat; background-size: cover; } .d2c_hero_wrapper { height: 92vh; display: flex; justify-content: center; align-items: center; } .d2c_vector_img_wrapper { background: url(../images/hero_vector_bg.png); background-position: center; background-repeat: no-repeat; background-size: contain; } .d2c_shade_bg { background: url(../images/hero_vector_bg_shade.png); background-position: center; background-repeat: no-repeat; background-size: contain; } .d2c_shade_bg img { width: 552px; object-fit: none; } .d2c_hero_wrapper h1 { font-size: 60px; margin-bottom: 20px; } .d2c_hero_wrapper h1 span { font-weight: 700; color: var(--primary_color); } .d2c_hero_wrapper p { margin-bottom: 32px; } /* hero end */ /* about section start */ .d2c_about_wrapper { padding: 190px 0px 100px; background: var(--secondary_color); } .d2c_last_paragraph { margin-bottom: 30px; } /* about section end */ /* partner section start */ .d2c_partner_wrapper { background: var(--secondary_color); padding: 100px 0px; overflow-x: hidden; } .d2c_partner_wrapper .slick-slide { padding: 0px 12px !important; } .d2c_partner_wrapper .d2c_img_wrapper { width: 100%; height: 96px; border-radius: 4px; border: 1px solid rgba(255, 109, 186, 0.10); background: rgba(255, 109, 186, 0.02); display: flex; justify-content: center; align-items: center; transition: 0.4s all; } .d2c_partner_wrapper .d2c_img_wrapper:hover { border: 1px solid var(--primary_color); background: rgba(245, 124, 0, 0.02); transition: 0.4s all; } .d2c_partner_wrapper .d2c_img_wrapper img { max-width: 134px; max-height: 96px; opacity: 0.3; transition: 0.4s all; } .d2c_partner_wrapper .d2c_img_wrapper:hover img { opacity: 1; transition: 0.4s all; } /* partner section end */ .d2c_shade_bg_wrapper { background: var(--primary_bg); background-image: url(../images/shade_bg.png); background-repeat: no-repeat; background-size: contain; background-position: top center; } /* service section start */ .d2c_service_wrapper h3 { color: var(--secondary_color); } .d2c_service_wrapper h2 { color: var(--secondary_color); } .d2c_service_wrapper p { color: var(--secondary_text_color); margin-bottom: 20px; } .d2c_service_wrapper li { color: var(--secondary_color); font-family: var(--primary_font); font-size: 18px; font-weight: 700; text-transform: capitalize; } .d2c_service_wrapper ul { list-style-type: square; padding-left: 20px; } .d2c_service_wrapper li::marker { color: var(--primary_color) !important; font-size: 18px; } .d2c_service_wrapper .d2c_card_wrapper { background: #FFFFFF; padding: 40px; border-radius: 8px; box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.10); transition: 0.4s all; } .d2c_icon_wrapper { background: var(--primary_color); box-shadow: -7px 20px 16px 0px rgba(103, 76, 174, 0.20); width: 70px; height: 70px; border-radius: 8px; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; transition: 0.4s all; } .d2c_icon_wrapper i { font-size: 32px; color: var(--default_color); transition: 0.4s all; } .d2c_service_wrapper .d2c_card_wrapper h3 { color: var(--primary_color); transition: 0.4s all; } .d2c_service_wrapper .d2c_card_wrapper p { color: var(--primary_text_shade); transition: 0.4s all; margin-bottom: 0; } .d2c_service_wrapper .d2c_card_wrapper:hover { background: var(--primary_color); transition: 0.4s all; } .d2c_service_wrapper .d2c_card_wrapper:hover .d2c_icon_wrapper { background: var(--primary_text_color); transition: 0.4s all; } .d2c_service_wrapper .d2c_card_wrapper:hover .d2c_icon_wrapper i { color: var(--primary_color); transition: 0.4s all; } .d2c_service_wrapper .d2c_card_wrapper:hover h3 { color: var(--secondary_color); transition: 0.4s all; } .d2c_service_wrapper .d2c_card_wrapper:hover p { color: var(--primary_text_color); transition: 0.4s all; } .d2c_service_card:after { content: url(../images/service_circle.jpg); position: absolute; top: 173px; left: -80px; z-index: -1; } /* service section end */ /* features section start */ .d2c_feature_wrapper { padding: 190px 0px 100px; } .d2c_feature_wrapper .d2c_img_container .d2c_img_wrapper:first-child { width: 330px; top: -73px; } .d2c_feature_wrapper h3 { color: var(--secondary_color); } .d2c_feature_wrapper h2 { color: var(--secondary_color); } .d2c_feature_wrapper p { color: var(--secondary_text_color); margin-bottom: 20px; } /* features section end */ .d2c_team_bg_wrapper { background: var(--secondary_color); background-image: url(../images/shade_bg.png); background-position: top center; background-size: contain; background-repeat: no-repeat; } /* team section start */ .d2c_team_wrapper { overflow-x: hidden; } .d2c_team_wrapper h2 { margin-bottom: 80px; } .d2c_team_wrapper .d2c_title::after { top: 50px; left: 50%; transform: translateX(-75px); } .d2c_team_wrapper .d2c_sub_title::after { left: 50%; transform: translateX(-62px); } .d2c_team_card .d2c_img_wrapper { width: 390px; height: 390px; z-index: 1; } .d2c_team_card .d2c_img_wrapper::before { content: ''; width: 390px; height: 390px; border: 1px solid rgba(255, 109, 186, 0.30); border-radius: 8px; position: absolute; top: 27px; left: -27px; z-index: -1; transition: 0.4s all; } .d2c_team_card .d2c_card_body { padding: 50px 0px 20px; } .d2c_team_wrapper .slick-slide { margin: 0px 37px; } .slick-dots li button:before { font-size: 10px; color: var(--primary_color); transition: 0.4s all; } .slick-dots li.slick-active button:before { color: var(--primary_color); transition: 0.4s all; } /* team section end */ /* portfolio section start */ .d2c_portfolio_wrapper { overflow-x: hidden; } .d2c_portfolio_wrapper .d2c_sub_title::after { left: 203px; } .d2c_portfolio_wrapper h2 { margin-bottom: 150px; } .d2c_portfolio_wrapper .d2c_title::after { left: 50%; transform: translateX(-15%); } .d2c_grid { column-count: 3; column-gap: 0px; row-gap: 0px; } .d2c_grid_item { border-radius: 10px; overflow: hidden; position: relative; transform: scale(1.0); filter: grayscale(100%); transition: 0.4s all; } .d2c_grid_item:hover { transform: scale(1.1); box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.23); filter: grayscale(0%); transition: 0.4s all; z-index: 999; } .d2c_grid_item.is-visible { animation: Items .6s ease-in forwards; } .fancybox { display: block; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; transition: 0.4s all; height: 460px; } .d2c_grid_item:nth-child(1) .fancybox { background-image: url(../images/portfolio_one.jpg); } .d2c_grid_item:nth-child(2) .fancybox { background-image: url(../images/portfolio_two.jpg); } .d2c_grid_item:nth-child(3) .fancybox { background-image: url(../images/portfolio_three.jpg); } .d2c_grid_item:nth-child(4) .fancybox { background-image: url(../images/portfolio_four.jpg); } .d2c_grid_item:nth-child(5) .fancybox { background-image: url(../images/portfolio_five.jpg); } .d2c_grid_item:nth-child(6) .fancybox { background-image: url(../images/portfolio_six.jpg); } /* Portfolio Section End */ .d2c_blog_bg_wrapper { background: rgba(255, 109, 186, 0.04); } /* blog section start */ .d2c_blog_wrapper { padding: 100px 0px; overflow-x: hidden; } .d2c_blog_wrapper h3 { color: var(--secondary_color); } .d2c_blog_wrapper .d2c_sub_title::after { left: 50%; transform: translateX(-56px); } .d2c_blog_wrapper .d2c_title::after { top: 40px; left: 50%; transform: translateX(-72px); } .d2c_blog_wrapper h2 { color: var(--secondary_color); } .d2c_blog_wrapper p { color: var(--secondary_text_color); margin-bottom: 56px; } .d2c_blog_wrapper .d2c_card_body { background: var(--secondary_color); box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.20); border-radius: 5px; margin: 0px 30px; padding: 30px; position: relative; margin-top: -50px; } .d2c_blog_wrapper .d2c_card_body p { color: var(--secondary_text_shade); } .d2c_blog_wrapper .d2c_card_body a { color: var(--primary_text_color); transition: 0.4s all; } .d2c_blog_wrapper .d2c_card_body a:hover { color: var(--primary_color); transition: 0.4s all; } .d2c_blog_wrapper .d2c_card_body a i { padding-left: 20px; transition: 0.4s all; } .d2c_blog_wrapper .d2c_card_body a:hover i { padding-left: 5px; transition: 0.4s all; } .d2c_date { color: var(--primary_text_color); font-family: var(--secondary_font); font-size: 11px; font-weight: 400; margin-bottom: 20px; } .d2c_date a { color: var(--primary_text_color) !important; float: right; font-size: 16px; transition: 0.4s all; } .d2c_date a:hover { color: var(--primary_color) !important; transition: 0.4s all; } /* blog section end */ /* testimonial section start */ .d2c_testimonial_wrapper { overflow-x: hidden; } .d2c_testimonial_wrapper h2 { color: var(--secondary_color); } .d2c_testimonial_wrapper h3 { color: var(--secondary_color); } .d2c_testimonial_wrapper .d2c_sub_title::after { left: 50%; transform: translateX(-92px); } .d2c_testimonial_wrapper .d2c_title::after { top: 40px; left: 50%; transform: translateX(-72px); } .d2c_testimonial_wrapper .d2c_card_wrapper h5 { color: var(--secondary_color); font-family: var(--primary_font); font-size: 38px; font-weight: 600; text-transform: capitalize; margin-bottom: 90px; position: relative; padding: 0px 120px; } .d2c_testimonial_wrapper .d2c_card_wrapper h5::before { content: url(../images/quotation_left.png); position: absolute; top: -60px; left: 0; } .d2c_testimonial_wrapper .d2c_card_wrapper h5::after { content: url(../images/quotation_right.png); position: absolute; bottom: -80px; right: 0; } .d2c_testimonial_wrapper .d2c_card_wrapper img { width: 88px; height: 88px; border-radius: 100%; margin: 0 auto; } .d2c_testimonial_wrapper .d2c_card_wrapper p { color: var(--secondary_color); } .d2c_testimonial_wrapper .slick-slide { padding-top: 70px; } /* testimonial section end */ /* newsletter section start */ .d2c_newsletter_wrapper .d2c_sub_title::after { left: 223px; } .d2c_newsletter_wrapper { background: linear-gradient(0deg, rgba(18, 24, 32, 0.90) 0%, rgba(18, 24, 32, 0.90) 100%), url(../images/newsletter_bg.png); } .d2c_newsletter_wrapper .d2c_card_wrapper { padding: 100px 0px; background: var(--secondary_color); } .d2c_newsletter_wrapper h2 { color: var(--primary_text_color); margin-bottom: 20px; } /* newsletter section end */ /* contact section start */ .d2c_contact_wrapper { background: var(--secondary_color); } .form-label { color: var(--primary_text_color); font-family: var(--primary_font); font-size: 18px; font-weight: 700; margin-bottom: 10px; } .form-label span { color: var(--primary_color); } .form-control { background: rgba(255, 109, 186, 0.02); color: var(--primary_text_color) !important; font-family: var(--secondary_font); border-radius: 4px; border: 1px solid rgba(255, 109, 186, 0.40); font-size: 15px; font-weight: 400; padding: 10px; margin-bottom: 20px; } .form-control:focus { background: rgba(255, 109, 186, 0.02); box-shadow: none; border: 1px solid rgba(255, 109, 186, 0.40); color: var(--primary_text_color); } textarea { margin-bottom: 25px !important; } /* contact section end */ /* footer section start */ .d2c_footer_wrapper { padding: 100px 0px 30px; background: linear-gradient(0deg, rgba(18, 24, 32, 0.80) 0%, rgba(18, 24, 32, 0.80) 100%), url(../images/footer_bg.png); background-position: center; background-repeat: no-repeat; background-size: cover; } .d2c_footer_logo { max-width: 300px; } .d2c_footer_wrapper p { margin-bottom: 32px; } .d2c_footer_wrapper ul { list-style-type: none; } .d2c_footer_wrapper ul li { margin-right: 20px; } .d2c_footer_wrapper .d2c_social_link li a { width: 36px; height: 36px; font-size: 16px; border-radius: 4px; color: rgba(255, 109, 186, 0.40); border: 1px solid rgba(255, 109, 186, 0.40); background: rgba(255, 109, 186, 0.02); display: flex; justify-content: center; align-items: center; } .d2c_footer_wrapper .d2c_social_link li a:hover { color: var(--primary_color); border: 1px solid var(--primary_color); transition: 0.4s all; } .d2c_footer_wrapper li a { color: var(--primary_text_color); font-family: var(--secondary_color); font-size: 15px; font-weight: 400; transition: 0.4s all; } .d2c_footer_wrapper li a:hover { color: var(--primary_color); transition: 0.4s all; } .d2c_company_info a i { width: 36px; height: 36px; border-radius: 4px; color: rgba(255, 109, 186, 0.40); border: 1px solid rgba(255, 109, 186, 0.40); background: rgba(255, 109, 186, 0.02); display: inline-flex; justify-content: center; align-items: center; margin-right: 20px; transition: 0.4s all; } .d2c_company_info li a:hover i { color: var(--primary_color); border: 1px solid var(--primary_color); transition: 0.4s all; } .d2c_footer_wrapper h3 { margin-bottom: 40px; } /* copy */ .d2c_copy_wrapper { padding: 60px 0px 0px; position: relative; } .d2c_copy_wrapper h4 { color: var(--primary_text_color); font-size: 18px; font-weight: 500; } .d2c_copy_wrapper h4 a { font-weight: 700; color: var(--primary_text_color); transition: 0.4s all; } .d2c_copy_wrapper h4 a:hover { color: var(--primary_color); transition: 0.4s all; } .d2c_copy_wrapper::before { content: ''; width: 100%; border-top: 1px solid rgba(240, 240, 240, 0.10); position: absolute; top: 30px; left: 0; } /* footer 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(--primary_color); font-size: 20px; color: var(--secondary_color); border-radius: 4px; width: 35px; height: 35px; position: fixed; z-index: 9999; bottom: 3%; right: 5%; transition: all ease 0.4s; display: flex; align-items: center; justify-content: center; border: 2px solid var(--primary_color); } #scrollBtn a i:hover { color: var(--primary_color); background: var(--secondary_color); border: 2px solid var(--primary_color); transition: all ease 0.4s; } /* Scroll Button End */ /* Template Name: {{Tech Start Pro}} Template URL: {{https://www.designtocodes.com/product/techstart-pro-responsive-bootstrap-landing-page/}} Description: {{TechStart Pro landing page is the definitive solution for businesses and individuals seeking a top-tier online presence. This responsive Bootstrap landing page is not just good-looking, it's also simple.}} Author: DesignToCodes Author URL: https://www.designtocodes.com Text Domain: {{ Tech Start Pro }} */