/*=============================================== Template Name: PedelWays - Cycle and Cycle Part Store HTML5 Template Author: https://templatemonster.com/user/dreamit-solution Description: Description Version: 1.0.0 Text Domain: Cycling Tags: agency, consulting, digital agency, digital marketing, digital marketing agency, marketing, marketing agency, media agency, portfolio, seo, seo agency, seo agency theme, seo marketing, smm, social media marketing agency. ================================================*/ /*TABLE OF CONTENTS*/ /*===================== 01. Cycling Header Top Menu Section Css 02. Cycling Nav Menu Section Css 03. Cycling Banner Section Css 04. Cycling Section Title Css 05. Cycling Service Section css 06. Cycling About Section Css 07. Cycling Counter Section Css 08. Cycling Case Study Section Css 09. Cycling Testimonial Section Css 10. Cycling Process Section Css 11. Cycling Team Section Css 12. Cycling Faq Section Css 13. Cycling Brand Section Css 14. Cycling Call Do Section Css 15. Cycling Form Box Css 16. Cycling Skill Section Css 17. Cycling Blog Section Css 18. Cycling footer Section Css 19. Cycling Subscribe Section Css 20. Cycling Lines CSS 21. Cycling Prossess Ber Css 22. Cycling Scrollup Section 23. Cycling Bounce Animation Css 24. Cycling Animation Dance 25. Cycling Breadcumb Section Css 26. Cycling abouts_Sections Css 27. Cycling Feture-Section Css 28. Cycling Pricing Section Css 29. Cycling Web Development Section CSS 30. Cycling Contact US Css 31. Cycling Blog Sidber Widget CSS 32. Cycling Case Study Details Css 33. Cycling Search Box Css 34. Cycling Loader Css =======================*/ /* */ .cycling-section-sub-title h5 { font-size: 16px; line-height: 26px; color: #d6453c; font-weight: 500; font-family: "Rajdhani"; margin-bottom: 12px; } .cycling-section-sub-title span { position: relative; } .cycling-section-sub-title span:first-child:before { position: absolute; content: ""; top: 6px; left: 10px; width: 88px; height: 1px; background: #d6453c; } .cycling-section-sub-title span:first-child:after { position: absolute; content: ""; top: 3px; left: 8px; width: 7px; height: 7px; background: #d6453c; border-radius: 10px; -webkit-animation: dance7 2s alternate infinite; animation: dance7 2s alternate infinite; } .cycling-section-sub-title span:last-child:before { position: absolute; content: ""; top: 14px; left: 10px; width: 60px; height: 1px; background: #d6453c; } .cycling-section-sub-title span:last-child:after { position: absolute; content: ""; top: 11px; right: -74px; width: 7px; height: 7px; background: #d6453c; border-radius: 10px; -webkit-animation: dance8 2s alternate infinite; animation: dance8 2s alternate infinite; } .cycling-section-title h1 { font-size: 48px; line-height: 48px; color: #1c1e21; font-weight: 500; font-family: "Teko"; display: inline-block; } .cycling-btn a, .cycling-btn button { font-size: 17px; line-height: 26px; color: #ffffff; font-weight: 600; font-family: "Rajdhani"; background: #d6453c; border: 1px solid #d6453c; border-radius: 5px; padding: 13px 60px 12px 32px; position: relative; z-index: 1; transition: 0.3s; overflow: hidden; text-transform: uppercase; } .cycling-btn a:hover, .cycling-btn button:hover { color: #d6453c !important; } .cycling-btn i { position: absolute; line-height: 35px; text-align: center; font-size: 20px; transition: 0.5s; margin-left: 8px; margin-top: -3px; } .cycling-btn a:hover i { padding-left: 6px; } .cycling-btn span { position: absolute; display: block; width: 0; height: 0; border-radius: 50%; background-color: #fff; transition: width 0.6s ease-in-out, height 0.6s ease-in-out; transform: translate(-50%, -50%); z-index: -1; } .cycling-btn a:hover span, .cycling-btn button:hover span { width: 40rem; height: 40rem; } .cycling_nav_manu { transition: 0.5s; z-index: 2; position: relative; padding: 0 70px 0; margin-bottom: -95px; border-bottom: 1px solid rgba(16, 18, 16, 0.10196078431372549); } .sticky { left: 0; margin: auto; position: fixed !important; top: 0; width: 100%; -webkit-box-shadow: 0 2px 5px -2px rgba(254, 254, 254, 0.1); box-shadow: 0 2px 5px -2px rgba(254, 254, 254, 0.1); background: #ffffff; transition: 0.5s !important; z-index: 922; -webkit-animation: 300ms ease-in-out slideInDown; animation: 500ms ease-in-out slideInDown; backdrop-filter: blur(5px); filter: drop-shadow(0 0 17.5px rgba(156, 156, 156, 0.2)); } .sticky nav.header-menu { background: transparent; } .sticky nav.header-menu ul li { display: inline-block; padding: 24px 0 24px 42px; position: relative; margin-top: -9px; } .sticky nav.header-menu > ul > li:nth-child(7) { padding: 36px 0 7px 42px; position: relative; top: 12px; } /* */ /* */ header.header-top-section { background: #1d1e22; position: relative; z-index: 1000; } .Header-top-desc p { color: #ffffff; margin: 0; text-align:right; } .Header-top-desc i { font-size: 13px; margin-right: 4px; } /*.header-top-info {*/ /* text-align: left;*/ /*}*/ .header-top-info ul li { display: inline-block; margin: 14px 0 14px 56px; position: relative; } .header-top-info li:first-child::before { position: absolute; content: ""; top: 2px; right: -32px; width: 1px; height: 22px; background: #fff; } .header-top-info a { font-size: 16px; line-height: 26px; color: #ffffff; font-weight: 500; font-family: "Rajdhani"; } .header-top-info li:first-child i { margin-right: 4px; } .header-top-info li:last-child i { transform: rotate(90deg); font-size: 13px; margin-right: 6px; } /* */ /* */ header.header-manu-section { position: relative; z-index: 999; background: #fff; margin-bottom: -100px; padding: 0 40px; border-radius: 0 0 4px 4px; margin-top: -18px; } .cycling-logo img { position: relative; top: 11px; } nav.header-menu { text-align: right; } nav.header-menu > ul > li { display: inline-block; position: relative; padding: 36px 0 35px 40px; } nav.header-menu ul li:first-child { padding-left: 0; } /* nav.header-menu ul li:first-child a { color: #d6453c; } */ nav.header-menu ul li a { font-size: 21px; line-height: 26px; color: #1c1e21; font-weight: 500; font-family: "Rajdhani"; transition: 0.5s; position: relative; } nav.header-menu ul li a::before { position: absolute; content: ""; top: 12px; right: -21px; width: 2px; height: 2px; border-radius: 1px; background-color: #000000; } nav.header-menu ul li:nth-child(6) a::before, nav.header-menu ul li:nth-child(7) a::before, nav.header-menu ul li:nth-child(8) a::before { width: 0; } nav.header-menu > ul > li:nth-child(7) { padding: 36px 0 36px 42px; position: relative; top: 12px; } nav.header-menu > ul > li:nth-child(7) > a { position: absolute; top: 50%; transform: translateY(-50%); left: 8px; margin: 0 20px; display: inline-block; } nav.header-menu ul li a:focus-within, nav.header-menu ul li:hover a { color: #d6453c; filter: hue-rotate(360deg); } nav.header-menu i { font-size: 12px; transform: rotate(0deg); transition: 0.5s; } nav.header-menu ul li:focus-within i, nav.header-menu ul li:hover i { transform: rotate(-180deg); color: #d6453c; } .sticky nav .submenu ul li { padding: 0; } nav.header-menu > ul > li:last-child { padding: 0 0 0 30px; position: relative; top: 22px; } nav.header-menu > ul > li:last-child a { color: #fff; filter: hue-rotate(0deg); font-size: 16px; font-weight: 500; } nav.header-menu > ul > li:last-child i { color: #fff; font-size: 20px; transform: rotate(0deg); } /* Submenu Start Here */ nav.header-menu ul li:hover .submenu { visibility: visible; opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); -webkit-transition: all 300ms linear; transition: all 300ms linear; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .submenu { position: absolute; top: 101px; left: 0; width: 205px; background: #fff; z-index: 50; border-top: 3px solid #d6453c; transition: 0.4s; overflow: hidden; visibility: hidden; opacity: 0; text-align: left; filter: drop-shadow(5px 5px 5px rgba(60, 115, 206, 0.2)); -webkit-transform: perspective(400px) rotateX(-90deg); transform: perspective(400px) rotateX(-90deg); transform-origin: 50% 0%; -webkit-transition: all 300ms linear; transition: all 300ms linear; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .sticky .submenu { top: 77px; } nav .submenu > ul > li { display: block; width: 100%; background: #fff; transition: 0.4s; padding: 0; position: relative; z-index: 1; } nav .submenu ul li:last-child { margin-left: 0; padding-left: 0; } nav .submenu ul li:before { position: absolute; content: ""; width: 0%; height: 100%; background: #d6453c; top: 0; right: -20px; transform: skewX(-35deg); transition: 0.4s; z-index: -1; } nav .submenu ul li:after { position: absolute; content: ""; width: 0%; height: 100%; background: #c39e75; top: 0; left: -20px; transform: skewX(-35deg); transition: 0.4s; z-index: -1; } nav .submenu ul > li > a { color: #282828 !important; transition: 0.4s; width: 100%; padding: 8px 20px; } .sticky nav .submenu ul > li > a { margin-bottom: 9px; } nav .submenu ul > li:first-child > a { color: #282828; font-weight: 500; } nav .submenu ul li:hover a { color: #fff !important; } nav .submenu ul li:hover:before, nav .submenu ul li:hover:after { background: #d6453c; filter: hue-rotate(360deg); width: 60%; } /* Submenu End Here */ /* */ /* */ .banner-section { height: 800px; display: flex !important; align-items: center; /*background: url(../images/main-thumb/banner-bg.jpg) no-repeat center;*/ background-size: cover; position: relative; overflow: hidden; z-index: 1; } .banner-section.style2 { background: url(../images/main-thumb/banner-bg2.jpg) no-repeat center; background-size: cover; text-align: center; } .banner-section.style3 { background: url(../images/main-thumb/banner-bg3.jpg) no-repeat center; background-size: cover; } .banner-section.style2 .banner-title h1 { margin: 18px auto 12px; width: 54%; } .banner-section.style2 .banner-desc p { width: 50%; margin: 0 auto 34px; } .banner-section img { display: inline-block !important; } .banner-section.style2 .banner-title img { right: 1em; } .banner-sub-title h6 { font-size: 20px; line-height: 26px; color: #d6453c; font-weight: 500; font-family: "Rajdhani"; transition: 0.5s; } .banner-title h1 { font-size: 55px; line-height: 60px; color: #ffffff; font-weight: 600; font-family: "Teko"; position: relative; margin: 18px 0 12px; transition: 0.5s; } .banner-title img { position: absolute; right: 3em; top: 52px; } .banner-desc p { opacity: 0.8; font-size: 17px; line-height: 28px; color: #ffffff; font-weight: 500; font-family: "Rajdhani"; margin-bottom: 34px; width: 82%; transition: 0.5s; } .banner-content > * { -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-property: all; transition-property: all; -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } .banner-content > *:nth-child(1) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .banner-content > *:nth-child(2) { -webkit-transition-delay: 0.8s; transition-delay: 0.8s; } .banner-content > *:nth-child(3) { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; } .banner-content > *:nth-child(4) { -webkit-transition-delay: 1.4s; transition-delay: 1.4s; } /* Active Slide Animation */ .slick-active .banner-content > * { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } .banner-section.style2 .banner-content > * { -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-property: all; transition-property: all; -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; } .banner-section.style2 .banner-content > *:nth-child(1) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .banner-section.style2 .banner-content > *:nth-child(2) { -webkit-transition-delay: 0.8s; transition-delay: 0.8s; } .banner-section.style2 .banner-content > *:nth-child(3) { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; } .banner-section.style2 .banner-content > *:nth-child(4) { -webkit-transition-delay: 1.4s; transition-delay: 1.4s; } /* Active Slide Animation */ .slick-active .banner-section.style2 .banner-content > * { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .banner-social { position: absolute; left: 50px; top: 50%; transform: translateY(-50%); z-index: 99; } .banner-social ul li a { font-size: 16px; color: #fff; margin: 6px 0; position: relative; transition: 0.5s; } .banner-social ul li a:hover { color: #d6453c; } .banner-social ul li a:hover:before { transform: translate(0px, 0px); opacity: 1; visibility: visible; } .banner-social ul li a:hover:after { transform: rotate(45deg) translate(0px, 0px); opacity: 1; visibility: visible; } .banner-social ul li a:before { position: absolute; top: -20px; right: -80px; width: 70px; height: 20px; font-size: 16px; font-weight: 500; line-height: 23px; background: #fff; border-radius: 4px; transform: translate(-15px, 5px); filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3)); opacity: 0; visibility: hidden; text-align: center; color: #d6453c; transition: 0.5s; } .banner-social ul li:nth-child(1) a:before { content: "Facebook"; } .banner-social ul li:nth-child(2) a:before { content: "Pinterest"; } .banner-social ul li:nth-child(3) a:before { content: "Twitter"; } .banner-social ul li:nth-child(4) a:before { content: "Instagram"; } .banner-social ul li a:after { position: absolute; content: ""; top: -5px; right: -13px; width: 8px; height: 12px; background: #fff; clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 50% 100%); transform: rotate(45deg) translate(-10px, 15px); opacity: 0; visibility: hidden; transition: 0.5s; } .banner-shape { position: absolute; left: 0; top: 0; -webkit-animation: dance5 4s alternate infinite; animation: dance5 4s alternate infinite; } .banner-shape2 { position: absolute; top: 25%; left: 50%; -webkit-animation: dance6 1.5s alternate infinite; animation: dance6 1.5s alternate infinite; } .banner-shape3 { position: absolute; bottom: 19%; left: 5%; -webkit-animation: dance6 1.5s alternate infinite; animation: dance6 1.5s alternate infinite; opacity: 70%; } .banner-section.style2 .banner-shape2 { top: 20%; left: 75%; } /* */ /* */ section.fecilities-section { padding: 120px 0 90px; } section.fecilities-section.style2 { background: #f5f5f5; } .fecilities-box { margin-top: 32px; } .fecilities-single-box { text-align: center; border-radius: 4px; filter: drop-shadow(0 0 5.5px rgba(14, 19, 25, 0.07)); background-color: #ffffff; padding: 50px 40px 40px; margin-bottom: 30px; border:1px solid red; } .fecilities-box-icon { position: relative; display: inline-block; width: 110px; height: 110px; line-height: 110px; z-index: 1; } .fecilities-box-icon:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #bbbbbb41; } .fecilities-box-icon:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, #d6453c 1px, transparent 1px) 0 0, linear-gradient(to bottom, #d6453c 1px, transparent 1px) 0 0, linear-gradient(to left, #d6453c 1px, transparent 1px) 100% 0, linear-gradient(to bottom, #d6453c 1px, transparent 1px) 100% 0, linear-gradient(to left, #d6453c 1px, transparent 1px) 100% 100%, linear-gradient(to top, #d6453c 1px, transparent 1px) 100% 100%, linear-gradient(to right, #d6453c 1px, transparent 1px) 0 100%, linear-gradient(to top, #d6453c 1px, transparent 1px) 0 100%; background-repeat: no-repeat; background-size: 7px 7px; transition: background-size 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); z-index: -1; } .fecilities-single-box:hover .fecilities-box-icon:before { background-size: 50% 50%; } .fecilities-box-title h4 { font-size: 22px; line-height: 26px; color: #1c1e21; font-weight: 700; font-family: "Rajdhani"; transition: 0.5s; margin: 30px 0 13px; } .fecilities-single-box:hover .fecilities-box-title h4 { color: #d6453c; } .fecilities-box-desc p { margin: 0; } /* */ /* */ section.feature-section { margin-bottom: -30px; } .feature-single-box { position: relative; z-index: 1; background: #a2a2a2; padding: 92px 30px 84px; margin-bottom: 30px; border-radius: 5px; } .feature-single-box:before { position: absolute; content: ""; width: 50%; height: 100%; top: 50%; right: 0; transform: translateY(-50%); background: url(../images/main-thumb/feature-thumb.png) no-repeat left; z-index: -1; transition: 0.5s; } .feature-single-box:hover:before, .feature-single-box.style3:hover:before { width: 60%; } .feature-single-box.style2 { background: #d6453c; } .feature-single-box.style2:before { width: 100%; right: 30px; background: url(../images/main-thumb/feature-thumb2.png) no-repeat right; transform: translateY(-50%) scale(1); } .feature-single-box.style2:hover:before { transform: translateY(-50%) scale(1.1); } .feature-single-box.style3::before { width: 50%; background: url(../images/main-thumb/feature_thumb3.png) no-repeat left; } .feature-single-box.style3 { background: #111111; } .feature-box-title h3 { font-size: 40px; line-height: 42px; color: #ffffff; font-weight: 700; font-family: "Rajdhani"; margin-bottom: 30px; } .feature-single-box.style2 .cycling-btn a { border: 1px solid #ffffff; } .feature-single-box:hover .cycling-btn a { color: #d6453c; } .feature-single-box:hover .cycling-btn a span { width: 40rem; height: 40rem; } /* */ /* */ section.about-seciton { position: relative; margin-top:100px; } section.about-seciton .cycling-section-title h1 { margin-bottom: 13px; width: 80%; } .about-thumb img { /*margin-left: -10.4em;*/ margin-left: 2em; } .about-desc p { opacity: 0.6; margin: 0; width: 85%; } .about-items { display: flex; gap: 30px; align-items: center; } .about-item { margin-bottom: 26px; } .about-title h4 { font-size: 22px; line-height: 32px; color: #1c1e21; font-weight: 700; font-family: "Rajdhani"; margin: 20px 0 8px; } .about-title span { color: #d6453c; } .about-video { position: absolute; width: 22%; bottom: 0; right: 0; } .about-video a { background: url(../images/main-thumb/about-video-bg.jpg) no-repeat center; background-size: cover; width: 100%; height: 172px; text-align: center; line-height: 172px; border-radius: 5px; position: relative; font-size: 40px; color: #fff; } .about-video a::before { position: absolute; content: ""; top: 50%; left: 50%; transform: translate(-54%, -62%); -webkit-animation: ripple-white 1s linear infinite; animation: ripple-blue 1s linear infinite; animation-name: ripple-blue; -webkit-transition: 0.5s; transition: 0.5s; animation-name: play-btn; width: 54px; height: 54px; border-radius: 50px; line-height: 172px; border: 2px solid #fff; } /* */ /* */ .brand-section { padding: 120px 0 110px; background: #f5f5f5; } .brand-thumb { position: relative; overflow: hidden; border-radius: 5px; } .brand-thumb::before { position: absolute; top: 0; left: -100%; z-index: -1; display: block; content: ""; width: 50%; height: 100%; background: -webkit-linear-gradient( left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100% ); background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100% ); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); opacity: 0; visibility: hidden; } .brand-thumb:hover::before { -webkit-animation: shine 0.75s; animation: shine 0.75s; opacity: 1; visibility: visible; z-index: 1; } .brand-thumb img { width: 100%; } /* */ /* */ section.check-out-section { position: relative; padding: 120px 0 50px; } section.check-out-section:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 50%; background: #1c1e21; z-index: -1; } section.check-out-section .cycling-section-sub-title span:first-child:before, section.check-out-section .cycling-section-sub-title span:last-child:before { background: #fff; } section.check-out-section .cycling-section-title h1 { color: #ffffff; } .check-out-box { margin-top: 38px; } .check-out-single-box { margin-bottom: 30px; } .check-out-box-thumb { background: #f5f5f5; position: relative; border-radius: 4px 4px 0 0; z-index: 1; } .check-out-box-thumb img { transition: 0.5s; padding: 54px 20px; } .image-slide.style img:nth-child(1) { transform: scale(1); } .image-slide.style img:nth-child(2) { transform: scale(0); margin-top: -17rem; } .check-out-single-box:hover .image-slide.style img:nth-child(2) { transform: scale(1); } .check-out-single-box:hover .image-slide.style img:nth-child(1) { transform: scale(0); } .check-out-box-thumb h6 { font-size: 18px; line-height: 26px; color: #ffffff; font-weight: 500; font-family: "Rajdhani"; text-align: center; padding: 2px 12px; background: #d6453c; display: inline-block; border-radius: 4px; position: absolute; top: 0; right: 0; } .check-out-box-thumb h5 { font-size: 18px; line-height: 26px; color: #ffffff; font-weight: 600; font-family: "Rajdhani"; text-align: center; background: #d6453c; display: inline-block; padding: 4px 12px; border-radius: 4px; left: 50%; position: absolute; transform: translateX(-50%); bottom: 10%; transition: 0.5s; opacity: 0; visibility: hidden; } .check-out-single-box:hover .check-out-box-thumb h5 { bottom: 0%; opacity: 1; visibility: visible; } .check-out-box-thumb a { width: 45px; height: 45px; border-radius: 30px; font-size: 20px; background: #d6453c; text-align: center; line-height: 45px; color: #fff; position: absolute; top: 20%; left: 50%; transform: translate(-50%, -50%); transition: 0.5s; opacity: 0; visibility: hidden; } .check-out-single-box:hover .check-out-box-thumb a { transform: translate(-50%, -50%); top: 50%; opacity: 1; visibility: visible; } .product-action-btn:hover { color: #ffffff; } .check-out-box-content { filter: drop-shadow(0 0 5.5px rgba(14, 19, 25, 0.07)); background-color: #ffffff; padding: 30px 30px 70px; text-align: center; border-radius: 0 0 4px 4px; } .check-out-box-price h5 { font-size: 20px; line-height: 26px; color: #d6453c; font-weight: 600; font-family: "Rajdhani"; } .check-out-box-title h4 { font-size: 25px; line-height: 36px; color: #1c1e21; font-weight: 700; font-family: "Rajdhani"; } /* */ /* */ section.testimonial-section { background: #fff; } section.testimonial-section .cycling-section-title { margin-bottom: 38px; } .testimonial-box { text-align: center; position: relative; padding: 0 15px 26px; } .testimonial-box:before { position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 84%; background: #fff; z-index: -1; border-radius: 4px; } .testimonial-box-thumb img { border: 1px solid #d6453c; border-radius: 50%; display: inline-block !important; } .testimonial-desc p { font-size: 17px; line-height: 28px; color: #616161; font-weight: 400; font-family: "Rajdhani"; margin: 22px 0 16px; } .testimonial-desc i { color: #d6453c; font-size: 24px; text-shadow: 2px 2px 0px; } .testimonial-name h5 { font-size: 22px; line-height: 30px; color: #1c1e21; font-weight: 600; font-family: "Rajdhani"; transition: 0.5s; } .testimonial-box:hover .testimonial-name h5 { color: #d6453c; } .testimonial-designation h6 { font-size: 15px; line-height: 24px; color: #616161; font-weight: 500; font-family: "Rajdhani"; } .testimonial-thumb img { margin-left: -2rem; } /* */ /* */ .direction-content { display: flex; align-items: center; justify-content: space-between; background: url(../images/main-thumb/direction-bg.jpg) no-repeat center; background-size: cover; padding: 45px 40px; border-radius: 4px; } .direction-section-title h1 { font-size: 38px; line-height: 50px; color: #ffffff; font-weight: 500; font-family: "Teko"; } .direction-link a { font-size: 20px; line-height: 50px; color: #d6453c; font-weight: 400; font-family: "Teko"; } .direction-link i { position: relative; top: 3px; } form.direction-form { position: relative; } .direction-form-name input { height: 60px; background-color: #ffffff; border: 1px solid rgb(28 30 33 / 20%); padding: 10px 30px; border-radius: 4px; width: 100%; } .direction-form-btn button { padding: 15px 32px; border-radius: 4px; background: #d6453c; font-size: 17px; line-height: 30px; color: #ffffff; font-weight: 600; font-family: "Rajdhani"; position: absolute; top: 0; right: 0; transition: 0.5s; } .direction-form-btn button:hover { filter: hue-rotate(360deg); } .condition { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .condition p { margin: 0; } /* */ /* */ .products-box { height: 600px; background-color: #f5f5f5; border-radius: 4px; padding: 120px 80px; position: relative; z-index: 1; overflow: hidden; } .products-box::before { position: absolute; content: ""; bottom: -48px; right: 0; height: 100%; width: 65%; background: url(../images/main-thumb/products-thumb.png) no-repeat left; z-index: -1; transition: 0.5s; } .products-box.style2::before { bottom: -68px; background: url(../images/main-thumb/products-thumb2.png) no-repeat left; } .products-box:hover::before { width: 75%; } .product-box-desc p { margin: 6px 0 31px; } .products-box .cycling-btn a { background: transparent; color: #d6453c; } .products-box .cycling-btn a:hover { color: #fff !important; } .products-box .cycling-btn span { background-color: #d6453c; } /* */ /* */ section.check-out-section.style2:before { height: 30%; } section.check-out-section.style2 .check-out-box-thumb img { transition: 0.5s; } section.check-out-section.style2 .check-out-single-box:hover .check-out-box-thumb .slick-active img { transform: scale(1.1); } /* */ /* */ section.blog-section { padding: 120px 0 90px; background-color: #f5f5f5; } .blog-desc p { font-size: 17px; margin: 0; } .blog-box { margin-top: 38px; } .blog-single-box { margin-bottom: 30px; } .blog-thumb { position: relative; overflow: hidden; border-radius: 4px 4px 0 0; } .blog-thumb::before { position: absolute; top: 0; left: -100%; z-index: -1; display: block; content: ""; width: 50%; height: 100%; background: -webkit-linear-gradient( left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100% ); background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100% ); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); } .blog-single-box:hover .blog-thumb::before { -webkit-animation: shine 0.75s; animation: shine 0.75s; z-index: 1; } .blog-thumb img { width: 100%; transition: 0.5s; } .blog-single-box:hover .blog-thumb img { transform: scale(1.1); } .blog-box-content { border-radius: 0 0 5px 5px; background: #fff; padding: 0 30px 6px 30px; } .blog-content-top { position: relative; z-index: 1; margin-top: -14px; } .blog-content-top ul li { display: inline-block; margin-right: 6px; } .blog-content-top ul li a { padding: 2px 12px; font-size: 14px; line-height: 24px; color: #ffffff; font-weight: 500; font-family: "Rajdhani"; border-radius: 3px; background-color: #1c1e21; position: relative; z-index: 1; overflow: hidden; } .blog-content-top ul li a::before { position: absolute; content: ""; top: 0; right: 0; width: 0%; height: 100%; background: #d6453c; border-radius: 3px; z-index: -1; transition: 0.5s; } .blog-content-top ul li a:hover::before { width: 100%; left: 0; } .blog-box-title a { font-size: 22px; line-height: 30px; color: #1c1e21; font-weight: 700; font-family: "Rajdhani"; transition: 0.5s; margin: 19px 0 10px; } .blog-single-box:hover .blog-box-title a { color: #d6453c; } .blog-box-bottom { display: flex; align-items: center; gap: 26px; padding: 0 0 0 30px; background: #fff; border-radius: 5px; margin-top: 6px; width: 90%; } .blog-post-date h6, .blog-comment h6 { font-size: 15px; line-height: 24px; color: #616161; font-weight: 500; font-family: "Rajdhani"; } .blog-post-date h6 i, .blog-comment h6 i { color: #d6453c; } .blog-link a { width: 55px; height: 60px; border-radius: 3px; background-color: #1c1e21; text-align: center; line-height: 60px; font-size: 20px; color: #fff; position: relative; z-index: 1; transition: 0.5s; } .blog-link a::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; border-radius: 4px; background: #d6453c; z-index: -1; transition: 0.5s; transform: scale(0); } .blog-single-box:hover .blog-link a::before { transform: scale(1); } /* */ /* */ footer.footer-section { padding: 120px 0 0; background: url(../images/main-thumb/footer-bg.png) no-repeat fixed; background-size: cover; position: relative; z-index: 1; } .footer-desc p { color: #ffffff; margin: 34px 0; } .footer-social ul li { display: inline-block; margin: 0 5px; } .footer-social ul li:first-child { margin-left: 0; } .footer-social a { font-size: 16px; width: 45px; height: 45px; border-radius: 30px; background: rgb(255 255 255 / 10%); text-align: center; line-height: 49px; transition: 0.5s; color: #fff; position: relative; z-index: 1; } .footer-social a::before { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; border-radius: 30px; background: #d6453c; z-index: -1; transition: 0.5s; transform: scale(0); } .footer-social a:hover::before { transform: scale(1); } .footer-title h4 { font-size: 30px; line-height: 26px; color: #ffffff; font-weight: 700; font-family: "Rajdhani"; margin: 37px 0 28px; } .footer-link ul li a { font-size: 16px; color: #ffffff; font-weight: 400; font-family: "Rajdhani"; transition: 0.5s; margin: 4px 0; } .footer-link ul li a:hover { color: #d6453c; } .footer-link i { padding-right: 4px; } .subscribe-box { border: 5px solid rgb(255 255 255 / 7%); border-radius: 4px; padding: 24px 25px; margin-top: 13px; display: inline-block; } .footer-subscribe-form { position: relative; } .footer-subscribe-desc p { color: #fff; } .footer-subscribe-form input { height: 60px; border-radius: 4px; background-color: #ffffff; border: none; width: 90%; padding: 10px 20px; } .footer-subscribe-form button { width: 40px; height: 40px; border-radius: 4px; background-color: #d6453c; text-align: center; line-height: 45px; color: #fff; font-size: 20px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .footer-box { margin-top: 100px; } .footer-single-box { display: flex; align-items: center; background: #131418; border-radius: 4px; padding: 26px 34px 30px; gap: 20px; position: relative; z-index: 1; overflow: hidden; margin-bottom: 30px; } .footer-single-box::before { position: absolute; top: 0; right: 0; width: 0; height: 100%; background: #d6453c; transition: 0.5s; border-radius: 4px; z-index: -1; content: ""; } .footer-single-box:hover::before { width: 100%; left: 0; } .footer-box-icon i { width: 45px; height: 45px; border-radius: 22px; background-color: rgb(255 255 255 / 10%); text-align: center; line-height: 49px; color: #fff; } .footer-box-title h4 { font-size: 30px; line-height: 46px; color: #ffffff; font-weight: 700; font-family: "Rajdhani"; margin-bottom: -4px; } .footer-box-desc a { opacity: 0.6; font-size: 16px; line-height: 20px; color: #ffffff; font-weight: 500; font-family: "Rajdhani"; margin: 0; } .footer-bottom-desc p { text-align: center; color: #fff; margin-bottom: 26px; } .footer-shape { position: absolute; top: 0; right: 0; z-index: -1; -webkit-animation: Dance 3s alternate infinite; animation: Dance 3s alternate infinite; } /* */ /* */ /* */ section.breadcamp-section { position: relative; overflow: hidden; height: 450px; display: flex; align-items: center; text-align: center; z-index: 1; } section.breadcamp-section::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: #000000; opacity: 60%; z-index: -1; } #particles-js canvas { position: absolute; z-index: -1; } video.breadcamp-bg { position: absolute; top: 50%; right: 0; left: 0; transform: translateY(-50%); width: 100%; height: auto; z-index: -2; } .breadcamp-title h1 { font-size: 48px; line-height: 48px; color: #ffffff; font-weight: 600; font-family: "Teko"; display: inline-block; margin-top: 7rem; } .breadcamp-link { margin-top: 14px; } .breadcamp-link ul li { display: inline-block; margin-right: 30px; } .separator { position: relative; } .separator i { color: #fff; font-size: 30px; line-height: 30px; position: absolute; top: -20px; left: -16px; } .breadcamp-link a { font-size: 16px; line-height: 48px; color: #ffffff; font-weight: 500; font-family: "Rajdhani"; } .breadcamp-link a:hover { color: #d6453c; filter: hue-rotate(360deg); } .breadcamp-link a i { padding-right: 6px; } /* */ /* */ section.about-seciton.style2 { padding: 120px 0; } section.about-seciton.style2 .about-thumb img { margin-left: 7rem; } section.about-seciton.style2 .about-items { gap: 0; flex-direction: column; margin-top: 28px; align-items: start; } section.about-seciton.style2 .about-item { display: flex; align-items: center; gap: 30px; } .about-item-icon { width: 80px; height: 80px; border-radius: 4px; background-color: #f5f5f5; text-align: center; line-height: 80px; } section.about-seciton.style2 .about-title h4 { margin: 0 0 8px; } section.about-seciton.style2 .about-btn { margin-top: 20px; } section.about-seciton.style2 .about-video a { background: url(../images/main-thumb/about-video-bg2.jpg) no-repeat center; background-size: cover; } /* */ /* */ section.support-section { padding: 120px 0 90px; position: relative; z-index: 1; } section.support-section::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 45%; background: #1d1e22; z-index: -1; } section.support-section .cycling-section-sub-title span:first-child:before, section.support-section .cycling-section-sub-title span:last-child:before { background: #fff; } section.support-section .cycling-section-title h1 { color: #fff; } .support-desc p { margin: 0; opacity: 0.8; font-size: 16px; line-height: 24px; color: #ffffff; } .support-box { margin-top: 38px; } .support-single-box { background-color: #f5f5f5; border-radius: 4px; padding: 40px 30px; margin-bottom: 30px; } .support-box-icon img { transition: 0.3s; } .support-single-box:hover .support-box-icon img { filter: brightness(0) saturate(100%) invert(36%) sepia(35%) saturate(3368%) hue-rotate(354deg) brightness(104%) contrast(95%); } .support-box-title h5 { font-size: 22px; line-height: 34px; color: #1c1e21; font-weight: 700; font-family: "Rajdhani"; transition: 0.5s; margin: 26px 0 8px; } .support-single-box:hover .support-box-title h5 { color: #d6453c; } .support-btn { margin: 6px 0 -11px; display: inline-block; } .support-single-box.style2 { background: url(../images/main-thumb/support-box-bg.jpg) no-repeat center; background-size: cover; padding: 52px 0 40px 52px; width: 510px; } .support-box-sub-title h4 { font-size: 30px; line-height: 26px; color: #d6453c; font-weight: 700; font-family: "Rajdhani"; } .support-box-title h2 { font-size: 40px; line-height: 46px; color: #ffffff; font-weight: 700; font-family: "Rajdhani"; margin: 15px 0 6px; } .support-single-box.style2 .support-box-desc p { opacity: 0.8; font-size: 16px; line-height: 24px; color: #ffffff; font-weight: 500; font-family: "Rajdhani"; margin: 0; } .support-single-box.style2 .support-btn { margin: 96px 0 -11px; } /* */ /* */ section.latest-news-section.sytle2 .latest-news-single-box { margin-bottom: 30px; } /* */ /* */ section.rely-section.style2 { background: #f7f7f7; } /* */ /* */ section.product-section { text-align: center; padding: 120px 0 175px; background-color: #f6f6f6; position: relative; margin-bottom: -85px; } .darkmode section.product-section { background-color: #080a10; } .product-box { margin-top: 52px; } .product-single-box { border-radius: 5px; padding: 10px; background: #fff; position: relative; overflow: hidden; margin-bottom: 30px; } .darkmode .product-single-box { background: #1f212b; } .product-box-thumb { overflow: hidden; border-radius: 5px 5px 0 0; } .product-box-thumb img { width: 100%; transition: 0.5s; } .product-single-box.active .product-box-thumb img, .product-single-box:hover .product-box-thumb img { transform: scale(1.1); } .product-box-content { border-radius: 0 0 5px 5px; background: #f6f6f6; padding: 22px 0 24px; position: relative; transition: 0.5s ease; } .product-single-box.active .product-box-content, .product-single-box:hover .product-box-content { background: #d6453c; padding: 74px 0 24px; margin-top: -52px; filter: hue-rotate(360deg); } .darkmode .product-box-content, .darkmode .product-box-content { background: #080a10; } .product-icon { position: absolute; bottom: -50px; left: 0; right: 0; transition: 0.5s; visibility: hidden; opacity: 0; } .product-single-box.active .product-icon, .product-single-box:hover .product-icon { bottom: 102px; visibility: visible; opacity: 1; } .product-icon ul li { display: inline-block; margin: 0 5px; } .product-icon button { font-size: 16px; color: #dd1d26; width: 32px; height: 32px; border-radius: 16px; background-color: #ffffff; line-height: 32px; position: relative; z-index: 1; transition: 0.5s; border: none; } .product-icon button:hover { color: #fff; } .product-icon button::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: #8b66d8; border-radius: 16px; transform: scale(0); z-index: -1; transition: 0.5s; } .product-icon button:hover::after { transform: scale(1); filter: hue-rotate(360deg); } .product-box-title h6 { font-size: 20px; line-height: 32px; color: #1f212b; font-weight: 400; font-family: "Rajdhani"; transition: 0.5s; } .product-single-box.active .product-box-title h6, .product-single-box:hover .product-box-title h6 { color: #fff; } .darkmode .product-box-title h6 { color: #fff; } .darkmode .product-box-price h6 { color: #bbbaba; } .product-box-price h6 { font-size: 16px; line-height: 30px; color: #1f212b; font-weight: 400; font-family: "Rajdhani"; transition: 0.5s; } .product-single-box.active .product-box-price h6, .product-single-box:hover .product-box-price h6 { color: #fff; } /* */ /* */ section.pricing-section { padding: 120px 0 175px; background: #f7f7f7; position: relative; margin-bottom: -85px; } .darkmode .pricing-section { background: #080a10; } .pricing-desc p { color: #616161; width: 65%; margin: 16px auto 60px; } .darkmode .pricing-desc p { color: #a8a8a8; } .pricing-single-box { border-radius: 5px; background-color: #ffffff; text-align: center; padding: 42px; position: relative; overflow: hidden; margin-bottom: 30px; } .darkmode .pricing-single-box { background-color: #1f212b; } .pricing-single-box:before { position: absolute; content: ""; top: -7px; right: -4rem; width: 100%; height: 100%; background: url(../images/shape/pricing-plan.png) no-repeat right top; transition: 0.5s; } .pricing-single-box.active:before, .pricing-single-box:hover:before { filter: saturate(10) hue-rotate(360deg); top: -0px; right: -1rem; } .pricing-single-box.active .cyclingshop-btn.style2 a i, .pricing-single-box:hover .cyclingshop-btn.style2 a i { color: #fff; padding-left: 6px; background: transparent; } .pricing-single-box.active .cyclingshop-btn a span, .pricing-single-box:hover .cyclingshop-btn a span { width: 40rem; height: 40rem; } .pricing-box-title h3 { font-size: 22px; line-height: 32px; color: #1f212b; font-weight: 600; font-family: "Rajdhani"; } .darkmode .pricing-box-title h3 { color: #fff; } .pricing-box-price h1 { display: inline-block; font-size: 50px; line-height: 55px; color: #d6453c; font-weight: 600; font-family: "Rajdhani"; margin: 20px 0 12px; } .darkmode .pricing-box-price h1 { color: #5ccfff; } .pricing-box-visit span { font-size: 16px; line-height: 30px; color: #1f212b; font-weight: 500; font-family: "Rajdhani"; } .darkmode .pricing-box-visit span { color: #fff; } .pricing-box-list { margin: 40px 0 48px; } .pricing-box-list li { font-size: 16px; line-height: 30px; color: #616161; font-weight: 400; font-family: "Rajdhani"; margin: 12px 0; } .darkmode .pricing-box-list li { color: #d8d8d8; } .pricing-box-list li i { color: #d6453c; } .darkmode .pricing-box-list li i { color: #5ccfff; } .pricing-shape1 { position: absolute; top: 6rem; left: 15%; -webkit-animation: rotateme 1.5s linear infinite; animation: rotateme 1.5s linear infinite; } .pricing-shape2 { position: absolute; top: 15rem; right: 20%; -webkit-animation: dance 2s alternate infinite; animation: dance 2s alternate infinite; } .pricing-shape2 img { transform: scale(2); } .pricing-shape3 { position: absolute; top: 13rem; right: 5%; filter: saturate(10); -webkit-animation: dance2 1.5s alternate infinite; animation: dance2 1.5s alternate infinite; } .pricing-shape4 { position: absolute; top: 10rem; filter: brightness(0) saturate(100%) invert(70%) sepia(92%) saturate(2851%) hue-rotate(337deg) brightness(102%) contrast(99%); -webkit-animation: Dance 2.5s alternate infinite; animation: Dance 2.5s alternate infinite; } /* */ /* */ section.optimization-section.style2 { padding: 120px 0 90px; } section.optimization-section.style2 .optimization-single-box { margin-bottom: 30px; } /* */ /* */ section.shop-details-section { padding: 120px 0 205px; position: relative; margin-bottom: -85px; } .darkmode section.shop-details-section { background: #080a10; } .thumb-tabs { background: #fff; padding: 50px; border-radius: 5px; filter: drop-shadow(0 0 15px rgba(218, 218, 218, 0.3)); } .darkmode .thumb-tabs { background: #1f212b; filter: drop-shadow(0 0 15px rgba(218, 218, 218, 0)); } /*.tab-content {*/ /* display: none;*/ /* -webkit-animation: move 0.4s ease-in;*/ /* animation: FadeInUp 0.5s ease-in;*/ /*}*/ /*.tab-content.active {*/ /* display: block;*/ /*}*/ .bike-content { padding:100px 0; } #pills-tab li button { color: #fff; font-size: 17px; background: #d6453c; padding: 14px 42px; margin-right: 17px; border-radius: 5px; text-transform: uppercase; } .shop-details-thumb { position: relative; } .shop-details-thumb img { width: 100%; border-radius: 4px; filter: drop-shadow(0 0 15px rgba(218, 218, 218, 0.3)); } .add-to-favourite { position: absolute; top: 30px; right: 30px; } .add-to-favourite a { width: 50px; height: 50px; border-radius: 28px; background-color: #282828; color: #ffffff; text-align: center; line-height: 50px; position: relative; z-index: 1; transition: 0.4s; overflow: hidden; display: inline-block; } .add-to-favourite a:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: #d6453c; transform: scale(0); z-index: -1; transition: 0.4s; border-radius: 30px; } .add-to-favourite a:hover:before { transform: scale(1); filter: hue-rotate(360deg); } .tab-btn button { width: 120px; height: 100px; border-radius: 4px; background-color: #ffffff; border: 1px solid #1f212b7c; margin-top: 30px; overflow: hidden; padding: 0; } .tab-btn button:focus { outline: none; } .tab-btn button.active { border: 1px solid #d6453c; padding: 2px; } .tab-btn img { width: 100%; height: 100%; } .shop-details-title h2 { font-size: 30px; line-height: 36px; color: #282828; } .darkmode .shop-details-title h2 { color: #fff; } .rate-left ul li { display: inline-block; color: #d6453c; font-size: 16px; margin: 16px 4px 16px 0; } .shop-details-rate { display: flex; gap: 16px; align-items: center; } .rate-right p { font-size: 17px; line-height: 28px; color: #616161; font-weight: 400; margin: 0; } .shop-details-price h5 { font-size: 20px; line-height: 28px; color: #d6453c; font-weight: 500; margin: 0 0 20px 0; } .shop-details-price h5 span { opacity: 0.502; text-decoration: line-through; color: #26272c; padding-left: 10px; } .darkmode .shop-details-price h5 span { color: #ececec; } .darkmode .shop-details-desc p { color: #c9c7c7; } .quantity { float: left; margin-right: 30px; } .category-count-button { display: inline-flex; padding: 8px 0 30px; } .quantity-with_btn { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; vertical-align: middle; } .quantity .cart-plus-minus { position: relative; width: 150px; text-align: left; height: 54px; overflow: hidden; border-radius: 5px; border: 1px solid #d6453c; } .quantity .cart-plus-minus > .ctnbutton { cursor: pointer; position: absolute; text-align: center; font-size: 20px; font-weight: 600; width: 38px; -webkit-box-align: center; align-items: center; vertical-align: middle; color: #fff; -webkit-transition: 0.5s; transition: 0.5s; background: #d6453c; } .quantity .cart-plus-minus > .cart-plus-minus-box { border: 0; height: 54px; text-align: center; width: 150px; font-size: 16px; font-weight: 600; color: #062461; background-color: #fff !important; background-size: 6px 2px, 6px 2px, 2px 6px, 2px 7px; background-position: 0 0, 0 100%, 0 0, 100% 0; } .quantity .cart-plus-minus > .ctnbutton.dec { top: 50%; left: 0%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-box; display: flex; -webkit-justify-content: center; justify-content: center; height: 100%; border-radius: 0 30px 30px 0; } .quantity .cart-plus-minus > .ctnbutton.inc { top: 50%; right: 0%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-flex; display: flex; -webkit-box-pack: center; justify-content: center; height: 100%; border-radius: 30px 0 0 30px; } .add-to-cart-btn a { width: 143px; height: 54px; line-height: 54px; border-radius: 4px; background-color: #d6453c; display: inline-block; font-size: 16px; color: #ffffff; font-weight: 500; text-align: center; transition: 0.4s; } .add-to-cart-btn a:hover { filter: hue-rotate(360deg); } .shop-features { margin-top: 26px; } .shop-details-color h5 { font-size: 16px; line-height: 28px; color: #26272c; font-weight: 500; margin: 0 0 22px; } .darkmode .shop-details-color h5 { color: #fff; } .shop-details-color h5 span { color: #616161; padding-left: 6px; } .shop-features td { font-size: 16px; line-height: 36px; font-weight: 500; } .table-title { color: #282828; } .darkmode .table-title { color: #ffffff; } .darkmode section.shop-details-info { background: #080a10; } section.shop-related .shop-cart-thumb::before { clip-path: polygon(0 0, 200% 0%, 0% 200%); } section.shop-related .shop-content { background-color: #fff; text-align: left; filter: drop-shadow(0 0 20px rgba(228, 228, 228, 0.5)); padding: 22px 30px 6px; } section.shop-related .shop-title h3 { color: #0d0e13; font-size: 18px; margin: 5px 0 0px; } section.shop-related .shop-price del { color: #616161; font-weight: 400; margin-right: 8px; } section.shop-related .shop-rating li { font-size: 14px; } section.shop-related .shop-cart-btn a { border: transparent; color: #fff; display: none; } .info-tab-btn button { padding: 14px 30px; border-radius: 4px; background-color: #ffffff; border: 1px solid rgba(13, 14, 20, 0.1); font-size: 16px; line-height: 28px; color: #1f1f1f; font-weight: 400; float: left; margin-right: 20px; width: auto; height: auto; } .darkmode .info-tab-btn button { background-color: #1f212b; color: #fff; } .info-desc { margin-top: 34px; } .info-tab-btn button.active { background-color: #d6453c; color: #fff; } .tab-contents { margin-top: 30px; margin-bottom: 40px; -webkit-animation: move 0.4s ease-in; animation: FadeInUp 0.5s ease-in; display: none; } .tab-contents.active { display: block; } .additional-info { border-top: 1px solid rgba(223, 223, 223, 0.55); border-bottom: 1px solid rgba(223, 223, 223, 0.55); } .additional-info table { width: 100%; } tr.table-bg { background-color: rgba(223, 223, 223, 0.2); } td.table_title { font-size: 16px; line-height: 28px; color: #282828; font-weight: 400; width: 180px; height: 68px; padding: 0 40px; } .darkmode td.table_title { color: #fff; } .profile-icon i { font-size: 66px; color: #dfdfdf; } .shop-review { display: flex; align-items: center; gap: 24px; } .review-rate li { display: inline-block; letter-spacing: 4px; color: #d6453c; } .profile-name { position: relative; display: flex; gap: 38px; } .profile-name h5 { font-size: 17px; line-height: 28px; color: #282828; font-weight: 500; margin: 0; } .darkmode .profile-name h5 { color: #fff; } .review-date h5 { position: relative; opacity: 0.8; font-size: 15px; line-height: 28px; color: #282828; font-weight: 400; } .darkmode .review-date h5 { color: #dad9d9; } .review-date h5:before { position: absolute; content: ""; top: 14px; left: -28px; background: #282828; width: 20px; height: 1px; } .darkmode .review-date h5:before { background: #dad9d9; } .reply button { border: none; background: transparent; font-size: 14px; color: #282828; } .darkmode .reply button { color: #dad9d9; } .darkmode .review-comment p { color: #b3b3b3; } .add-review-title h3 { font-size: 18px; line-height: 28px; color: #282828; font-weight: 500; margin: 0; } .darkmode .add-review-title h3 { color: #fff; } .darkmode .add-review-desc p { color: #b3b3b3; } .your-rate { display: flex; gap: 26px; align-items: center; } .rate-right li { font-size: 15px; letter-spacing: 5px; line-height: 28px; color: #d6453c; font-family: "Font Awesome"; display: inline-block; } .rate-left h5 { opacity: 0.8; font-size: 16px; line-height: 28px; color: #282828; font-weight: 400; margin: 0; } .darkmode .rate-left h5 { color: #fff; } .review-form-top { display: flex; gap: 28px; margin-bottom: 20px; margin-top: 30px; } .form-top-left, .form-top-right { width: 100%; } form.review-form label { display: block; opacity: 0.902; font-size: 14px; line-height: 28px; color: #282828; font-weight: 400; margin-bottom: 6px; } .darkmode .review-form label { color: #ffffff; } form.review-form input { width: 100%; height: 54px; background-color: #ffffff; border: 1px solid rgba(13, 14, 20, 0.1); padding: 10px 20px; } .darkmode form.review-form input, .darkmode form.review-form textarea { background-color: #1f212b; } form.review-form textarea { width: 100%; height: 156px; background-color: #ffffff; border: 1px solid rgba(13, 14, 20, 0.1); padding: 10px 20px; resize: none; } form.review-form input::placeholder, form.review-form textarea::placeholder { opacity: 0.702; font-size: 14px; line-height: 28px; color: #282828; font-weight: 400; } form.review-form input::placeholder, form.review-form textarea::placeholder { color: #fff; } .form-btn { margin-top: 20px; } section.shop-related { padding: 42px 0 165px; margin-top: -40px; position: relative; margin-bottom: -85px; } .darkmode section.shop-related { background: #080a10; } .shop-related-title h2 { font-size: 36px; line-height: 40px; margin-bottom: 30px; } .darkmode .shop-related-title h2 { color: #fff; } /* */ /* */ section.blog-details { padding: 100px 0 70px; } .blog-deteils-post { border-radius: 12px; border: 1px solid #e4e4e4; margin-bottom: 30px; } .blog-details-post-thumb img { width: 100%; border-radius: 12px 12px 0 0; } .blog-deteils-post-content { padding: 10px 30px; } .blog-deteils-content-top { display: flex; align-items: center; gap: 20px; } .blog-deteils-content-top h6 { font-size: 15px; line-height: 60px; color: #777777; font-weight: 400; } .blog-deteils-content-top i { color: #d6453c; font-size: 20px; padding-right: 10px; } .blog-deteils-post-type i { display: inline-block; transform: rotate(90deg); padding: 3px 0px 0 7px; line-height: 0; } .blog-deteils-post-title h1 { font-size: 25px; line-height: 30px; color: #1f212b; font-weight: 700; margin: 4px 0 16px; } .style-two .shop-categories { margin-top: 30px; } .read-more a { font-size: 17px; line-height: 28px; color: #282828; font-weight: 500; margin-bottom: 40px; display: inline-block; } .recent-post a { display: flex; align-items: center; justify-content: start; } .recent-post-icon { width: 90px; height: 90px; margin-right: 20px; margin-top: 4px; } .recent-post-icon img { width: 100%; height: 80px; border-radius: 4px; } .post-title h5 { font-size: 16px; line-height: 24px; color: #282828; font-weight: 500; margin: 0; } .darkmode .post-title h5 { color: #dadada; } .post-date h5 { font-size: 14px; color: #616161; font-weight: 400; margin: 0; line-height: 24px; } .darkmode .post-date h5 { color: #b1b1b1; } .post-date i { color: #d6453c; padding-right: 6px; } .search-catagory { position: relative; display: inline-block; width: 100%; } .search-catagory input { width: 100%; height: 60px; padding: 10px 30px; background-color: #fcfcfc; border: 1px solid #e6e6e6; border-radius: 5px; } .darkmode .search-catagory input { background-color: #1f212b; } .darkmode .search-catagory input::placeholder { color: rgb(206, 206, 206); } .search-catagory button { position: absolute; top: 0; bottom: 0; font-size: 26px; border: none; right: 0; color: #fff; background: #d6453c; width: 80px; border-radius: 0 5px 5px 0; } .style-two .shop-categories { margin-top: 30px; background: #fff; padding: 30px; border-radius: 5px; background-color: #f8f9f7; } .darkmode .style-two .shop-categories { background: #1f212b; } .shop-section-title h3 { font-size: 20px; line-height: 45px; color: #1f212b; font-weight: 700; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 3px solid #e6e5e5; position: relative; } .darkmode .shop-section-title h3 { color: #ffffff; } .shop-section-title h3:before { position: absolute; content: ""; top: 61px; left: 0; width: 50px; height: 3px; background: #d6453c; } .shop-list li { display: flex; justify-content: space-between; align-items: center; } .shop-list li { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; font-weight: 400; color: #1f212b; } .darkmode .shop-list li { color: #ffffff; } .shop-list-left i { width: 25px; height: 25px; display: inline-block; border-radius: 4px; color: #fff; text-align: center; line-height: 28px; font-size: 20px; background: #fff; margin-right: 8px; transition: 0.5s; cursor: pointer; border: 1px solid #d6453c; } .shop-list-left i:hover, .shop-list-left i.active { background: #d6453c; filter: hue-rotate(360deg); } .cloud-tag li { display: inline-block; margin: 10px 6px 0 0; } .cloud-tag li a { padding: 6px 20px; background: #fff; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1)); border-radius: 4px; transition: 0.4s; font-weight: 400; position: relative; display: inline-block; z-index: 1; font-size: 16px; color: #1f212b; transition: 0.5s; } .darkmode .cloud-tag li a { background: #080a10; color: #fff; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1)); } .cloud-tag li a:hover { color: #fff; } .cloud-tag li a::before { position: absolute; content: ""; top: 0; left: 50%; width: 0%; height: 100%; background-color: #d6453c; transition: 0.4s; z-index: -1; border-radius: 4px; } .cloud-tag li a:hover::before { width: 100%; left: 0; filter: hue-rotate(360deg); } .newsletter { position: relative; } .newsletter input { width: 100%; height: 60px; border-radius: 3px; background-color: #ffffff; border: 1px solid #2828282e; padding: 10px 30px; margin-bottom: 20px; margin-top: 20px; } .darkmode .newsletter input { background-color: #080a10; } .darkmode .newsletter input::placeholder { color: #c5c5c5; } .newsletter i { opacity: 0.702; font-size: 15px; line-height: 28px; color: #282828; position: absolute; top: 36px; right: 18px; } .darkmode .newsletter i { color: #dadada; } .newsletter button { height: 60px; width: 100%; border-radius: 3px; background-color: #d6453c; border: none; font-size: 17px; line-height: 28px; color: #ffffff; font-weight: 500; position: relative; z-index: 1; overflow: hidden; transition: 0.4s; } .newsletter button:hover { filter: hue-rotate(360deg); } .newsletter button:before { position: absolute; content: ""; top: 0; left: -50px; width: 0%; height: 100%; background: #1f212b; transform: skew(-29deg, 10deg) scale(1.8); transition: 0.4s; z-index: -1; } .newsletter button:after { position: absolute; content: ""; top: 0; right: -74px; width: 0%; height: 100%; background: #1f212b; transform: skew(-29deg, 10deg) scale(1.8); transition: 0.4s; z-index: -1; } .newsletter button:hover:before, .newsletter button:hover:after { width: 50%; } .comment ul li a { display: flex; align-items: center; gap: 10px; margin: 20px 0; } .recent-comment-icon i { width: 50px; height: 50px; border-radius: 5px; background-color: #fff; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1)); display: inline-block; line-height: 50px; text-align: center; color: #d6453c; font-size: 18px; transition: 0.5s; } .comment ul li a:hover .recent-comment-icon i { background-color: #d6453c; color: #fff; filter: hue-rotate(360deg); } .recent-comment-content p { color: #1f212b; margin: 0; transition: 0.5s; } .darkmode .recent-comment-content p { color: #dbdbdb; } .comment ul li a:hover .recent-comment-content p { color: #282828; } .contact-us { background: url("../images/main-thumb/service-details-thumb.jpg") no-repeat center; background-size: cover; text-align: center; padding: 100px 0; margin-top: 30px; border-radius: 5px; position: relative; } .contact-us:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: #000; border-radius: 5px; opacity: 50%; z-index: -1; } .blog-list-logo img { filter: brightness(0) invert(1); } .contact-title h1 { font-size: 46px; font-weight: 400; color: #fff; margin: 20px 0; } .contact-btn a { display: inline-block; font-size: 16px; color: #1f212b; background: #fff; padding: 8px 28px; border-radius: 4px; position: relative; z-index: 1; margin-top: 10px; transition: 0.5s; } .contact-btn a:hover { color: #fff; } .contact-btn a:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: #d6453c; border-radius: 4px; transition: 0.5s; z-index: -1; transform: scale(0); } .contact-btn a:hover:before { transform: scale(1); filter: hue-rotate(360deg); } /* */ /* */ section.services-details { padding: 120px 0; position: relative; } section.services-details h2 { font-size: 36px; line-height: 40px; margin-bottom: 16px; } section.services-details h3 { font-size: 30px; line-height: 40px; margin-bottom: 16px; } .service-sidebar { position: relative; display: block; max-width: 365px; width: 100%; } .service-sidebar .service-sidebar-single { position: relative; display: block; margin-bottom: 30px; } .service-sidebar .service-sidebar-single-services { position: relative; display: block; background: #f1f3ee; border-radius: 5px; padding: 35px 30px 25px; } .service-sidebar .service-sidebar-single-services .title { position: relative; display: block; margin-bottom: 12px; padding-left: 20px; } .service-sidebar .service-sidebar-single-services .title h3 { color: #1f212b; font-size: 20px; line-height: 30px; letter-spacing: -0.02em; } .service-sidebar .service-sidebar-single-services ul { position: relative; display: block; margin-top: 10px; } .service-sidebar .service-sidebar-single-services ul li { position: relative; display: block; margin-bottom: 5px; margin-top: -10px; } .service-sidebar .service-sidebar-single-services ul li:last-child { margin-bottom: 0; } .service-sidebar .service-sidebar-single-services ul li a { position: relative; display: block; color: #1f212b; font-size: 18px; padding: 20px; border-radius: 5px; background: transparent; -webkit-transition: all 300ms linear; transition: all 300ms linear; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .service-sidebar .service-sidebar-single-services ul li a:hover { color: #d6453c; } .service-sidebar .service-sidebar-single-services ul li a:hover::before { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); -webkit-transition: all 300ms linear; transition: all 300ms linear; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .service-sidebar .service-sidebar-single-services ul li a::before { position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: ""; z-index: -1; opacity: 1; -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transition: all 300ms linear; transition: all 300ms linear; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; background: #ffffff; -webkit-box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05); border-radius: 10px; } .service-sidebar .service-sidebar-single-services ul li a i { font-size: 16px; } .service-sidebar .service-sidebar-single-services ul li.active a::before { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); -webkit-transition: all 300ms linear; transition: all 300ms linear; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .service-sidebar .service-sidebar-single-services ul li:first-child { margin-top: 20px; } .service-sidebar .service-sidebar-single-services ul li.active a { color: #d6453c; } .service-sidebar .service-sidebar-single-contact-box { position: relative; display: block; background-attachment: scroll; background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 5px; background: url(../images/main-thumb/service-details-htumb.jpg) no-repeat left; background-size: cover; padding: 50px 0px 44px; z-index: 1; } .service-sidebar .service-sidebar-single-contact-box::before { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #000; border-radius: 5px; opacity: 50%; content: ""; z-index: -1; } .service-sidebar .service-sidebar-single-contact-box .icon { position: relative; display: inline-block; width: 60px; height: 60px; text-align: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; border-radius: 50%; } .service-sidebar .service-sidebar-single-contact-box .icon:hover span::before { color: #fff; } .service-sidebar .service-sidebar-single-contact-box .icon span::before { position: relative; display: inline-block; font-size: 30px; line-height: 60px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .service-sidebar .service-sidebar-single-contact-box .title { position: relative; display: block; margin-top: 20px; margin-bottom: 42px; } .service-sidebar .service-sidebar-single-contact-box .title h2 { color: #ffffff; font-size: 36px; } .service-sidebar .service-sidebar-single-contact-box .phone { font-size: 24px; line-height: 34px; } .service-sidebar .service-sidebar-single-contact-box .phone a { color: #ffffff; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .service-sidebar .service-sidebar-single-contact-box p { color: #ffffff; font-size: 14px; line-height: 22px; } .service-sidebar .service-sidebar-single-btn { position: relative; display: block; } .service-sidebar .service-sidebar-single-btn .thm-btn { font-size: 16px; padding: 13px 50px 28px; } .service-sidebar .service-sidebar-single-btn .thm-btn span::before { position: relative; display: inline-block; top: 13px; color: #334b35; font-size: 40px; padding-right: 25px; -webkit-transition: all 600ms ease; transition: all 600ms ease; font-weight: 500; } .service-sidebar .service-sidebar-single-btn .thm-btn:hover span::before { color: #ffffff; } .service-sidebar .banner-widget { position: relative; display: block; background: #fff; border-radius: 5px; overflow: hidden; -webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.08); } .service-sidebar .banner-widget .widget-content { position: relative; display: block; width: 100%; padding: 45px 30px 40px 30px; background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(../images/main-thumb/service-details-thumb.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; } .service-sidebar .banner-widget .widget-content .shape { position: absolute; left: 0px; top: 0px; height: 100%; width: 278px; background-repeat: no-repeat; background-size: cover; } .service-sidebar .banner-widget .content-box { position: relative; width: 100%; } .services-details__content img { width: 100%; border-radius: 4px; } .service-sidebar .banner-widget .content-box .icon-box { position: relative; display: inline-block; width: 60px; height: 60px; line-height: 60px; font-size: 40px; text-align: center; border-radius: 5px; margin-bottom: 23px; } .service-sidebar .banner-widget .content-box .icon-box .icon-shape { position: absolute; top: -15px; right: -38px; width: 32px; height: 32px; background-repeat: no-repeat; } .service-sidebar .banner-widget .content-box h3 { display: block; font-size: 24px; line-height: 32px; color: #ffffff; font-weight: 600; text-transform: uppercase; margin-bottom: 22px; } .widget-btn a { position: relative; font-size: 14px; line-height: 25px; color: #1f212b; padding: 15px 40px; font-weight: 600; background: #fff; letter-spacing: 0.05em; border-radius: 5px; overflow: hidden; text-transform: uppercase; z-index: 1; transition: 0.5s; display: inline-block; } .widget-btn a:hover { color: #fff; } .widget-btn a:before { position: absolute; left: 0; top: 0; height: 100%; width: 100%; content: ""; transform: scale(0); background-color: #d6453c; -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); border-radius: 5px; transition: 0.5s; z-index: -1; } .widget-btn a:hover:before { transform: scale(1); } .service-sidebar-single-btn a { position: relative; font-size: 14px; line-height: 25px; color: #fff; padding: 15px 40px; font-weight: 600; background: #d6453c; letter-spacing: 0.05em; border-radius: 5px; overflow: hidden; text-transform: uppercase; z-index: 1; transition: 0.5s; display: inline-block; margin-top: 30px; } .service-sidebar-single-btn a:before { position: absolute; left: 0; top: 0; height: 100%; width: 100%; content: ""; transform: scale(0); background-color: #1f212b; -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); border-radius: 5px; transition: 0.5s; z-index: -1; } .service-sidebar-single-btn a:hover:before { transform: scale(1); } .service-sidebar .service-sidebar-single-btn .theme-btn { padding: 20px 50px; } .service-sidebar .service-sidebar-single-btn .theme-btn span::before { position: relative; display: inline-block; font-size: 36px; padding-right: 25px; margin-top: 7px; -webkit-transition: all 600ms ease; transition: all 600ms ease; font-weight: 500; } .services-details__content .feature-list .single-item { position: relative; display: block; border: 1px solid #d6453c; background: #fff; padding: 16px 30px 16px 53px; margin-bottom: 20px; border-radius: 5px; -webkit-transition: all 600ms ease; transition: all 600ms ease; } .darkmode .services-details__content .feature-list .single-item { background: #1f212b; border: 1px solid #4e4e4e; } .services-details__content .feature-list .single-item .icon-box { color: #d6453c; position: absolute; left: 20px; top: 16px; font-size: 18px; -webkit-transition: all 600ms ease; transition: all 600ms ease; } .darkmode .services-details__content .feature-list .single-item .icon-box { color: #fff; } .services-details__content .feature-list .single-item .title { display: block; margin: 0; font-size: 16px; line-height: 32px; font-weight: 600; text-transform: uppercase; transition: 0.5s; color: #d6453c; } .darkmode .services-details__content .feature-list .single-item .title { color: #fff; } .services-details__content .feature-list .single-item:hover .title { color: #fff; } .services-details__content .feature-list .single-item:hover { background-color: #d6453c; color: #fff; } .services-details__content .feature-list .single-item:hover .icon-box { color: #fff; } /* */ /* */ section.faq-inner-section { padding: 120px 0 205px; background: url(../images/main-thumb/optimization-bg.html) no-repeat right; background-size: cover; position: relative; margin-bottom: -85px; } section.faq-inner-section.style2 { padding: 120px 0; margin-bottom: 0px; } section.faq-section .organic-section-title h1 { margin: 0; } /*accordion*/ ul.accordion, ul.accordion2 { margin-top: 38px; } .accordion li, .accordion2 li { position: relative; z-index: 1; background: #1c1e21; border-radius: 5px; filter: drop-shadow(0px 0px 13.5px rgba(51, 51, 51, 0.2)); margin-bottom: 20px; overflow: hidden; } .accordion li a, .accordion2 li a { position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 500; font-size: 22px; line-height: 30px; color: #f8f8f8 !important; background-color: transparent; padding: 15px 20px; z-index: 1; transition: 0.5s; font-family: "Rajdhani"; } .accordion li a.active, .accordion li a:hover, .accordion2 li a.active, .accordion2 li a:hover { color: #fff !important; filter: hue-rotate(360deg); } .accordion li a.active, .accordion li a:hover, .accordion2 li a.active, .accordion2 li a:hover { color: #fff !important; } .accordian-icon { transition: 0.5s; transform: rotate(-180deg); } .accordion2 li a.active .accordian-icon, .accordion li a.active .accordian-icon { transform: rotate(-0deg); } .accordion li p, .accordion2 li p { display: none; font-size: 18px; margin: 0; background: #fff; padding: 25px 20px; } section.faq-inner-section .cycling-btn { margin-top: 30px; text-align: center; } /* */ /* */ .contact-box { padding: 100px 0; } .contact-single-box { text-align: center; border-radius: 4px; padding: 0 32px 32px; position: relative; z-index: 1; transition: 0.4s; overflow: hidden; } .darkmode .contact-single-box::before { background-color: #1f212b; } .contact-single-box::before { background-color: #f8f8f8; position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 84%; z-index: -1; } .contact-box-icon i { width: 70px; height: 70px; border-radius: 4px; background-color: #d6453c; color: #ffffff; line-height: 70px; font-size: 30px; position: relative; box-shadow: 0 0 0 0 #d6453c; transition: 0.6s; } .contact-single-box:hover .contact-box-icon i { box-shadow: 0 0 0 160px #d6453c; filter: hue-rotate(360deg); } .contact-single-box:hover .contact-box-info a, .contact-single-box:hover .contact-box-title h4, .contact-single-box:hover .contact-box-info p { color: #fff; } .contact-box-title h4 { font-size: 22px; line-height: 42px; color: #1f212b; font-weight: 500; margin-top: 22px; z-index: 1; position: relative; transition: 0.5s; } .darkmode .contact-box-title h4 { color: #ffffff; } .contact-box-info p { margin: 0; z-index: 1; color: #616161; position: relative; transition: 0.5s; } .contact-box-info p { margin: 0; z-index: 1; color: #616161; position: relative; transition: 0.5s; } .darkmode .contact-box-info p, .darkmode .contact-box-info a { color: #d6d6d6; } .contact-box-info a { font-size: 16px; line-height: 26px; color: #616161; font-weight: 400; display: block; margin-bottom: 2px; z-index: 1; position: relative; transition: 0.5s; } .contact-information { background-color: #f7f7f7; padding: 84px 0 100px; } .darkmode .contact-information { background-color: #1f212b; } .inner-contact-desc p { width: 52%; margin: 10px auto 46px; } .darkmode .inner-contact-desc p { color: #dddddd; } .contact-form { text-align: center; } .contact-form-top { display: flex; gap: 30px; margin-bottom: 30px; } .form-top-name, .form-top-email { position: relative; width: 100%; } .form-top-name input, .form-top-email input { width: 100%; height: 64px; border-radius: 4px; background-color: #ffffff; border: none; padding: 10px 30px; } .form-top-name input::placeholder, .form-top-email input::placeholder { opacity: 0.702; font-size: 16px; line-height: 28px; color: #0d0e14; font-weight: 400; } .form-top-name i, .form-top-email i { position: absolute; top: 19px; right: 24px; opacity: 0.702; font-size: 15px; line-height: 28px; color: #0d0e14; } .contact-form-subject select { width: 100%; height: 64px; border-radius: 4px; background-color: #ffffff; border: none; padding: 10px 30px; opacity: 0.702; font-size: 15px; line-height: 28px; color: #0d0e14; margin-bottom: 30px; } .contact-form-message textarea { width: 100%; height: 204px; border-radius: 4px; background-color: #ffffff; border: none; padding: 10px 30px; opacity: 0.702; font-size: 15px; line-height: 28px; color: #0d0e14; margin-bottom: 30px; resize: none; } .contact-map iframe { width: 100%; height: 550px; } /* */ /* */ section.team-member-section { background-size: cover; padding: 120px 0 90px; } .team-member-box { margin-top: 60px; } .team-member-single-box { text-align: center; background-color: #ffffff; border-radius: 4px; overflow: hidden; margin-bottom: 30px; } .team-member-box-thumb { overflow: hidden; position: relative; } .team-member-box-thumb:before { position: absolute; content: ""; top: 8px; left: 8px; width: 94%; height: 94%; border: 1px solid #fff; border-radius: 4px; z-index: 1; transition: 0.5s; } .team-member-single-box:hover .team-member-box-thumb::before { border-color: #d6453c; } .team-member-box-thumb::after { position: absolute; top: 0; left: -100%; z-index: -1; display: block; content: ""; width: 50%; height: 100%; background: -webkit-linear-gradient( left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100% ); background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100% ); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); transition: 0.5s; } .team-member-single-box:hover .team-member-box-thumb::after { -webkit-animation: shine 0.75s; animation: shine 0.75s; z-index: 1; } .team-member-box-thumb img { width: 100%; border-radius: 4px 4px 0 0; transition: 0.5s; } .team-member-single-box:hover .team-member-box-thumb img { transform: scale(1.1); } .team-member-box-social-link { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 100%; visibility: hidden; opacity: 0; transition: 0.5s; z-index: 5; } .team-member-single-box:hover .team-member-box-social-link { left: 50%; visibility: visible; opacity: 1; } .team-member-box-social-link ul li { display: inline-block; margin: 0 5px; } .team-member-box-social-link a { font-size: 15px; height: 34px; width: 34px; border-radius: 28px; color: #ffffff; border: 1px solid; line-height: 34px; text-align: center; transition: 0.5s; } .team-member-box-social-link a:hover { color: #d6453c; } .team-member-box-content { background-color: #f5f5f5; border-radius: 0 0 5px 5px; position: relative; z-index: 1; padding: 34px 0 15px; overflow: hidden; } .team-member-box-content:before { position: absolute; content: ""; top: 0; right: 0; width: 0; height: 100%; background: #d6453c; z-index: -1; transition: 0.5s; } .team-member-single-box:hover .team-member-box-content:before { width: 100%; left: 0; } .team-member-box-title h4 { font-size: 25px; line-height: 35px; color: #1c1e21; font-weight: 700; font-family: "Rajdhani"; transition: 0.5s; } .team-member-single-box:hover .team-member-box-title h4 { color: #ffffff; } .team-member-box-desc p { font-size: 16px; line-height: 30px; color: #1c1e21; font-weight: 500; font-family: "Rajdhani"; transition: 0.5s; margin-top: 4px; } .team-member-single-box:hover .team-member-box-desc p { color: #fff; } /* */ /* */ .team-member-section.style2 { padding: 100px 0 180px; position: relative; margin-bottom: -85px; } /* */ /* */ section.testimonial-section.style2 { padding: 100px 0 170px; position: relative; margin-bottom: -85px; } /* */ /* */ section.blog-details { padding: 120px 0 180px; position: relative; margin-bottom: -85px; } .darkmode section.blog-details { background: #080a10; } .blog-details-thumb img { width: 100%; border-radius: 5px; } .blog-detials-post-date h6 { display: inline-block; font-size: 15px; line-height: 15px; color: #797979; font-weight: 500; margin: 30px 20px 12px 0; } .blog-detials-post-date i { color: #d6453c; padding-right: 6px; font-size: 18px; } .blog-details-title h1 { font-size: 35px; line-height: 60px; color: #1f212b; font-weight: 700; margin: 0 0 20px; } .darkmode .blog-details-title h1 { color: #fffefe; } .darkmode .blog-detials-desc p { color: #d2d1d1; } .blog-detials-desc p span { color: #d6453c; font-weight: 500; } .shop-detials-shere h4 { font-size: 20px; line-height: 28px; color: #1f212b; font-weight: 600; margin: 0; } .darkmode .shop-detials-shere h4 { color: #ffffff; } .blog-details-social { display: flex; align-items: center; gap: 30px; margin: 34px 0; border-top: 1px solid #e4e1e1; padding: 18px 0 0; } .blog-details-social-title h5 { font-size: 22px; font-weight: 400; line-height: 34px; margin: 0; } .darkmode .blog-details-social-title h5 { color: #fff; } .blog-details-social-link ul li { display: inline-block; margin: 0 2px; } .blog-details-social-link a { width: 40px; height: 40px; border-radius: 22px; background-color: #1f212b; line-height: 40px; text-align: center; display: inline-block; color: #fff; position: relative; z-index: 1; } .blog-details-social-link a:before { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: #d6453c; z-index: -1; border-radius: 30px; transition: 0.5s; transform: scale(0); } .blog-details-social-link a:hover:before { transform: scale(1); } .blog-details-box { display: flex; align-items: center; gap: 30px; } .blog-detials-single-box { border-radius: 5px; background-color: #f8f9f7; text-align: center; padding: 58px 0; } .darkmode .blog-detials-single-box { background-color: #1f212b; } .blog-detials-single-box h4 { font-size: 20px; line-height: 30px; color: #1f212b; font-weight: 600; width: 69%; margin: auto; } .darkmode .blog-detials-single-box h4 { color: #fff; } .blog-title h2 { font-size: 24px; line-height: 30px; color: #1f212b; font-weight: 600; margin: 42px 0 34px; } .darkmode .blog-title h2 { color: #fff; } .related-blog-single-box { border-radius: 4px; filter: drop-shadow(0px 5px 30px rgba(226, 226, 226, 0.5)); background-color: #ffffff; } .related-blog-single-box { filter: drop-shadow(0px 5px 30px rgba(226, 226, 226, 0.4)); } .blog-box-thumb img { width: 100%; border-radius: 4px 4px 0 0; } .blog-box-thumb { position: relative; overflow: hidden; } .blog-box-thumb:before { position: absolute; content: ""; top: 0%; left: 0; width: 0%; height: 100%; background: #d6453c; opacity: 30%; transition: 0.4s; border-radius: 4px 0 0 0; } .blog-box-thumb:after { position: absolute; content: ""; top: 0%; right: 0; width: 0%; height: 100%; background: #d6453c; opacity: 30%; transition: 0.4s; border-radius: 0 4px 0 0; } .related-blog-single-box:hover .blog-box-thumb:before, .related-blog-single-box:hover .blog-box-thumb:after { width: 50%; } .blog-content { padding: 32px; position: relative; z-index: 1; } .blog-content:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: #d6453c; border-radius: 0 0 4px 4px; transition: 0.4s; transform: scale(0); z-index: -1; } .related-blog-single-box:hover .blog-content:before { transform: scale(1); filter: hue-rotate(360deg); } .blog-box-date h5 { font-size: 16px; line-height: 50px; color: #d6453c; font-weight: 400; margin: 0; transition: 0.4s; } .related-blog-single-box:hover .blog-box-date h5 { color: #fff; } .related-blog-single-box .blog-box-title a { display: inline-block; font-size: 18px; line-height: 30px; color: #1f212b; font-weight: 500; margin: 10px 0 20px; transition: 0.4s; } .related-blog-single-box:hover .blog-box-title a { color: #fff; } .blog-box-footer { align-items: center; display: flex; gap: 12px; border-top: 1px solid rgba(39, 39, 39, 0.10196078431372549); padding: 20px 0 0; transition: 0.4s; } .related-blog-single-box:hover .blog-box-footer { border-top: 1px solid #fff; } .posted-by a, .post-comment a { font-size: 15px; line-height: 30px; color: #1f212b; font-weight: 400; display: inline-block; transition: 0.4s; } .related-blog-single-box:hover .posted-by a, .related-blog-single-box:hover .post-comment a, .related-blog-single-box:hover .posted-by a i, .related-blog-single-box:hover .post-comment a i { color: #fff; } .posted-by a i, .post-comment a i { color: #d6453c; transition: 0.4s; } .blog-box-btn a { color: #1f1f1f; margin-left: 32px; transition: 0.4s; } .related-blog-single-box:hover .blog-box-btn a { color: #fff; } .comment-profile i { font-size: 80px; color: #c4c4c4; } .comments-title h4 { font-size: 24px; line-height: 30px; color: #1f212b; font-weight: 600; margin: 42px 0 34px; } .darkmode .comments-title h4 { color: #ffffff; } .blog-details-comments-item { display: flex; gap: 24px; position: relative; border-bottom: 1px solid #e0dcdc; padding-bottom: 46px; } .blog-details-comments-item { display: flex; gap: 24px; position: relative; border-bottom: 1px solid #e0dcdc; padding-bottom: 46px; } .blog-details-comments-item:nth-child(3) { margin-top: 70px; } .comment-title h5 { margin: 0px 0 20px; font-size: 20px; line-height: 30px; color: #1f212b; font-weight: 600; } .darkmode .comment-title h5 { color: #ffffff; } .comment-reply button { font-size: 12px; line-height: 30px; color: #ffffff; font-weight: 600; text-align: center; width: 92px; height: 32px; border-radius: 5px; background-color: #d6453c; border: none; position: absolute; top: 0; right: 0; transition: 0.5s; } .comment-reply button:hover { filter: hue-rotate(360deg); } .darkmode .comment-desc p { color: #b3b3b3; } .add-comment-title h4 { font-size: 24px; line-height: 60px; color: #1f212b; font-weight: 600; margin: 32px 0; } .darkmode .add-comment-title h4 { color: #ffffff; } .blog-details-form-top textarea { width: 100%; height: 225px; border-radius: 5px; background-color: #fcfcfc; border: 1px solid #e6e6e6; padding: 10px 20px; resize: none; margin-bottom: 13px; } .darkmode .blog-details-form-top textarea { background-color: #1f212b; } .blog-details-form-middle input { display: inline-block; width: 100%; height: 60px; border-radius: 5px; background-color: #fcfcfc; border: 1px solid #e6e6e6; padding: 10px 20px; margin-bottom: 20px; } .darkmode .blog-details-form-middle input { background-color: #1f212b; } .blog-details-form-bottom { display: flex; align-items: center; gap: 30px; margin-bottom: 10px; } .form-bottom-email, .form-bottom-site { width: 100%; } .form-bottom-email input, .form-bottom-site input { display: inline-block; width: 100%; height: 60px; border-radius: 5px; background-color: #fcfcfc; border: 1px solid #e6e6e6; padding: 10px 20px; } .darkmode .form-bottom-email input, .darkmode .form-bottom-site input { background-color: #1f212b; } .form-bottom-email input::placeholder, .form-bottom-site input::placeholder, .blog-details-form-middle input::placeholder, .blog-details-form-top textarea::placeholder { font-size: 16px; line-height: 28px; color: #797979; font-weight: 400; } .form-bottom-email input::placeholder, .form-bottom-site input::placeholder, .blog-details-form-middle input::placeholder, .blog-details-form-top textarea::placeholder { color: #dddada; } .form-condition input { float: left; margin-right: 10px; } .form-condition p { margin: 0; display: inline-block; } .darkmode .form-condition p { color: #c9c9c9; } .form-condition input { float: left; margin: 7px 10px 0 0; cursor: pointer; } .blog-details-form-btn { margin-top: 30px; } /* */ /* */ .cart-section { padding: 120px 0 205px; background-color: #fff; position: relative; margin-bottom: -85px; } .darkmode .cart-section { background-color: #080a10; } .cart-title { color: #1f212b; } .darkmode .cart-title { color: #fff; } .darkmode .table { --bs-table-bg: var(--bs-dark); } .darkmode .table th { color: #fff; } .darkmode .table .price, .darkmode .table .total { color: #fff; } .darkmode .table .remove-btn { color: #fff; } button.remove-btn:hover i { color: red; } /* Cart Product Mobile */ .cart-product-mobile { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; margin-bottom: 20px; } .cart-product-mobile-thumb { position: relative; -webkit-box-flex: 1; -ms-flex: 1 0 135px; flex: 1 0 135px; max-width: 135px; border: 1px solid #e5e5e5; } .cart-product-mobile-remove { position: absolute; top: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); opacity: 1; border: none; border-radius: 50%; background-color: #fff; transition: 0.5s; } .cart-product-mobile-remove i { display: inline-block; border-radius: 50%; transition: 0.5s; } .cart-product-mobile-remove i:hover { color: #dc3545; } .cart-product-mobile-image { display: -webkit-box; display: -ms-flexbox; display: flex; } .cart-product-mobile-image img { width: 100%; } .cart-product-mobile-content { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .cart-product-mobile-title { font-size: 16px; margin-bottom: 10px; } .cart-product-mobile-title a { font-weight: 600; } .cart-product-mobile-quantity, .cart-product-mobile-total { font-size: 14px; line-height: 1; display: block; margin-bottom: 10px; } .cart-product-mobile-total { margin-bottom: 15px; } .cart-product-mobile-add-to-cart { margin-top: 15px; } .cart-product-mobile-quantity, .cart-product-mobile-total { font-size: 15px; line-height: 1; display: -webkit-box; margin-bottom: 10px; font-weight: 500; color: #212529; } .cart-product-mobile-quantity .price, .cart-product-mobile-total .total { padding-left: 5px; } /* */ /* */ /* Cart Checkout Alert */ .alert-btn.show-modal, .alert-box { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); z-index: 1; } .alert-js.active .show-modal { display: none; } .alert-overlay { position: fixed; top: 0; z-index: -1; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; } .alert-js.active .alert-overlay { opacity: 1; pointer-events: auto; } .alert-box { display: flex; flex-direction: column; align-items: center; max-width: 380px; width: 100%; padding: 30px 20px; border-radius: 24px; background-color: #fff; opacity: 0; pointer-events: none; transition: all 0.3s ease; transform: translate(-50%, -50%) scale(1.2); z-index: 923; } .alert-js.active .alert-box { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .alert-box i { font-size: 70px; color: #27ff00; } .alert-box h2 { margin-top: 20px; font-size: 25px; font-weight: 600; color: #1f212b; } .alert-box h3 { font-size: 16px; font-weight: 400; color: #1f212b; margin-top: 15px; text-align: center; font-family: cursive; } .alert-box .alert-buttons { margin-top: 25px; } .alert-buttons a { display: inline-block; padding: 14px 22px; font-size: 18px; font-weight: 400; color: #fff; background: #d6453c; border-radius: 6px; cursor: pointer; margin: 0 10px; transition: 0.5s; } .alert-buttons a:first-child:hover { background-color: #1f212b; } .alert-buttons a:last-child { background: #1f212b; } .alert-buttons a:hover { background-color: #d6453c; } /* -------------------------------- */ /* shop product section */ /* ----------------------------------- */ .shop-product-section { padding: 100px 0 185px; position: relative; margin-bottom: -85px; } .darkmode .shop-product-section { background: #080a10; } .darkmode #billing-form h4 { color: #fff; } .checkout-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 30px; background-color: #f8f9fa; } .darkmode .checkout-box { background: #21212d; } .darkmode .checkout-box h4 { color: #fff; } .darkmode .checkout-box td { color: #9f9f9f; } .checkout-box:not(:last-child) { margin-bottom: 30px; } .cart-thumb { max-width: 160px; border-radius: 5px; } .cart-totals .table, .checkout-box .table { --bs-table-bg: transparent; } /* Cart Totals */ .cart-totals { margin-top: 30px; max-width: 500px; margin-left: auto; padding: 30px; background-color: #f8f9fa; } .darkmode .cart-totals { background-color: #212529; } .cart-totals .title { margin-bottom: 15px; } .darkmode .title { color: #fff; } .darkmode .shopping-fee td, .darkmode .subtotal td, .darkmode .total td { color: #fff; } .darkmode .cart-totals .btn { background: #1d1d1d; } .cart-totals .table { margin-bottom: 20px; } .cart-totals .table th:first-child, .cart-totals .table td:first-child { padding-left: 0; } .cart-totals .table th:last-child, .cart-totals .table td:last-child { padding-right: 0; } /* Checkout Box */ .checkout-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 30px; background-color: #f8f9fa; } .checkout-box:not(:last-child) { margin-bottom: 30px; } .darkmode #shipping-form h4 { color: #fff; } .darkmode #billing-form label, .darkmode #shipping-form label { color: #dfdfdf; } .form-field { background: #21212d; border-color: #31313b; } .darkmode #billing-form input, .darkmode #billing-form select, .darkmode #shipping-form input, .darkmode #shipping-form select { background: #21212d; border-color: #31313b; } .darkmode #billing-form input::placeholder, .darkmode #billing-form select, .darkmode #shipping-form input::placeholder, .darkmode #shipping-form select { color: #cececf; } .darkmode #billing-form input:focus, .darkmode #billing-form select:focus, .darkmode #shipping-form input:focus, .darkmode #shipping-form select:focus { background: #858484; border-color: #fff; color: #21212d; } /* Form */ /* Checkbox */ .form-check { min-height: auto; margin-bottom: 0; } .form-check:not(:last-child) { margin-bottom: 15px; } .form-check .form-check-input { margin-top: 1px; border-width: 2px; } .form-check .form-check-input:checked, .form-check .form-check-input:focus { -webkit-box-shadow: none; box-shadow: none; } .form-check .form-check-label { font-size: 14px; } /* Checkout Payment Method */ .checkout-payment-method .single-method:not(:last-child) { margin-bottom: 25px; } .checkout-payment-method .single-method p { font-size: 14px; margin-top: 10px; } /*----------------------------------- - Form CSS -----------------------------------*/ /* Form Common Style */ fieldset { padding: 20px; padding-top: 10px; border: 1px solid #e5e5e5; } fieldset legend { font-size: 16px; font-weight: 700; float: none; width: auto; margin: 0; padding: 0 10px; background-color: #fff; } /* Form Label */ label { font-size: 16px; font-weight: 500; display: block; margin-bottom: 10px; color: #1f212b; } /* Form Field Select */ select.form-field { font-size: 14px; width: 100%; height: 54px; padding: 10px 20px; border: 1px solid #e5e5e5; background-color: #fff; background-repeat: no-repeat; background-position: center right 20px; background-size: 12px; -webkit-appearance: none; appearance: none; } select.form-field:focus { border-color: #c7a17a; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { select.form-field { height: 52px; } } @media only screen and (max-width: 767px) { select.form-field { height: 44px; } } /* Form Field Input */ input.form-field:not([type="submit"]):not([type="checkbox"]):not( [type="radio"] ):not([type="range"]) { font-size: 14px; width: 100%; height: 54px; padding: 10px 24px; border: 1px solid #e5e5e5; background-color: #fff; } input.form-field:not([type="submit"]):not([type="checkbox"]):not( [type="radio"] ):not([type="range"])::-webkit-input-placeholder { color: rgba(51, 51, 51, 0.7); } input.form-field:not([type="submit"]):not([type="checkbox"]):not( [type="radio"] ):not([type="range"]):-moz-placeholder { color: rgba(51, 51, 51, 0.7); } input.form-field:not([type="submit"]):not([type="checkbox"]):not( [type="radio"] ):not([type="range"])::-moz-placeholder { color: rgba(51, 51, 51, 0.7); } input.form-field:not([type="submit"]):not([type="checkbox"]):not( [type="radio"] ):not([type="range"]):-ms-input-placeholder { color: rgba(51, 51, 51, 0.7); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { input.form-field:not([type="submit"]):not([type="checkbox"]):not( [type="radio"] ):not([type="range"]) { height: 52px; } } @media only screen and (max-width: 767px) { input.form-field:not([type="submit"]):not([type="checkbox"]):not( [type="radio"] ):not([type="range"]) { height: 44px; } } input.form-field:not([type="submit"]):not([type="checkbox"]):not( [type="radio"] ):not([type="range"]):focus { border-color: #c7a17a; } /* Form Field Textarea */ textarea.form-field { font-size: 14px; width: 100%; height: 140px; padding: 10px 24px; border: 1px solid #e5e5e5; background-color: #fff; } textarea.form-field::-webkit-input-placeholder { color: rgba(51, 51, 51, 0.7); } textarea.form-field:-moz-placeholder { color: rgba(51, 51, 51, 0.7); } textarea.form-field::-moz-placeholder { color: rgba(51, 51, 51, 0.7); } textarea.form-field:-ms-input-placeholder { color: rgba(51, 51, 51, 0.7); } textarea.form-field:focus { border-color: #c7a17a; } /* News Letter Form */ .subscribe-newsletter { position: relative; width: 100%; max-width: 770px; } .subscribe-newsletter input[type="email"] { height: 60px !important; padding: 10px 30px !important; padding-right: 140px !important; border-radius: 100px; background-color: #f8f9fa; } @media only screen and (max-width: 767px) { .subscribe-newsletter input[type="email"] { font-size: 14px; height: 50px !important; } } .subscribe-newsletter input[type="submit"] { position: absolute; top: 0; right: 0; height: 60px; padding: 10px 30px; color: #fff; border: none; border-radius: 100px; background-color: #c7a17a; } .subscribe-newsletter input[type="submit"]:hover { background-color: #bc8e5f; } @media only screen and (max-width: 767px) { .subscribe-newsletter input[type="submit"] { font-size: 14px; height: 50px; } } /* Reservation Form */ .reservation-form { padding: 40px 50px; border: 1px solid #e5e5e5; background-color: #fff; -webkit-box-shadow: 10px 25px 80px rgba(0, 0, 0, 0.05); box-shadow: 10px 25px 80px rgba(0, 0, 0, 0.05); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (max-width: 479px) { .reservation-form { padding: 30px; } } .reservation-form .block-title { margin-bottom: 20px; } .reservation-form .input-field { width: 100%; } .reservation-form .input-field:not(:last-child) { margin-bottom: 15px; } .reservation-form .input-field input, .reservation-form .input-field textarea { font-size: 15px; } .reservation-form .input-field textarea { height: 120px; } .reservation-form .input-field input[type="submit"] { text-transform: uppercase; } /* Form */ /* Checkbox */ .form-check { min-height: auto; margin-bottom: 0; } .form-check:not(:last-child) { margin-bottom: 15px; } .form-check .form-check-input { margin-top: 1px; border-width: 2px; } .form-check .form-check-input:checked, .form-check .form-check-input:focus { -webkit-box-shadow: none; box-shadow: none; } .form-check .form-check-label { font-size: 14px; line-height: 1.25; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; } .darkmode .form-check .form-check-label { color: #fff; } .darkmode .single-method.form-check p { color: #a5a2a2; } .darkmode .btn-dark { --bs-btn-bg: #363c42; } /* */ /*========================================== <-- Cycling Search CSS Start --> =========================================*/ .search-popup { position: fixed; left: 0; top: 0; height: 100vh; width: 100%; z-index: 99999; margin-top: -540px; transform: translateY(-100%); background-color: #2828283b; -webkit-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1); -moz-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1); -o-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1); transition: all 1500ms cubic-bezier(0.86, 0, 0.07, 1); -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); -moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); -o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); backdrop-filter: blur(5px); } .search-popup { width: 100%; } .search-active .search-popup { transform: translateY(0%); margin-top: 0; } .search-popup .close-search { position: absolute; left: 0; right: 0; top: 75%; margin: 0 auto; margin-top: -200px; border-radius: 50%; text-align: center; background: linear-gradient(to right, #ff4613 6%, #e9e9e9 96%); width: 70px; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); border: 3px solid #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; opacity: 0; visibility: hidden; height: 70px; line-height: 70px; text-align: center; border-top-color: #5ccfff; border-bottom-color: #5ccfff; border-left-color: beige; border-right-color: #ff5a2a; } .search-popup .close-search i { position: relative; font-size: 30px; color: #ffffff; } .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; border: 2px solid #ff4613; border-radius: 5px; } .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: #ff4613; padding: 0; cursor: pointer; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; 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 textSection::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-popup .close-search.style-two i { font-size: 20px; color: #f00; } .search-box-btn.search-box-outer i { font-size: 18px; display: inline-block; color: #093c78; cursor: pointer; transition: 0.5s; } .darkmode .search-box-btn.search-box-outer i { color: #fff; } .search-box-btn.search-box-outer i:hover { color: #ff4613; filter: hue-rotate(360deg); } .darkmode .search-box-btn.search-box-outer i:hover { color: #02c0bc; filter: hue-rotate(360deg); } /*========================================== <-- Cycling Search CSS End --> =========================================*/ /* cart sidebar - start */ /* =============================== */ .sidebar-menu-wrapper { display: block; } .cart_sidebar { top: 0; width: 300px; right: -320px; height: 100vh; z-index: 9999; position: fixed; padding: 50px 20px; overflow-y: scroll; background-color: #ffffff; transition: 0.6s cubic-bezier(1, 0, 0, 1); } .cart_sidebar .mCustomScrollBox { overflow: visible !important; } .cart_sidebar.active { right: 0px; } .cart_sidebar .close_btn { top: 15px; right: 20px; line-height: 1; font-size: 24px; position: absolute; } .cart_sidebar .close_btn:hover { color: red; } .cart_sidebar .heading_title { line-height: 1; font-size: 18px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #f6f6f6; } .cart_sidebar .heading_title span { color: #d6453c; } .cart_sidebar .total_price { display: flex; font-size: 16px; font-weight: 500; margin-top: 20px; padding: 10px 0px; margin-bottom: 15px; align-items: center; color: #1f212b; border-top: 1px solid #f6f6f6; border-bottom: 1px solid #f6f6f6; justify-content: space-between; } .cart_sidebar .total_price span:last-child { color: #d6453c; } .cart_sidebar .btns_group { margin: -5px; } .cart_sidebar .btns_group li { width: 48%; padding: 5px; display: inline-block; } .cart_sidebar .btn { display: block; font-size: 12px; padding: 17px 20px; } ul.btns_group.ul_li { margin-top: 16px; } ul.btns_group.ul_li a { position: relative; z-index: 1; transition: 0.5s; background: #fff; box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15); border: 1px solid #d6453c; } ul.btns_group a:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; transform: scale(0); transition: 0.5s; z-index: -1; border-radius: 4px; } ul.btns_group li:last-child a:hover { color: #fff; } ul.btns_group li:first-child a { background: #d6453c; color: #fff; } ul.btns_group li:first-child a:hover { color: #1f212b; } ul.btns_group li:first-child a:before { background: #fff; } ul.btns_group li:last-child a:before { background: #d6453c; } ul.btns_group li:first-child a:hover:before, ul.btns_group li:last-child a:hover:before { transform: scale(1); } .cart_sidebar .btn.btn_border { padding: 15px 20px; } .cart_sidebar::-webkit-scrollbar { width: 0px; } .cart_sidebar_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.4s; -o-transition: all 0.4s ease-in 0.4s; transition: all 0.4s ease-in 0.4s; background: #d6453c; } .cart_sidebar_overlay.active { opacity: 0.5; visibility: visible; -webkit-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; left: 0; } .cart_item { display: flex; position: relative; align-items: center; padding-right: 25px; transition: 0.5s; } .cart_item.remove { display: none; } .cart_item:not(:last-child) { margin-bottom: 20px; } .cart_item .item_image { display: block; min-width: 70px; overflow: hidden; border-radius: 3px; position: relative; margin-right: 10px; } .cart_item .item_image img { width: 70px; height: 70px; } .cart_item .item_title { font-weight: 500; margin-bottom: 10px; font-size: 14px; } .cart_item .item_price { line-height: 1; display: block; font-weight: 600; color: #d6453c; } .cart_item .remove_btn { top: 50%; right: 0px; color: red; width: 20px; height: 20px; font-size: 12px; line-height: 15px; text-align: center; position: absolute; border-radius: 100%; background-color: #ffffff; transform: translateY(-50%); box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15); border: none; } .cart_item .remove_btn:hover { color: #ffffff; background-color: red; } /* White sidebar - start */ /* =============================== */ .sidebar-menu-wrapper { display: block; } .white_sidebar { top: 0; width: 440px; right: -440px; height: 100vh; z-index: 9999; position: fixed; padding: 50px 20px; overflow-y: scroll; background-color: #ffffff; transition: 0.6s ease-in-out; } .white_sidebar .mCustomScrollBox { overflow: visible !important; } .white_sidebar.active { right: 0px; } .white_sidebar .close_btn { top: 15px; right: 20px; line-height: 1; font-size: 24px; position: absolute; } .white_sidebar .close_btn:hover { color: red; } .white_sidebar .heading_title { line-height: 1; font-size: 22px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #f6f6f6; } .white_items_list { background: #f9f9f9; padding: 20px; } .white_sidebar .heading_title span { color: #d6453c; } .white_sidebar .total_price { display: flex; font-size: 16px; font-weight: 500; margin-top: 20px; padding: 10px 0px; margin-bottom: 15px; align-items: center; color: #1f212b; border-top: 1px solid #f6f6f6; border-bottom: 1px solid #f6f6f6; justify-content: space-between; } .white_sidebar .total_price span:last-child { color: #d6453c; } .white_item .item_image img { width: 130px; height: 120px; } .white_sidebar .btns_group li { width: 48%; padding: 5px; display: inline-block; } .white_sidebar .btn { display: block; font-size: 12px; padding: 17px 20px; } ul.btns_group.ul_li a { position: relative; z-index: 1; transition: 0.5s; background: #fff; box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15); } ul.btns_group a:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; transform: scale(0); transition: 0.5s; z-index: -1; border-radius: 4px; } ul.btns_group li:last-child a:hover { color: #fff; } ul.btns_group li:first-child a { background: #d6453c; color: #fff; } ul.btns_group li:first-child a:hover { color: #1f212b; } ul.btns_group li:first-child a:before { background: #fff; } ul.btns_group li:last-child a:before { background: #d6453c; } ul.btns_group li:first-child a:hover:before, ul.btns_group li:last-child a:hover:before { transform: scale(1); } .white_sidebar .btn.btn_border { padding: 15px 20px; } .white_sidebar::-webkit-scrollbar { width: 0px; } .white_sidebar_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.4s; -o-transition: all 0.4s ease-in 0.4s; transition: all 0.4s ease-in 0.4s; background: #d6453c; } .white_sidebar_overlay.active { opacity: 0.5; visibility: visible; -webkit-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; left: 0; } .white_item { display: flex; position: relative; align-items: center; padding-right: 25px; transition: 0.5s; } .white_item.remove { display: none; } .white_item:not(:last-child) { margin-bottom: 20px; } .white_item .item_image { display: block; overflow: hidden; border-radius: 3px; position: relative; margin-right: 20px; } .white_item .item_image img { width: 130px; height: 120px; } .white_item .item_title { font-weight: 500; margin-bottom: 10px; font-size: 16px; } .white_item .item_price { line-height: 1; display: block; font-weight: 600; color: #d6453c; } .white_item .remove_btn { top: 50%; right: 0px; color: red; width: 20px; height: 20px; font-size: 12px; line-height: 15px; text-align: center; position: absolute; border-radius: 100%; background-color: #ffffff; transform: translateY(-50%); box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15); border: none; } .white_item .remove_btn:hover { color: #ffffff; background-color: red; } .more-product-title h4 { margin: 20px 0; } .more-product-items { display: flex; align-items: center; gap: 20px; } .more-product-thumb { overflow: hidden; border-radius: 5px 5px 0 0; position: relative; } .more-product-thumb img { width: 100%; transition: 0.5s; } .more-product-item:hover .more-product-thumb img { transform: scale(1.1); } .more-product-icon { position: absolute; top: 0; right: 20px; transform: translateY(-50%); transition: 0.5s; opacity: 0; visibility: hidden; } .more-product-item:hover .more-product-icon { top: 50%; opacity: 1; visibility: visible; } .more-product-content { margin-top: 20px; } .more-product-content h6:last-child { font-size: 15px; color: #5a5a5a; margin-top: 10px; } .more-product-icon ul li a { width: 30px; height: 30px; text-align: center; line-height: 30px; background: #fff; color: #000; border-radius: 30px; transition: 0.5s; position: relative; z-index: 1; margin: 4px 0; } .more-product-icon ul li a:hover { color: #fff; } .more-product-icon ul li a:before { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background: #d6453c; transition: 0.5s; z-index: -1; border-radius: 30px; transform: scale(0); } .more-product-icon ul li a:hover:before { transform: scale(1); filter: hue-rotate(360deg); } /*===================================== <-- Cycling Skill Progress Bar Css --> =======================================*/ .skill { margin-bottom: 30px; position: relative; overflow-x: hidden; } .skill > p { font-size: 20px; line-height: 30px; color: #111111; font-weight: 700; margin: 0 0 10px; } .skill:before { width: 100%; height: 5px; content: ""; display: block; position: absolute; background: #eeeeee; bottom: 0; } .darkmode .skill:before { background: #7e7e7e; } .skill-bar { height: 5px; background: #d6453c; display: block; position: relative; } .skill-bar .skill-count1, .skill-bar .skill-count2 { position: absolute; top: -37px; font-size: 20px; line-height: 30px; color: #111111; font-weight: 600; } .skill-bar { position: relative; } /* SKILL 1 */ .skill1 { width: 90%; } .skill1 .skill-count1 { right: 0; } /* SKILL 2 */ .skill2 { width: 75%; } .skill2 .skill-count2 { right: 0; } /*===================================== <-- Cycling pop up Css --> =======================================*/ .confirm-box { background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 9999; display: flex; justify-content: center; align-items: center; } .message-box { background: #fff; text-align: center; font-family: "Rajdhani", sans-serif; font-size: 22px; line-height: 1.5; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); color: #1f212b; font-weight: 500; } .button-box { margin-top: 30px; } .yes-button, .no-button { padding: 8px 20px; font-size: 16px; margin: 0 20px; border: none; border-radius: 5px; cursor: pointer; color: #fff; transition: 0.5s; } .yes-button:hover, .no-button:hover { filter: hue-rotate(360deg); } .yes-button { background: #d6453c; } .no-button { background: #1f212b; } /*===================================== <-- Cycling Side Bar Css --> =======================================*/ /*nav button*/ .search-box-btn.search-box-outer { display: inline-block; } /* .nav-btn.navSidebar-button { float: left; padding-top: 10px; } */ .nav-btn.navSidebar-button a i { font-size: 40px; color: #f00; transition: 0.5s; cursor: pointer; display: none; } .xs-sidebar-group .xs-overlay { left: 100%; top: 0; position: fixed; z-index: 9999; 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; background: #151618; } .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: #fff; -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; cursor: url(../images/icon/cross.png), pointer; } .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: #0e264f; 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: #d6453c; } /*html css*/ .nav-logo { padding: 0 0 40px; } .nav-btn.navSidebar-button a { color: #d6453c; } .sidebar-info-contents .widget-search { padding: 0 0 15px; } .sidebar-info-contents .widget { display: block; } .sidebar-info-contents h3.widget-title { font-size: 25px; padding: 8px 0 20px; margin-bottom: 10px; border-bottom: 1px solid #e9e9e9; } .sidebar-info-contents h3.widget-title { font-size: 25px; padding: 15px 0 15px; } .widget form { position: relative; } .widget input { border-radius: 4px; padding-left: 20px; height: 56px; width: 100%; color: #303030; border: 1px solid #e9e9e9; } button.icon { border: 0; font-size: 18px; color: #fff; padding: 1px 15px; position: absolute; right: 0; top: 0; height: 56px; width: 60px; background: #d6453c; border-radius: 0 4px 4px 0; } .recent-gallery ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; padding-top: 16px; } ul.list-style-one li { display: block; color: #fff; margin: 8px 0; overflow: hidden; } ul.list-style-one li span { font-size: 16px; font-weight: 600; color: #062462; display: inline-block; width: 27px; height: 27px; line-height: 27px; text-align: center; transition: 0.5s; } ul.list-style-one li a { transition: 0.5s; color: #062462; } .widget-gallery-thumb img { width: 100%; border-radius: 5px; } /* Sidber Widget Tags CSS */ .sidebar-tag-item ul li { display: inline-block; list-style: none; } li.item1 { padding: 15px 0 0 !important; } .sidebar-tag-item a { background: #fff; padding: 6px 20px; display: inline-block; margin: 0px 6px 15px 0; border: 0; font-weight: 500; color: #d6453c; border: 2px solid #d6453c; transition: 0.5s; border-radius: 30px; position: relative; z-index: 1; } .sidebar-tag-item a:before { position: absolute; content: ""; left: 0; right: 0; top: 0; bottom: 0; background: #d6453c; color: #fff; border: 2px solid #fff; border-radius: 30px; z-index: -1; transform: scale(0); transition: 0.5s; } .sidebar-tag-item a:hover:before { transform: scale(1); } .sidebar-tag-item a:hover { color: #fff; } /* Social Icon */ .follow-company-icon a { width: 30px; height: 30px; text-align: center; line-height: 33px; background: #d6453c; border: 1px solid #d6453c; color: #fff; border-radius: 30px; transition: 0.5s; position: relative; z-index: 1; margin: 0 4px; } .follow-company-icon a:hover { color: #000; } .follow-company-icon a:before { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background: #fff; transition: 0.5s; z-index: -1; border-radius: 30px; transform: scale(0); } .follow-company-icon a:hover:before { transform: scale(1); filter: hue-rotate(360deg); } ul.list-style-one li a:hover span { background: #d6453c; border-radius: 30px; color: #fff; } ul.list-style-one li a:hover { color: #d6453c; } /* Slick Arrow Area / / ----------------------------------------------------------------------------------- */ span.slick-prev { width: 40px; height: 40px; border-radius: 2px; background-color: #1c1e21; display: inline-block; text-align: center; line-height: 40px; color: #fff; font-size: 25px; cursor: pointer; position: absolute; top: -7.6rem; right: 24px; } span.slick-prev i { transform: rotate(225deg); transition: 0.5s; padding-top: 5px; } span.slick-prev:hover i { transform: rotate(180deg); } span.slick-next { width: 40px; height: 40px; border-radius: 2px; background-color: #d6453c; display: inline-block; text-align: center; line-height: 40px; color: #fff; font-size: 25px; cursor: pointer; position: absolute; top: -4.3rem; right: 24px; } span.slick-next i { transform: rotate(-45deg); padding-top: 4px; transition: 0.5s; } span.slick-next:hover i { transform: rotate(0deg); } /* Slick Dots Area / / ----------------------------------------------------------------------------------- */ section.check-out-section .slick-dots { display: flex; align-items: center; text-align: center; gap: 14px; position: absolute; bottom: -7.5rem; left: 50%; transform: translateX(-50%); } section.check-out-section ul.slick-dots li { height: 8px; width: 8px; text-align: center; border-radius: 20px; line-height: 5px; font-size: 0; background: #000000; position: relative; cursor: pointer; } section.check-out-section ul.slick-dots li.slick-active:before { position: absolute; content: ""; top: -4px; left: -4px; width: 16px; height: 16px; border-radius: 20px; border: 1px solid; } section.check-out-section ul.slick-dots li:nth-child(1) { background: #bc252a; } section.check-out-section ul.slick-dots li:nth-child(1):before { border-color: #07090f; } section.check-out-section ul.slick-dots li:nth-child(2) { background: #000; } section.check-out-section ul.slick-dots li:nth-child(2):before { border-color: #000; } section.check-out-section ul.slick-dots li:nth-child(3) { background: #922a2a; } section.check-out-section ul.slick-dots li:nth-child(3):before { border-color: #922a2a; } section.check-out-section ul.slick-dots li:nth-child(4) { background: #728477; } section.check-out-section ul.slick-dots li:nth-child(4):before { border-color: #728477; } /* banner dots */ section.banner-slider .slick-dots { position: absolute; top: 50%; right: 50px; transform: translateY(-50%); display: flex; gap: 30px; flex-direction: column; } section.banner-slider ul.slick-dots li { font-size: 18px; line-height: 26px; color: #ffffff; font-weight: 600; font-family: "Rajdhani"; position: relative; cursor: pointer; } section.banner-slider ul.slick-dots li:before { position: absolute; content: "01"; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; } section.banner-slider ul.slick-dots li.slick-active:before { color: #d6453c; } section.banner-slider ul.slick-dots li:after { position: absolute; content: ""; top: 12px; left: -34px; width: 0; height: 1px; background-color: #d6453c; transition: 0.5s; } section.banner-slider ul.slick-dots li.slick-active:after { width: 25px; } section.banner-slider ul.slick-dots li:nth-child(2):before { content: "02"; } section.banner-slider ul.slick-dots li:nth-child(3):before { content: "03"; } section.banner-slider ul.slick-dots li button { display: none; } /* Testimonial dots */ section.testimonial-section .slick-dots { position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; } section.testimonial-section ul.slick-dots li { height: 12px; width: 12px; text-align: center; border: 1px solid #111111; border-radius: 20px; line-height: 5px; font-size: 0; position: relative; cursor: pointer; } section.testimonial-section ul.slick-dots li.slick-active { background: #d6453c; border: 1px solid #d6453c; } /* Quick View Area / / ----------------------------------------------------------------------------------- */ .quickview-product-image-slider { width: 100%; border: 1px solid #f2f2f2; } .single-product-meta { margin: 20px 0; padding: 0; list-style: none; } .item { display: flex; justify-content: space-between; align-items: center; } .single-product-badge-left span { position: absolute; left: 20px; top: 40px; z-index: 1; color: #fff; background: #d6453c; padding: 0 10px; border-radius: 4px; line-height: 24px; } .single-product-badge-right { position: absolute; right: 20px; top: 40px; z-index: 1; } .single-product-badge-right span { display: block; color: #fff; background: #d6453c; padding: 0 10px; border-radius: 4px; line-height: 24px; margin-bottom: 4px; text-align: center; } .image-slide img { width: 100%; height:400px; } .image-slide-btn img { width: 120px; border-radius: 5px; cursor: pointer; } .slick-active.slick-center .image-slide-btn img { border: 1px solid #d6453c; padding: 2px; } .quick-slider-btn { margin-top: 2rem; } /* Modal */ .quickview-product-modal .btn-close { position: absolute; z-index: 3; top: 0; right: 0; padding: 10px; -webkit-transform: translateX(40%) translateY(-40%); transform: translateX(40%) translateY(-40%); border-radius: 50%; background-color: #fff; -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15); } .quickview-product-modal .modal-body { padding: 30px; } /* Single Product Image */ .single-product-image { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px; } .single-product-image-item { position: relative; border: 1px solid #f2f2f2; } /* Single Product Content */ .single-product-title { font-size: 30px; font-weight: 500; margin-bottom: 15px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (max-width: 575px) { .single-product-title { font-size: 24px; } } .single-product-price { font-size: 24px; font-weight: 700; line-height: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20px; color: #d6453c; gap: 20px; } .single-product-price del { font-size: 18px; font-weight: 400; color: #1f212b; } .single-product-meta { margin: 20px 0; padding: 0; list-style: none; } .single-product-meta li { line-height: 1.4285; display: -webkit-box; gap: 10px; } .single-product-meta li + li { margin-top: 10px; } .single-product-meta li span.label { -webkit-box-flex: 1; -ms-flex: 1 0 80px; flex: 1 0 80px; max-width: 80px; } .single-product-meta li span.value { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 7px; } .single-product-meta li span.value.links a:not(:last-child)::after { content: ","; } .single-product-meta li span.value.social a { line-height: 1; display: -webkit-box; display: -ms-flexbox; display: flex; } .single-product-text { margin-bottom: 20px; } .single-product-variations { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; } .size-value ul li { display: inline-block; margin: 0 4px; } .size-value ul li button { height: 26px; width: 26px; background: #1f212b; text-align: center; line-height: 26px; color: #fff; border-radius: 2px; transition: 0.5s; cursor: pointer; font-size: 14px; } .size-value ul li button.active { background: #d6453c; } .color-value ul li { display: inline-block; margin: 0 4px; } .color-value ul li button { height: 32px; width: 32px; line-height: 32px; text-align: center; border-radius: 22px; transition: 0.5s; } .color-value ul li:nth-child(1) button { background: purple; } .color-value ul li:nth-child(2) button { background: blue; } .color-value ul li:nth-child(3) button { background: chocolate; } .color-value ul li:nth-child(4) button { background: red; } .color-value ul li:nth-child(5) button { background: palevioletred; } .color-value ul li button i { color: #fff; font-size: 20px; opacity: 0; visibility: hidden; transition: 0.5s; } .color-value ul li button.active i { opacity: 1; visibility: visible; } .metarial-value ul li { display: inline-block; } .metarial-value ul li button { transition: 0.5s; color: #1f212b; } .metarial-value ul li button.active { color: #d6453c; } .single-product-additional-information { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 30px; gap: 30px; } .single-product-additional-information .single-product-info-btn { line-height: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 5px 0; border: none; background-color: transparent; gap: 8px; } .single-product-additional-information .single-product-info-btn:hover { color: #d6453c; } .single-product-actions { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 30px; gap: 10px; align-items: center; } .single-product-actions-item { display: -webkit-box; display: -ms-flexbox; display: flex; } .single-product-buy-now { margin-bottom: 30px; } .single-product-buy-now .btn { width: 100%; max-width: 340px; } .single-product-safe-payment p { margin-bottom: 5px; color: #616161; } .single-product-safe-payment li { display: inline-block; margin-right: 8px; height: 30px; width: 38px; background: #1f212b; font-size: 28px; text-align: center; line-height: 30px; border-radius: 4px; color: #fff; } /* Product Variation Size */ .single-product-variation-size-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 7px; } .single-product-variation-size-item { position: relative; } .single-product-variation-size-item input:checked ~ label { color: #fff; background-color: #d6453c; } .single-product-variation-size-item label { line-height: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 24px; height: 24px; cursor: pointer; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; text-transform: uppercase; background-color: #888a8d; } /* Product Variation Color */ .single-product-variation-color-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; } .single-product-variation-color-item { position: relative; } .single-product-variation-color-item input:checked ~ label { position: relative; } .single-product-variation-color-item input:checked ~ label { position: absolute; content: "\F272"; top: 50%; left: 0; text-align: center; transform: translateX(-50%); font-weight: 900; transform: translate3d(); } .single-product-variation-color-item label { line-height: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 30px; height: 30px; cursor: pointer; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; text-indent: -99999px; text-transform: uppercase; border-radius: 50%; background-color: #eff1f4; background-repeat: no-repeat; background-position: center center; background-size: 16px; } /* Product Variation Material */ .single-product-variation-material-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 15px; } .single-product-variation-material-item { position: relative; } .single-product-variation-material-item input:checked ~ label { color: #1f2226; } .single-product-variation-material-item label { font-weight: 700; line-height: 1; display: -webkit-box; display: -ms-flexbox; display: flex; cursor: pointer; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; text-transform: capitalize; color: rgba(51, 51, 51, 0.65); } /* Single Product Description Area */ .single-product-description-area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 80px; padding: 30px; border: 1px solid #e5e5e5; } @media only screen and (max-width: 767px) { .single-product-description-area { margin-top: 60px; } } @media only screen and (max-width: 575px) { .single-product-description-area { padding: 20px; } } .single-product-description-area-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 30px; gap: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .single-product-description-area-nav { gap: 25px; } } @media only screen and (max-width: 767px) { .single-product-description-area-nav { gap: 20px; } } @media only screen and (max-width: 575px) { .single-product-description-area-nav { gap: 15px; } } .single-product-description-area-nav button { font-size: 18px; font-weight: 500; line-height: 1; position: relative; padding: 0; padding-bottom: 10px; border: none; background-color: transparent; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (max-width: 767px) { .single-product-description-area-nav button { font-size: 16px; } } @media only screen and (max-width: 575px) { .single-product-description-area-nav button { padding-bottom: 5px; } } .single-product-description-area-nav button::before { position: absolute; right: 0; bottom: 0; width: 0; height: 2px; content: ""; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; background-color: #d6453c; } .single-product-description-area-nav button.active::before, .single-product-description-area-nav button:hover::before { right: auto; left: 0; width: 100%; } .single-product-description-area .block-title-2 { padding-bottom: 0; border-bottom: none; } /* Product Quantity */ .product-quantity-count { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin: 0; border: 1px solid #e5e5e5; } .product-quantity-count input { margin: 0; } .product-quantity-count .product-quantity-box { line-height: 1; width: 30px; text-align: center; border: none; background-color: transparent; } .product-quantity-count input:focus { border: 0 !important; outline: 0 !important; } .product-quantity-count .qty-btn { font-size: 20px; line-height: 1; width: 30px; padding: 10px; text-align: center; border: none; background-color: transparent; } .product-quantity-count .qty-btn:hover { color: #d6453c; } span.value.links a { color: #303030; } button.reaction-btn, .reset-btn { border-radius: 3px; display: inline-block; width: 54px; height: 54px; background: #f9fafb; position: relative; z-index: 1; overflow: hidden; transition: 0.5s; } button.reaction-btn::before, button.reset-btn::before { position: absolute; content: ""; z-index: -1; right: 0; top: 0; width: 0; height: 100%; background: #d6453c; transition: 0.5s; } button.reaction-btn:hover::before, button.reset-btn:hover::before { left: 0; width: 100%; } button.reaction-btn:hover, button.reset-btn:hover { color: #fff; } .product-action-btn { line-height: 1; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0; border: none; background-color: transparent; } .product-action-btn[data-tooltip-text]::before { font-size: 16px; line-height: 1; position: absolute; z-index: 3; top: 0; left: 50%; visibility: hidden; padding: 5px 10px; content: attr(data-tooltip-text); cursor: default; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; -webkit-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; opacity: 0; color: #fffefe; border-radius: 5px; background-color: #d6453c; } .product-action-btn:hover[data-tooltip-text]::before { top: -40px; visibility: visible; opacity: 1; } @media only screen and (max-width: 767px) { .product-action-btn i { font-size: 16px; } } @media only screen and (max-width: 575px) { .product-action-btn i { font-size: 20px; } } /*=========================== <-- Cycling Sent Btn Css --> =============================*/ .app button { cursor: pointer; position: relative; width: 240px; background: linear-gradient(90deg, #f15402 0%, #fb8f52 100%); padding: 13px 25px; text-align: center; border-radius: 40px; transition: 0.3s ease background, 0.3s ease box-shadow; padding-left: 10px; } .message { font-size: 18px; color: #fff; line-height: 1; text-align: center; border-radius: 40px; transition: 0.3s ease background, 0.3s ease box-shadow; padding-left: 10px; } .send_btn { position: absolute; top: 0; right: 20px; font-size: 20px; line-height: 1; color: #fff; padding: 18px 12px; cursor: pointer; transition: 0.3s ease transform; } .send_btn.sending { transform: rotateZ(-0deg); animation: shake 0.3s ease 0.5s infinite; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0) rotateZ(-0deg); } 20%, 80% { transform: translate3d(1px, 0, 0) rotateZ(-0deg); } 30%, 50%, 70% { transform: translate3d(-1px, 0, 0) rotateZ(-0deg); } 40%, 60% { transform: translate3d(1px, 0, 0) rotateZ(-0deg); } } #message.sent { background-color: #02c0bc; box-shadow: 0 20px 30px -6px #02c0bc; } .send_btn.sent { transform: rotateZ(-45deg); animation: moveUp 1s ease 0s forwards; } @keyframes moveUp { 0% { margin-top: 0; margin-right: 0; transform: scale(1) rotateZ(-0deg); } 100% { color: #ff1f5a; margin-right: -100px; margin-top: -100px; transform: scale(0) rotateZ(-0deg); } } /*=========================== <-- Cycling Loader Css --> =============================*/ /* PRELOADER CSS */ .loading-screen { -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: default; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #fff; z-index: 1009; } .loading-screen .bar { position: absolute; height: 100%; width: 50%; background-color: #d6453c; } .loading-screen .top-bar { top: 0; left: 0; right: auto; bottom: auto; } .loading-screen .down-bar { bottom: 0; top: auto; right: 0; left: auto; } .loading-screen .animation-preloader { z-index: 1000; position: relative; } .loading-screen .animation-preloader .spinner { -webkit-animation: spinner 1s infinite linear; animation: spinner 1s infinite linear; border-radius: 50%; border: 4px dotted #111; border-top: #1f212b; width: 150px; height: 150px; margin: 0 auto 3.5em auto; mix-blend-mode: difference; } .loading-screen .animation-preloader .txt-loading { font: bold 5em "Rajdhani", sans-serif; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .loading-screen .animation-preloader .txt-loading .letters-loading { color: #fff; position: relative; } .loading-screen .animation-preloader .txt-loading .letters-loading:before { -webkit-animation: letters-loading 4s infinite; animation: letters-loading 4s infinite; color: #111111; content: attr(data-text-preloader); left: 0; opacity: 0; font-family: "Rajdhani", sans-serif; position: absolute; top: -3px; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } .loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(2):before { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(3):before { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(4):before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(5):before { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(6):before { -webkit-animation-delay: 1s; animation-delay: 1s; } .loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(7):before { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(8):before { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } .loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(9):before { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; } @-webkit-keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } .loading img { width: 135px; position: absolute; border-radius: 80px; top: 46%; left: 50%; transform: translate(-50%, -99%); } @-webkit-keyframes letters-loading { 0%, 75%, 100% { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } 25%, 50% { opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes letters-loading { 0%, 75%, 100% { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } 25%, 50% { opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @media screen and (max-width: 767px) { .loading-screen .animation-preloader .spinner { height: 8em; width: 8em; } .loading-screen .animation-preloader .txt-loading { font: bold 3.5em "Rajdhani", sans-serif; } } @media screen and (max-width: 500px) { .loading-screen .animation-preloader .spinner { height: 7em; width: 7em; } .loading-screen .animation-preloader .txt-loading { font: bold 2em "Rajdhani", sans-serif; } } .loader { position: absolute; top: 0; left: 50%; transform: translate(-50%, 75px); } .load { position: relative; } .load:before, .load:after { content: ""; position: absolute; top: 50%; left: 50%; display: block; width: 0.5em; height: 0.5em; border-radius: 0.25em; transform: translate(-50%, -50%); } .load:before { animation: before 2s infinite; } .load:after { animation: after 2s infinite; } @keyframes before { 0% { width: 0.5em; box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75); } 35% { width: 2.5em; box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75); } 70% { width: 0.5em; box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75); } 100% { box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75); } } @keyframes after { 0% { height: 0.5em; box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75); } 35% { height: 2.5em; box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75); } 70% { height: 0.5em; box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75); } 100% { box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75); } } /* */ /*------back-to-top------------*/ .prgoress_indicator { position: fixed; right: 50px; bottom: 20px; height: 46px; width: 46px; cursor: pointer; display: block; border-radius: 50px; box-shadow: inset 0 0 0 2px rgba(24, 24, 24, 0.2); z-index: 10000; opacity: 0; visibility: hidden; transform: translateY(15px) !important; transition: all 200ms linear !important; } .prgoress_indicator.active-progress { opacity: 1; visibility: visible; transform: translateY(0) !important; background: transparent; } .prgoress_indicator::after { position: absolute; content: "\f106"; font-family: "Font Awesome 5 Free"; text-align: center; line-height: 46px; font-size: 18px; color: #d6453c; 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: "\f106"; 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; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; z-index: 2; transition: all 200ms linear !important; } .prgoress_indicator:hover ::after { color: #2871ff; } .prgoress_indicator:hover ::before { opacity: 1; } .prgoress_indicator svg path { fill: none; } .prgoress_indicator svg.progress-circle path { stroke: #d6453c; stroke-width: 4; box-sizing: border-box; transition: all 200ms linear !important; } /* curser Animation */ .curser { position: fixed; top: 0; left: 0; width: 30px; height: 30px; background: #ffffff; border-radius: 50%; mix-blend-mode: difference; pointer-events: none; transform: translate(-50%, -50%); z-index: 999; transition: 0.2s; } .curser2 { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background: #ffffff; border-radius: 50%; mix-blend-mode: difference; pointer-events: none; transform: translate(-50%, -0%); z-index: 9999; transition: 0.1s; } /* curser Animation */ /* */ @keyframes loader { 0% { transform: scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } } @keyframes zoomIn { from { -webkit-transform: scale(0.7) translateY(100px); transform: scale(0.7) translateY(100px); opacity: 0; } to { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); opacity: 1; } } @keyframes ZoomIn { from { -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes FadeInUp { from { -webkit-transform: translateY(10%); transform: translateY(10%); opacity: 0; } to { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } @keyframes rotate { 0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); } 100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); } } @keyframes rotate2 { 0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); } 100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); } } @keyframes rotate3 { 0% { transform: rotateX(-150deg) rotateY(-235deg) rotateZ(0deg); -webkit-transform: rotateX(-150deg) rotateY(-235deg) rotateZ(0deg); } 100% { transform: rotateX(-150deg) rotateY(-235deg) rotateZ(360deg); -webkit-transform: rotateX(-150deg) rotateY(-235deg) rotateZ(360deg); } } @keyframes rotate4 { 0% { transform: rotateX(220deg) rotateY(20deg) rotateZ(0deg); -webkit-transform: rotateX(220deg) rotateY(20deg) rotateZ(0deg); } 100% { transform: rotateX(220deg) rotateY(20deg) rotateZ(360deg); -webkit-transform: rotateX(220deg) rotateY(20deg) rotateZ(360deg); } } @keyframes ripple { 0%, 35% { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); opacity: 1; } 50% { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); opacity: 0.8; } 100% { opacity: 0; -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } } @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); } } @-webkit-keyframes play-btn { 0% { -webkit-box-shadow: 0 0 0 0 rgba(254, 254, 254, 0.3), 0 0 0 10px rgba(254, 254, 254, 0.3), 0 0 0 20px rgba(254, 254, 254, 0.3); box-shadow: 0 0 0 0 rgba(254, 254, 254, 0.3), 0 0 0 10px rgba(254, 254, 254, 0.3), 0 0 0 20px rgba(254, 254, 254, 0.3); } 100% { -webkit-box-shadow: 0 0 0 10px rgba(254, 254, 254, 0.3), 0 0 0 20px rgba(254, 254, 254, 0.3), 0 0 0 30px rgba(254, 254, 254, 0); box-shadow: 0 0 0 10px rgba(254, 254, 254, 0.3), 0 0 0 20px rgba(254, 254, 254, 0.3), 0 0 0 30px rgba(254, 254, 254, 0); } } @keyframes play-btn { 0% { -webkit-box-shadow: 0 0 0 0 rgba(254, 254, 254, 0.3), 0 0 0 10px rgba(254, 254, 254, 0.3), 0 0 0 20px rgba(254, 254, 254, 0.3); box-shadow: 0 0 0 0 rgba(254, 254, 254, 0.3), 0 0 0 10px rgba(254, 254, 254, 0.3), 0 0 0 20px rgba(254, 254, 254, 0.3); } 100% { -webkit-box-shadow: 0 0 0 10px rgba(254, 254, 254, 0.3), 0 0 0 20px rgba(254, 254, 254, 0.3), 0 0 0 30px rgba(254, 254, 254, 0); box-shadow: 0 0 0 10px rgba(254, 254, 254, 0.3), 0 0 0 20px rgba(254, 254, 254, 0.3), 0 0 0 30px rgba(254, 254, 254, 0); } } @-webkit-keyframes shine { 100% { left: 100%; } } @keyframes shine { 100% { left: 100%; } } .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); } } @keyframes Dance { 0% { -webkit-transform: translateY(0px); } 50% { -webkit-transform: translateY(25px); } 100% { -webkit-transform: translateY(0px); } } .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); } } @keyframes dance5 { 0% { -webkit-transform: translate(0px); } 50% { -webkit-transform: translate(-35px, -25px); } 100% { -webkit-transform: translate(0px); } } @keyframes dance6 { 0% { -webkit-transform: translateX(0px); } 100% { -webkit-transform: translateX(50px); } } @keyframes dance7 { 0% { -webkit-transform: translateX(0px); } 100% { -webkit-transform: translateX(88px); } } @keyframes dance8 { 0% { -webkit-transform: translateX(0px); } 100% { -webkit-transform: translateX(-60px); } } @keyframes Rotateme { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotateme { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes Ripple { 0% { transform: scale(1); -webkit-transform: scale(1); } 50% { transform: scale(3); -webkit-transform: scale(3); } 100% { transform: scale(1); -webkit-transform: scale(1); } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes lqt { 0%, 100% { background-image: linear-gradient(#ff3d00 40px, transparent 0); background-position: 0% 0px; } 50% { background-image: linear-gradient(#ff3d00 40px, transparent 0); background-position: 0% 40px; } 50.1% { background-image: linear-gradient(#ff3d00 40px, transparent 0); background-position: 0% -40px; } } @keyframes lqb { 0% { background-image: linear-gradient(#ff3d00 40px, transparent 0); background-position: 0 40px; } 100% { background-image: linear-gradient(#ff3d00 40px, transparent 0); background-position: 0 -40px; } } @keyframes spinx { 0%, 49% { transform: rotate(0deg); background-position: 50% 36px; } 51%, 98% { transform: rotate(180deg); background-position: 50% 4px; } 100% { transform: rotate(360deg); background-position: 50% 36px; } } /* custom css */ section.fecilities-section { padding: 75px 0 57px; } .footer-logo img { /*filter: brightness(0) invert(1);*/ width:236px; } .txt { text-align:right; } nav.header-menu > ul > li:last-child a:hover { background:#fff; filter: hue-rotate(0deg); font-size: 16px; font-weight: 500; } nav.header-menu > ul > li:last-child i:hover { color:#d6453c; background: #fff; font-size: 20px; transform: rotate(0deg); }