/* Prinox Printing Business HTML Template */ /* font-family: 'Outfit', sans-serif; font-family: 'Inter', sans-serif; font-family: 'Teko', sans-serif; font-family: 'Quicksand', sans-serif; font-family: 'Poppins', sans-serif; font-family: 'Roboto', sans-serif; */ @import url("global.css"); @import url("header.css"); @import url("footer.css"); @import url("icofont.css"); @import url("font-awesome.css"); @import url("flaticon.css"); @import url("animate.css"); @import url("owl.css"); @import url("swiper.css"); @import url("linearicons.css"); @import url("jquery-ui.css"); @import url("custom-animate.css"); @import url("magnific-popup.css"); @import url("jquery.bootstrap-touchspin.css"); @import url("odometer-theme-default.css"); @import url("jquery.mCustomScrollbar.min.css"); /*** ==================================================================== Font-Family ==================================================================== ***/ /* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700;800;900&display=swap'); */ @font-face { font-family: Inter; src: url(/fonts/inter/Inter-VariableFont.ttf); font-display: swap; } @font-face { font-family: Quicksand; src: url(/fonts/quicksand/Quicksand-VariableFont.ttf); font-display: swap; } @font-face { font-family: Outfit; src: url(/fonts/outfit/Outfit-VariableFont.ttf); font-display: swap; } @font-face { font-family: Montaga; src: url(/fonts/montaga/Montaga-Regular.ttf); font-display: swap; } @font-face { font-family: Teko; src: url(/fonts/teko/Teko-Regular.ttf); font-display: swap; } /*** ==================================================================== Main Slider Section ==================================================================== ***/ .main-slider { position: relative; overflow: hidden; max-height: 400px; } .main-slider .slide { position: relative; overflow: hidden; /* padding: 120px 0px 160px; */ height: 400px; background-size: cover; } .main-slider .image-layer img { position: absolute; object-fit: scale-down; } .main-slider .image-column .float-first-img img { width: auto; margin: auto; } .main-slider .image-layer { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background-size: cover; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); background-position: right center; -webkit-transition: all 6000ms linear; -moz-transition: all 6000ms linear; -ms-transition: all 6000ms linear; -o-transition: all 6000ms linear; transition: all 6000ms linear; } .main-slider .content-column { position: relative; z-index: 2; } .main-slider .content-column .inner-column { position: relative; padding-top: var(--padding-top-60); } .main-slider .vector-layer { position: absolute; right: 60px; top: 0px; width: 472px; height: 416px; opacity: 0; transform: scale(0.3, 0.03); background-repeat: no-repeat; -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; } .main-slider .active .vector-layer { opacity: 1; transform: scale(1, 1); -webkit-transition-delay: 1600ms; -moz-transition-delay: 1600ms; -ms-transition-delay: 1600ms; -o-transition-delay: 1600ms; transition-delay: 1600ms; } .main-slider .title { position: relative; opacity: 0; z-index: 1; font-weight: 500; padding: 6px 18px; font-size: var(--font-14); text-transform: capitalize; color: var(--white-color); transform-origin: top; display: inline-block; transform: translateX(200px); -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; margin-bottom: var(--margin-bottom-25); font-family: var(--font-family-Outfit); } .main-slider .title:before { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: -1; transform: skewX(-10deg); background-color: var(--color-five); } .main-slider .active .title { opacity: 1; transform: translateX(0px); -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -ms-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; } .main-slider h1 { opacity: 0; color: var(--white-color); transform-origin: top; transform: translateX(200px); -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; margin-bottom: 15px; font-size: 37px; line-height: 50px; } .main-slider .active h1 { opacity: 1; transform: translateX(0px); -webkit-transition-delay: 800ms; -moz-transition-delay: 800ms; -ms-transition-delay: 800ms; -o-transition-delay: 800ms; transition-delay: 800ms; } .main-slider .text { opacity: 0; color: var(--white-color); transform-origin: top; transform: translateX(200px); -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; margin-bottom: var(--margin-bottom-30); } .main-slider .active .text { opacity: 1; transform: translateX(0px); -webkit-transition-delay: 1200ms; -moz-transition-delay: 1200ms; -ms-transition-delay: 1200ms; -o-transition-delay: 1200ms; transition-delay: 1200ms; } .main-slider .options-box { opacity: 0; transform: translateX(200px); transform-origin: top; display: inline-block; -webkit-transition: all 900ms ease; -moz-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; transition: all 900ms ease; } .main-slider .active .options-box { opacity: 1; transform: translateX(0px); -webkit-transition-delay: 1600ms; -moz-transition-delay: 1600ms; -ms-transition-delay: 1600ms; -o-transition-delay: 1600ms; transition-delay: 1600ms; } .main-slider .button-box .theme-btn { display: block; margin-right: var(--margin-right-25); } .main-slider .image { position: relative; z-index: 2; -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; } .main-slider .vector-icon { position: absolute; left: 48%; top: 18%; width: 20px; height: 22px; background-repeat: no-repeat; } .main-slider .vector-icon-two { position: absolute; left: 44%; top: 72%; width: 20px; height: 22px; background-repeat: no-repeat; } /* Play Box */ .main-slider .play-box { position: relative; width: 60px; height: 60px; line-height: 58px; text-align: center; border-radius: 50px; display: inline-block; font-size: var(--font-20); color: var(--white-color); border: 1px solid var(--white-color); } .main-slider .play-box .ripple, .main-slider .play-box .ripple:before, .main-slider .play-box .ripple:after { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; border-radius: 50px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); -ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); -o-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .main-slider .play-box .ripple:before { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; } .main-slider .play-box .ripple:after { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; } .main-slider .play-box:hover { color: var(--white-color); border-color: var(--color-seven); background-color: var(--color-seven); } @-webkit-keyframes ripple { 70% { box-shadow: 0 0 0 70px rgba(253, 167, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(253, 167, 0, 0); } } @keyframes ripple { 70% { box-shadow: 0 0 0 70px rgba(253, 167, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(253, 167, 0, 0); } } .main-slider .owl-dots, .main-slider .owl-nav { display: none; } /* Social Box */ .main-slider .social-box { position: absolute; left: 35px; bottom: 80px; z-index: 10; width: 30px; writing-mode: vertical-rl; transform: rotate(180deg); } .main-slider .social-box li { position: relative; display: inline-block; margin-top: var(--margin-top-40); } .main-slider .social-box li a { position: relative; font-weight: 500; letter-spacing: 1px; font-size: var(--font-17); color: var(--black-color); font-family: var(--font-family-Outfit); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .main-slider .social-box li a:hover { color: var(--main-color); text-decoration: underline; } /* Email Box */ .main-slider .email-box { position: absolute; left: 35px; top: 0px; z-index: 10; writing-mode: vertical-rl; transform: rotate(180deg); } .main-slider .email-box a { position: relative; font-weight: 500; letter-spacing: 1px; font-size: var(--font-17); color: var(--black-color); font-family: var(--font-family-Outfit); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .main-slider .email-box a:hover { color: var(--main-color); } /* Scroll Box */ .main-slider .counter-boxed { position: absolute; left: 0px; bottom: 0px; width: 100%; z-index: 10; max-width: 550px; padding: 20px 20px; background-color: var(--white-color); } .main-slider .counter-boxed .counter { position: relative; font-weight: 500; font-size: var(--font-24); color: var(--color-seven); /* background: linear-gradient(to right, var(--color-seven) 0%, var(--color-eight) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; */ } .main-slider .counter-boxed .counter-text { position: relative; color: var(--color-nine); font-size: var(--font-16); margin-top: var(--margin-top-10); font-family: var(--font-family-Inter); } .main-slider .counter-boxed .odometer.odometer-auto-theme { top: -3px; margin-right: 2px; } /*** ==================================================================== Services Section ==================================================================== /* ###################################(Search PopUp Start)############################## */ #search-popup { opacity: 0; visibility: hidden; transition: all 0.2s ease-out; } #search-popup.active { opacity: 1; visibility: visible; } #search-popup .search-popup-wrapper { position: fixed; left: 0; top: 0; height: 100vh; width: 100%; z-index: 999; -webkit-transition: all 1000ms cubic-bezier(0.86, 0, 0.07, 1); -moz-transition: all 1000ms cubic-bezier(0.86, 0, 0.07, 1); -o-transition: all 1000ms cubic-bezier(0.86, 0, 0.07, 1); transition: all 1000ms 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); margin-top: -540px; transform: translateY(-100%); } #search-popup.active .search-popup-wrapper { transform: translateY(0%); margin-top: var(--margin-zero); opacity: 1; visibility: visible; } #search-popup .search-popup-wrapper::after { position: absolute; left: 0; top: 100%; width: 100%; height: 560px; background-image: url(../images/shapes/waves-shape.webp); background-repeat: no-repeat; background-position: center; background-size: cover; margin-top: 0px; content: ""; z-index: 9991; } #search-popup .color-layer { position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.9); } #search-popup .close-search-popup { 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, var(--color-seven) 0%, var(--color-eight) 100% ); width: 70px; height: 70px; cursor: pointer; border-bottom: 3px solid var(--white-color); -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; } #search-popup.active .close-search-popup { 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 .close-search-popup span { position: relative; display: block; height: 70px; width: 70px; font-size: var(--font-30); line-height: 70px; color: var(--white-color); } #search-popup form { position: absolute; max-width: 700px; top: 50%; left: 15px; right: 15px; z-index: 999; margin: -35px auto 0; transform: scaleX(0); transform-origin: center; background-color: var(--dark-color); -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-popup.active form { transform: scaleX(1); -webkit-transition-delay: 1000ms; -moz-transition-delay: 1000ms; -ms-transition-delay: 1000ms; -o-transition-delay: 1000ms; transition-delay: 1000ms; } #search-popup .form-group { position: relative; margin: var(--margin-zero); overflow: hidden; } #search-popup .form-group input[type="text"], #search-popup .form-group input[type="search"] { position: relative; display: block; font-size: var(--font-18); line-height: 50px; color: var(--black-color); height: 70px; width: 100%; padding: 10px 30px; background-color: var(--white-color); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; font-weight: 500; text-transform: capitalize; } #search-popup .form-group input[type="submit"], #search-popup .form-group button { position: absolute; right: 30px; top: 0px; height: 70px; line-height: 70px; background: transparent; text-align: center; font-size: var(--font-24); color: var(--black-color); 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; } #search-popup .form-group button i { color: #343535; } /* ###################################(Search PopUp End)############################## */ /*** ==================================================================== Business Section ==================================================================== ***/ .business-section { position: relative; padding: 40px 0px 50px; } .business-section .sec-title { margin-bottom: 20px; } .business-section .small-circle-layer { position: absolute; left: 12%; bottom: 5%; width: 10px; height: 10px; opacity: 0.5; border-radius: 50%; background-color: var(--color-seven); } .business-section .vector-layer-one { position: absolute; left: 15px; bottom: 5%; width: 107px; height: 107px; background-repeat: no-repeat; } .business-section .vector-layer-two { position: absolute; left: 5%; top: 6%; width: 22px; height: 20px; background-repeat: no-repeat; } .business-section .vector-layer-three { position: absolute; right: 0px; bottom: 0px; width: 512px; height: 594px; background-repeat: no-repeat; } .business-section .print-icon { position: absolute; right: 60px; bottom: -120px; width: 100px; height: 100px; line-height: 98px; border-radius: 50%; text-align: center; display: inline-block; background-color: var(--white-color); border: 1px solid rgba(var(--black-color-rgb), 0.06); box-shadow: 0px 10px 25px rgba(var(--black-color-rgb), 0.07); } .business-section .print-icon img { width: 60px; } .business-section .images-column { position: relative; margin-bottom: var(--margin-bottom-30); } .business-section .images-column .inner-column { position: relative; padding-top: var(--padding-top-60); } .business-section .image { position: relative; display: inline-block !important; } .business-section .image-two { position: absolute !important; left: auto !important; right: 15px !important; top: 0px !important; } .business-section .image-three { position: absolute !important; left: 50% !important; top: 180px !important; transform: translateX(-50%) !important; /* box-shadow: 0px 10px 60px rgba(var(--main-color-rgb), 0.12); */ /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */ } .business-section .images-outer { position: relative; } /* .business-section .images-outer>div { background-color: var(--color-fourteen); } */ .business-section .circle-layer { position: absolute; left: -60px; top: 0px; width: 538px; height: 554px; background-repeat: no-repeat; } .business-section .content-column { position: relative; margin-bottom: var(--margin-bottom-30); } .business-section .content-column .inner-column { position: relative; padding-top: var(--padding-top-80); padding-left: var(--padding-left-120); } .feature-block { position: relative; } .feature-block .inner-box { position: relative; padding-left: var(--padding-left-60); } .feature-block .icon { position: absolute; left: 0px; top: 4px; width: 39px; height: 38px; line-height: 38px; text-align: center; display: inline-block; font-family: "Flaticon"; font-size: var(--font-18); color: var(--white-color); border-radius: 5px 15px 5px 5px; background: linear-gradient( to left, var(--color-seven) 0%, var(--color-eight) 100% ); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .feature-block h6 a { color: var(--color-ten); } .feature-block .feature-text { position: relative; line-height: 26px; color: var(--color-two); font-size: var(--font-13); margin-top: var(--margin-top-5); font-family: var(--font-family-Inter); } .feature-block:nth-child(2) .icon { background: linear-gradient( to left, var(--color-seven) 0%, var(--main-color) 100% ); } .business-section .options-list { position: relative; } .business-section .options-list li { position: relative; color: var(--color-twelve); font-size: var(--font-15); padding-left: var(--padding-left-30); margin-bottom: var(--margin-bottom-15); } .business-section .options-list li:before { position: absolute; content: "\f1a3"; left: 0px; font-weight: 800; color: var(--main-color); font-family: "Flaticon"; } .business-section .author-info { position: relative; color: var(--color-twelve); font-size: var(--font-13); margin-top: var(--margin-top-30); padding-top: var(--padding-top-20); border-top: 1px solid rgba(var(--black-color-rgb), 0.06); } .business-section .author-info span { position: relative; font-size: var(--font-16); padding-right: var(--padding-right-35); } .business-section .author-info span:before { position: absolute; content: ""; left: 0px; right: 0px; bottom: 0px; height: 2px; z-index: -1; background: url(../images/icons/vector-4.png) no-repeat; } .business-section .author-info span:after { position: absolute; content: ""; right: 7px; top: 11px; width: 20px; height: 1px; opacity: 0.1; background-color: var(--black-color); } /*** ==================================================================== Project Section ==================================================================== ***/ .project-section { position: relative; padding: 70px 0px 20px; } .project-section .circle-layer { position: absolute; right: 5%; bottom: 11%; width: 12px; height: 12px; border-radius: 50%; background-color: var(--color-thirteen); } .project-section .vector-icon { position: absolute; left: 5%; bottom: 5%; width: 19px; height: 18px; background-repeat: no-repeat; } .project-section .owl-dots, .project-section .owl-nav { display: none; } .project-section .outer-container { position: relative; padding-left: 40px; padding-right: 40px; } .project-block { position: relative; margin-bottom: var(--margin-bottom-30); } .project-block .inner-box { position: relative; border-radius: 7px; overflow: hidden; } .project-block .inner-box:hover .color-layer { opacity: 1; transform: scale(1, 1); } .project-block .image { position: relative; overflow: hidden; background-color: var(--color-fourteen); /* border: 1px solid #EAEBED; */ /* box-shadow: 0px 14px 22px -9px #bbcbd8; */ } .project-block .image .color-layer { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; opacity: 0; transform: scale(0.3, 1); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; background: var(--color-seven); background: linear-gradient( to right, var(--color-seven) 0%, var(--color-eight) 100% ); } .project-block .image img { position: relative; width: 100%; display: block; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .project-block .inner-box:hover .image img { transform: scale(1.05, 1.05) rotate(2deg); } .project-block .post-number { position: absolute; right: 15px; top: 15px; width: 55px; height: 55px; z-index: 1; font-weight: 500; line-height: 55px; text-align: center; font-size: var(--font-18); } .project-block .post-number:before { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: -1; border-radius: 50px 0px 50px 50px; background-color: var(--white-color); } .project-block .content { position: absolute; left: 20px; bottom: 20px; right: 50px; opacity: 0; padding: 20px 25px; border-radius: 4px; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; background-color: var(--white-color); transform: scale(1, 0.3); } .project-block .inner-box:hover .content { opacity: 1; transform: scale(1, 1); } .project-block h6 { z-index: 1; } .project-block h6 a { color: var(--color-ten); } .project-block h6:before { position: absolute; content: ""; left: 0px; right: 0px; bottom: 4px; height: 5px; z-index: -1; opacity: 0; background: url(../images/icons/vector-6.png) no-repeat; } .project-block h6:hover::before { opacity: 1; } .project-block .arrow { position: absolute; right: 12px; top: 13px; width: 45px; height: 45px; line-height: 44px; text-align: center; font-size: var(--font-20); font-family: "Flaticon"; color: var(--color-ten); border-radius: 50px 0px 50px 50px; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .project-block .inner-box:hover .arrow { color: var(--white-color); background: linear-gradient( to left, var(--color-seven) 0%, var(--color-eight) 100% ); } .project-block.style-two .content { right: 20px; } .project-section .lower-box { position: relative; max-width: 1400px; margin: 0 auto; padding: 38px 70px; border-radius: 100px; margin-left: 15px; margin-right: 15px; margin: 15px auto; margin-top: var(--margin-top-30); border: 1px solid rgba(var(--black-color-rgb), 0.1); } .project-section .lower-box .info-box { position: relative; } .project-section .lower-box .info-box:before { position: absolute; content: ""; left: 115%; top: 30px; height: 2px; width: 240px; background-color: var(--black-color); } .project-section .lower-box .info-box:last-child::before { display: none; } .project-section .lower-box .title { position: relative; font-weight: 500; font-size: var(--font-16); color: var(--color-nine); font-family: var(--font-family-Quicksand); } .project-section .lower-box h5 { font-weight: 500; color: var(--color-ten); margin-top: var(--margin-top-10); } .project-section .lower-box .play-box { position: relative; width: 60px; height: 60px; line-height: 58px; text-align: center; border-radius: 50px; display: inline-block; font-size: var(--font-20); color: var(--black-color); margin-right: var(--margin-right-30); border: 1px solid var(--black-color); } .project-section .lower-box .play-box .ripple, .project-section .lower-box .play-box .ripple:before, .project-section .lower-box .play-box .ripple:after { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; border-radius: 50px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -o-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .project-section .lower-box .play-box .ripple:before { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; } .project-section .lower-box .play-box .ripple:after { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; } .project-section .lower-box .play-box:hover { color: var(--white-color); border-color: var(--color-seven); background-color: var(--color-seven); } /*** ==================================================================== Printing Section ==================================================================== ***/ .printing-section { position: relative; padding: 70px 0px 100px; } .printing-section .title-box { position: relative; font-weight: 400; line-height: 1.2em; text-align: center; font-size: var(--font-120); margin-bottom: var(--margin-bottom-70); font-family: var(--font-family-Montaga); } .printing-section .title-box span { color: var(--color-seven); background: linear-gradient( to left, var(--color-seven) 0%, var(--color-eight) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .printing-section .title-box i { position: relative; font-style: normal; font-size: var(--font-122); color: var(--color-fourteen); } .printing-section .circle-one { position: absolute; right: -5%; bottom: 12%; width: 8px; height: 8px; border-radius: 50px; background-color: var(--color-nineteen); } .printing-section .vector-icon-one { position: absolute; left: -120px; top: -50px; width: 285px; height: 288px; background-repeat: no-repeat; } .printing-section .vector-icon-two { position: absolute; right: -120px; top: -50px; width: 285px; height: 288px; background-repeat: no-repeat; } .printing-section .vector-icon-three { position: absolute; left: 0px; top: 50%; width: 122px; height: 127px; background-repeat: no-repeat; } .printing-section .pattern-layer { position: absolute; left: -40px; width: 90px; height: 80px; top: 100px; background-repeat: no-repeat; } .printing-section .inner-container { position: relative; max-width: 1150px; margin: 0 auto; } .printing-section .print-block { float: left; padding: 0px 2px; } .print-block { position: relative; } .print-block .inner-box { position: relative; } .print-block .image { position: relative; background-color: var(--color-fourteen); } .print-block .image img { position: relative; width: 100%; display: block; } .print-block .tag { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 7px 16px 9px; font-weight: 500; color: var(--color-ten); font-size: var(--font-18); background-color: var(--white-color); } .print-block .color-layer { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; opacity: 0; transform: scale(0.3, 1); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; background: var(--color-seven); background: linear-gradient( to right, var(--color-seven) 0%, var(--color-eight) 100% ); } .print-block .inner-box:hover .color-layer { opacity: 1; transform: scale(1, 1); } .printing-section .owl-dots { display: none; } .printing-section .owl-nav { position: absolute; left: -90px; top: 50%; right: -90px; margin-top: -22px; } .printing-section .owl-nav .owl-prev { position: absolute; left: 0px; width: 46px; height: 45px; font-weight: 600; line-height: 46px; text-align: center; font-size: var(--font-18); font-family: "Flaticon"; color: var(--color-seven); border-radius: 50px 50px 50px 0px; background-color: var(--white-color); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); } .printing-section .owl-nav .owl-next { position: absolute; right: 0px; width: 46px; height: 45px; font-weight: 600; line-height: 46px; text-align: center; font-size: var(--font-18); font-family: "Flaticon"; color: var(--color-seven); border-radius: 50px 50px 50px 0px; background-color: var(--white-color); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); font-family: "Flaticon"; } .printing-section .owl-nav .owl-prev:hover, .printing-section .owl-nav .owl-next:hover { color: var(--white-color); background: linear-gradient( to right, var(--color-seven) 0%, var(--color-eight) 100% ); } .printing-section .post-info { position: relative; font-weight: 500; color: var(--color-ten); font-size: var(--font-20); margin-top: var(--margin-top-30); } .printing-section .post-info .rating { position: relative; padding-left: 280px; display: inline-block; } .printing-section .post-info .rating:before { position: absolute; content: ""; right: 40%; top: 10px; height: 2px; width: 206px; background-color: var(--black-color); } .printing-section .post-info .rating .fa { position: relative; color: var(--color-seven); font-size: var(--font-16); margin-right: var(--margin-right-5); } .printing-section .post-info .rating .fa.light { opacity: 0.2; color: var(--black-color); } /*** ==================================================================== Home Call to Action ==================================================================== ***/ #call-to-action { padding: 0px; } /*** ==================================================================== Services Section Two ==================================================================== ***/ .services-section-two { position: relative; padding: 0px 0px 70px; } .services-section-two .title-box { position: relative; margin-bottom: var(--margin-bottom-60); } .services-section-two .title-box h2 { position: relative; color: var(--color-ten); display: inline-block; } .services-section-two .title-box h2:before { position: absolute; content: ""; left: 0px; right: 0px; bottom: 10px; height: 5px; z-index: -1; background: url(../images/icons/vector-10.png) center bottom no-repeat; } .service-block-two { position: relative; margin-bottom: var(--margin-bottom-30); padding-left: 20px; } .service-block-two .inner-box { position: relative; } .service-block-two .icon-box { position: relative; display: inline-block; } .service-block-two .icon { position: relative; line-height: 1em; display: inline-block; color: var(--color-seven); font-family: "Flaticon"; font-size: var(--font-54); background: linear-gradient( to left, var(--color-seven) 0%, var(--color-eight) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .service-block-two .service-number { position: absolute; left: 120px; top: 5px; font-weight: 500; color: var(--black-color); font-size: var(--font-18); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .service-block-two .inner-box:hover .service-number { color: var(--color-seven); } .service-block-two h5 { font-weight: 500; margin-top: var(--margin-top-15); } .service-block-two h5 a { color: var(--color-ten); font-size: 22px; } .service-block-two h5 a:hover { color: var(--color-seven); } .service-block-two .text { max-width: 200px; margin-top: var(--margin-top-10); } .services-section-two .inner-container { position: relative; max-width: 1150px; margin: 0 auto; } .services-section-two .icon-one { position: absolute; left: 4%; width: 8px; height: 8px; bottom: 40%; border-radius: 50px; display: inline-block; background-color: var(--color-sixteen); } .services-section-two .icon-two { position: absolute; left: 34%; top: 15px; width: 12px; height: 12px; border-radius: 50px; display: inline-block; background-color: var(--color-sixteen); } .services-section-two .icon-three { position: absolute; right: 5%; bottom: 35%; width: 10px; height: 10px; border-radius: 50px; display: inline-block; background-color: var(--color-sixteen); } .services-section-two .icon-four { position: absolute; right: 5%; top: -40%; width: 10px; height: 10px; border-radius: 50px; display: inline-block; border: 1px solid var(--color-eight); } .services-section-two .vector-icon-one { position: absolute; left: 8%; top: -4%; width: 13px; height: 14px; background-repeat: no-repeat; } /*** ==================================================================== Quality Section ==================================================================== ***/ .quality-section { position: relative; overflow: hidden; padding-bottom: var(--padding-bottom-80); } .quality-section .color-one { position: absolute; left: 8%; top: 45%; width: 6px; height: 6px; opacity: 0.5; border-radius: 50%; background-color: var(--main-color); } .quality-section .color-two { position: absolute; left: 8%; bottom: 15%; width: 36px; height: 36px; opacity: 0.15; border-radius: 50%; border: 8px solid var(--main-color); } .quality-section .color-three { position: absolute; right: 25%; top: -4%; width: 8px; height: 8px; opacity: 0.5; border-radius: 50%; background-color: var(--main-color); } .quality-section .vector-layer { position: absolute; right: 0px; bottom: -200px; width: 568px; height: 650px; } .quality-section .image-column { position: relative; margin-bottom: var(--margin-bottom-30); } .quality-section .image-column .inner-column { position: relative; } .quality-section .image-column .image { position: relative; } .quality-section .content-column { position: relative; margin-bottom: var(--margin-bottom-30); } .quality-section .content-column .inner-column { position: relative; padding-left: var(--padding-left-80); } .quality-section .sec-title { margin-bottom: var(--margin-bottom-15); } .quality-section .options-list { position: relative; margin-top: var(--margin-top-30); } .quality-section .options-list li { position: relative; color: var(--color-twelve); font-size: var(--font-15); padding-left: var(--padding-left-30); margin-bottom: var(--margin-bottom-15); } .quality-section .options-list li:before { position: absolute; content: "\f1a3"; left: 0px; font-weight: 800; color: var(--color-seventeen); font-family: "Flaticon"; } .quality-section .demand { position: relative; font-weight: 500; color: var(--black-color); font-size: var(--font-14); margin-top: var(--margin-top-25); padding-left: var(--padding-left-30); margin-bottom: var(--margin-bottom-40); } .quality-section .demand:before { position: absolute; content: ""; left: 0px; width: 20px; height: 19px; background: url(../images/icons/fire.png) no-repeat; } .quality-section .demand span { position: relative; color: var(--color-seventeen); } /* Play Box */ .quality-section .play-box { position: relative; width: 60px; height: 60px; line-height: 58px; text-align: center; border-radius: 50px; display: inline-block; font-size: var(--font-20); color: var(--black-color); margin-left: var(--margin-left-30); border: 1px solid var(--black-color); } .quality-section .play-box .ripple, .quality-section .play-box .ripple:before, .quality-section .play-box .ripple:after { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; border-radius: 50px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -o-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .quality-section .play-box .ripple:before { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; } .quality-section .play-box .ripple:after { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; } .quality-section .play-box:hover { color: var(--white-color); border-color: var(--color-seven); background-color: var(--color-seven); } /*** ==================================================================== Fluid Section One ==================================================================== ***/ .fluid-section-one { position: relative; overflow: hidden; background-color: var(--color-fourteen); } .fluid-section-one .outer-container { position: relative; min-height: 250px; } .fluid-section-one .left-column { position: relative; width: 50%; float: left; height: 100%; z-index: 1; } .fluid-section-one .sec-title { margin-bottom: var(--margin-bottom-25); } .fluid-section-one .options { position: relative; margin-bottom: var(--margin-bottom-40); } .fluid-section-one .options li { position: relative; font-weight: 400; padding-top: 3px; display: inline-block; font-size: var(--font-15); color: var(--black-color); margin-right: var(--margin-right-30); padding-right: var(--padding-right-40); padding-left: var(--padding-left-40); margin-bottom: var(--margin-bottom-15); } .fluid-section-one .options li:before { position: absolute; content: "\f104"; right: 0px; top: 3px; font-size: var(--font-12); font-family: "flaticon"; } .fluid-section-one .options li .number { position: absolute; left: 0px; top: 0px; width: 28px; height: 28px; font-size: 14px; font-weight: 500; line-height: 26px; text-align: center; border-radius: 50px; border: 1px solid rgba(var(--black-color-rgb), 0.1); } .fluid-section-one .options li:last-child { margin-right: var(--margin-zero); padding-right: var(--margin-zero); } .fluid-section-one .options li:last-child::before { display: none; } .fluid-section-one .left-column .inner-column { position: relative; max-width: 670px; width: 100%; float: right; padding: 90px 15px; padding-right: var(--padding-right-50); } .fluid-section-one h3 { margin-bottom: var(--margin-bottom-30); } .fluid-section-one h3:before { position: absolute; content: ""; left: 0px; right: 0px; bottom: 5px; height: 5px; z-index: -1; background: url(../images/icons/vector-6.png) no-repeat; } .fluid-section-one .play-box { position: relative; width: 60px; height: 60px; line-height: 58px; text-align: center; border-radius: 50px; display: inline-block; font-size: var(--font-20); color: var(--black-color); margin-left: var(--margin-left-30); border: 1px solid var(--black-color); } .fluid-section-one .play-box .ripple, .fluid-section-one .play-box .ripple:before, .fluid-section-one .play-box .ripple:after { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; border-radius: 50px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -o-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .fluid-section-one .play-box .ripple:before { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; } .fluid-section-one .play-box .ripple:after { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; } .fluid-section-one .play-box:hover { color: var(--white-color); border-color: var(--color-seven); background-color: var(--color-seven); } .fluid-section-one .button-box { position: relative; margin-top: var(--margin-top-40); } /*** ==================================================================== Accordion Style ==================================================================== ***/ .accordion-box { position: relative; } .accordion-box .block { position: relative; margin-bottom: var(--margin-bottom-20); } .accordion-box .block:last-child { margin-bottom: var(--margin-zero); } .accordion-box .block .acc-btn { font-size: var(--font-16); position: relative; cursor: pointer; line-height: 30px; font-weight: 600; color: var(--color-ten); transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; padding-right: var(--padding-right-30); } .accordion-box .block .icon-outer { position: absolute; right: 0px; top: 0px; width: 30px; height: 30px; text-align: center; font-size: var(--font-14); color: var(--color-ten); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .accordion-box .block .icon-outer .icon { position: absolute; left: 0px; top: 50%; margin-top: -15px; width: 30px; height: 30px; text-align: center; border-radius: 50%; line-height: 30px; font-size: var(--font-14); color: var(--color-ten); } .accordion-box .block .icon-outer .icon-plus { opacity: 1; } .accordion-box .block .icon-outer .icon-minus { opacity: 0; font-weight: 400; } .accordion-box .block .acc-btn.active .icon-outer .icon-minus { opacity: 1; } .accordion-box .block .acc-btn.active .icon-outer .icon-plus { opacity: 0; } .accordion-box .block .acc-btn.active .icon-outer { } .accordion-box .block .acc-content { position: relative; display: none; } .accordion-box .block .acc-content .content-text { } .accordion-box .block .acc-content.current { display: block; } .accordion-box .block .content { position: relative; padding: 15px 0px 0px 0px; } .accordion-box .block .content .text { } .accordion-box .block .content p:last-child { margin-bottom: 0px; } /* Style Two */ .accordion-box.style-two .block .acc-btn { font-size: var(--font-20); padding-bottom: var(--padding-bottom-20); border-bottom: 1px solid rgba(var(--black-color-rgb), 0.1); } .accordion-box.style-three .block { padding: 15px 25px; background-color: var(--color-sixtytwo); } .accordion-box.style-three .block .content .text { line-height: 28.8px; padding-top: var(--padding-top-15); margin-bottom: var(--margin-bottom-5); border-top: 1px solid rgba(var(--black-color-rgb), 0.1); } .fluid-section-one .right-column { position: relative; width: 50%; float: right; height: 100%; } .fluid-section-one .right-column .inner-column { position: relative; } /*** ==================================================================== Testimonial Section ==================================================================== ***/ .testimonial-section { position: relative; padding-top: var(--padding-top-100); } .testimonial-section .owl-nav { display: none; } .testimonial-section .owl-dots { display: block; top: -80px; position: relative; counter-reset: slides-num; margin-left: 385px; } .testimonial-section .owl-dots .owl-dot { position: relative; display: inline-block; vertical-align: top; margin-left: 28px; counter-increment: slides-num; } .testimonial-section .owl-dots .owl-dot span { position: relative; content: "0" counter(slides-num) ""; display: block; font-weight: 400; font-size: var(--font-14); color: var(--color-ten); padding-bottom: 5px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .testimonial-section .owl-dots .owl-dot span:after { position: absolute; content: ""; left: 0px; bottom: 0px; right: 0px; height: 2px; opacity: 0; background-color: var(--main-color); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .testimonial-section .owl-dots .owl-dot:hover span:after, .testimonial-section .owl-dots .owl-dot.active span:after { opacity: 1; } .testimonial-section .owl-dots .owl-dot span:before { position: relative; content: "0" counter(slides-num) ""; } .testimonial-section .owl-dots .owl-dot:hover span, .testimonial-section .owl-dots .owl-dot.active span { color: var(--main-color); opacity: 1; } .testimonial-section .owl-carousel .owl-stage-outer { padding-bottom: var(--padding-bottom-25); } .testimonial-section .vector-icon-one { position: absolute; left: 0px; top: -120px; width: 226px; height: 298px; background-repeat: no-repeat; } .testimonial-section .vector-icon-two { position: absolute; right: 0px; bottom: 0px; width: 173px; height: 288px; background-repeat: no-repeat; } .testimonial-section .icon-one { position: absolute; left: 8%; top: 15%; width: 6px; height: 6px; border-radius: 50%; background-color: var(--main-color); } .testimonial-section .icon-two { position: absolute; right: 8%; top: 18%; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--main-color); } .testimonial-section .icon-three { position: absolute; right: 15%; bottom: 18%; width: 6px; height: 6px; border-radius: 50%; background-color: var(--main-color); } .testimonial-section .auto-container { max-width: 1250px; } .testimonial-section .inner-container { position: relative; padding-bottom: var(--padding-bottom-80); border-bottom: 1px solid rgba(var(--black-color-rgb), 0.1); } .testimonial-section.style-two .inner-container { border-bottom: none; padding-bottom: var(--padding-bottom-40); } .testimonial-block { position: relative; } .testimonial-block .inner-box { position: relative; } .testimonial-block .quote-icon { position: absolute; right: 40px; top: 0px; opacity: 0.1; line-height: 1em; font-size: var(--font-50); font-family: "Flaticon"; } .testimonial-block .image-column { position: relative; } .testimonial-block .image-column .inner-column { position: relative; padding-left: var(--padding-left-65); padding-top: var(--padding-top-40); } .testimonial-block .image-column .image { position: relative; width: 280px; height: 280px; } .testimonial-block .image-column .image img { position: relative; overflow: hidden; border-radius: 50%; } .testimonial-block .circle-layer { position: absolute; left: 0px; top: 50px; width: 240px; height: 240px; background-repeat: no-repeat; } .testimonial-block .pattern-layer { position: absolute; right: 22px; top: 120px; width: 90px; height: 80px; background-repeat: no-repeat; } .testimonial-block .social-box { position: absolute; left: 50px; right: 50px; bottom: 0px; padding: 12px 0px; text-align: center; } .testimonial-block .social-box:before { position: absolute; content: ""; left: 0px; right: 0px; bottom: 0px; top: 0px; transform: skewX(-10deg); background-color: var(--white-color); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); } .testimonial-block .social-box li { position: relative; margin: 0px 7px; display: inline-block; } .testimonial-block .social-box li a { position: relative; color: var(--color-ten); font-size: var(--font-18); } .testimonial-block .content-column { position: relative; } .testimonial-block .content-column .inner-column { position: relative; } .testimonial-block h3 { color: var(--color-ten); } .testimonial-block .text { line-height: 40px; color: var(--black-color); font-size: var(--font-20); margin-top: var(--margin-top-20); } .testimonial-block .author-info { position: relative; color: var(--color-twelve); font-size: var(--font-13); margin-top: var(--margin-top-20); } .testimonial-block .author-info span { position: relative; font-size: var(--font-16); padding-right: var(--padding-right-35); } .testimonial-block .author-info span:before { position: absolute; content: ""; left: 0px; right: 0px; bottom: 0px; height: 2px; z-index: -1; background: url(../images/icons/vector-4.png) no-repeat; } .testimonial-block .author-info span:after { position: absolute; content: ""; right: 7px; top: 11px; width: 20px; height: 1px; opacity: 0.1; background-color: var(--black-color); } /*** ==================================================================== Faq Section ==================================================================== ***/ .faq-section { position: relative; padding: 100px 0px 100px; } .faq-section .color-one { position: absolute; left: 10%; top: 15%; width: 8px; height: 8px; border-radius: 50px; background-color: var(--main-color); } .faq-section .color-two { position: absolute; left: 9%; top: 55%; width: 8px; height: 8px; border-radius: 50px; background-color: var(--main-color); } .faq-section .color-three { position: absolute; right: 9%; top: 55%; width: 8px; height: 8px; border-radius: 50px; background-color: var(--main-color); } .faq-section .color-four { position: absolute; right: 10%; top: 15%; width: 8px; height: 8px; border-radius: 50px; background-color: var(--color-sixteen); } .faq-section .vector-layer-one { position: absolute; left: 10%; top: 15%; width: 220px; height: 261px; background-repeat: no-repeat; } .faq-section .vector-layer-two { position: absolute; right: 6%; bottom: 5%; width: 209px; height: 254px; background-repeat: no-repeat; } .faq-section .vector-layer-three { position: absolute; left: 0px; top: -250px; width: 238px; height: 536px; background-repeat: no-repeat; } .faq-section .inner-container { position: relative; max-width: 840px; margin: 0 auto; } /*** ==================================================================== Business Section ==================================================================== ***/ .brand-section { position: relative; } .brand-section .outer-container { position: relative; } .brand-section .outer-container marquee img { height: 110px; } .brand-section .marque-box { position: relative; z-index: 1; padding: 100px 0px; -webkit-animation: marquee 32s linear infinite; animation: marquee 32s linear infinite; } .brand-section .marque-box div { position: relative; } .brand-section span { position: relative; font-weight: 400; line-height: 1em; padding: 10px 0px; margin: 0px 20px; display: inline-block; font-size: var(--font-100); color: var(--color-fourteen); font-family: var(--font-family-Montaga); } .brand-section span a { position: relative; color: rgba(var(--black-color-rgb), 0.15); } .brand-section i { position: relative; top: -20px; } .brand-section strong { font-weight: 400; color: var(--color-seven); background: linear-gradient( to left, var(--color-seven) 0%, var(--color-eight) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /*** ==================================================================== Main Slider Two ==================================================================== ***/ .main-slider-two { position: relative; overflow: hidden; } .main-slider-two .slide { position: relative; overflow: hidden; padding: 120px 0px 240px; background-size: cover; } .main-slider-two .content-column { position: relative; z-index: 11; } .main-slider-two .content-column .inner-column { position: relative; padding-top: var(--padding-top-100); } .main-slider-two .title { position: relative; opacity: 0; z-index: 1; font-weight: 500; padding: 6px 18px; font-size: var(--font-14); text-transform: capitalize; color: var(--white-color); transform-origin: top; display: inline-block; transform: translateX(200px); -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; margin-bottom: var(--margin-bottom-25); font-family: var(--font-family-Outfit); } .main-slider-two .title:before { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: -1; transform: skewX(-10deg); background-color: var(--color-seventeen); } .main-slider-two .active .title { opacity: 1; transform: translateX(0px); -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -ms-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; } .main-slider-two h1 { opacity: 0; color: var(--black-color); transform-origin: top; transform: translateX(200px); -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; margin-bottom: var(--margin-bottom-25); } .main-slider-two h1 span { position: relative; color: var(--color-seven); background: linear-gradient( to left, var(--color-seven) 0%, var(--color-eight) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .main-slider-two h1 span:before { position: absolute; content: ""; left: 0px; right: 0px; bottom: 10px; height: 5px; z-index: -1; background: url(../images/icons/vector-16.png) center bottom no-repeat; } .main-slider-two .active h1 { opacity: 1; transform: translateX(0px); -webkit-transition-delay: 800ms; -moz-transition-delay: 800ms; -ms-transition-delay: 800ms; -o-transition-delay: 800ms; transition-delay: 800ms; } .main-slider-two .text { opacity: 0; color: var(--color-nineteen); transform-origin: top; transform: translateX(200px); -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; margin-bottom: var(--margin-bottom-35); } .main-slider-two .active .text { opacity: 1; transform: translateX(0px); -webkit-transition-delay: 1200ms; -moz-transition-delay: 1200ms; -ms-transition-delay: 1200ms; -o-transition-delay: 1200ms; transition-delay: 1200ms; } .main-slider-two .options-box { opacity: 0; transform: translateX(200px); transform-origin: top; display: inline-block; -webkit-transition: all 900ms ease; -moz-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; transition: all 900ms ease; } .main-slider-two .active .options-box { opacity: 1; transform: translateX(0px); -webkit-transition-delay: 1600ms; -moz-transition-delay: 1600ms; -ms-transition-delay: 1600ms; -o-transition-delay: 1600ms; transition-delay: 1600ms; } .main-slider-two .button-box .theme-btn { display: block; margin-right: var(--margin-right-25); } .main-slider-two .image { position: absolute; right: 1px; top: 0px; z-index: 2; -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; } .main-slider-two .icons-outer { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; } .main-slider-two .icons-outer .icon-one { position: absolute !important; left: 1% !important; top: 20% !important; width: 22px; height: 20px; background-repeat: no-repeat; } .main-slider-two .icons-outer .icon-two { position: absolute !important; left: 6% !important; top: 50% !important; width: 12px; height: 12px; background-repeat: no-repeat; } .main-slider-two .icons-outer .icon-three { position: absolute !important; left: 49% !important; top: 22% !important; width: 84px; height: 78px; background-repeat: no-repeat; } .main-slider-two .icons-outer .icon-four { position: absolute !important; left: 55% !important; top: 70% !important; width: 22px; height: 21px; background-repeat: no-repeat; } .main-slider-two .pattern-layer { position: absolute; left: 0px; bottom: -300px; width: 256px; height: 694px; background-repeat: no-repeat; } /* Play Box */ .main-slider-two .play-box { position: relative; width: 60px; height: 60px; line-height: 58px; text-align: center; border-radius: 50px; display: inline-block; font-size: var(--font-20); color: var(--black-color); border: 1px solid var(--black-color); } .main-slider-two .play-box .ripple, .main-slider-two .play-box .ripple:before, .main-slider-two .play-box .ripple:after { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; border-radius: 50px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); -ms-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); -o-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .main-slider-two .play-box .ripple:before { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; } .main-slider-two .play-box .ripple:after { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; } .main-slider-two .play-box:hover { color: var(--white-color); border-color: var(--color-seven); background-color: var(--color-seven); } .main-slider-two .owl-dots, .main-slider-two .owl-nav { display: none; } /* Scroll Box */ .main-slider-two .scroll-box { position: absolute; left: 50%; z-index: 10; bottom: 140px; cursor: pointer; line-height: 1em; margin-left: -25px; font-size: var(--font-50); font-family: "Flaticon"; color: var(--color-seven); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; background: linear-gradient( to left, var(--color-seven) 0%, var(--color-eight) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: icon-bounce 0.8s ease-out infinite; animation: icon-bounce 0.8s ease-out infinite; } .main-slider-two .scroll-box:hover { color: var(--main-color); } /*** ================================================================== Sponsors Section ================================================================== ***/ .sponsors-section { position: relative; margin-top: -80px; padding: 0px 0px 80px; } .sponsors-section .vector-icon-one { position: absolute; left: 0px; top: 0px; width: 162px; height: 373px; background-repeat: no-repeat; } .sponsors-section .vector-icon-two { position: absolute; right: 5%; top: 100px; width: 21px; height: 21px; } .sponsors-section .inner-container { position: relative; } .sponsors-section .sponsors-outer { position: relative; } .sponsors-section .sponsors-outer .owl-dots, .sponsors-section .sponsors-outer .owl-nav { position: relative; display: none; } .sponsors-section .sponsors-outer .image-box { position: relative; text-align: center; margin: var(--margin-zero); } .sponsors-section .sponsors-outer .image-box img { max-width: 100%; width: auto; display: inline-block; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; } .sponsors-section .sponsors-outer .image-box img:hover { opacity: 0.8; -webkit-filter: grayscale(100%); filter: grayscale(100%); } /*** ==================================================================== Services Section Three ==================================================================== ***/ .services-section-three { position: relative; padding: 30px 0px 70px; } .services-section-three .color-one { position: absolute; left: 10%; bottom: 25%; width: 10px; height: 10px; border-radius: 50%; background-color: var(--color-twenty); } .service-block-three { position: relative; margin-bottom: var(--margin-bottom-30); } .service-block-three .inner-box { position: relative; text-align: center; } .service-block-three .arrow { position: absolute; right: -30px; top: 90px; width: 33px; height: 50px; z-index: 1; line-height: 48px; font-family: "flaticon"; font-size: var(--font-12); color: var(--color-twentyone); } .service-block-three .arrow:after { position: absolute; content: ""; right: 0px; top: 0px; z-index: -1; width: 33px; height: 50px; border-radius: 50px; transform: rotate(45deg); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; border: 1px solid rgba(var(--black-color-rgb), 0.1); } .service-block-three:last-child .inner-box:before { display: none; } .service-block-three .inner-box:hover .arrow { color: var(--white-color); } .service-block-three .inner-box:hover .arrow:after { border-color: var(--main-color); background-color: var(--main-color); } .service-block-three:last-child .arrow { display: none; } .service-block-three .icon-box { position: relative; width: 70px; height: 67px; margin: 0 auto; } .service-block-three .icon-box:before { position: absolute; content: ""; left: 0px; top: 0px; width: 70px; height: 67px; display: inline-block; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; background: url(../images/icons/vector-22.png) no-repeat; } .service-block-three .icon { position: relative; line-height: 67px; display: inline-block; font-family: "Flaticon"; font-size: var(--font-24); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; color: var(--color-twentyone); } .service-block-three .inner-box:hover .icon { -webkit-transform: scale(-1) rotate(180deg); -moz-transform: scale(-1) rotate(180deg); -ms-transform: scale(-1) rotate(180deg); -o-transform: scale(-1) rotate(180deg); transform: scale(-1) rotate(180deg); } .service-block-three h5 { font-weight: 500; margin-top: var(--margin-top-30); } .service-block-three h5 a { color: var(--color-ten); } .service-block-three h5 a:hover { color: var(--color-seven); } .service-block-three .text { margin-top: var(--margin-top-20); } /*** ==================================================================== Business Section Two ==================================================================== ***/ .business-section-two { position: relative; padding: 40px 0px 50px; } .business-section-two .pattern-layer { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background-position: center center; background-repeat: no-repeat; } .business-section-two .small-circle-layer { position: absolute; left: 12%; bottom: 5%; width: 10px; height: 10px; opacity: 0.5; border-radius: 50%; background-color: var(--color-seven); } .business-section-two .vector-layer-one { position: absolute; left: 11%; top: 15%; width: 18px; height: 17px; background-repeat: no-repeat; } .business-section-two .vector-layer-two { position: absolute; right: 5%; top: 5%; width: 30px; height: 27px; background-repeat: no-repeat; } .business-section-two .vector-layer-three { position: absolute; right: 0px; bottom: -180px; width: 410px; height: 654px; background-repeat: no-repeat; } .business-section-two .images-column { position: relative; margin-bottom: var(--margin-bottom-30); } .business-section-two .images-column .inner-column { position: relative; } .business-section-two .images-column .shadow-one { position: absolute; right: 0px; bottom: -120px; width: 297px; height: 296px; background-repeat: no-repeat; } .business-section-two .images-column .shadow-two { position: absolute; left: -120px; bottom: 60px; width: 285px; height: 288px; background-repeat: no-repeat; } .business-section-two .image { position: relative; } .business-section-two .image-two { position: absolute !important; left: auto !important; right: 80px !important; top: -80px !important; } .business-section-two .image-three { position: absolute !important; left: auto !important; top: auto !important; right: 150px !important; bottom: 20px !important; } .business-section-two .image-four { position: relative !important; margin-left: var(--margin-left-60); margin-top: var(--margin-top-70); } .business-section-two .images-outer { position: relative; } .business-section-two .circle-layer { position: absolute; left: 0px; top: 90px; right: 40px; bottom: 0px; background-position: center center; background-repeat: no-repeat; } .business-section-two .content-column { position: relative; margin-bottom: var(--margin-bottom-30); } .business-section-two .content-column .inner-column { position: relative; padding-left: var(--padding-left-120); } .business-section-two .options-list { position: relative; margin-top: var(--margin-top-30); } .business-section-two .options-list li { position: relative; color: var(--color-twelve); font-size: var(--font-15); padding-left: var(--padding-left-30); margin-bottom: var(--margin-bottom-15); } .business-section-two .options-list li:before { position: absolute; content: "\f1a3"; left: 0px; font-weight: 800; color: var(--main-color); font-family: "Flaticon"; } .business-section-two .author-info { position: relative; color: var(--color-twelve); font-size: var(--font-13); margin-top: var(--margin-top-30); padding-top: var(--padding-top-20); border-top: 1px solid rgba(var(--black-color-rgb), 0.06); } .business-section-two .author-info span { position: relative; font-size: var(--font-16); padding-right: var(--padding-right-35); } .business-section-two .author-info span:before { position: absolute; content: ""; left: 0px; right: 0px; bottom: 0px; height: 2px; z-index: -1; background: url(../images/icons/vector-4.png) no-repeat; } .business-section-two .author-info span:after { position: absolute; content: ""; right: 7px; top: 11px; width: 20px; height: 1px; opacity: 0.1; background-color: var(--black-color); } .business-section-two.style-two { padding: 110px 0px 70px; } /* ############################################################## (Cart Page Start) ################################################################ */ /* Cart Technical Stuff Start */ .page-wrapper:has(>#wizard-form) :is(input[type=text], select, textarea) { margin-bottom: 0px; } .page-wrapper:has(>#wizard-form) button{ width: auto; height:auto; border-radius: unset; border: unset; } #shipping_process { display: none; } /* Cart Technical Stuff End */ .stdFntMid { color: #676767; background: white; padding: 0; } .font-size-large { font-size: var(--font-14); font-family: var(--font-family-Outfit); font-weight: 600; color: var(--color-ten); } .wizard-leftSideBar a:hover { color: inherit; } ul.wizard-leftSideBar-itemsList > li { display: inline-block; width: 33%; } #wizard-form .cartSideBarArea { margin-bottom: 50px; } iframe#hosted-fields-tokenization-frame_2e284fa1-fcee-420f-8f61-973a36238955{display: none;} .wizard-leftSideBar a.wizard-leftSideBar-link { position: relative; list-style: none; display: block; text-decoration: none; transition: background-color 0.5s ease; background-color: transparent; font-size: var(--font-18); font-family: var(--font-family-Outfit); font-weight: 600; color: #999; } .wizard-leftSideBar a.wizard-leftSideBar-link:before { content: ""; display: block; position: absolute; left: 0px; top: 30%; width: 100%; height: 3px; background: #ccc; transform: translateX(-50%); z-index: -1; } .wizard-leftSideBar a.wizard-leftSideBar-link .wizardForm-stepContent { display: flex; justify-content: center; align-items: center; flex-direction: column; } .wizard-leftSideBar a.wizard-leftSideBar-link .wizardForm-stepIcon { width: 50px; height: 50px; -o-border-radius: 50%; -ms-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; background: #f5f5f5; margin: 0 auto; position: relative; border: 1px solid #dedede; outline: none; -o-outline: none; -ms-outline: none; -moz-outline: none; -webkit-outline: none; color: #ea8e3a; font-size: 16px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-bottom: 10px; } .wizard-leftSideBar a.wizard-leftSideBar-link.active { color: var(--color-ten); } .wizard-leftSideBar a.wizard-leftSideBar-link.active::before, .wizard-leftSideBar a.wizard-leftSideBar-link.done::before { background: linear-gradient( to left, var(--color-eight) 0%, var(--color-seven) 100% ); } .wizard-leftSideBar a.wizard-leftSideBar-link.active .wizardForm-stepIcon, .wizard-leftSideBar a.wizard-leftSideBar-link.done .wizardForm-stepIcon { background: #ffffff; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25); border: 1px solid #fc9638; } .wizard-leftSideBar a.wizard-leftSideBar-link span { display: block; font-size: 14px; color: #676767; } /* .wizard-leftSideBar a.cart-item-icon { background: url(/images/cart/cart.svg) no-repeat scroll 10px center; } .wizard-leftSideBar a.cart-item-icon.active { background: url(/images/cart/cart-active.svg) no-repeat scroll 10px center var(--primeBlue-color); color: white; } .wizard-leftSideBar a.cart-shipping-icon { background: url(/images/cart/billing-shipping.svg) no-repeat scroll 10px center; } .wizard-leftSideBar a.cart-shipping-icon.active { background: url(/images/cart/billing-shipping-active.svg) no-repeat scroll 10px center var(--primeBlue-color); color: white; } .wizard-leftSideBar a.cart-payment-details-icon { background: url(/images/cart/payment.svg) no-repeat scroll 10px center; } .wizard-leftSideBar a.cart-payment-details-icon.active { background: url(/images/cart/payment-active.svg) no-repeat scroll 10px center var(--primeBlue-color); color: white; } */ /* .wizard-leftSideBar a.cart-item-icon, .wizard-leftSideBar a.cart-item-icon.active, .wizard-leftSideBar a.cart-shipping-icon, .wizard-leftSideBar a.cart-shipping-icon.active, .wizard-leftSideBar a.cart-payment-details-icon, .wizard-leftSideBar a.cart-payment-details-icon.active { background-size: 90px 50px; } */ .shopping-cart-top { min-height: 250px; margin-bottom: 10px; } .cartSideBarArea_container { background-color: transparent; } .cartSideBarArea_container .wizard-leftSideBar-itemsList { display: flex; justify-content: center; align-items: center; overflow: hidden; } .cartSideBarArea_container .wizardStatus-Title { padding-left: 20px; } /* Cart Table Start*/ .wizard-shoppingCart table.cartTable { text-align: left; width: 100%; } .wizard-shoppingCart table.cartTable thead th { padding: 0 12px; color: rgb(255 255 255); font-weight: 600; font-size: 14px; background: #fc9638; } /* .wizard-shoppingCart table.cartTable tr.cartTableRow { border-bottom: 1px solid #e1e7ec; } */ .wizard-shoppingCart table.cartTable td { vertical-align: baseline; } .wizard-shoppingCart table.cartTable .cartTableBody .cartTableRow { border-bottom: 1px solid #e1e7ec; position: relative; } /* .wizard-shoppingCart table.cartTable .cartTableBody .cartTableRow:after { content: ''; display: block; height: 100%; width: 100%; background-color: transparent; top: 0px; left: 0px; position: absolute; border: 1px solid var(--main-color); margin-top: 1px; z-index: 0; transform: scaleX(1); transform-origin: 0% 100%; } */ .wizard-shoppingCart table.cartTable tr #quantity { display: flex; justify-content: center; align-items: baseline; padding-inline: 10px; } .wizard-shoppingCart table.cartTable tr > :nth-child(1) { width: 50%; text-align: left; } .wizard-shoppingCart table.cartTable tr > :nth-child(2) { width: 20%; text-align: center; } .wizard-shoppingCart table.cartTable tr > :nth-child(3), .wizard-shoppingCart table.cartTable tr > :nth-child(4) { width: 15%; text-align: center; } .wizard-shoppingCart table.cartTable .cartTableCell .product-item { display: flex; padding-top: 15px; padding-bottom: 15px; } .wizard-shoppingCart table.cartTable .cartTableCell .product-item .product-thumb { height: max-content; padding: 10px; position: relative; } /* .tosetpointer img{ width: 60px; } */ .wizard-shoppingCart table.cartTable .product-item .removeFromCart_container { position: absolute; top: -12px; left: -10px; color: var(--color-five); display: flex; justify-content: center; align-items: center; height: 20px; width: 20px; border-radius: 50%; } .wizard-shoppingCart table.cartTable .product-item .removeFromCart_container:hover { color: white; background-color: var(--color-five); } table.cartTable .cartTableCell .product-item .product-info { margin-left: 15px; display: flex; flex-direction: column; justify-content: center; } table.cartTable .cartTableCell .product-item .product-info h4.product-title a { font-size: 14px; margin-bottom: 3px; color: rgba(var(--color-fiftyfive-rgb), 0.9); display: block; padding-right: 2px; line-height: normal; } table.cartTable .cartTableCell .product-item .product-info h4.product-title a:hover { color: var(--main-color); } table.cartTable .cartTableCell .product-item .product-info h4.product-title a > span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } table.cartTable .cartTableCell .product-item .product-info > *:not(h4) { font-size: 13px; margin-bottom: 0px; } table.cartTable .cartTableCell .product-item .product-info b { color: #4b4b4b; font-weight: 600; } table.cartTable .cartTableCell .product-item .product-info .skuText { padding-left: 10px; border-left: 1px solid #4b4b4b; margin-left: 10px; } .cartTableCell .removeFromCart_container .remove-from-cart { color: red; font-weight: 400; font-size: 13px; display: inline-block; } .wizard-shoppingCart table.cartTable td.cartTableCell.price { color: #4b4b4b; font-weight: 400; font-size: 14px; padding-top: 7px; } .wizard-shoppingCart table.cartTable td.cartTableCell.price span.labelforMobile { font-weight: 600; display: none; } table.cartTable #quantity button { background: #fff; border: 0px solid #dbe2e8; border-radius: 0px; width: auto; font-size: 20px; font-weight: 700; color: #767676; height: 44px; width: 44px; border: 1px solid #e1e7ec; border-radius: 5px; } table.cartTable #quantity input { border: 0px solid #dbe2e8; border-radius: 0px; height: 20px; padding: 0px 10px; width: 60px; margin: 0px 0px; text-align: center; font-size: 14px; color: #767676; border: 1px solid #e1e7ec; border-radius: 5px; padding-block: 20px; } table.cartTable #quantity input::-webkit-outer-spin-button, table.cartTable #quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Cart Table End*/ /* shopping-cart-bottom Start*/ .shopping-cart-bottom label, .shopping-cart-bottom textarea { color: var(--mid-dark); font-weight: 400; font-size: 13px; margin-bottom: 10px; } .shopping-cart-bottom textarea { font-size: 12px; border-color: #e1e7ec; border-radius: 0px; } #wizard-form .form-control:focus { box-shadow: none; border-color: var(--main-color); color: var(--mid-dark); } /* .shopping-cart-bottom .form-control:focus { box-shadow: none; border-color: var(--main-color); color: var(--mid-dark); } */ /* shopping-cart-bottom End*/ /* Cart Payment Summary Start*/ .priceColur { color: #fc9638; } #wizard-form .CartPaymentSummary { position: relative; } #wizard-form .CartPaymentSummary .pd-tp-bt-cart-no { margin-top: 3px; } #wizard-form .CartPaymentSummary .pd-tp-bt-cart-no p { line-height: normal; } #wizard-form .CartPaymentSummary .pd-tp-bt-cart-no .crtnum { float: right; } #wizard-form .widget-order-summary { position: relative; margin-top: 10px; padding: 15px 15px; border: 1px solid #e1e7ec; } #wizard-form .CartPaymentSummary strong { font-weight: 600; color: #4b4b4b; } #wizard-form .widget-order-summary h3 { padding-bottom: 10px; font-weight: 600; color: var(--color-ten); } .widget-order-summary .table td { padding: 2px 0px; border: 0; } .widget-order-summary .table tr:first-child > td { padding-top: 0; } .widget-order-summary .table td:last-child { text-align: right; } .widget-order-summary .inTable { width: 100%; text-align: left; position: relative; } .pySummaryBtn { display: block; width: 100% !important; margin-top: 10px; padding: 15px 0px; transition: all 0.3s ease-in-out; font-size: 12px; } .CartPaymentSummary button.pySummaryBtn:not(:first-of-type) { color: black; background: white; border: 1px solid var(--main-color) !important; } .CartPaymentSummary button.pySummaryBtn:hover:not(:first-of-type) { background-color: var(--main-color); color: white; } .CartPaymentSummary .cartitemsContinueCheckoutBtn { background: #fc9638; color: white; border: 1px solid #fb9536; margin-top: 11px; } .cartOrderSummaryArea .cart_icon.widget.summarySaveOptions { display: flex; justify-content: space-between; display: none; background-color: #fafafa; } .cartOrderSummaryArea .cart_icon.widget #lnk_carttoolprint { background: url(/images/cart/Print.png) no-repeat center center; background-size: 50px; } .cartOrderSummaryArea .cart_icon.widget #lnk_carttoolpdf { background: url(/images/cart/Download-PDF.png) no-repeat center center; background-size: 50px; } .cartOrderSummaryArea .cart_icon.widget #lnk_carttoolmail { background: url(/images/cart/Email.png) no-repeat center center; background-size: 50px; } .cartOrderSummaryArea .cart_icon.widget .cartIcon { width: 46px; height: 44px; display: inline-block; margin-right: 5px; vertical-align: top; } /* Order Summary Loader Start*/ .general-loader-wrapper, .paymentSummary-loader-wrapper, .global-loader-wrapper, .fullBox-loader-wrapper, .general-loader-wrapper-large { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); z-index: 100; } .general-loader-wrapper .loader{ width: 15px; height: 15px; } .large .general-loader-wrapper .loader { width: 50px; height: 50px; top: 40%; left: 45%; transform: translate(-50%, -50%); } .specs_loader { position: relative; width: 100%; height: 100px; } .specs_loaderinner { position: absolute; top: 21%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border: 3px solid #f3f3f3; border-top: 3px solid #fc9837; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .global-loader-wrapper { position: fixed; } .fullBox-loader-wrapper { background: linear-gradient(white, transparent); } .general-loader-wrapper .loader, .paymentSummary-loader-wrapper .loader, .global-loader-wrapper .loader, .fullBox-loader-wrapper .loader { border: 5px solid lightslategray !important; border-top: 5px solid var(--main-color) !important; border-radius: 50%; width: 20px; height: 20px; animation: spin 2s linear infinite; position: absolute; bottom: 37%; left: 45%; transform: translate(-50%, -50%); } .fullBox-loader-wrapper .loader { width: 40px; height: 40px; } .global-loader-wrapper .loader { width: 50px; height: 50px; top: 40%; left: 45%; transform: translate(-50%, -50%); } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Order Summary Loader End*/ /* Cart Payment Summary End*/ /* Cart Login Start */ .cartLoginArea { display: none; } #cart-login .loginTitle { padding-bottom: 10px; } #cart-login .cartLogin-LayoutWrapper { padding: 2rem 4rem; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); margin-top: 0rem; position: relative; } #cart-login .form-control, .shipping_process_accordian .accordion-body .form-group .form-control, .payment_process_accordian .accordion-body .form-group .form-control { height: 38px; border-color: #dedede; font-size: 13px; color: var(--mid-dark); margin-bottom: 25px !important; border-radius: 0px; } #cart-login .form-control { border-radius: 0px; } .payment_process_accordian .accordion-body .form-group .form-control#pmethod, .payment_process_accordian .accordion-body .form-group .form-control#peymentterm { width: 50%; } .cartLogin-LayoutWrapper .shopping-cart-footer-buttons { border: 0; padding: 0px; display: flex; justify-content: center; align-items: center; } .cartLogin-LayoutWrapper .shopping-cart-footer-buttons > div { flex-grow: 1; } .cartLogin-LayoutWrapper regNowBtn .shopping-cart-footer-buttons .loginThenContinue_container { text-align: right; } .shopping-cart-footer-buttons .loginThenContinue_container { text-align: right; } .shopping-cart-footer-buttons .loginThenContinueBtn, .cartLogin-LayoutWrapper .registerBlock .contAsGuestBtn, .cartPaymentArea #paymentsubmitorder { color: white; background: var(--main-color); border: none; display: inline-block; padding: 10px 20px; font-size: 13px; border-radius: 0px; transition: all 0.3s ease-in-out; } .cart-login-wrapper .cartback a.cartbackBtn, .cartPaymentArea .paymentBacktoCartBtn { border: 1px solid var(--main-color); color: black; } .cart-login-wrapper .cartback a.cartbackBtn:hover, .cartPaymentArea .paymentBacktoCartBtn:hover { color: white; background: #fc9638; } .cart-login-wrapper .cartback a.cartbackBtn .shopping-cart-footer-buttons .loginThenContinueBtn:hover, .cartLogin-LayoutWrapper .registerBlock .contAsGuestBtn:hover, .cartPaymentArea #paymentsubmitorder:hover { background-color:#fc9638; } .cart-login-wrapper .cartback a.cartbackBtn, .cartPaymentArea .paymentBacktoCartBtn { padding: 10px 15px; } .cartLogin-LayoutWrapper .regNow_container { text-align: center; padding: 20px 0px; } .cartLogin-LayoutWrapper .regNow_container p.orForTablets { display: none; } .cartLogin-LayoutWrapper .regNow_container .regNowBtn { color: var(--secondry-color); cursor: pointer; } .cartLogin-LayoutWrapper .regNow_container .regNowBtn:hover { color: var(--main-color); } .verticalBorder { position: absolute; right: 50%; top: 45%; transform: translate(50%); width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 50%; border: 1px solid #ddd; background-color: white; z-index: 1; text-transform: uppercase; color: #444; font-weight: 600; } .cartLogin-LayoutWrapper::before { border-right: 1px solid #ddd; height: 70%; position: absolute; content: " "; right: 50%; top: 4rem; } .cartLogin-LayoutWrapper .registerBlock p { padding-bottom: 15px; } .cart-login-wrapper .cartback { padding: 3rem 4rem 0 0; } /* Cart Login End */ /* Cart Shipping Process Start */ #shipping_process { padding-top: 10px; } #shipping_process .shipping_process_accordian { max-width: 850px; position: relative; } #shipping_process .accordion-item { border: none; } #shipping_process .shipping_process_accordian .accordion-button { background-color: var(--color-four); border-radius: 0px; border: 1px solid #e1e7ec; padding-block: 3px; width: 100%; } #shipping_process .shipping_process_accordian .accordion-button:not(.collapsed) { color: var(--secondry-color); box-shadow: none; } #shipping_process .shipping_process_accordian .accordion-button:focus { box-shadow: none; } .shipping_process_accordian .accordion-body .form-group, .payment_process_accordian .accordion-body .form-group { padding: 0 18px 3px; border-radius: 0px; background-color: #fff; color: var(--mid-dark); font-size: 13px; } .form-group label.requiredField:after { content: "*"; font-weight: normal; font-size: 18px; color: #f00; line-height: 21px; position: initial; right: -11px; top: -2px; margin-left: 3px; } .shipping_process_accordian .accordion-body .form-group label, .payment_process_accordian .accordion-body .form-group label { margin-bottom: 5px; } .shipping_process_accordian .accordion-body select.form-control, .payment_process_accordian .accordion-body select.form-control { appearance: auto; outline: 1px solid #dedede; border: none; border-right: 1.6rem solid transparent !important; } .shipping_process_accordian .form-group div.checkbox { position: relative; } .shipping_process_accordian .form-group div.check-box input { display: none; } .shipping_process_accordian .form-group div.check-box label { position: relative; display: block; width: 100%; line-height: 22px; padding: 4px 10px 0px; padding-left: 25px; cursor: pointer; } .shipping_process_accordian .form-group div.check-box label:before { position: absolute; left: 0; top: 8px; height: 14px; width: 14px; border-radius: 50%; background-color: var(--white-color); content: ""; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; border: 1px solid rgba(var(--black-color-rgb), 0.15); } .shipping_process_accordian .form-group input[type="checkbox"]:checked + label:before { border: 7px solid var(--main-color); } .checkout-shipping-box p { padding-top: 35px; } .checkout-shipping-box b { color: var(--mid-dark); font-weight: 600; } /* Cart Shipping Process End */ /* Cart Payment Process Start */ .cartPaymentArea .checkout-footer, .cartPaymentArea { display: none; } .cartPaymentArea .accordion-item { border: none; } .cartPreviewTitle { margin-bottom: 10px; } .cartPaymentArea #tab i + span { color: var(--mid-dark); font-weight: 400; font-size: 13px; padding: 0 8px; } .cartPaymentArea .checkout-footer { display: flex; justify-content: center; align-items: center; margin-top: 25px; max-width: 850px; } .cartPaymentArea div:has(> #paymentsubmitorder) { text-align: right; } .cartPaymentArea .accordion-body .form-group input#peymentterm { cursor: not-allowed; } .cartPaymentArea .accordion-header button, .shipping_process_accordian .accordion-header button { margin-bottom: 5px; } .cartPaymentArea .payment_process_accordian { padding-top: 20px; max-width: 850px; } .cartPaymentArea .payment_process_accordian .accordion-button { background-color: var(--color-four); border-radius: 0px; border: 1px solid #e1e7ec; padding-block: 3px; width: 100% !important; } .cartPaymentArea .payment_process_accordian .accordion-button:not(.collapsed) { color: var(--secondry-color); box-shadow: none; } .cartPaymentArea .payment_process_accordian .accordion-button:focus { box-shadow: none; } .accordion-button::after { color: red !important; } .cartPaymentArea .accordion-body #company-po-block { display: none; } .cartPaymentArea .accordion-body #paypal-checkout-block { display: none; } .cartPaymentArea .accordion-body .creditCard-info .pyGatewaysLogos { text-align: right; padding-right: 15px; padding-left: 15px; height: 100%; display: flex; align-items: center; } .cartPaymentArea .accordion-body .creditCard-info .pyGatewaysLogos img { display: inline-block; } .cartPaymentArea .accordion-body .creditCard-info :is(.expiry-month, .expiry-year) { display: inline-block; width: 90px; } .cartPaymentArea .accordion-body .creditCard-info .exponLabel { margin-bottom: 5px; } .cartPaymentArea .accordion-body .creditCard-info .customselect_short { appearance: auto; outline: rgb(222, 222, 222) solid 1px; border-top: none; border-bottom: none; border-left: none; border-image: initial; border-right: 1rem solid transparent; width: 100px; border-right: 1rem solid transparent !important; } #paypal-card-form input{ height: 38px; border-color: #dedede; font-size: 13px; color: var(--mid-dark); margin-bottom: 25px !important; } /* Cart Payment Process End */ /* ############################################################## (Cart Page End) ################################################################ */ /*** ==================================================================== Business Section Two ==================================================================== ***/ .brand-section-two { position: relative; } .brand-section-two .outer-container { position: relative; } .brand-section-two .marque-box { position: relative; z-index: 1; padding: 100px 0px; -webkit-animation: marquee 32s linear infinite; animation: marquee 32s linear infinite; } .brand-section-two .marque-box div { position: relative; } .brand-section-two span { position: relative; font-weight: 400; line-height: 1em; padding: 10px 0px; margin: 0px 20px; display: inline-block; font-size: var(--font-120); color: var(--black-color); } .brand-section-two span a { position: relative; color: var(--black-color); } .brand-section-two i { position: relative; top: -20px; } .brand-section-two strong { font-weight: 400; color: var(--color-seven); background: linear-gradient( to left, var(--color-seven) 0%, var(--color-eight) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .brand-section-two.style-two span a { opacity: 0.1; } .brand-section-two.style-two strong { color: var(--black-color); background: none; -webkit-text-fill-color: inherit; } /*** ==================================================================== Services Section Four ==================================================================== ***/ .services-section-four { position: relative; padding: 70px 0px 100px; } .services-section-four .color-one { position: absolute; left: 5%; top: 10%; width: 10px; height: 10px; border-radius: 50%; background-color: var(--color-thirteen); } .services-section-four .color-two { position: absolute; left: 7%; top: 48%; width: 8px; height: 8px; border-radius: 50%; background-color: var(--main-color); } .services-section-four .owl-dots { display: none; } .services-section-four .owl-nav { position: absolute; left: -50px; top: 50%; right: -50px; margin-top: -22px; } .services-section-four .owl-nav .owl-prev { position: absolute; left: 0px; width: 46px; height: 45px; font-weight: 600; line-height: 46px; text-align: center; font-size: var(--font-18); font-family: "Flaticon"; color: var(--color-seven); border-radius: 50px 0px 50px 50px; background-color: var(--white-color); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); } .services-section-four .owl-nav .owl-next { position: absolute; right: 0px; width: 46px; height: 45px; font-weight: 600; line-height: 46px; text-align: center; font-size: var(--font-18); font-family: "Flaticon"; color: var(--color-seven); border-radius: 50px 0px 50px 50px; background-color: var(--white-color); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); font-family: "Flaticon"; } .services-section-four .owl-nav .owl-prev:hover, .services-section-four .owl-nav .owl-next:hover { color: var(--white-color); background: linear-gradient( to right, var(--color-seven) 0%, var(--color-eight) 100% ); } .services-section-four .inner-container { position: relative; } .services-section-four .inner-container:before { position: absolute; content: ""; top: 0px; width: 1px; bottom: 0px; left: 33.333%; opacity: 0.05; background-color: var(--black-color); } .services-section-four .inner-container:after { position: absolute; content: ""; top: 0px; width: 1px; bottom: 0px; right: 33.333%; opacity: 0.05; background-color: var(--black-color); } .service-block-four { position: relative; margin-bottom: var(--margin-bottom-30); } .service-block-four .inner-box { position: relative; text-align: center; } .service-block-four .image { position: relative; } .service-block-four .image img { position: relative; width: auto; margin: 0 auto; } .service-block-four .lower-content { position: relative; } .service-block-four h4 { font-weight: 500; display: inline-block; margin-top: var(--margin-top-15); } .service-block-four h4:before { position: absolute; content: ""; left: 0px; right: 0px; bottom: 2px; height: 4px; z-index: -1; background: url(../images/icons/vector-25.png) center center no-repeat; } .service-block-four h4 a { position: relative; color: var(--color-ten); } .service-block-four h4 a:hover { color: var(--main-color); } .service-block-four .text { position: relative; padding: 0px 50px; margin-top: var(--margin-top-15); } /*** ==================================================================== Faq Section Two ==================================================================== ***/ .faq-section-two { position: relative; padding: 0px 0px 70px; } .faq-section-two .small-circle { position: absolute; left: 8%; top: 22%; width: 12px; height: 12px; opacity: 0.4; border-radius: 50px; display: inline-block; border: 3px solid var(--main-color); } .faq-section-two .vector-layer-one { position: absolute; right: 0px; bottom: -100px; width: 566px; height: 790px; background-repeat: no-repeat; } .faq-section-two .vector-layer-two { position: absolute; left: 0px; top: 110px; width: 238px; height: 536px; background-repeat: no-repeat; } .faq-section-two .content-column { position: relative; margin-bottom: var(--margin-bottom-30); } .faq-section-two .content-column .inner-column { position: relative; } .faq-section-two .accordion-outer { position: relative; z-index: 1; padding: 60px 60px; border-radius: 5px; margin-right: -400px; background-color: var(--white-color); border: 1px solid rgba(var(--black-color-rgb), 0.06); } .faq-section-two .image-column { position: relative; margin-bottom: var(--margin-bottom-30); } .faq-section-two .image-column .inner-column { position: relative; } .faq-section-two .image { position: relative; border-radius: 15px; overflow: hidden; } .faq-section-two .image img { position: relative; width: 100%; display: block; } /*** ==================================================================== Project Section Two ==================================================================== ***/ .project-section-two { position: relative; padding: 0px 0px 40px; } .project-section-two .title-box { position: relative; margin-bottom: var(--margin-bottom-40); } .project-section-two .title-box h3 { font-weight: 500; color: var(--black-color); } .project-section-two .title-box .play-box { position: relative; font-weight: 500; font-size: var(--font-16); color: var(--black-color); } .project-section-two .title-box .play { position: relative; width: 60px; height: 60px; line-height: 58px; text-align: center; border-radius: 50px; display: inline-block; font-size: var(--font-20); color: var(--black-color); margin-right: var(--margin-right-25); border: 1px solid var(--black-color); } .project-section-two .title-box .play .ripple, .project-section-two .title-box .play .ripple:before, .project-section-two .title-box .play .ripple:after { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; border-radius: 50px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -o-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .project-section-two .title-box .play .ripple:before { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; } .project-section-two .title-box .play .ripple:after { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; } .project-section-two .title-box .play:hover { color: var(--white-color); border-color: var(--color-seven); background-color: var(--color-seven); } .project-section-two .title-box .counter { position: relative; font-weight: 700; left: -15px; letter-spacing: 10px; font-size: var(--font-95); color: var(--color-seven); } .project-section-two .title-box .odometer-digit:first-child { left: 12px; } .project-section-two .filter-tabs { position: relative; margin-bottom: var(--margin-bottom-30); } .project-section-two .filter-tabs li { position: relative; font-weight: 500; cursor: pointer; display: inline-block; margin: 0px 35px 15px; font-size: var(--font-18); } .project-section-two .filter-tabs li.active, .project-section-two .filter-tabs li:hover { color: var(--main-color); } .project-section-two .project-block { position: relative; min-width: 475px; margin: 0px 15px 30px; } .project_slide { -webkit-animation: marquee 32s linear infinite; animation: marquee 32s linear infinite; } .project_slide2 { -webkit-animation: marquee2 32s linear infinite; animation: marquee2 32s linear infinite; } .project-section-two .lower-box { position: relative; max-width: 1400px; margin: 0 auto; padding: 38px 70px; border-radius: 100px; margin-top: var(--margin-top-30); border: 1px solid rgba(var(--black-color-rgb), 0.1); } .project-section-two .lower-box .info-box { position: relative; } .project-section-two .lower-box .info-box:before { position: absolute; content: ""; left: 115%; top: 30px; height: 2px; width: 220px; background-color: var(--black-color); } .project-section-two .lower-box .info-box:last-child::before { display: none; } .project-section-two .lower-box .title { position: relative; font-weight: 500; font-size: var(--font-16); color: var(--color-nine); font-family: var(--font-family-Quicksand); } .project-section-two .lower-box h5 { font-weight: 500; color: var(--color-ten); margin-top: var(--margin-top-10); } .project-section-two .lower-box .play-box { position: relative; width: 60px; height: 60px; line-height: 58px; text-align: center; border-radius: 50px; display: inline-block; font-size: var(--font-20); color: var(--black-color); margin-right: var(--margin-right-30); border: 1px solid var(--black-color); } .project-section-two .lower-box .play-box .ripple, .project-section-two .lower-box .play-box .ripple:before, .project-section-two .lower-box .play-box .ripple:after { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; border-radius: 50px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -o-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .project-section-two .lower-box .play-box .ripple:before { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; } .project-section-two .lower-box .play-box .ripple:after { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; } .project-section-two .lower-box .play-box:hover { color: var(--white-color); border-color: var(--color-seven); background-color: var(--color-seven); } /*** ==================================================================== Price Section ==================================================================== ***/ .price-section { position: relative; padding: 80px 0px 70px; } .price-section.style-two { padding-top: var(--padding-top-110); } .price-section .pattern-layer { position: absolute; left: 0px; bottom: -450px; width: 701px; height: 1026px; background-repeat: no-repeat; } .price-section .title-column { position: relative; margin-bottom: var(--margin-bottom-30); } .price-section .title-column .inner-column { position: relative; } .price-section .title-column .text { max-width: 430px; color: var(--black-color); margin-bottom: var(--margin-bottom-35); } .price-section .play-box { position: relative; font-weight: 500; font-size: var(--font-16); color: var(--black-color); } .price-section .play { position: relative; width: 60px; height: 60px; line-height: 58px; text-align: center; border-radius: 50px; display: inline-block; font-size: var(--font-20); color: var(--black-color); margin-right: var(--margin-right-25); border: 1px solid var(--black-color); } .price-section .play .ripple, .price-section .play .ripple:before, .price-section .play .ripple:after { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; border-radius: 50px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -o-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .price-section .play .ripple:before { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; } .price-section .play .ripple:after { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; } .price-section .play:hover { color: var(--white-color); border-color: var(--color-seven); background-color: var(--color-seven); } .price-section .counter { position: relative; font-weight: 700; left: -15px; margin-top: -25px; letter-spacing: 10px; font-size: var(--font-95); color: var(--color-seven); } .price-section .odometer-digit:first-child { left: 12px; } .price-section .counter i { font-style: normal; font-weight: 400; margin-left: -20px; letter-spacing: 1px; font-size: var(--font-16); color: var(--color-twentytwo); } .price-section .pricing-column { position: relative; margin-bottom: var(--margin-bottom-30); } .price-section .pricing-column .inner-column { position: relative; } .price-section .pricing-column .text { max-width: 430px; color: var(--black-color); margin-bottom: var(--margin-bottom-35); } .pricing-tabs { position: relative; z-index: 2; } .pricing-tabs .tabs-content .tab { position: relative; display: none; } .pricing-tabs .tabs-content .tab.active-tab { display: block; } .pricing-tabs .buttons-outer { text-align: right; margin-top: -120px; margin-bottom: var(--margin-bottom-80); } .pricing-tabs .tab-buttons { position: relative; overflow: hidden; padding: 10px 10px; text-align: center; border-radius: 50px; display: inline-block; background-color: var(--color-twentythree); border: 1px solid rgba(var(--black-color-rgb), 0.15); } .pricing-tabs .tab-buttons .tab-btn { position: relative; font-weight: 600; float: left; cursor: pointer; padding: 10px 24px; border-radius: 50px; color: var(--black-color); font-size: var(--font-18); text-transform: uppercase; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; } .pricing-tabs .tab-buttons .tab-btn:first-child { margin-right: 1px; } .pricing-tabs .tab-buttons .tab-btn:hover, .pricing-tabs .tab-buttons .tab-btn.active-btn { color: var(--white-color); background: var(--color-seven); background: linear-gradient( to right, var(--color-seven) 0%, var(--color-eight) 100% ); } .pricing-tabs .tabs-content .tab .price-block { transform: rotateY(90deg); } .pricing-tabs .tabs-content .tab.active-tab .price-block { transform: rotateY(0deg); } .price-block { position: relative; margin-bottom: var(--margin-bottom-30); -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; } .price-block .inner-box { position: relative; padding: 40px 35px; border-radius: 10px; background-color: var(--color-twentythree); } .price-block .icon-box { position: absolute; right: 40px; top: 40px; } .price-block .price-title { position: relative; font-weight: 600; font-size: var(--font-28); text-transform: uppercase; font-family: var(--font-family-Hind); } .price-block .price { position: relative; font-weight: 600; line-height: 1em; font-size: var(--font-58); color: var(--black-color); margin-top: var(--margin-top-20); } .price-block .price span { position: relative; font-weight: 500; font-size: var(--font-22); color: var(--color-twentyfour); font-family: var(--font-family-Inter); } .price-block .sub-title { position: relative; font-weight: 400; font-size: var(--font-16); color: var(--black-color); margin-top: var(--margin-top-10); font-family: var(--font-family-Inter); } .price-block .price-list { position: relative; margin-top: var(--margin-top-30); } .price-block .price-list li { position: relative; font-size: var(--font-18); color: var(--color-twentyfive); padding-left: var(--padding-left-30); margin-bottom: var(--margin-bottom-25); } .price-block .price-list li:before { position: absolute; content: "\f183"; left: 0px; top: 0px; font-family: "flaticon"; font-size: var(--font-16); color: var(--color-twentysix); } .price-block .price-list li.cancel:before { content: "\f197"; font-size: var(--font-14); color: var(--color-twentyseven); } .price-block .price-list li:last-child { margin-bottom: var(--margin-zero); } .price-block .button-box { position: relative; margin-top: var(--margin-top-35); } .price-block .start-btn { position: relative; width: 100%; z-index: 1; display: block; font-weight: 500; padding: 16px 15px; text-align: center; border-radius: 3px; letter-spacing: 1px; font-size: var(--font-18); color: var(--white-color); text-transform: capitalize; background-color: var(--black-color); } .price-block .start-btn:before { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: -1; opacity: 0; border-radius: 3px; transform: scale(1, 0.3); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; background: var(--color-seven); background: linear-gradient( to right, var(--color-seven) 0%, var(--color-eight) 100% ); } .price-block .start-btn:hover::before { opacity: 1; transform: scale(1, 1); } .price-block .credit { position: relative; text-align: center; font-weight: 400; font-size: var(--font-16); color: var(--color-twentyeight); margin-top: var(--margin-top-25); font-family: var(--font-family-Inter); } /*** ==================================================================== CTA Section ==================================================================== ***/ .cta-section { position: relative; z-index: 1; } .cta-section .inner-container { position: relative; border-radius: 6px; text-align: center; padding: 60px 15px 0px; } .cta-section .inner-container:before { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; bottom: 32px; border-radius: 6px; background: var(--color-seven); background: linear-gradient( to right, var(--color-seven) 0%, var(--color-eight) 100% ); } .cta-section h2 { z-index: 1; font-weight: 600; font-size: var(--font-42); color: var(--white-color); } .cta-section h2 span { position: relative; } .cta-section h2 span:before { position: absolute; content: ""; left: 0px; right: 0px; bottom: 5px; height: 4px; z-index: -1; background: url(../images/icons/vector-25.png) center center no-repeat; } .cta-section .text { font-weight: 500; font-size: var(--font-20); color: var(--black-color); margin-top: var(--margin-top-15); } .cta-section .counter-boxed { position: relative; max-width: 500px; margin: 0 auto; text-align: left; margin-top: var(--margin-top-30); } .cta-section .counter-boxed .counter { position: relative; font-weight: 600; letter-spacing: 2px; font-size: var(--font-24); color: var(--white-color); } .cta-section .counter-boxed .counter .odometer { top: -2px; } .cta-section .counter-boxed .counter-text { position: relative; font-weight: 400; font-size: var(--font-16); color: var(--white-color); margin-top: var(--margin-top-5); font-family: var(--font-family-Inter); } .cta-section .counter-boxed .counter:before { position: absolute; content: ""; right: 5px; top: 15px; width: 1px; height: 25px; opacity: 0.3; background-color: var(--white-color); } .cta-section .counter-boxed .counter-block:last-child .counter::before { display: none; } .cta-section .button-box { position: relative; margin-top: var(--margin-top-40); } .cta-section .start-btn { position: relative; padding: 20px 30px; font-weight: 500; border-radius: 50px; display: inline-block; font-size: var(--font-15); color: var(--white-color); background-color: var(--black-color); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .cta-section .start-btn i { position: relative; top: 3px; font-style: normal; font-family: "Flaticon"; margin-left: var(--margin-left-10); } .cta-section .start-btn:hover { background-color: var(--color-eight); } .cta-section .icon-one { position: absolute; left: 15px; top: 15px; } .cta-section .icon-two { position: absolute; right: 20px; bottom: 55px; } .cta-section.style-two .inner-container { padding-bottom: var(--padding-bottom-45); } .cta-section.style-two .inner-container:before { bottom: 0px; } .cta-section.style-two .counter-boxed { max-width: 1200px; text-align: center; } .cta-section.style-two .counter-boxed .counter { font-size: var(--font-85); } .cta-section.style-two .counter-boxed .counter:before { display: none; } .cta-section.style-two .counter-boxed .counter-text { top: -10px; font-weight: 500; color: var(--black-color); margin-top: var(--margin-zero); } .cta-section.style-two .counter-boxed .counter .odometer { top: -10px; } .cta-section.style-two .icon-two { top: 30px; right: 50px; bottom: auto; } /* Banner Section */ .banner-section { position: relative; padding-top: var(--padding-top-60); } .banner-section .auto-container { position: relative; } .banner-section .color-one { position: absolute; left: 10%; top: 35%; width: 10px; height: 10px; border-radius: 50%; background-color: var(--color-thirtythree); } .banner-section .color-two { position: absolute; left: 3%; bottom: 20%; width: 12px; height: 12px; z-index: 11; border-radius: 50%; background-color: var(--color-thirtyfour); } .banner-section .pattern-layer { position: absolute; right: 10%; top: 10%; width: 14px; height: 13px; background-repeat: no-repeat; } .banner-section .pattern-layer-two { position: absolute; right: 2%; top: 25%; width: 66px; height: 62px; background-repeat: no-repeat; } .banner-section .pattern-layer-three { position: absolute; left: -300px; z-index: 11; bottom: -80px; width: 664px; height: 589px; background-repeat: no-repeat; } .banner-section .pattern-layer-four { position: absolute; right: 5%; z-index: 11; bottom: 25%; width: 21px; height: 20px; background-repeat: no-repeat; } .banner-section .title-box { position: relative; } .banner-section .title-box .play-box { position: relative; font-weight: 500; font-size: var(--font-16); color: var(--black-color); } .banner-section .title-box .play { position: relative; width: 60px; height: 60px; line-height: 58px; text-align: center; border-radius: 50px; display: inline-block; font-size: var(--font-20); color: var(--black-color); margin-right: var(--margin-right-25); border: 1px solid var(--black-color); } .banner-section .title-box .play .ripple, .banner-section .title-box .play .ripple:before, .banner-section .title-box .play .ripple:after { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; border-radius: 50px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -o-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .banner-section .title-box .play .ripple:before { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; } .banner-section .title-box .play .ripple:after { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; } .banner-section .title-box .play:hover { color: var(--white-color); border-color: var(--color-seven); background-color: var(--color-seven); } .banner-section .title-box .right-box { position: relative; max-width: 500px; width: 100%; } .banner-section .title-box .side-text { position: absolute; right: 0px; top: 30px; font-weight: 500; font-size: var(--font-18); color: var(--black-color); } .banner-section .title-box .skills { padding-right: var(--padding-right-180); } /* Skills Section */ .skills .skill-item { position: relative; margin-bottom: var(--margin-bottom-50); } .skills .skill-item:last-child { margin-bottom: var(--margin-zero); } .skills .skill-item .skill-bar { position: relative; width: 100%; height: 10px; border-radius: 50px; background-color: rgba(var(--black-color-rgb), 0.05); } .skills .skill-item .skill-bar .bar-inner { position: relative; width: 100%; height: 10px; } .skills.style-two .skill-item .skill-bar .bar-inner { background-color: #eeeeee; } .skills .skill-item .skill-bar .bar-inner .bar { position: absolute; left: 0px; top: 0px; width: 0px; height: 10px; border-radius: 50px; background: var(--color-seven); background: linear-gradient( to right, var(--color-seven) 0%, var(--color-eight) 100% ); -webkit-transition: all 2000ms ease; -ms-transition: all 2000ms ease; -o-transition: all 2000ms ease; -moz-transition: all 2000ms ease; transition: all 2000ms ease; } .skills .skill-item .skill-header { position: relative; margin-bottom: 12px; } .skills .skill-item .skill-header .skill-title { float: left; color: #222222; font-weight: 500; line-height: 1.4em; font-size: var(--font-18); text-transform: capitalize; } .skills .skill-item .skill-percentage { position: absolute; right: 0px; top: -35px; font-weight: 600; display: inline-block; font-size: var(--font-18); color: var(--black-color); } .banner-section .title-box .options-list { position: relative; margin-top: var(--margin-top-25); } .banner-section .title-box .options-list li { position: relative; color: var(--color-twelve); font-size: var(--font-15); padding-left: var(--padding-left-30); margin-bottom: var(--margin-bottom-10); } .banner-section .title-box .options-list li:before { position: absolute; content: "\f1a3"; left: 0px; font-weight: 800; color: var(--main-color); font-family: "Flaticon"; } /* Carousel Box */ .banner-section .carousel-box { position: relative; } .banner-section .carousel-box .owl-dots, .banner-section .carousel-box .owl-nav { display: none; } .banner-section .carousel-box:before { position: absolute; content: ""; right: 100%; top: 0px; bottom: -2px; width: 200%; z-index: 10; background-color: var(--white-color); } .banner-section .owl-carousel .owl-stage-outer { overflow: visible; } .banner-section .carousel-box .image { position: relative; overflow: hidden; z-index: 99; background-color: var(--main-color); } .banner-section .carousel-box .image img { position: relative; width: 100%; display: block; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .banner-section .carousel-box .image:hover img { opacity: 0.7; transform: scale(1.05, 1.05) rotate(2deg); } .banner-section .carousel-box .content { position: absolute; left: 20px; bottom: 20px; right: 50px; opacity: 0; padding: 20px 25px; border-radius: 4px; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; background-color: var(--white-color); transform: scale(1, 0.3); } .banner-section .carousel-box .image:hover .content { opacity: 1; transform: scale(1, 1); } .banner-section .carousel-box h6 { z-index: 1; } .banner-section .carousel-box h6 a { color: var(--color-ten); } .banner-section .carousel-box h6:before { position: absolute; content: ""; left: 0px; right: 0px; bottom: 4px; height: 5px; z-index: -1; opacity: 0; background: url(../images/icons/vector-6.png) no-repeat; } .banner-section .carousel-box h6:hover::before { opacity: 1; } .banner-section .carousel-box .arrow { position: absolute; right: 12px; top: 13px; width: 45px; height: 45px; line-height: 44px; text-align: center; font-size: var(--font-20); font-family: "Flaticon"; border-radius: 50px 0px 50px 50px; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; color: var(--white-color); background: linear-gradient( to left, var(--color-seven) 0%, var(--color-eight) 100% ); } /* Social Box */ .banner-section .social-box { position: absolute; left: 80px; top: 65px; z-index: 20; width: 30px; writing-mode: vertical-rl; transform: rotate(180deg); } .banner-section .social-box li { position: relative; display: inline-block; margin-top: var(--margin-top-20); } .banner-section .social-box li a { position: relative; font-weight: 500; letter-spacing: 1px; font-size: var(--font-17); color: var(--black-color); font-family: var(--font-family-Outfit); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section .social-box li a:hover { color: var(--main-color); text-decoration: underline; } /* Mail Box */ .banner-section .email-box { position: absolute; left: 80px; top: 35%; z-index: 20; display: inline-block; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); } .banner-section .email-box a { position: relative; font-weight: 500; letter-spacing: 1px; font-size: var(--font-17); color: var(--black-color); font-family: var(--font-family-Outfit); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section .email-box a:hover { color: var(--main-color); } .banner-section .scroll-box { position: absolute; left: 80px; bottom: 35%; z-index: 20; cursor: pointer; font-weight: 500; letter-spacing: 1px; font-size: var(--font-17); color: var(--black-color); writing-mode: vertical-rl; transform: rotate(180deg); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; padding-top: var(--padding-top-80); } .banner-section .scroll-box:before { position: absolute; content: ""; left: 11px; top: 0px; width: 1px; height: 60px; background-color: var(--black-color); } .banner-section .scroll-box:after { position: absolute; content: ""; left: 7px; top: 0px; width: 9px; height: 9px; border-radius: 50px; display: inline-block; background-color: var(--black-color); } .banner-section .scroll-box:hover { color: var(--main-color); } .banner-section .lower-box { position: relative; } .banner-section .lower-box .text { position: relative; font-size: var(--font-16); color: var(--black-color); } .banner-section .lower-box .icon-box { position: relative; margin-left: -90px; margin-top: var(--margin-top-80); } .banner-section .lower-box .info-box { position: relative; } .banner-section .lower-box .title { position: relative; font-weight: 500; font-size: var(--font-16); color: var(--color-nine); font-family: var(--font-family-Quicksand); } .banner-section .lower-box h5 { font-weight: 500; color: var(--color-ten); margin-top: var(--margin-top-10); } /*** ==================================================================== Business Section Three ==================================================================== ***/ .business-section-three { position: relative; z-index: 12; padding: 80px 0px 60px; } .business-section-three .pattern-layer-one { position: absolute; right: 5%; top: 40%; width: 21px; height: 20px; background-repeat: no-repeat; } .business-section-three .title-column { position: relative; margin-bottom: var(--margin-bottom-30); } .business-section-three .title-column .inner-column { position: relative; } .business-section-three .blocks-column { position: relative; margin-bottom: var(--margin-bottom-30); } .business-section-three .blocks-column .inner-column { position: relative; overflow: hidden; border: 1px solid rgba(var(--black-color-rgb), 0.05); } .service-block-five { position: relative; margin-bottom: var(--margin-bottom-30); } .service-block-five .inner-box:before { position: absolute; content: ""; right: 0px; top: 0px; width: 1px; bottom: -50px; opacity: 0.05; background-color: var(--black-color); } .service-block-five .inner-box { position: relative; text-align: center; padding: 50px 20px 10px; } .service-block-five .arrow { position: absolute; right: -20px; top: 125px; width: 33px; height: 50px; z-index: 1; line-height: 48px; font-family: "flaticon"; font-size: var(--font-12); color: var(--color-twentyone); } .service-block-five .arrow:after { position: absolute; content: ""; right: 0px; top: 0px; z-index: -1; width: 33px; height: 50px; border-radius: 50px; transform: rotate(45deg); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; background-color: var(--white-color); border: 1px solid rgba(var(--black-color-rgb), 0.1); } .service-block-five:last-child .inner-box:before { display: none; } .service-block-five .inner-box:hover .arrow { color: var(--white-color); } .service-block-five .inner-box:hover .arrow:after { border-color: var(--main-color); background-color: var(--main-color); } .service-block-five:last-child .arrow { display: none; } .service-block-five .icon-box { position: relative; width: 64px; height: 64px; margin: 0 auto; line-height: 64px; border-radius: 50px; font-family: "Flaticon"; font-size: var(--font-24); color: var(--white-color); background-color: var(--color-thirtyfive); } .service-block-five .inner-box:hover .icon { -webkit-transform: scale(-1) rotate(180deg); -moz-transform: scale(-1) rotate(180deg); -ms-transform: scale(-1) rotate(180deg); -o-transform: scale(-1) rotate(180deg); transform: scale(-1) rotate(180deg); } .service-block-five:nth-child(2) .icon-box { background-color: var(--color-thirtysix); } .service-block-five:nth-child(3) .icon-box { background-color: var(--color-thirtyseven); } .service-block-five h5 { font-weight: 500; margin-top: var(--margin-top-25); } .service-block-five h5 a { color: var(--color-ten); } .service-block-five h5 a:hover { color: var(--color-seven); } .service-block-five .text { margin-top: var(--margin-top-15); } /*** ==================================================================== Project Section Three ==================================================================== ***/ .project-section-three { position: relative; overflow: hidden; padding: 0px 0px 40px; } .project-section-three .owl-dots, .project-section-three .owl-nav { display: none; } .project-section-three .owl-carousel .owl-stage-outer { overflow: visible; } .project-section-three .owl-carousel .owl-stage-outer:before { position: absolute; content: ""; right: 100%; top: 0px; bottom: 0px; width: 200%; z-index: 10; background-color: var(--white-color); } .project-section-three .color-two { position: absolute; left: 30%; top: 0%; width: 12px; height: 12px; z-index: 11; border-radius: 50%; background-color: var(--color-thirtyfour); } .project-section-three .pattern-layer-one { position: absolute; left: 15%; top: 25px; width: 837px; height: 790px; background-repeat: no-repeat; } .project-section-three .title-box { position: relative; margin-bottom: var(--margin-bottom-40); } .project-section-three .title-box .play-box { position: relative; font-weight: 500; font-size: var(--font-16); color: var(--black-color); } .project-section-three .title-box .play { position: relative; width: 60px; height: 60px; line-height: 58px; text-align: center; border-radius: 50px; display: inline-block; font-size: var(--font-20); color: var(--black-color); margin-right: var(--margin-right-25); border: 1px solid var(--black-color); } .project-section-three .title-box .play .ripple, .project-section-three .title-box .play .ripple:before, .project-section-three .title-box .play .ripple:after { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; border-radius: 50px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -o-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .project-section-three .title-box .play .ripple:before { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; } .project-section-three .title-box .play .ripple:after { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; } .project-section-three .title-box .play:hover { color: var(--white-color); border-color: var(--color-thirtyeight); background-color: var(--color-thirtyeight); } .project-section .button-box { position: relative; } .project-section .button-box input[type="email"] { border: 1px solid rgba(var(--black-color-rgb), 0.1); display: inline-block; font-size: var(--font-14); width: 100%; padding-left: 10px; transition: all 0.3s ease-in-out; padding-block: 10px; margin-bottom: 10px; margin-top: 10px; color: var(--color-nine); } .project-section .button-box input[type="email"]:focus { border: 1px solid rgba(var(--black-color-rgb), 0.3); } .project-section .button-box button[type="submit"] { background-color: transparent; } .project-section .button-box button[type="submit"] a { padding-block: 0px; padding-block: 10px; } .project-section .button-box a .flaticon-right-arrow { display: none; } .project-block-two { position: relative; margin-bottom: var(--margin-bottom-30); } .project-block-two .inner-box { position: relative; } .project-block-two .image { position: relative; overflow: hidden; background-color: var(--main-color); } .project-block-two .image img { position: relative; width: 100%; display: block; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .project-block-two .inner-box:hover .image img { opacity: 0.7; transform: scale(1.05, 1.05) rotate(2deg); } .project-block-two .post-number { position: absolute; right: 15px; top: 15px; width: 55px; height: 55px; z-index: 1; font-weight: 500; line-height: 55px; text-align: center; font-size: var(--font-18); } .project-block-two .post-number:before { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: -1; border-radius: 50px 0px 50px 50px; background-color: var(--white-color); } .project-block-two .content { position: absolute; left: 20px; bottom: 20px; right: 50px; padding: 20px 25px; border-radius: 4px; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; background-color: var(--white-color); } .project-block-two h6 { z-index: 1; } .project-block-two h6 a { color: var(--color-ten); } .project-block-two h6:before { position: absolute; content: ""; left: 0px; right: 0px; bottom: 4px; height: 5px; z-index: -1; opacity: 0; background: url(../images/icons/vector-6.png) no-repeat; } .project-block-two h6:hover::before { opacity: 1; } .project-block-two .arrow { position: absolute; right: 12px; top: 13px; width: 45px; height: 45px; line-height: 44px; text-align: center; font-size: var(--font-20); font-family: "Flaticon"; color: var(--color-ten); border-radius: 50px 0px 50px 50px; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .project-block-two .inner-box:hover .arrow { color: var(--white-color); background-color: var(--color-five); } /*** ==================================================================== Services Section Five ==================================================================== ***/ .services-section-five { position: relative; padding: 50px 0px 100px; } .services-section-five .title-box { position: relative; font-weight: 500; line-height: 1.2em; text-align: center; font-size: var(--font-110); margin-bottom: var(--margin-bottom-70); font-family: var(--font-family-Poppins); } .services-section-five .title-box span { color: var(--color-fourteen); } .services-section-five .title-box i { position: relative; font-style: normal; font-size: var(--font-122); color: var(--color-fourteen); font-family: var(--font-family-Montaga); } .services-section-five .circle-one { position: absolute; right: -5%; bottom: 12%; width: 8px; height: 8px; opacity: 0.8; border-radius: 50px; background-color: var(--main-color); } .services-section-five .circle-two { position: absolute; left: 5%; bottom: 46%; width: 8px; height: 8px; border-radius: 50px; background-color: var(--color-sixteen); } .services-section-five .vector-icon-one { position: absolute; left: -120px; top: -50px; width: 285px; height: 288px; background-repeat: no-repeat; } .services-section-five .vector-icon-two { position: absolute; right: -120px; top: -50px; width: 285px; height: 288px; background-repeat: no-repeat; } /* Service Block Six */ .service-block-six { position: relative; margin-bottom: var(--margin-bottom-30); } .service-block-six .inner-box { position: relative; padding-right: var(--padding-right-80); } .service-block-six .inner-box:before { position: absolute; content: ""; right: 30px; top: 0px; bottom: 0px; width: 1px; opacity: 0.1; background-color: var(--black-color); } .service-block-six:last-child .inner-box:before { display: none; } .service-block-six .icon-box { position: relative; display: inline-block; } .service-block-six .icon-box:before { position: absolute; content: ""; left: 42px; top: 30px; width: 25px; height: 25px; border-radius: 50px; display: inline-block; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; background-color: var(--color-fifteen); } .service-block-six .inner-box:hover .icon-box:before { opacity: 0.4; background-color: var(--color-seven); } .service-block-six .icon { position: relative; line-height: 1em; display: inline-block; color: var(--color-seven); font-family: "Flaticon"; font-size: var(--font-54); background: linear-gradient( to left, var(--color-seven) 0%, var(--color-eight) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .service-block-six .inner-box:hover .icon { -webkit-transform: scale(-1) rotate(180deg); -moz-transform: scale(-1) rotate(180deg); -ms-transform: scale(-1) rotate(180deg); -o-transform: scale(-1) rotate(180deg); transform: scale(-1) rotate(180deg); } .service-block-six h5 { font-weight: 500; margin-top: var(--margin-top-20); } .service-block-six h5 a { color: var(--color-ten); } .service-block-six h5 a:hover { color: var(--color-seven); } .service-block-six .text { margin-top: var(--margin-top-15); } /*** ==================================================================== Project Section Four ==================================================================== ***/ .project-section-four { position: relative; } .project-section-four .pattern-layer-one { position: absolute; left: 18%; top: 0px; width: 837px; height: 790px; background-repeat: no-repeat; } .project-section-four .play-box { position: relative; font-weight: 500; font-size: var(--font-16); color: var(--black-color); } .project-section-four .play-box .play { position: relative; width: 60px; height: 60px; line-height: 58px; text-align: center; border-radius: 50px; display: inline-block; font-size: var(--font-20); color: var(--black-color); margin-right: var(--margin-right-25); border: 1px solid var(--black-color); } .project-section-four .play-box .play .ripple, .project-section-four .play-box .play .ripple:before, .project-section-four .play-box .play .ripple:after { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; border-radius: 50px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -o-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .project-section-four .play-box .play .ripple:before { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; } .project-section-four .play-box .play .ripple:after { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; } .project-section-four .play-box .play:hover { color: var(--white-color); border-color: var(--color-thirtyeight); background-color: var(--color-thirtyeight); } .project-section-four .filter-btns { position: relative; text-align: center; margin-bottom: var(--margin-bottom-35); } .project-section-four .filter-btns li { position: relative; font-weight: 500; cursor: pointer; margin: 0px 30px 15px; display: inline-block; font-size: var(--font-16); color: var(--black-color); } .project-section-four .filter-btns li.active, .project-section-four .filter-btns li:hover { color: var(--main-color); } .project-section-four .link-box { position: relative; } .project-section-four .link-box a { position: relative; font-weight: 500; font-size: var(--font-16); color: var(--black-color); } .project-section-four .link-box a span { position: relative; top: 3px; font-family: "Flaticon"; margin-left: var(--margin-left-5); } .project-section-four .link-box a:hover { color: var(--main-color); } /*** ==================================================================== Faq Section Three ==================================================================== ***/ .faq-section-three { position: relative; padding: 100px 0px 60px; } .faq-section-three .title-column { position: relative; margin-bottom: var(--margin-bottom-30); } .faq-section-three .title-column .inner-column { position: relative; } .faq-section-three .counter { position: relative; font-weight: 700; left: -15px; margin-top: -25px; letter-spacing: 10px; font-size: var(--font-95); color: var(--color-seven); } .faq-section-three .odometer-digit:first-child { left: 12px; } .faq-section-three .counter i { font-style: normal; font-weight: 400; margin-left: -20px; letter-spacing: 1px; font-size: var(--font-16); color: var(--color-twentytwo); } .faq-section-three .title-column .text { font-size: var(--font-16); color: var(--black-color); } .faq-section-three .play-box { position: relative; font-weight: 500; font-size: var(--font-16); color: var(--black-color); margin-top: var(--margin-top-40); } .faq-section-three .play { position: relative; width: 60px; height: 60px; line-height: 58px; text-align: center; border-radius: 50px; display: inline-block; font-size: var(--font-20); color: var(--black-color); margin-right: var(--margin-right-25); border: 1px solid var(--black-color); } .faq-section-three .play .ripple, .faq-section-three .play .ripple:before, .faq-section-three .play .ripple:after { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; border-radius: 50px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -o-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .faq-section-three .play .ripple:before { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; } .faq-section-three .play .ripple:after { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; } .faq-section-three .play:hover { color: var(--white-color); border-color: var(--color-seven); background-color: var(--color-seven); } .faq-section-three .accordian-column { position: relative; margin-bottom: var(--margin-bottom-30); } .faq-section-three .accordian-column .inner-column { position: relative; padding: 40px 40px; border-radius: 5px; margin-left: var(--margin-left-50); border: 1px solid rgba(var(--black-color-rgb), 0.1); } .faq-section-three .accordion-box.style-two .block:last-child .acc-btn { border-bottom: none; padding-bottom: var(--padding-zero); } /*** ==================================================================== Featured Section ==================================================================== ***/ .featured-section { position: relative; padding: 120px 0px 80px; } .featured-section .pattern-layer-one { position: absolute; left: 0px; top: -200px; right: 0px; height: 817px; background-position: center top; background-repeat: repeat-x; } .featured-section .pattern-layer-two { position: absolute; right: 0px; bottom: 65px; width: 645px; height: 692px; background-position: center top; background-repeat: repeat-x; } .feature-block-two { position: relative; margin-bottom: var(--margin-bottom-30); } .feature-block-two .inner-box { position: relative; } .feature-block-two .image { position: relative; overflow: hidden; background-color: var(--color-fourtyone); } .feature-block-two .image img { position: relative; width: 100%; display: block; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .feature-block-two .inner-box:hover .image img { opacity: 0.8; } .feature-block-two .image:before { position: absolute; content: ""; left: -100%; top: 0px; width: 50%; bottom: 0px; z-index: 1; transform: skewX(-10deg); background-color: var(--white-color); -webkit-transition: all 900ms ease; -moz-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; transition: all 900ms ease; } .feature-block-two .inner-box:hover .image:before { left: 150%; } .feature-block-two .tag { position: absolute; left: 15px; top: 15px; z-index: 1; font-weight: 500; padding: 3px 18px; border-radius: 4px; letter-spacing: 1px; display: inline-block; color: var(--white-color); text-transform: uppercase; font-size: var(--font-12); background-color: var(--color-fourtyone); } .feature-block-two .sale { position: absolute; right: 15px; top: 15px; z-index: 1; font-weight: 500; padding: 3px 18px; border-radius: 4px; letter-spacing: 1px; display: inline-block; color: var(--white-color); text-transform: uppercase; font-size: var(--font-12); background-color: var(--color-fourtytwo); } .feature-block-two .lower-content { position: relative; padding: 25px 25px; border: 1px solid rgba(var(--black-color-rgb), 0.05); border-top: none; background-color: var(--white-color); } .feature-block-two h6 { font-weight: 500; } .feature-block-two h6 a { position: relative; color: var(--color-thirtynine); } .feature-block-two h6 a:hover { color: var(--color-five); } .feature-block-two .rating { position: relative; padding: 15px 0px; font-size: var(--font-14); color: var(--color-fourty); margin-top: var(--margin-top-15); font-family: var(--font-family-Rubik); border-top: 1px solid rgba(var(--black-color-rgb), 0.05); border-bottom: 1px solid rgba(var(--black-color-rgb), 0.05); } .feature-block-two .rating .fa { position: relative; color: var(--color-eight); } .feature-block-two .rating .fa.light { opacity: 0.2; color: var(--black-color); } .feature-block-two .price { position: relative; font-weight: 500; font-size: var(--font-15); color: var(--color-five); margin-top: var(--margin-top-15); } .feature-block-two .price span { position: relative; color: var(--color-fourty); } /*** ==================================================================== Team Section ==================================================================== ***/ .team-section { position: relative; overflow: hidden; padding: 100px 0px 70px; background-color: var(--color-fourtythree); } .team-section .color-one { position: absolute; left: 5%; top: 19%; width: 10px; height: 10px; z-index: 12; border-radius: 50px; background-color: var(--color-fourtysix); } .team-section .color-two { position: absolute; left: 32%; top: 85%; width: 10px; height: 10px; z-index: 12; border-radius: 50px; background-color: var(--color-fourtysix); } .team-section .icon-layer-one { position: absolute; left: 0px; top: 50%; width: 122px; height: 127px; z-index: 12; background-repeat: no-repeat; } .team-section .title-column { position: relative; z-index: 11; margin-bottom: var(--margin-bottom-30); } .team-section .title-column .inner-column { position: relative; } .team-section .team-list { position: relative; margin-left: var(--margin-left-15); } .team-section .team-list li { position: relative; margin-left: -15px; width: 43px; height: 43px; overflow: hidden; border-radius: 50%; display: inline-block; border: 3px solid var(--white-color); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .team-section .team-list:hover li { margin-left: 0px; } .team-section .members { position: relative; font-weight: 500; font-size: var(--font-18); color: var(--color-fourtyfour); margin-left: var(--margin-left-25); } .team-section .members span { position: relative; top: 3px; font-family: "Flaticon"; margin-left: var(--margin-left-10); } .team-section .owl-dots, .team-section .owl-nav { display: none; } /* Team Block */ .team-block { position: relative; } .team-block .inner-box { position: relative; } .team-block .image { position: relative; overflow: hidden; } .team-block .image img { position: relative; width: 100%; display: block; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .team-block .inner-box:hover .image img { filter: grayscale(100%); transform: scale(1.05, 1.05); } .team-block .social-box { position: absolute; right: 20px; top: 20px; z-index: 2; bottom: 20px; overflow: hidden; border-radius: 50px; } .team-block .social-box .share-icon { position: relative; width: 40px; height: 40px; z-index: 2; line-height: 40px; border-radius: 50%; text-align: center; display: inline-block; font-size: var(--font-16); color: var(--black-color); font-family: "Flaticon"; background-color: var(--white-color); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .team-block .inner-box:hover .share-icon { transform: rotate(45deg); } .team-block .social-list { position: absolute; left: 0px; top: -100%; width: 40px; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .team-block .inner-box:hover .social-list { top: 50px; } .team-block .social-list a { position: relative; width: 40px; height: 40px; text-align: center; line-height: 40px; border-radius: 50px; display: inline-block; font-size: var(--font-16); color: var(--black-color); background-color: var(--white-color); margin-bottom: var(--margin-bottom-10); } .team-block .social-list a.youtube { color: #ff0000; } .team-block .social-list a.twitter { color: #1da1f2; } .team-block .social-list a.facebook { color: #4267b2; } .team-block .social-list a.instagram { color: #e73a67; } .team-block .overlay-box { position: absolute; left: 30px; right: 30px; z-index: 1; bottom: 0px; padding: 18px 15px 15px; border-radius: 5px; text-align: center; background-color: var(--white-color); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .team-block .inner-box:hover .overlay-box { bottom: 25px; } .team-block .overlay-box:before { position: absolute; content: ""; left: 50%; top: -13px; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; transform: translateX(-50%); border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid var(--white-color); } .team-block .inner-box:hover .overlay-box:before { border-bottom-color: var(--color-seven); -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -ms-transition-delay: 300ms; -o-transition-delay: 300ms; transition-delay: 300ms; } .team-block .gradient-layer { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; opacity: 0; border-radius: 5px; transform: scale(1, 0.4); color: var(--color-seven); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; background: linear-gradient( to left, var(--color-seven) 0%, var(--color-eight) 100% ); } .team-block .inner-box:hover .gradient-layer { opacity: 1; transform: scale(1, 1); } .team-block .category { position: relative; font-weight: 500; font-size: var(--font-14); text-transform: uppercase; color: var(--color-fourtyfive); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .team-block h6 { font-weight: 600; margin-top: var(--margin-top-5); } .team-block h6 a { color: var(--color-fourtyfive); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .team-block .inner-box:hover h6 a, .team-block .inner-box:hover .category { color: var(--white-color); } .team-block .icon-one { position: absolute; left: 15px; bottom: 15px; width: 15px; height: 16px; background-repeat: no-repeat; } .team-block .icon-two { position: absolute; right: 15px; bottom: 15px; width: 23px; height: 22px; background-repeat: no-repeat; } .team-section .team-column { position: relative; margin-bottom: var(--margin-bottom-30); } .team-section .team-column .inner-column { position: relative; padding: 15px 0px 15px 15px; background-color: var(--white-color); } .team-section .team-column .owl-carousel .owl-stage-outer { overflow: visible; } .team-section .team-column .inner-column:before { position: absolute; content: ""; left: 0px; top: 0px; bottom: 0px; width: 300%; background-color: var(--white-color); } .team-section .team-column .grey-color-layer { position: absolute; right: 99.9%; top: -50px; bottom: -50px; width: 300%; z-index: 2; background-color: var(--color-fourtythree); } /*** ==================================================================== Blog Section ==================================================================== ***/ .blog-section { position: relative; padding: 100px 0px 120px; } .blog-section .button-box { position: relative; margin-top: var(--margin-top-30); } .blog-section .button-box .theme-btn { border-radius: 50px; } .news-block { position: relative; margin-bottom: var(--margin-bottom-30); } .news-block .inner-box { position: relative; padding: 0px 30px; border-left: 1px dashed rgba(var(--black-color-rgb), 0.1); border-right: 1px dashed rgba(var(--black-color-rgb), 0.1); } .news-block .image { position: relative; overflow: hidden; border-radius: 10px; background-color: var(--color-fourtyseven); } .news-block .image img { position: relative; width: 100%; display: block; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .news-block .inner-box:hover .image img { opacity: 0.7; transform: scale(1.05, 1.05); } .news-block .lower-content { position: relative; padding-top: var(--padding-top-30); } .news-block h5 { } .news-block h5 a { position: relative; color: var(--color-fourtyseven); } .news-block h5 a:hover { color: var(--main-color); } .news-block .read-more { position: relative; font-weight: 500; display: inline-block; font-size: var(--font-16); color: var(--black-color); margin-top: var(--margin-top-15); } .news-block .read-more span { position: relative; top: 3px; font-family: "Flaticon"; margin-left: var(--margin-left-5); } .news-block .read-more:hover { color: var(--main-color); } /*** ==================================================================== CTA Section Two ==================================================================== ***/ .cta-section-two { position: relative; z-index: 1; } .cta-section-two .inner-container { position: relative; border-radius: 6px; padding: 60px 20px 60px 160px; } .cta-section-two .inner-container:before { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; bottom: 0px; border-radius: 6px; background: var(--color-seven); background: linear-gradient( to right, var(--color-seven) 0%, var(--color-eight) 100% ); } .cta-section-two .side-icon { position: absolute; left: -100px; top: -140px; } .cta-section-two h3 { z-index: 1; font-weight: 600; font-size: var(--font-32); color: var(--black-color); text-transform: uppercase; } .cta-section-two .text { font-weight: 400; font-size: var(--font-18); color: var(--white-color); margin-top: var(--margin-top-10); } /* Subscribe Box Two */ .subscribe-box-two { position: relative; margin-top: var(--margin-top-10); padding-left: var(--padding-left-80); } .subscribe-box-two .icon { position: absolute; left: 20px; top: 22px; z-index: 1; line-height: 1em; font-size: var(--font-18); font-family: "Flaticon"; color: var(--color-fourtyeight); } .subscribe-box-two .form-group { position: relative; margin: 0px; width: 100%; max-width: 100%; padding-right: var(--padding-right-160); } .subscribe-box-two .form-group input[type="text"], .subscribe-box-two .form-group input[type="email"] { position: relative; line-height: 43px; display: block; height: 60px; width: 100%; border-radius: 0px; box-shadow: inherit; font-size: var(--font-16); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; padding: 10px 15px 10px 55px; color: var(--color-fourtyeight); background-color: rgba(var(--white-color-rgb), 1); } .subscribe-box-two .form-group input::placeholder, .subscribe-box-two .form-group textarea::placeholder { color: var(--color-fourtyeight); } .subscribe-box-two .form-group button { position: absolute; right: 0px; top: 0px; font-weight: 500; padding: 19px 42px 20px; font-size: var(--font-18); color: var(--white-color); text-transform: capitalize; background-color: var(--black-color); } /*** ==================================================================== Page Title ==================================================================== ***/ .page-title { position: relative; z-index: 1; text-align: center; background-size: cover; padding: 50px 0px; background-color: var(--color-fourtynine); } .page-title h1 span { position: relative; z-index: 1; } .page-title h1 span:before { position: absolute; content: ""; left: 0px; right: 0px; bottom: 5px; height: 5px; z-index: -1; background: url(../images/icons/vector-3.png) no-repeat; } .page-title .icons-box { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background-image: url(/images/resource/page-title.webp); background-repeat: no-repeat; background-size: cover; background-position: center; } .page-title .icon-one { position: absolute !important; left: 15% !important; top: 25% !important; width: 10px; height: 10px; border-radius: 50px; display: inline-block; background-color: var(--color-fourtysix); } .page-title .icon-two { position: absolute !important; left: 4% !important; top: auto !important; bottom: 10% !important; width: 122px; height: 127px; } .page-title .icon-three { position: absolute !important; left: 78% !important; top: 25% !important; width: 81px; height: 81px; } .page-title .icon-four { position: absolute !important; left: 90% !important; top: 80% !important; width: 8px; height: 8px; border-radius: 50px; display: inline-block; background-color: var(--color-fourtysix); } .page-title h1 { color: white; text-transform: capitalize; font-size: 30px; line-height: 50px; font-weight: 500; } .page-title .bread-crumb { position: relative; margin-top: var(--margin-top-20); } .page-title .bread-crumb li { position: relative; font-weight: 400; display: inline-block; text-transform: capitalize; font-size: var(--font-16); color: var(--color-fifty); font-family: var(--font-family-Jost); margin-right: var(--margin-right-15); padding-right: var(--padding-right-15); } .page-title .bread-crumb li:before { position: absolute; right: -6px; top: 1px; font-weight: 700; content: "\f179"; font-size: var(--font-10); color: var(--color-fifty); font-family: "Flaticon"; } .page-title .bread-crumb li:last-child { padding-right: 0; margin-right: 0; } .page-title .bread-crumb li:last-child:before { display: none; } .page-title .bread-crumb li a { color: var(--black-color); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .page-title .bread-crumb li a:hover { color: var(--main-color); } /*** ==================================================================== Sidebar Page Container ==================================================================== ***/ .sidebar-page-container { position: relative; padding: 30px 0px 30px; } .sidebar-page-container .content-side, .sidebar-page-container .sidebar-side { margin-bottom: var(--margin-bottom-40); } .sidebar-page-container .sidebar-side aside{ background-color: #f7f7f7; padding: 18px; } .sticky-top { top: 90px; z-index: 1; } .sidebar-widget { position: relative; margin-bottom: var(--margin-bottom-30); } .sidebar-widget .accordion-body ul.widgetList label > input[type="checkbox"] { margin-right: 3px; } /* Sidebar Title */ .sidebar-title { position: relative; margin-bottom: var(--margin-bottom-20); } .sidebar-title h6 { font-weight: 500; font-size: var(--font-16); text-transform: capitalize; color: var(--black-color); margin-bottom: var(--margin-bottom-20); padding-bottom: var(--padding-bottom-15); border-bottom: 1px solid rgba(var(--black-color-rgb), 0.06); } .breadcrumb-section h1 { font-size: var(--font-22); font-weight: 500; text-align: center; color: var(--black-color); width: 100%; line-height: normal; margin-top: -18px; margin-bottom: 10px; } .breadcrumb-section h1 span{ color: var(--main-color); } .breadcrumb-section h1:empty{ display: none; } .breadcrumb-section h1 small { font-size: 14px; color: #7f7f7f; text-transform: none; margin-left: 5px; font-weight: 500; } .sidebar-title h6:before { position: absolute; content: ""; left: 0px; bottom: -1px; height: 1px; width: 50px; background-color: var(--main-color); } .sidebar-widget.accordian-widget .accordion-item { border: none; margin-bottom: 20px; background-color: transparent; } .sidebar-widget.accordian-widget h2.accordion-header { font-weight: 500; font-size: var(--font-16); text-transform: capitalize; color: var(--black-color); margin-bottom: var(--margin-bottom-20); padding-bottom: var(--padding-bottom-15); border-bottom: 1px solid #ccc; } .sidebar-widget.accordian-widget h2.accordion-header:before { position: absolute; content: ""; left: 0px; bottom: -1px; height: 1px; width: 50px; background-color: var(--main-color); } .sidebar-widget.accordian-widget .accordion-body{ max-height: 225px; overflow: auto; padding-block: 5px; } .sidebar-widget.accordian-widget .accordion-body::-webkit-scrollbar { width: 3px; } .sidebar-widget.accordian-widget .accordion-body::-webkit-scrollbar-thumb { background: #5e5e5f; border-radius: 10px !important; } .sidebar-widget.accordian-widget .accordion-body::-webkit-scrollbar-track { box-shadow: inset 0 0 5px #c3c3c3; border-radius: 10px; } .sidebar-widget.accordian-widget .accordion-body p:has(>.btn){ margin-bottom: 0px; line-height: normal; } .sidebar-widget.accordian-widget .accordion-body a.btn{ font-size: 14px; padding-block:3px; padding-left: 0px; text-align: left; } .sidebar-widget.accordian-widget .widget_list_wrapper .form-group{ padding: 0 18px 3px 0px; border-radius: 0px; background-color: transparent; color: var(--mid-dark); font-size: 13px; position: relative; margin-bottom: 10px; } .sidebar-widget.accordian-widget .widget_list_wrapper .form-group input{ padding: 5px; padding-right: 10px; border-bottom: 1px solid #ccc; outline: none; width: 100%; background-color: transparent; } .sidebar-widget.accordian-widget .widget_list_wrapper .form-group label { position: absolute; top: 0px; left: 3px; pointer-events: none; transition: top 0.2s ease, font-size 0.2s ease; background-color: #f7f7f7; } .sidebar-widget.accordian-widget .widget_list_wrapper .form-group input:focus{ border: 1px solid #ccc; } .sidebar-widget.accordian-widget .widget_list_wrapper .form-group input:focus + label, .sidebar-widget.accordian-widget .widget_list_wrapper .form-group input:not(:placeholder-shown) + label { top: -10px; font-size: 12px; } .sidebar-widget.accordian-widget .accordion-item .accordion-button { padding: 0px; line-height: 0px; background-color: transparent; padding-left: 0px; font-weight: 500; color: black; } .sidebar-widget.accordian-widget .accordion-item .accordion-button:focus { border: none; box-shadow: none; } .sidebar-widget.accordian-widget .accordion-item .accordion-button:not(.collapsed) { box-shadow: none; color: var(--main-color); } .accordion-body p > a[aria-expanded="false"]::before { content: "+"; display: inline-block; padding-right: 3px; } .accordion-body p > a[aria-expanded="true"]::before { content: "-"; display: inline-block; padding-right: 3px; } .sidebar-widget.accordian-widget .accordion-item .accordion-button::after { background-size: 0.9rem !important; margin-top: 4px; box-sizing: border-box; } .sidebar-widget.accordian-widget .accordion-item .collapseSubCategory li { cursor: pointer; font-size: 14px; color: var(--color-twentyfour); position: relative; padding-left: 10px; } .sidebar-widget.accordian-widget .accordion-item .collapseSubCategory li:before { content: '\2022'; top: 0px; position: absolute; left: 0; font-size: 16px; } .sidebar-widget.accordian-widget .accordion-item .collapseSubCategory li:hover span { color: var(--main-color); } .sidebar-widget.accordian-widget .accordion-item .collapseSubCategory .maxlist-more { margin-bottom: 0px; } .sidebar-widget.accordian-widget .accordion-item .collapseSubCategory .maxlist-more a { font-size: 14px; } .sidebar-widget.accordian-widget .accordion-item .collapseSubCategory .maxlist-more a:hover { color: var(--main-color); } .sidebar-widget.accordian-widget p > a:focus { box-shadow: none; border: none; -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ } /* Search Box Widget */ .sidebar .search-box { position: relative; } .sidebar .search-box .form-group { position: relative; margin: var(--margin-zero); } .sidebar .search-box .form-group input[type="text"], .sidebar .search-box .form-group input[type="search"] { position: relative; line-height: 28px; font-size: var(--font-16); padding: 10px 50px 10px 25px; background: var(--white-color); display: block; width: 100%; height: 50px; border-radius: 0px; color: var(--color-thirty); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; border: 1px solid rgba(var(--black-color-rgb), 0.06); } .sidebar .search-box .form-group button { position: absolute; right: 0px; top: 0px; height: 50px; width: 50px; display: block; cursor: pointer; line-height: 100%; font-weight: normal; border-radius: 0px; font-size: var(--font-18); color: var(--color-two); background: none; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .sidebar .search-box .form-group button:hover { background-color: var(--main-color); color: var(--white-color); } /* Range Slider One */ .range-slider-one { position: relative; } .range-slider-one .title { float: right; font-weight: 400; color: var(--color-twentyfour); font-size: var(--font-14); } .range-slider-one .input { position: relative; float: left; max-height: 80px; } .range-slider-one .input input { background: none; color: var(--color-twentyfour); font-size: var(--font-14); width: auto; text-align: left; border: 0; padding: 0; height: auto; } .range-slider-one .ui-widget.ui-widget-content { height: 6px; border: none; border-radius: 0px; margin-top: var(--margin-top-35); margin-bottom: var(--margin-bottom-20); background: rgba(var(--black-color-rgb), 0.06); } .range-slider-one .ui-slider .ui-slider-range { top: 0px; height: 6px; border-radius: 0px; background-color: var(--main-color); } .range-slider-one .ui-state-default, .range-slider-one .ui-widget-content .ui-state-default { top: -6px; width: 4px; height: 18px; z-index: 99; border-radius: 0px; cursor: pointer; border: 4px solid var(--main-color); } .range-slider-one .theme-btn { font-size: var(--font-14); line-height: 18px; font-weight: 500; padding: 11px 20px; color: var(--black-color); text-transform: uppercase; margin-top: var(--margin-top-20); border: 2px solid rgba(var(--black-color-rgb), 0.06); } .range-slider-one .theme-btn:hover { background-color: var(--main-color); border-color: var(--main-color); color: var(--white-color); } /* Category List */ .category-list { position: relative; } .category-list li { position: relative; margin-bottom: var(--margin-bottom-20); } .category-list li a { position: relative; display: block; font-size: var(--font-16); color: var(--color-fiftyone); } .category-list li a:before { position: absolute; right: 0px; top: 0px; font-weight: 700; content: "\f179"; font-size: var(--font-10); color: var(--color-fifty); font-family: "Flaticon"; } .category-list li a:hover { color: var(--main-color); } .category-list li:last-child { margin-bottom: var(--margin-zero); } /* Tag List */ .tag-list { position: relative; display: block; } .tag-list li { position: relative; display: inline-block; margin-right: var(--margin-right-10); margin-bottom: var(--margin-bottom-10); } .tag-list li a { position: relative; display: block; line-height: 20px; font-weight: 500; padding: 9px 16px; border-radius: 0px; font-size: var(--font-14); text-transform: capitalize; color: var(--color-fiftytwo); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; background-color: var(--color-fiftythree); } .tag-list li a:hover { color: var(--white-color); background-color: var(--main-color); border-color: var(--main-color); } /*** ==================================================================== Filter Box ==================================================================== ***/ .filter-box { position: relative; padding: 15px 25px; border-radius: 5px; margin-bottom: var(--margin-bottom-30); border: 1px solid rgba(var(--black-color-rgb), 0.06); display: flex; align-items: center; justify-content: space-between; } .filter-box .left-box { position: relative; display: flex; flex-wrap: nowrap; } .filter-box .left-box .form-group { position: relative; margin-right: var(--margin-right-30); } .filter-box .left-box #advFilters{ background-color: var(--main-color); color: white; padding: 2px 10px; border-radius: 5px; border: 1px solid var(--main-color); cursor: pointer; } .filter-box .left-box #advFilters .icon{ color: white; } .filter-box .left-box #advFilters:hover{ background-color: white; } .filter-box .left-box #advFilters:hover,.filter-box .left-box #advFilters:hover .icon{ color: var(--main-color); } .filter-box .left-box .form-group:last-child { margin-right: var(--margin-zero); } .filter-box .left-box .icon { position: relative; top: 0px; font-family: "Flaticon"; margin-right: var(--margin-right-10); color: #373231; } .filter-box .results h1 { position: relative; font-size: var(--font-15); line-height: 14px; font-weight: 400; color: var(--color-fiftyfour); margin-right: var(--margin-right-30); } .filter-box .right-box { position: relative; display: flex; justify-content: center; align-items: center; } .filter-box .pages-list { position: relative; display: flex; flex-wrap: nowrap; } .filter-box .pages-list li { position: relative; display: inline-block; margin-left: var(--margin-left-15); } .filter-box .pages-list li a { position: relative; font-size: var(--font-18); color: var(--color-fiftyfour); font-family: "Flaticon"; } .filter-box .pages-list li a.active { color: var(--main-color); } /* Custom Select */ .form-group .ui-selectmenu-button.ui-button { width: 100%; font-style: normal; line-height: 28px; font-size: var(--font-14); color: var(--color-fiftyfour); padding: 0px 0px; border: 0px; font-family: var(--font-family-Outfit); background-color: var(--white-color); } .form-group .ui-button .ui-icon { background: none; position: relative; top: 2px; text-indent: 0px; color: #a5a5a5; } .form-group .ui-button .ui-icon:before { font-family: "FontAwesome"; content: "\f107"; position: absolute; right: 0px; top: 2px !important; top: 13px; width: 10px; height: 20px; display: block; line-height: 20px; font-size: var(--font-16); font-weight: normal; text-align: center; z-index: 5; color: var(--color-fiftyfour); } .ui-menu .ui-menu-item { font-size: var(--font-14); } .ui-menu .ui-menu-item:last-child { border: none; } .ui-state-active, .ui-widget-content .ui-state-active { background-color: var(--main-color); border-color: var(--main-color); } .ui-menu .ui-menu-item-wrapper { position: relative; display: block; padding: 8px 20px; line-height: 24px; font-size: var(--font-14); } .ui-menu-item:hover { background-color: var(--main-color); } .form-select-section .lower-section { position: relative; opacity: 0; visibility: hidden; padding: 0px 0px 0px; background-color: #383a9e; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; height: 0px; } /* Shop Item */ .shop-item { position: relative; margin-bottom: var(--margin-bottom-10); } .shop-item .inner-box { position: relative; } .listModeON .shop-item .inner-box { display: flex; flex-wrap: wrap; align-items: center; } .shop-item .image { position: relative; overflow: hidden; margin-bottom: 10px; padding: 10px; max-width: 180px; } .gridModeON .shop-item .image { min-height: 180px; display: table; } .gridModeON .shop-item .image a{ display: table-cell; vertical-align: middle; } .gridModeON .mfr-details .mfrName { display: none; } .listModeON .shop-item .image { margin-right: 20px; flex-basis: 19.19%; margin-bottom: 0px; padding: 10px; } .shop-item .image img { position: relative; width: 100%; display: block; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; object-fit: cover; object-position: center; position: relative; max-height: 210px; } .shop-item .lower-content { position: relative; padding-top: var(--padding-top-20); } .shop-item .lower-content .button-box { display: inline-block; margin-right: 3px; } .shop-item .lower-content .button-box > a { padding: 5px 10px; /* background: var(--color-eight); */ background: var(--main-color); border-radius: 5px; } .shop-item h6 { font-weight: 500; font-size: var(--font-14); font-family: var(--font-family-Jost); } .shop-item h6 a { position: relative; color: var(--color-thirtynine); } .shop-item h6 a:hover { color: var(--main-color); } .shop-item .price { position: relative; font-weight: 500; color: var(--main-color); font-size: var(--font-12); margin-top: var(--margin-top-5); } .shop-item .price span { position: relative; opacity: 0.7; margin-left: var(--margin-left-10); text-decoration: line-through; color: var(--color-thirty); } /* ########################################(Product List Page Start)########################## */ .listModeON .shop-item .product-content { flex-basis: 75%; } .shop-item .upper-content h2.product-title { font-size: var(--font-16); color: var(--black-color); line-height: 22px; font-family: var(--font-family-Inter); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 5px; } .listModeON .shop-item .upper-content h2.product-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-transform: uppercase; } .shop-item .upper-content p.product-shortDescription { color: var(--color-twentyfour); font-family: var(--font-family-Inter); font-size: var(--font-14); margin-bottom: 5px; line-height: 22px; display: none; } .listModeON .shop-item .upper-content p.product-shortDescription { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .shop-item .lower-content .mfr-details { margin-bottom: 5px; } .shop-item .lower-content .mfr-details p { color: var(--color-twentyfour); font-family: var(--font-family-Inter); font-size: var(--font-14); margin-bottom: 0px; line-height: 22px; float: left; margin-right: 20px; } .shop-item .lower-content { padding-top: 0px; } .shop-item .lower-content .product-price { font-family: var(--font-family-Inter); font-size: var(--font-18); color: var(--main-color); margin-bottom: 5px; font-weight: bold; } .shop-item .lower-content .product-price span.value { color: var(--color-twentyfour); opacity: 0.7; margin-left: var(--margin-left-10); text-decoration: line-through; } .shop-item .lower-content .product-price .licenseRequired{ float: right; line-height: normal; } .shop-item .lower-content .listbuttons { margin-bottom: 5px; } .shop-item .lower-content .availability, .shop-item .lower-content li { display: inline-block; } .shop-item .lower-content .availability, .shop-item .lower-content li a { font-family: var(--font-family-Inter); font-size: var(--font-14); color: var(--color-twentyfour); transition: all 0.3s ease-in-out; } .shop-item .lower-content .listbuttons li { margin-left: 10px; } .gridModeON .shop-item .lower-content .listbuttons li { margin-right: 10px; margin-left: 0px; } .shop-item .lower-content li a { color: var(--color-twentyfour); } .shop-item .lower-content li a i { color: var(--main-color); display: inline-block; margin-right: 5px; } .shop-item .lower-content li a:hover { color: var(--black-color); } .shop-item .lower-content .availability .selectedinstock { color: #4caf50; } .shop-item .lower-content .availability { float: left; font-weight: bold; } .gridModeON .shop-item .lower-content .availability { float: right; } .shop-item .lower-content .listbuttons > ul { float: right; } .gridModeON .shop-item .lower-content .listbuttons > ul { float: left; } /* ########################################(Product List Page End)############################ */ /*** ==================================================================== Styled Pagination ==================================================================== ***/ .shops-outer .styled-pagination { margin-top: var(--margin-top-25); } .styled-pagination { position: relative; } .styled-pagination li { position: relative; margin: 0; display: inline-block; } .styled-pagination li a { position: relative; display: inline-block; line-height: 30px; height: 30px; width: 30px; min-width: 30px; font-weight: 500; border-radius: 0px; text-align: center; text-transform: capitalize; transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; -moz-transition: all 500ms ease; color: var(--color-thirtynine); border: 2px solid rgba(var(--black-color-rgb), 0.1); } .styled-pagination li.prev a, .styled-pagination li.next a { line-height: 26px; font-size: var(--font-14); font-family: "Flaticon"; } .styled-pagination li a:hover, .styled-pagination li a.active { color: var(--white-color); background-color: var(--color-eight); } /*** ==================================================================== Shop Detail Section ==================================================================== ***/ .shop-detail-section { position: relative; padding: 60px 0px 20px; } .shop-detail-section .upper-box { position: relative; } .shop-detail-section .breadcrumb_content { margin-bottom: 10px; } .shop-detail-section .breadcrumb_content ul li { display: inline-block; text-transform: capitalize; font-size: 14px; margin-right: 3px; padding-right: 13px; position: relative; } .breadcrumb_content ul li:not(:last-child):after { position: absolute; content: "/"; right: 0; top: 50%; transform: translateY(-50%); color: var(--color-fiftyfive); opacity: 0.8; } .shop-detail-section .breadcrumb_content ul li a { color: var(--color-fiftyfive); opacity: 0.8; } .shop-detail-section .breadcrumb_content ul li a:hover { color: var(--main-color); } .shop-detail-section .gallery-column { position: relative; margin-bottom: var(--margin-bottom-30); } .shop-detail-section .gallery-column .inner-column { position: relative; } .shop-detail-section .gallery-column .carousel-outer { position: relative; padding-right: 125px; } .shop-detail-section .gallery-column .image { text-align: center; padding: 15px 15px; border: 1px solid var(--color-fiftysix); } .shop-detail-section .gallery-column .thumbs-carousel { position: absolute; right: 0px; top: 0px; width: 105px; } .shop-detail-section .swiper-container-horizontal figure.image a.lightbox-image { display: flex; align-items: center; justify-content: center; height: 100%; max-width: 100%; } .shop-detail-section .swiper-container-horizontal figure.image img { max-height: 100%; display: inline-block; } .shop-detail-section .gallery-column .thumbs-carousel .swiper-slide { height: auto !important; width: auto !important; margin-bottom: 20px !important; padding-right: 5px; } .shop-detail-section .gallery-column .thumb { cursor: pointer; padding: 10px 10px; border: 1px solid var(--color-fiftysix); margin-bottom: var(--margin-zero); max-height: 92px; height: 92px; } .shop-detail-section .gallery-column .thumb img { max-width: 100%; max-height: 100%; margin: auto; display: block; } .shop-detail-section .content-column { position: relative; margin-bottom: var(--margin-bottom-30); } .shop-detail-section .content-column .inner-column { position: relative; padding-left: var(--padding-left-30); } .shop-detail-section .content-column h1 { color: rgba(var(--color-fiftyfive-rgb), 1); font-weight: 600; font-size: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5em; } .shop-detail-section .content-column .productExtraBtns { float: right; margin-top: 10px; position: relative; z-index: 5; } .shop-detail-section .gallery-column .thumbs-carousel::-webkit-scrollbar-thumb { background: #7f7f7f !important; border-radius: 10px !important; } .shop-detail-section .gallery-column .thumbs-carousel::-webkit-scrollbar-track { box-shadow: inset 0 0 5px #c3c3c3; border-radius: 10px; } .sharemainul { display: inline-block; list-style: none; padding: 0px; margin: 0 5px; padding-top: 0.923em; cursor: pointer; font-size: 14px; } .shareul { display: none; list-style: none; transition: all 0.3s ease-in-out; } .sharemainli .shareul li { margin: 2px 2px 5px -2px; font-size: 18px; } .sharemainli a { color: black; letter-spacing: 0.5px; } .sharemainli:hover .shareul { display: block; position: absolute; background: #fffefe; border: 1px solid #ddd; width: 40px; cursor: pointer; list-style: none; padding: 5px 5px; margin-left: 0px; margin-top: 2px; text-align: center; border-radius: 4px; z-index: 2; } .productExtraBtns > * { float: right; font-size: 14px; } .productExtraBtns .compare-btn { margin-right: 15px; transition: all 300ms ease; } .productExtraBtns i { margin-right: 3px; } .productExtraBtns a, .productExtraBtns button { color: rgba(var(--color-fiftyfive-rgb), 0.7); } .productExtraBtns a:hover, .productExtraBtns button:hover { color: var(--main-color); } .shop-detail-section .content-column .text { position: relative; opacity: 0.8; line-height: 30px; font-size: var(--font-16); color: var(--color-fiftyfive); margin-top: var(--margin-top-10); } .shop-detail-section .content-column .text p { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .shop-detail-section .content-column .rating { position: relative; font-size: var(--font-16); color: var(--color-five); margin-top: var(--margin-top-15); } .shop-detail-section .content-column .rating .light { opacity: 0.2; color: var(--black-color); } .shop-detail-section .content-column .rating i { position: relative; font-weight: 500; font-style: normal; font-size: var(--font-14); color: var(--color-thirtynine); margin-left: var(--margin-left-10); } .shop-detail-section .content-column .price { position: relative; font-weight: 500; color: var(--main-color); font-size: var(--font-18); margin-top: var(--margin-top-10); font-family: var(--font-family-Inter); margin-bottom: var(--margin-bottom-0); font-weight: bold; } .shop-detail-section .content-column .price .finalPrice { font-size: 25px; } .shop-detail-section .content-column .price i { position: relative; top: -2px; border-radius: 4px; padding: 2px 12px; font-style: normal; display: inline-block; font-size: var(--font-13); color: var(--white-color); margin-left: var(--margin-left-5); border: 1px solid var(--color-eight); color: var(--color-eight); } .shop-detail-section .content-column .price span { position: relative; color: var(--color-twentyfour); opacity: 0.5; margin: 0px 5px; text-decoration: line-through; } .shop-detail-section .content-column .model { position: relative; margin-top: var(--margin-top-5); margin-right: var(--margin-right-15); } .shop-detail-section .content-column .model .model-title { position: relative; display: block; font-weight: 500; display: inline-block; font-size: var(--font-16); font-family: var(--font-family-Roboto); margin-bottom: var(--margin-bottom-15); } .shop-detail-section .content-column .buttons-box { position: relative; margin-top: var(--margin-top-15); } .shop-detail-section .content-column .buttons-box_wrapper div.buttons-box { margin-right: 5px; } .shop-detail-section .content-column .buttons-box .btn-style-one { padding: 5px 10px; /* background: var(--color-eight); */ background: var(--main-color); border-radius: 5px; } .shop-detail-section .content-column .outdoor-btns > * { float: left; } .shop-detail-section .content-column .social-box { position: relative; margin-top: 5px; margin-left: 20px; } .shop-detail-section .content-column .social-box li { position: relative; display: inline-block; margin-right: var(--margin-right-15); } .shop-detail-section .content-column .social-box li.share { margin-right: 10px; } .shop-detail-section .content-column .social-box li.share, .shop-detail-section .quantity-box > span { position: relative; font-weight: 500; font-size: var(--font-16); color: rgba(var(--color-fiftyfive-rgb), 1); } .shop-detail-section .content-column .social-box li.share { color: rgba(var(--color-fiftyfive-rgb), 0.7); font-size: 14px; } .shop-detail-section .content-column .social-box li a { position: relative; font-size: var(--font-18); color: rgba(var(--color-fiftyfive-rgb), 0.7); } .shop-detail-section .content-column .compare-btn { color: rgba(var(--color-fiftyfive-rgb), 0.7); margin-top: 5px; font-size: 14px; font-weight: 500; } .shop-detail-section .content-column .compare-btn i { margin-left: 7px; } /* Quality Box */ .quantity-box { position: relative; margin-top: var(--margin-top-15); } .shop-detail-section .quantity-box { display: flex; align-items: center; justify-content: flex-start; margin-right: 15px; } .select-size { position: relative; } .select-size .select-box { position: relative; float: left; text-align: center; margin: 0px 10px 10px 0px; } .select-size .input-box { position: relative; float: left; } .select-size .select-box input[type="radio"] { left: 0px; top: 0px; visibility: hidden; position: absolute; opacity: 0; } .select-size .select-box label { display: block; line-height: 24px; padding: 5px 18px; text-align: center; font-weight: 600; cursor: pointer; border-radius: 2px; font-size: var(--font-12); transition: all 500ms ease; text-transform: uppercase; color: var(--color-fiftyseven); background-color: var(--color-fiftysix); } .select-size .select-box input[type="radio"]:checked + label { background-color: var(--main-color); color: #ffffff; } .shop-detail-section .content-column .prodVitalsBox > div { display: inline-block; margin-right: 5px; } .shop-detail-section .content-column p.licenseRequiredDP{ margin-bottom: 0px; } .shop-detail-section .content-column .categories { position: relative; font-weight: 400; font-size: var(--font-16); padding-top: 16px; color: rgba(var(--color-fiftyfive-rgb), 0.7); } .shop-detail-section .content-column .categories span { position: relative; font-weight: 500; color: rgba(var(--color-fiftyfive-rgb), 1); } .shop-detail-section .content-column .productUserManual { margin-top: var(--margin-top-10); } .shop-detail-section .content-column .userGuide { font-weight: 400; font-size: var(--font-15); margin-top: var(--margin-top-15); color: rgba(var(--color-fiftyfive-rgb), 0.7); } .shop-detail-section .content-column .userGuide:hover { color: var(--main-color); } .shop-detail-section .content-column a.userGuide::before { content: ""; display: inline-block; width: 10px; height: 10px; font-family: fontAwesome; font-size: 18px; color: red; margin-right: 15px; margin-left: 5px; transition: all 0.3s ease-in-out 0s; } /* Item Quantity */ .item-quantity { position: relative; width: 100%; max-width: 140px; padding: 0px 45px; display: inline-block; } .quantity-box .item-quantity .input-group { position: relative; display: table; border-collapse: separate; max-width: 144px; width: 100%; } .quantity-box .item-quantity input.qty-spinner { line-height: 44px; height: 30px; width: 50px !important; padding: 0px !important; box-shadow: none !important; border: none; text-align: center; font-size: var(--font-18); font-weight: 500; color: #1e1e2a; border: none; border-radius: 0; } .quantity-box .item-quantity input.qty-spinner:focus { background: none; } .quantity-box .bootstrap-touchspin .input-group-btn-vertical > .btn.bootstrap-touchspin-down { position: absolute; height: 30px; width: 30px; background-color: var(--white-color); padding: 6px 0px !important; line-height: 30px; left: -30px; top: -30px; border: 1px solid var(--color-fiftysix); border-radius: 5px 5px 5px 5px; } .quantity-box .bootstrap-touchspin .input-group-btn-vertical > .btn.bootstrap-touchspin-up { position: absolute; height: 30px; width: 30px; background-color: var(--white-color); padding: 6px 0px !important; line-height: 30px; right: -33px; top: -30px; border: 1px solid var(--color-fiftysix); border-radius: 5px 5px 5px 5px; margin-top: 0px; } .quantity-box .bootstrap-touchspin .glyphicon-chevron-up:before { content: "\f067"; font-size: var(--font-16); color: #0c2957; font-weight: 400; font-style: normal; font-family: "FontAwesome"; } .quantity-box .bootstrap-touchspin .glyphicon-chevron-down:before { content: "\f068"; font-size: var(--font-16); color: #0c2957; font-weight: 400; font-style: normal; font-family: "FontAwesome"; } .quantity-box .bootstrap-touchspin .input-group-btn-vertical { position: absolute; width: 100%; } .quantity-box .bootstrap-touchspin .input-group-btn-vertical i { top: 0px; left: 8.5px; font-size: inherit !important; } .quantity-box .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down { margin-top: 0px; } /*** ==================================================================== Product Tabs Style ==================================================================== ***/ .shop-detail-section .prod-tabs { position: relative; margin-bottom: var(--margin-bottom-40); } .shop-detail-section .prod-tabs .tab-btns { position: relative; text-align: left; } .shop-detail-section .prod-tabs .tab-btns .tab-btn { position: relative; top: 1px; display: inline-block; margin: 0px 5px 10px; background: var(--white-color); color: var(--color-thirtynine); text-transform: uppercase; font-size: var(--font-14); line-height: 24px; cursor: pointer; font-weight: 600; padding: 13px 28px; transition: all 500ms ease; border: 1px solid rgba(0, 0, 0, 0.125); } .shop-detail-section .prod-tabs .tab-btns .tab-btn:hover, .shop-detail-section .prod-tabs .tab-btns .tab-btn.active-btn { color: var(--main-color); background: var(--white-color); } .shop-detail-section .prod-tabs .tabs-content { position: relative; padding: 30px 0px 0px; } .shop-detail-section .prod-tabs .tabs-content .tab { position: relative; display: none; border-top: 0px; } .shop-detail-section .prod-tabs .tabs-content .tab.active-tab { display: block; } .prod-tabs .tabs-content p { position: relative; opacity: 0.8; line-height: 30px; font-size: var(--font-16); color: var(--color-fiftyfive); margin-bottom: var(--margin-bottom-30); } .prod-tabs .tabs-content .tab .title { position: relative; color: var(--text-color); font-size: var(--font-20); font-weight: 400; margin-top: var(--margin-top-10); margin-bottom: var(--margin-bottom-25); } /* Styling Product Detail Table */ .prod-tabs .tabs-content .table { border-bottom: 1px solid #dee2e6; margin-top: -1px; } .tabs-content table tr td:first-child { width: 30%; border-right: 1px solid #dee2e6; } .tabs-content table td, .tabs-content table td h4, .tabs-content table td a { position: relative; line-height: 32px; font-size: var(--font-16); color: var(--color-two); font-family: var(--font-family-Outfit); } .tabs-content table td a:hover { color: var(--main-color); } .prod-tabs .tabs-content .Product-detail-title-for-listing { margin-top: 15px; } .prod-tabs .tabs-content .Product-detail-title-for-listing h3 { position: relative; margin-bottom: 3px; font-size: var(--font-16); color: var(--color-thirtynine); font-family: var(--font-family-Outfit); } .tabs-content .accordion-body table tr { border-top: 1px solid rgb(222, 226, 230); } .tabs-content .accordion-item .accordion-button { line-height: 0px; padding: 15px; font-weight: 500; color: rgba(var(--color-fiftyfive-rgb), 1); } .tabs-content .accordion-item .accordion-button:focus { box-shadow: none; } .tabs-content .accordion-button:not(.collapsed) { color: var(--main-color); background-color: #f5f5f5; box-shadow: none; } .tabs-content .accordion-button:not(.collapsed):after { color: var(--main-color); } /*Comment Form*/ .shop-comment-form { position: relative; } .shop-comment-form h4 { margin-bottom: var(--margin-bottom-25); } .shop-comment-form .group-title { margin-bottom: var(--margin-bottom-20); } .shop-comment-form .rating-box { position: relative; margin-bottom: var(--margin-bottom-30); } .shop-comment-form .rating-box .text { color: var(--main-color-two); margin-bottom: var(--margin-bottom-10); } .shop-comment-form .rating-box .rating { position: relative; display: inline-block; border-right: 1px solid #ebebeb; margin-right: var(--margin-right-10); padding-right: var(--padding-right-10); } .shop-comment-form .rating-box .rating:last-child { border-right: 0px; } .shop-comment-form .rating-box .rating .fa { position: relative; display: inline-block; margin-right: var(--margin-right-5); } .shop-comment-form .rating-box .rating a { position: relative; color: var(--color-eight); font-size: var(--font-16); display: inline-block; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; } .shop-comment-form .rating-box .rating a:hover { color: var(--main-color); } .shop-comment-form .form-group { position: relative; margin-bottom: var(--margin-bottom-15); } .shop-comment-form .form-group label { position: relative; display: block; font-weight: 500; color: var(--black-color); font-size: var(--font-16); font-family: var(--font-family-Jost); margin-bottom: var(--margin-bottom-15); } .shop-comment-form .form-group:last-child { margin-bottom: 0px; } .shop-comment-form .form-group input[type="text"], .shop-comment-form .form-group input[type="password"], .shop-comment-form .form-group input[type="tel"], .shop-comment-form .form-group input[type="email"], .shop-comment-form .form-group select { position: relative; display: block; width: 100%; line-height: 28px; padding: 10px 15px; border: 1px solid #efefef; height: 50px; color: var(--main-color-two); font-weight: 300; background: var(--white-color); -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; } .shop-comment-form .form-group input[type="text"]:focus, .shop-comment-form .form-group input[type="password"]:focus, .shop-comment-form .form-group input[type="tel"]:focus, .shop-comment-form .form-group input[type="email"]:focus, .shop-comment-form .form-group select:focus, .shop-comment-form .form-group textarea:focus { border-color: var(--main-color); } .shop-comment-form .form-group textarea { position: relative; display: block; width: 100%; line-height: 26px; padding: 10px 15px; color: var(--main-color-two); border: 1px solid #efefef; height: 105px; font-weight: 300; background: var(--white-color); resize: none; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; } .shop-comment-form button { position: relative; margin-top: var(--margin-top-10); } .shop-comment-form input:focus, .shop-comment-form select:focus, .shop-comment-form textarea:focus { border-color: var(--main-color); } /*** ==================================================================== Comments Area ==================================================================== ***/ .shop-detail-section .comments-area { position: relative; margin-top: var(--margin-zero); margin-bottom: var(--margin-bottom-40); } .shop-detail-section .comments-area .comment-box { position: relative; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; margin-bottom: var(--margin-bottom-30); } .shop-detail-section .comments-area .comment-box:nth-child(1) { padding-top: 0px; } .shop-detail-section .comments-area .comment-box:hover { border-color: var(--main-color); } .shop-detail-section .comments-area .comment-box.reply-comment { margin-left: var(--marg-left-30); } .shop-detail-section .comments-area .comment { position: relative; font-size: var(--font-14); padding: 0px 0px 0px 80px; } .shop-detail-section .comments-area .comment .comment-inner { position: relative; padding: 15px 20px; border: 1px solid #f4f4f4; } .shop-detail-section .comments-area .comment .comment-inner .rating { position: absolute; right: 15px; top: 15px; } .shop-detail-section .comments-area .comment .comment-inner .rating .fa { display: inline-block; font-size: var(--font-14); color: var(--color-eight); } .shop-detail-section .comments-area .comment-box .author-thumb { position: absolute; left: 0px; top: 0px; margin-bottom: var(--margin-bottom-20); } .shop-detail-section .comments-area .comment-box .author-thumb img { width: 60px; display: block; } .shop-detail-section .comments-area .comment-info { position: relative; line-height: 24px; font-weight: 600; color: var(--black-color); font-size: var(--font-16); margin-bottom: var(--margin-bottom-10); } .shop-detail-section .comments-area .comment-box .text { font-weight: 400; font-size: var(--font-16); color: var(--main-color-two); margin-top: var(--marg-top-10); margin-bottom: var(--margin-bottom-10); } .shop-detail-section .related-products h4 { text-transform: uppercase; margin-bottom: var(--margin-bottom-30); } .shop-detail-section .lower-box h3 { margin-bottom: var(--margin-bottom-15); } .shop-detail-section .lower-box h5 { margin-bottom: var(--margin-bottom-20); } .shop-detail-section .list-one { position: relative; } .shop-detail-section .list-one li { position: relative; font-size: var(--font-16); padding-left: var(--padding-left-30); margin-bottom: var(--margin-bottom-15); color: rgba(var(--color-fiftyfive-rgb), 0.8); } .shop-detail-section .list-one li:before { position: absolute; content: ""; left: 0px; top: 6px; width: 10px; height: 10px; background-color: var(--main-color); } .shop-detail-section .list-two { position: relative; margin-top: -40px; } .shop-detail-section .list-two li { position: relative; font-size: var(--font-16); padding-left: var(--padding-left-50); margin-bottom: var(--margin-bottom-25); color: rgba(var(--color-fiftyfive-rgb), 0.8); } .shop-detail-section .list-two li:before { position: absolute; content: "\f1a3"; left: 0px; top: 0px; width: 28px; height: 28px; text-align: center; border-radius: 50px; line-height: 28px; font-size: var(--font-12); font-family: "Flaticon"; color: var(--main-color); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); } /*** ==================================================================== Cart Section ==================================================================== ***/ .shoping-cart-section { position: relative; padding: 110px 0px 20px; } .shoping-cart-section .cart-column { position: relative; margin-bottom: var(--margin-bottom-30); } .shoping-cart-section .cart-column .inner-column { position: relative; } .shoping-cart-section .cart-table { width: 100%; min-width: 740px; } .cart-total-outer { position: relative; } .cart-section .cart-table { width: 100%; min-width: 900px; } .cart-table .cart-header { position: relative; width: 100%; border-radius: 0px; font-size: var(--font-16); text-transform: capitalize; color: var(--color-fiftyeight); } .cart-table thead tr th { line-height: 24px; padding: 0px 15px 20px; min-width: 120px; font-weight: 500; font-size: var(--font-18); color: var(--color-fiftyeight); } .cart-table thead tr th.prod-column { text-align: left; padding-left: var(--padding-left-40); } .cart-table tbody tr td { line-height: 24px; min-width: 100px; vertical-align: middle; padding: 20px 10px 5px; } .cart-table .prod-title { font-weight: 500; font-size: var(--font-16); color: var(--color-fiftynine); } .cart-table .prod-text { font-weight: 400; font-size: var(--font-16); color: rgba(var(--color-fiftyfive-rgb), 0.5); } .cart-table tbody tr .prod-column .column-box { position: relative; min-height: 90px; padding-left: var(--padding-left-90); text-align: left; } .cart-table tbody tr .prod-column .column-box .prod-thumb { position: absolute; width: 70px; left: 0px; top: 0px; padding: 10px 10px; border: 1px solid #f0f0f0; } .cart-table .cross-icon { position: absolute; right: -8px; top: -8px; width: 16px; height: 16px; font-size: 6px; font-weight: 700; cursor: pointer; line-height: 16px; text-align: center; border-radius: 50px; font-family: "Flaticon"; color: var(--white-color); background-color: var(--main-color); } .cart-table tbody tr .prod-column .column-box .prod-thumb img { display: block; max-width: 100%; } .cart-table tbody tr .prod-column .column-box h3 { margin-bottom: var(--margin-bottom-10); } .cart-table tbody tr .remove-btn { position: relative; font-size: var(--font-18); color: var(--main-color-two); width: 34px; height: 34px; text-align: center; line-height: 30px; display: inline-block; border: 2px solid #ececec; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; -moz-transition: all 500ms ease; transition: all 500ms ease; } .cart-table tbody tr .remove-btn .fa { position: relative; top: 2px; font-size: var(--font-12); line-height: 14px; width: 14px; height: 14px; margin-right: var(--margin-right-5); background: #f0f0f0; color: var(--white-color); text-align: center; overflow: hidden; text-indent: 100px; } .cart-table tbody tr .remove { text-align: center; } .cart-table tbody tr .remove-btn:hover { color: var(--main-color); border-color: var(--main-color); } .cart-table tbody tr .remove-btn:hover .fa { text-indent: 0px; background: var(--main-color); } .cart-table tbody tr { border-bottom: 1px solid #f0f0f0; } .cart-table tbody tr td.price { font-weight: 500; font-size: var(--font-18); color: var(--color-fiftyeight); } .cart-table tbody tr td.sub-total { font-weight: 500; font-size: var(--font-18); color: var(--color-fiftyeight); } .shoping-cart-section .total-column { position: relative; margin-bottom: var(--margin-bottom-30); } .shoping-cart-section .total-column .inner-column { position: relative; } .shoping-cart-section .total-column .title-box { position: relative; text-align: center; margin-bottom: var(--margin-bottom-20); } .cart-total-box { position: relative; padding: 30px 30px; margin-bottom: var(--margin-bottom-30); border: 1px solid rgba(var(--black-color-rgb), 0.06); } /* Cart Totals */ .cart-totals { position: relative; } .cart-totals li { position: relative; padding: 15px 0px; font-size: var(--font-18); margin-bottom: var(--margin-bottom-5); border-bottom: 1px solid rgba(var(--black-color-rgb), 0.06); } .cart-totals li span { position: absolute; right: 0px; } .shoping-cart-section .check-box { position: relative; margin-bottom: 25px; margin-top: 20px; } .shoping-cart-section .check-box label { color: #2b2b2b; } .shoping-cart-section .check-box label { position: relative; display: block; width: 100%; cursor: pointer; margin-bottom: 0; font-weight: 400; line-height: 22px; background: #ffffff; padding: 4px 10px 0px; padding-left: 30px; font-size: var(--font-16); color: var(--black-color); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .shoping-cart-section .check-box input[type="checkbox"]:checked + label { border-color: var(--main-color); } .shoping-cart-section .form-group .check-box label { padding-left: 30px; padding-top: 1px; cursor: pointer; } .shoping-cart-section .check-box label:before { position: absolute; left: 0; top: 6px; height: 20px; width: 20px; background: #ffffff; content: ""; border-radius: 0px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; border: 1px solid rgba(var(--black-color-rgb), 0.1); } .shoping-cart-section .check-box label:after { position: absolute; left: 0px; top: 0; height: 15px; line-height: 15px; max-width: 0; font-size: 14px; color: #ffffff; font-weight: 800; overflow: hidden; background: transparent; text-align: center; font-family: "FontAwesome"; -webkit-transition: max-width 500ms ease; -moz-transition: max-width 500ms ease; -ms-transition: max-width 500ms ease; -o-transition: max-width 500ms ease; transition: max-width 500ms ease; } .shoping-cart-section .check-box input[type="checkbox"] { display: none; } .shoping-cart-section .check-box input[type="checkbox"]:checked + label:before { border: 8px solid var(--main-color); background-color: var(--white-color); } .shoping-cart-section .check-box input[type="checkbox"]:checked + label:after { max-width: 20px; opacity: 1; } /* Shipping Outer */ .shipping-outer { position: relative; } .shipping-outer .title-box { position: relative; text-align: center; margin-bottom: var(--margin-bottom-20); } .shipping-outer .shipping-box { position: relative; padding: 20px 30px 20px; margin-bottom: var(--margin-bottom-30); border: 1px solid rgba(var(--black-color-rgb), 0.06); } /* Cart Totals */ .shipping-list { position: relative; } .shipping-list li { position: relative; padding: 15px 0px; font-size: var(--font-16); margin-bottom: var(--margin-bottom-5); border-bottom: 1px solid rgba(var(--black-color-rgb), 0.06); } .shipping-outer .buttons-box { position: relative; margin-top: var(--margin-top-25); } /* Checkout Section */ .checkout-section { position: relative; padding: 110px 0px 40px; } .checkout-section h4 { color: var(--black-color); margin-bottom: var(--margin-bottom-25); } .checkout-section .form-column { position: relative; margin-bottom: var(--margin-bottom-30); } .checkout-section .form-column .inner-column { position: relative; } .checkout-section .order-column { position: relative; margin-bottom: var(--margin-bottom-30); } .checkout-section .order-column .inner-column { position: relative; } /*** ==================================================================== Shipping Form ==================================================================== ***/ .shipping-form .form-group { margin-bottom: var(--margin-bottom-30); } .shipping-form .form-group:last-child { margin-bottom: 0px; } .shipping-form .form-group input[type="text"], .shipping-form .form-group input[type="password"], .shipping-form .form-group input[type="tel"], .shipping-form .form-group input[type="email"], .shipping-form .form-group select, .shipping-form .form-group .ui-selectmenu-button.ui-button { position: relative; display: block; width: 100%; line-height: 28px; padding: 10px 25px; height: 55px; border-radius: 0px; font-size: var(--font-16); color: var(--color-sixty); background: var(--white-color); -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; border: 1px solid rgba(var(--black-color-rgb), 0.06); } .shipping-form .form-group textarea::-webkit-input-placeholder, .shipping-form .form-group input::-webkit-input-placeholder { color: var(--color-sixty); } .shipping-form .form-group input[type="text"]:focus, .shipping-form .form-group input[type="password"]:focus, .shipping-form .form-group input[type="tel"]:focus, .shipping-form .form-group input[type="email"]:focus, .shipping-form .form-group select:focus, .shipping-form .form-group textarea:focus { border-color: var(--main-color); } .shipping-form .form-group textarea { position: relative; display: block; width: 100%; line-height: 24px; padding: 15px 25px 25px; font-size: var(--font-16); color: var(--main-color-two); height: 295px; background: var(--white-color); resize: none; font-size: 16px; border-radius: 0px; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; border: 1px solid rgba(var(--black-color-rgb), 0.06); } .shipping-form .check-box { position: relative; } .shipping-form .check-box label { color: #2b2b2b; } .shipping-form .check-box label { position: relative; display: block; width: 100%; cursor: pointer; margin-bottom: 0; font-weight: 400; line-height: 22px; background: #ffffff; padding: 4px 10px 0px; padding-left: 30px; font-size: var(--font-16); color: var(--color-sixty); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .shipping-form .check-box input[type="checkbox"]:checked + label { border-color: var(--main-color); } .shipping-form .check-box label { padding-left: 30px; padding-top: 1px; cursor: pointer; } .shipping-form .check-box label:before { position: absolute; left: 0; top: 2px; height: 20px; width: 20px; background: #ffffff; content: ""; border-radius: 0px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; border: 1px solid rgba(var(--black-color-rgb), 0.1); } .shipping-form .check-box label:after { position: absolute; left: 0px; top: 0; height: 15px; line-height: 15px; max-width: 0; font-size: 14px; color: #ffffff; font-weight: 800; overflow: hidden; background: transparent; text-align: center; font-family: "FontAwesome"; -webkit-transition: max-width 500ms ease; -moz-transition: max-width 500ms ease; -ms-transition: max-width 500ms ease; -o-transition: max-width 500ms ease; transition: max-width 500ms ease; } .shipping-form .check-box input[type="checkbox"] { display: none; } .shipping-form .check-box input[type="checkbox"]:checked + label:before { border: 8px solid var(--main-color); background-color: var(--white-color); } .shipping-form .check-box input[type="checkbox"]:checked + label:after { max-width: 20px; opacity: 1; } .shipping-form .theme-btn { cursor: pointer; } .order-box { position: relative; padding: 25px 25px; border: 1px solid rgba(var(--black-color-rgb), 0.1); } .order-totals { position: relative; } .order-totals li { position: relative; padding: 15px 25px; font-weight: 600; font-size: var(--font-14); color: var(--color-sixty); margin-bottom: var(--margin-bottom-30); border: 1px solid rgba(var(--black-color-rgb), 0.07); } .order-totals li span { position: absolute; right: 25px; color: var(--color-thirtynine); } /* Voucher Box */ .voucher-box { position: relative; } .voucher-box .form-group { position: relative; margin: 0px; width: 100%; max-width: 100%; padding-right: var(--padding-right-100); } .voucher-box .form-group input[type="text"], .voucher-box .form-group input[type="email"] { position: relative; line-height: 38px; display: block; height: 54px; width: 100%; border-radius: 0px; box-shadow: inherit; font-size: var(--font-14); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; padding: 10px 15px 10px 25px; color: var(--color-fourtyeight); background-color: rgba(var(--white-color-rgb), 1); border: 1px solid rgba(var(--black-color-rgb), 0.07); } .voucher-box .form-group input::placeholder, .voucher-box .form-group textarea::placeholder { color: var(--color-fourtyeight); } .voucher-box .form-group button { position: absolute; right: 0px; top: 0px; font-weight: 500; padding: 16px 24px; font-size: var(--font-14); color: var(--white-color); text-transform: capitalize; background-color: var(--black-color); } .order-box .order-total { position: relative; font-weight: 500; font-size: var(--font-20); color: var(--black-color); margin-top: var(--margin-top-30); } .order-box .order-total span { position: absolute; right: 0px; } .order-box .button-box { position: relative; margin-top: var(--margin-top-30); } .order-box .pay-btn { position: relative; width: 100%; text-align: center; padding: 17px 15px; border-radius: 6px; font-weight: 600; color: var(--white-color); text-transform: uppercase; background-color: var(--main-color); } .order-box .pay-btn:hover { letter-spacing: 2px; background-color: var(--black-color); } /*** ==================================================================== Contact Info Section ==================================================================== ***/ .contact-info-section { position: relative; padding: 80px 0px 40px; } .info-column { position: relative; margin-bottom: var(--margin-bottom-30); } .info-column .inner-column { position: relative; padding: 30px 30px 25px; border: 1px solid rgba(var(--black-color-rgb), 0.07); height: 145px; } .info-column .icon { position: relative; margin-right: 25px; line-height: 1em; font-size: var(--font-50); font-family: "Flaticon"; color: var(--main-color); } .info-column strong { position: relative; display: block; font-weight: 500; font-size: var(--font-18); color: var(--black-color); margin-bottom: var(--margin-bottom-10); } .info-column a { position: relative; display: block; font-size: var(--font-14); color: var(--color-sixtyone); margin-bottom: var(--margin-bottom-5); } .info-column .text { line-height: 27.5px; font-size: var(--font-14); color: var(--color-sixtyone); } /*** ==================================================================== Contact Section ==================================================================== ***/ .contact-section { position: relative; padding: 20px 0px 80px; } .contact-section .image-column { position: relative; margin-bottom: var(--margin-bottom-30); } .contact-section .image-column .inner-column { position: relative; } .contact-section .color-layer { position: absolute; right: 80px; bottom: 40px; width: 370px; height: 285px; border-radius: 20px; transform: rotate(15deg); background: var(--color-eight); background: linear-gradient( to right, var(--color-eight) 0%, var(--color-seven) 100% ); } .contact-section .image { position: relative; z-index: 1; display: inline-block; } .contact-section .image img { position: relative; } .contact-section .form-column { position: relative; margin-bottom: var(--margin-bottom-30); } .contact-section .form-column .inner-column { position: relative; } .contact-section .sec-title { margin-bottom: 20px; } .contact-info-section .emailContainerLink { line-break: anywhere; } .contact-section ul.options-list { position: relative; } .contact-section .options-list li { position: relative; color: var(--color-twelve); font-size: var(--font-15); padding-left: var(--padding-left-30); margin-bottom: var(--margin-bottom-15); } .contact-section .options-list li:before { position: absolute; content: "\f1a3"; left: 0px; font-weight: 800; color: var(--main-color); font-family: "Flaticon"; } /*** ==================================================================== Contact Form ==================================================================== ***/ .contact-form .form-group { margin-bottom: var(--margin-bottom-30); } .contact-form .form-group:last-child { margin-bottom: 0px; } .contact-form .form-group input[type="text"], .contact-form .form-group input[type="password"], .contact-form .form-group input[type="tel"], .contact-form .form-group input[type="email"], .contact-form .form-group select, .contact-form .form-group .ui-selectmenu-button.ui-button { position: relative; display: block; width: 100%; line-height: 28px; padding: 10px 25px; height: 55px; border-radius: 0px; font-size: var(--font-16); color: var(--color-sixty); background: var(--white-color); -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; border: 1px solid rgba(var(--black-color-rgb), 0.06); } .contact-form .form-group textarea::-webkit-input-placeholder, .contact-form .form-group input::-webkit-input-placeholder { color: var(--color-sixty); } .contact-form .form-group input[type="text"]:focus, .contact-form .form-group input[type="password"]:focus, .contact-form .form-group input[type="tel"]:focus, .contact-form .form-group input[type="email"]:focus, .contact-form .form-group select:focus, .contact-form .form-group textarea:focus { border-color: var(--main-color); } .contact-form .form-group textarea { position: relative; display: block; width: 100%; line-height: 24px; padding: 15px 25px 25px; font-size: var(--font-16); color: var(--main-color-two); height: 220px; background: var(--white-color); resize: none; font-size: 16px; border-radius: 0px; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; border: 1px solid rgba(var(--black-color-rgb), 0.06); } .contact-form .check-box { position: relative; } .contact-form .check-box label { color: #2b2b2b; } .contact-form .check-box label { position: relative; display: block; width: 100%; cursor: pointer; margin-bottom: 0; font-weight: 400; line-height: 22px; background: #ffffff; padding: 4px 10px 0px; padding-left: 30px; font-size: var(--font-16); color: var(--color-sixty); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .contact-form .check-box input[type="checkbox"]:checked + label { border-color: var(--main-color); } .contact-form .check-box label { padding-left: 30px; padding-top: 1px; cursor: pointer; } .contact-form .check-box label:before { position: absolute; left: 0; top: 2px; height: 20px; width: 20px; background: #ffffff; content: ""; border-radius: 0px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; border: 1px solid rgba(var(--black-color-rgb), 0.1); } .contact-form .check-box label:after { position: absolute; left: 0px; top: 0; height: 15px; line-height: 15px; max-width: 0; font-size: 14px; color: #ffffff; font-weight: 800; overflow: hidden; background: transparent; text-align: center; font-family: "FontAwesome"; -webkit-transition: max-width 500ms ease; -moz-transition: max-width 500ms ease; -ms-transition: max-width 500ms ease; -o-transition: max-width 500ms ease; transition: max-width 500ms ease; } .contact-form .check-box input[type="checkbox"] { display: none; } .contact-form .check-box input[type="checkbox"]:checked + label:before { border: 8px solid var(--main-color); background-color: var(--white-color); } .contact-form .check-box input[type="checkbox"]:checked + label:after { max-width: 20px; opacity: 1; } .contact-form .theme-btn { cursor: pointer; } .contact-form input.error, .contact-form select.error, .contact-form textarea.error { border-color: #ff0000 !important; } .contact-form label.error { display: block; line-height: 24px; padding: 5px 0px 0px; margin: 0px; text-transform: uppercase; font-size: 12px; color: #ff0000; font-weight: 500; } .contact-section .lower-box { position: relative; padding-top: var(--padding-top-10); } /* Video Box */ .video-box { position: relative; } .video-box .video-image { position: relative; margin: 0px; overflow: hidden; background-color: var(--main-color); } .video-box .video-image img { position: relative; width: 100%; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .video-box:hover .video-image img { transform: scale(1.05, 1.05); filter: grayscale(100%); } .video-box .overlay-box { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; text-align: center; overflow: hidden; line-height: 45px; overflow: hidden; } .video-box .overlay-box span { position: absolute; width: 85px; height: 85px; left: 50%; top: 50%; z-index: 10; font-weight: 700; text-align: center; display: inline-block; margin-top: -42px; margin-left: -42px; line-height: 85px; border-radius: 50%; font-family: "flaticon"; font-size: var(--font-20); color: var(--black-color); padding-left: var(--padding-left-5); background-color: var(--white-color); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .video-box .overlay-box span:hover { color: var(--white-color); background-color: var(--main-color); } .video-box.style-two .overlay-box span { font-size: var(--font-24); font-family: "FontAwesome"; color: var(--color-twentyseven); } .video-box .ripple, .video-box .ripple:before, .video-box .ripple:after { position: absolute; top: 50%; left: 50%; width: 85px; height: 85px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-border-radius: 50% 50% 50% 50%; -moz-border-radius: 50% 50% 50% 50%; -ms-border-radius: 50% 50% 50% 50%; -o-border-radius: 50% 50% 50% 50%; border-radius: 50% 50% 50% 50%; -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); -ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); -o-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .video-box .ripple:before { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; } .video-box .ripple:after { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; } .contact-section .lower-content-box { position: relative; } .contact-section h3 { margin-bottom: var(--margin-bottom-25); } /* Sidebar Widget Two */ .sidebar-widget-two { position: relative; margin-bottom: var(--margin-bottom-50); } .sidebar-widget-two .widget-content { position: relative; padding-top: var(--padding-top-30); border-top: 1px solid rgba(var(--black-color-rgb), 0.1); } .sidebar-widget-two .widget-content.searchBox-wrapper{ border-top: 0px; } .sidebar-widget-two .widget-content.searchBox-wrapper:before{ content: none; } .sidebar-widget-two .widget-content:before { position: absolute; content: ""; left: 0px; top: -1px; width: 60px; height: 1px; background-color: var(--main-color); } .sidebar-widget-two .social-list { position: relative; } .sidebar-widget-two .social-list li { position: relative; font-weight: 400; font-size: var(--font-18); margin-bottom: var(--margin-bottom-25); } .sidebar-widget-two .social-list li .icon { position: relative; width: 36px; height: 36px; line-height: 34px; border-radius: 50px; text-align: center; font-size: var(--font-16); margin-right: var(--margin-right-15); border: 1px solid rgba(var(--black-color-rgb), 0.1); } .sidebar-widget-two .social-list a { position: absolute; right: 0px; font-weight: 500; border-radius: 50px; display: inline-block; padding: 5px 20px 4px; font-size: var(--font-15); text-transform: capitalize; color: var(--color-sixtythree); border: 1px solid rgba(var(--black-color-rgb), 0.1); } .sidebar-widget-two .social-list a:hover { color: var(--white-color); background-color: var(--main-color); } .sidebar-widget-two .social-list li:last-child { margin-bottom: var(--margin-zero); } /* Attorney Posts */ .post-widget { position: relative; } .post-widget .post { position: relative; min-height: 80px; padding-left: var(--padding-left-120); margin-bottom: var(--margin-bottom-20); } .post-widget .post .post-number { position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; line-height: 18px; text-align: center; font-weight: 700; color: var(--white-color); font-size: var(--font-10); background-color: var(--main-color); font-family: var(--font-family-Roboto); } .post-widget .post:last-child { margin-bottom: var(--margin-zero); } .post-widget .post .thumb { position: absolute; left: 0; top: 0; width: 103px; overflow: hidden; } .post-widget .post .thumb a { display: block; } .post-widget .post .thumb img { display: block; width: 100%; height: auto; } .post-widget .post h6 { font-weight: 500; line-height: 22px; line-height: 28px; margin-top: var(--margin-top-5); margin-bottom: var(--margin-bottom-5); } .post-widget .post h6 a { color: var(--color-sixtyfour); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .post-widget .post h6 a:hover { color: var(--main-color); } .post-widget .post .category { position: relative; display: block; opacity: 0.6; font-weight: 500; font-size: var(--font-12); color: var(--black-color); text-transform: uppercase; font-family: var(--font-family-Roboto); } /* Trending Widget */ .trending-widget .content { position: relative; padding: 40px 30px; background-color: var(--color-sixtyfive); } .trending-widget .title { position: relative; padding: 4px 22px; border-radius: 50px; color: var(--white-color); display: inline-block; background-color: var(--main-color); } .trending-widget h3 { margin-top: var(--margin-top-20); color: var(--color-sixtysix); } .trending-widget h3 span { color: var(--main-color); text-decoration: underline; } .trending-widget .buy-btn { position: relative; font-weight: 500; padding: 8px 24px; border-radius: 50px; display: inline-block; color: var(--white-color); font-size: var(--font-14); margin-top: var(--margin-top-20); background-color: var(--main-color); } .trending-widget .buy-btn:hover { background-color: var(--black-color); } /* Tweet Box */ .tweet-box { position: relative; margin-bottom: var(--margin-bottom-30); } .tweet-box .tweet-title { position: relative; text-align: center; } .tweet-box .tweet-title:before { position: absolute; content: "\f099"; left: 0px; top: 0px; color: #0095e9; font-size: var(--font-20); font-family: "FontAwesome"; } .tweet-box .tweet { position: relative; line-height: 26px; font-size: var(--font-16); color: var(--color-sixtyseven); margin-top: var(--margin-top-15); } .tweet-box .tweet a { position: relative; color: var(--color-sixtyeight); } .tweet-box .tweet-date { position: relative; line-height: 1em; font-size: var(--font-14); color: var(--color-sixtyseven); margin-top: var(--margin-top-15); padding-left: var(--padding-left-25); } .tweet-box .tweet-date:before { position: absolute; content: "\f073"; left: 0px; line-height: 1em; font-family: "FontAwesome"; } /* Category List Two */ .category-list-two { position: relative; } .category-list-two li { position: relative; padding: 12px 20px; border-radius: 5px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; margin-bottom: var(--margin-bottom-20); border: 1px solid rgba(var(--black-color-rgb), 0.1); } .category-list-two li:hover { border-color: var(--main-color); background-color: var(--main-color); } .category-list-two li:hover .icon { color: var(--white-color); background-color: rgba(var(--white-color-rgb), 0.2); } .category-list-two li:hover a:before, .category-list-two li:hover .number, .category-list-two li:hover a { color: var(--white-color); } .category-list-two li .icon { position: relative; width: 42px; height: 42px; line-height: 42px; text-align: center; border-radius: 50px; display: inline-block; font-family: "Flaticon"; font-size: var(--font-20); color: var(--main-color); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; margin-right: var(--margin-right-10); background-color: rgba(var(--main-color-rgb), 0.1); } .category-list-two li a { position: relative; font-weight: 500; display: flex; align-items: center; font-size: var(--font-15); color: var(--color-sixtyfour); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .category-list-two li .number { position: absolute; right: 35px; font-size: var(--font-15); color: var(--main-color); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .category-list-two li a:before { position: absolute; right: 0px; top: 10px; opacity: 0.4; font-weight: 700; content: "\f10e"; font-size: var(--font-20); color: var(--color-fifty); font-family: "flaticon"; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .news-form { position: relative; } .news-form .form-group { margin-bottom: var(--margin-bottom-20); } .news-form .form-group .ui-selectmenu-button.ui-button { position: relative; display: block; width: 100%; line-height: 34px; padding: 10px 25px; height: 55px; border-radius: 5px; font-size: var(--font-16); color: var(--color-sixty); background: var(--white-color); -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; border: 1px solid rgba(var(--black-color-rgb), 0.06); } .news-form .form-group .search-btn { position: relative; display: block; width: 100%; font-weight: 500; padding: 16px 15px; border-radius: 4px; font-size: var(--font-16); text-transform: uppercase; color: var(--white-color); background: var(--main-color); } .news-form .form-group .search-btn:hover { letter-spacing: 2px; } /* Tag List Two */ .tag-list-two { position: relative; display: block; } .tag-list-two li { position: relative; display: inline-block; margin-right: var(--margin-right-10); margin-bottom: var(--margin-bottom-10); } .tag-list-two li a { position: relative; display: block; line-height: 20px; font-weight: 500; padding: 9px 16px; border-radius: 0px; font-size: var(--font-14); text-transform: capitalize; color: var(--color-fiftytwo); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; background-color: var(--color-fiftythree); } .tag-list-two li a:hover { color: var(--white-color); background-color: var(--main-color); border-color: var(--main-color); } .news-block-two { position: relative; margin-bottom: var(--margin-bottom-50); } .news-block-two .inner-box { position: relative; } .news-block-two .image { position: relative; border-radius: 10px; overflow: hidden; } .news-block-two .image img { position: relative; width: 100%; display: block; } .news-block-two .post-date { position: absolute; left: 15px; top: 15px; width: 74px; height: 70px; font-weight: 700; text-align: center; border-radius: 6px; padding: 12px 0px 0px; font-size: var(--font-20); color: var(--white-color); font-family: var(--font-family-Roboto); background-color: var(--main-color); } .news-block-two .lower-content { position: relative; padding-top: var(--padding-top-25); } .news-block-two .tags { position: relative; } .news-block-two .tags span { position: relative; border-radius: 4px; display: inline-block; padding: 3px 10px 2px; font-size: var(--font-14); color: var(--white-color); font-family: var(--font-family-Roboto); background-color: var(--main-color); margin-right: var(--margin-right-15); } .news-block-two .tags a { position: relative; font-weight: 500; font-size: var(--font-15); margin-right: var(--margin-right-15); padding-right: var(--padding-right-15); color: rgba(var(--black-color-rgb), 0.5); } .news-block-two .tags a:before { position: absolute; content: ""; right: 0px; top: 8px; width: 5px; height: 5px; border-radius: 50px; background-color: var(--main-color); } .news-block-two .tags a:hover { color: var(--main-color); } .news-block-two .tags a:last-child { margin-right: var(--margin-zero); padding-right: var(--padding-zero); } .news-block-two .tags a:last-child::before { display: none; } .news-block-two h3 { font-weight: 500; margin: 20px 0px; font-size: var(--font-32); } .news-block-two h3 a { position: relative; color: var(--black-color); } .news-block-two h3 a:hover { color: var(--main-color); } .news-block-two .post-meta { position: relative; } .news-block-two .post-meta li { position: relative; line-height: 1em; font-size: var(--font-16); color: var(--black-color); padding-left: var(--padding-left-25); margin-right: var(--margin-right-15); padding-right: var(--padding-right-15); border-right: 2px solid rgba(var(--black-color-rgb), 0.1); } .news-block-two .post-meta li:first-child { padding-left: var(--padding-left-35); } .news-block-two .post-meta li .icon { position: absolute; left: 0px; font-family: "Flaticon"; } .news-block-two .post-meta .author { position: absolute; left: 0px; top: -4px; width: 25px; height: 26px; overflow: hidden; border-radius: 50px; display: inline-block; margin-right: var(--margin-right-10); } .news-block-two .post-meta li span { position: relative; color: var(--main-color); } .news-block-two .post-meta li:last-child { border: none; margin-right: var(--margin-zero); padding-right: var(--padding-zero); } .news-block-two .text { position: relative; margin-top: var(--margin-top-40); padding-top: var(--padding-top-20); border-top: 1px solid rgba(var(--black-color-rgb), 0.1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* News Detail */ .blog-detail { position: relative; } .blog-detail .inner-box { position: relative; } .blog-detail .image { position: relative; border-radius: 10px; overflow: hidden; } .blog-detail .image img { position: relative; width: 100%; display: block; } .blog-detail .post-date { position: absolute; left: 15px; top: 15px; width: 74px; height: 70px; font-weight: 700; text-align: center; border-radius: 6px; padding: 12px 0px 0px; font-size: var(--font-20); color: var(--white-color); font-family: var(--font-family-Roboto); background-color: var(--main-color); } .blog-detail .carousel-box { position: relative; } .blog-detail .carousel-box .owl-dots { display: none; } .blog-detail .carousel-box .owl-nav { position: absolute; left: 30px; top: 50%; right: 30px; margin-top: -22px; } .blog-detail .carousel-box .owl-nav .owl-prev { position: absolute; left: 0px; width: 60px; height: 36px; font-weight: 600; line-height: 36px; text-align: center; font-size: var(--font-18); font-family: "Flaticon"; color: var(--white-color); border-radius: 50px; background-color: rgba(var(--white-color-rgb), 0.2); -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; } .blog-detail .carousel-box .owl-nav .owl-next { position: absolute; right: 0px; width: 60px; height: 36px; font-weight: 600; line-height: 36px; text-align: center; font-size: var(--font-18); font-family: "Flaticon"; color: var(--white-color); border-radius: 50px; background-color: rgba(var(--white-color-rgb), 0.2); font-family: "Flaticon"; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; } .blog-detail .carousel-box .owl-nav .owl-prev:hover, .blog-detail .carousel-box .owl-nav .owl-next:hover { color: var(--black-color); background-color: var(--white-color); } .blog-detail .lower-content { position: relative; padding-top: var(--padding-top-25); } .blog-detail .tags { position: relative; } .blog-detail .tags span { position: relative; border-radius: 4px; display: inline-block; padding: 3px 10px 2px; font-size: var(--font-14); color: var(--white-color); font-family: var(--font-family-Roboto); background-color: var(--main-color); margin-right: var(--margin-right-15); } .blog-detail .tags a { position: relative; font-weight: 500; font-size: var(--font-15); margin-right: var(--margin-right-15); padding-right: var(--padding-right-15); color: rgba(var(--black-color-rgb), 0.5); } .blog-detail .tags a:before { position: absolute; content: ""; right: 0px; top: 8px; width: 5px; height: 5px; border-radius: 50px; background-color: var(--main-color); } .blog-detail .tags a:hover { color: var(--main-color); } .blog-detail .tags a:last-child { margin-right: var(--margin-zero); padding-right: var(--padding-zero); } .blog-detail .tags a:last-child::before { display: none; } .blog-detail h3 { font-weight: 500; margin: 20px 0px; font-size: var(--font-32); color: var(--color-thirtynine); } .blog-detail h4 { color: var(--color-thirtynine); margin-bottom: var(--margin-bottom-15); } .blog-detail h5 { color: var(--color-thirtynine); margin-bottom: var(--margin-bottom-15); } .blog-detail .post-meta { position: relative; margin-bottom: var(--margin-bottom-20); padding-bottom: var(--padding-bottom-30); border-bottom: 1px solid rgba(var(--black-color-rgb), 0.1); } .blog-detail .post-meta li { position: relative; line-height: 1em; font-size: var(--font-16); color: var(--black-color); padding-left: var(--padding-left-25); margin-right: var(--margin-right-15); padding-right: var(--padding-right-15); border-right: 2px solid rgba(var(--black-color-rgb), 0.1); } .blog-detail .post-meta li:first-child { padding-left: var(--padding-left-35); } .blog-detail .post-meta li .icon { position: absolute; left: 0px; font-family: "Flaticon"; } .blog-detail .post-meta .author { position: absolute; left: 0px; top: -4px; width: 25px; height: 26px; overflow: hidden; border-radius: 50px; display: inline-block; margin-right: var(--margin-right-10); } .blog-detail .post-meta li span { position: relative; color: var(--main-color); } .blog-detail .post-meta li:last-child { border: none; margin-right: var(--margin-zero); padding-right: var(--padding-zero); } .blog-detail p { color: var(--color-sixtynine); margin-bottom: var(--margin-bottom-15); } .blog-detail .two-column { position: relative; margin-top: var(--margin-top-25); margin-bottom: var(--margin-bottom-20); } .blog-detail .two-column:before { position: absolute; content: ""; left: 46%; top: 0px; bottom: 0px; width: 1px; opacity: 0.1; background-color: var(--black-color); } .blog-detail .list-one { position: relative; } .blog-detail .list-one li { position: relative; font-size: var(--font-16); padding-left: var(--padding-left-50); margin-bottom: var(--margin-bottom-25); color: rgba(var(--color-fiftyfive-rgb), 0.8); } .blog-detail .list-one li:before { position: absolute; content: "\f1a3"; left: 0px; top: 0px; width: 28px; height: 28px; text-align: center; border-radius: 50px; line-height: 28px; font-size: var(--font-12); font-family: "Flaticon"; color: var(--main-color); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); } .blog-detail .list-two { position: relative; } .blog-detail .list-two li { position: relative; line-height: 30px; font-size: var(--font-16); color: var(--color-twelve); padding-left: var(--padding-left-30); margin-bottom: var(--margin-bottom-15); } .blog-detail .list-two li:before { position: absolute; content: ""; left: 0px; top: 10px; width: 10px; height: 10px; background-color: var(--main-color); } .blog-detail .list-two li:last-child { margin-bottom: var(--margin-zero); } .blog-detail blockquote { position: relative; padding: 35px 30px; font-weight: 500; line-height: 38px; font-size: var(--font-24); color: var(--color-seventy); margin-top: var(--margin-top-40); margin-bottom: var(--margin-bottom-40); background-color: var(--color-sixtytwo); border-left: 4px solid var(--main-color); } .blog-detail blockquote .designation { position: relative; opacity: 0.8; font-weight: 400; display: block; font-size: var(--font-16); color: var(--color-seventy); margin-top: var(--margin-top-15); padding-left: var(--padding-left-50); } .blog-detail blockquote .quote-icon { position: absolute; right: 30px; bottom: 20px; opacity: 0.1; line-height: 1em; font-size: var(--font-80); font-family: "Flaticon"; } .blog-detail blockquote .designation:before { position: absolute; content: ""; left: 0px; top: 17px; width: 30px; height: 1px; opacity: 0.2; background-color: var(--black-color); } .blog-detail .list-three { position: relative; } .blog-detail .list-three li { position: relative; line-height: 30px; font-weight: 500; font-size: var(--font-18); color: var(--color-thirtynine); font-family: var(--font-family-Inter); padding-left: var(--padding-left-30); margin-bottom: var(--margin-bottom-15); } .blog-detail .list-three li:before { position: absolute; content: ""; left: 0px; top: 9px; width: 10px; height: 10px; background-color: var(--main-color); } .blog-detail .list-three li:last-child { margin-bottom: var(--margin-zero); } .blog-detail .gallery-box { position: relative; margin-top: var(--margin-top-40); margin-bottom: var(--margin-bottom-40); } .blog-detail .image-two { position: relative; border-radius: 10px; overflow: hidden; } .blog-detail .image-two img { position: relative; width: 100%; display: block; } .blog-detail .image-two .tag { position: absolute; left: 15px; top: 15px; z-index: 1; border-radius: 4px; display: inline-block; padding: 3px 10px 2px; font-size: var(--font-14); color: var(--white-color); font-family: var(--font-family-Roboto); background-color: var(--main-color); } .blog-detail .business-box { position: relative; margin-top: var(--margin-top-35); margin-bottom: var(--margin-bottom-50); } .blog-detail .video-content { position: relative; font-style: italic; font-weight: 500; text-align: center; line-height: 32px; font-size: var(--font-18); color: var(--color-seventyone); margin-top: var(--margin-top-25); margin-bottom: var(--margin-bottom-10); font-family: var(--font-family-Roboto); } /* Post Share Options */ .blog-detail .post-share-options { position: relative; margin-top: var(--margin-top-40); margin-bottom: var(--margin-bottom-60); } .blog-detail .post-share-options .post-share-inner { position: relative; } .blog-detail .post-share-options .tags-box { position: relative; float: left; } .blog-detail .post-share-options .tags-box span { font-weight: 500; font-size: var(--font-22); text-transform: capitalize; color: var(--color-thirtynine); margin-top: var(--margin-top-5); margin-right: var(--margin-right-10); } .blog-detail .post-share-options .tags-box a { position: relative; font-weight: 500; padding: 8px 25px; border-radius: 3px; display: inline-block; text-transform: uppercase; font-size: var(--font-12); color: var(--color-fourtyeight); margin-right: var(--margin-right-10); font-family: var(--font-family-Roboto); border: 1px solid rgba(var(--black-color-rgb), 0.1); transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; margin-bottom: var(--margin-bottom-5); } .blog-detail .post-share-options .tags-box a:last-child { margin-right: 0px; } .blog-detail .post-share-options .tags-box a:hover { color: var(--white-color); border-color: var(--main-color); background-color: var(--main-color); } .blog-detail .social-box { position: relative; float: right; margin-top: 6px; } .blog-detail .social-box .share { position: relative; font-weight: 500; font-size: var(--font-22); text-transform: capitalize; color: var(--color-thirtynine); margin-top: var(--margin-top-5); margin-right: var(--margin-right-10); } .blog-detail .social-box li { position: relative; display: inline-block; margin-left: var(--margin-left-5); } .blog-detail .social-box li a { position: relative; width: 44px; height: 40px; text-align: center; line-height: 40px; display: inline-block; font-size: var(--font-16); -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; color: var(--color-thirtynine); background-color: var(--color-seventytwo); } .blog-detail .social-box li a:hover { color: var(--white-color); background-color: var(--main-color); } /* More Posts */ .blog-detail .more-posts { position: relative; padding-top: var(--padding-bottom-20); padding-bottom: var(--padding-bottom-20); border-top: 1px solid rgba(var(--black-color-rgb), 0.1); border-bottom: 1px solid rgba(var(--black-color-rgb), 0.1); } .blog-detail .more-posts:before { position: absolute; content: ""; left: 50%; top: 20px; width: 1px; bottom: 20px; border-right: 1px solid rgba(var(--black-color-rgb), 0.1); } .blog-detail .post-info { position: relative; font-weight: 400; display: block; font-size: var(--font-14); color: var(--color-sixtyfour); margin-top: var(--margin-top-10); font-family: var(--font-family-Roboto); } .blog-detail .post-info .author { position: relative; margin-right: var(--margin-right-5); } .blog-detail .post-info .date { position: relative; line-height: 1em; font-size: var(--font-14); color: var(--color-sixtyseven); margin-top: var(--margin-top-15); margin-left: var(--margin-left-10); padding-left: var(--padding-left-25); } .blog-detail .post-info .date:before { position: absolute; content: "\f073"; left: 0px; top: 1px; line-height: 1em; font-family: "FontAwesome"; } /* Prev Post */ .blog-detail .new-post { position: relative; padding-left: var(--padding-left-90); padding-right: var(--padding-right-90); } .blog-detail .new-post .prev-arrow { position: absolute; left: 0px; top: 25px; width: 55px; height: 36px; line-height: 36px; text-align: center; border-radius: 50px; font-weight: 700; cursor: pointer; color: var(--main-color); font-size: var(--font-10); font-family: "Flaticon"; background-color: var(--color-seventytwo); } .blog-detail .next-arrow { position: absolute; right: 0px; top: 45px; width: 55px; height: 36px; line-height: 36px; text-align: center; border-radius: 50px; font-weight: 700; cursor: pointer; color: var(--main-color); font-size: var(--font-10); font-family: "Flaticon"; background-color: var(--color-seventytwo); } .blog-detail .more-posts .new-post .image { position: absolute; left: 0px; top: 0px; width: 85px; overflow: hidden; border-radius: 50%; } .blog-detail .new-post .post-inner { position: relative; min-height: 85px; padding-left: var(--padding-left-110); } .blog-detail .new-post .post-inner a { position: relative; font-weight: 500; line-height: 24px; font-size: var(--font-16); color: var(--color-sixtyfour); } .blog-detail .prev-arrow:hover, .blog-detail .next-arrow:hover { color: var(--white-color); background-color: var(--main-color); } /*** ==================================================================== Comments Area ==================================================================== ***/ .sidebar-page-container .comments-area { position: relative; padding-top: var(--padding-top-55); margin-bottom: var(--margin-bottom-50); padding-bottom: var(--padding-bottom-50); border-bottom: 1px solid rgba(var(--black-color-rgb), 0.05); } .sidebar-page-container .group-title { position: relative; margin-bottom: var(--margin-bottom-30); } .sidebar-page-container .group-title h4 { font-weight: 500; color: var(--color-thirtynine); margin-bottom: var(--margin-bottom-30); } .sidebar-page-container .comments-area .comment-box { position: relative; margin-bottom: var(--margin-bottom-40); -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; } .sidebar-page-container .comments-area .comment-box:last-child { margin-bottom: var(--margin-zero); } .sidebar-page-container .comments-area .comment { position: relative; min-height: 120px; font-size: var(--font-14); padding: 0px 0px 0px 100px; } .sidebar-page-container .comments-area .reply-comment { margin-left: var(--margin-left-100); } .sidebar-page-container .comments-area .comment-box .author-thumb { position: absolute; left: 0px; top: 0px; width: 80px; height: 80px; overflow: hidden; border-radius: 50%; margin-bottom: var(--margin-bottom-20); } .sidebar-page-container .comments-area .comment-box .author-thumb img { width: 100%; display: block; } .sidebar-page-container .comments-area .comment-info { margin-bottom: var(--margin-bottom-15); } .sidebar-page-container .comments-area .comment-box strong { position: relative; font-weight: 500; display: block; text-transform: capitalize; font-size: var(--font-18); color: var(--color-thirtynine); } .sidebar-page-container .comments-area .comment-box .text { max-width: 780px; line-height: 28px; font-size: var(--font-15); color: var(--color-sixtynine); margin-bottom: var(--margin-bottom-15); font-family: var(--font-family-Roboto); } .sidebar-page-container .comments-area .comment-info .comment-time { position: relative; display: block; font-weight: 500; letter-spacing: 1px; font-size: var(--font-12); text-transform: uppercase; color: var(--color-fourtyeight); margin-top: var(--margin-top-5); font-family: var(--font-family-Roboto); } .sidebar-page-container .comments-area .comment-box .reply-btn { position: absolute; right: 100px; top: 0px; font-weight: 500; font-size: var(--font-24); color: var(--color-thirtynine); font-family: "Flaticon"; } .sidebar-page-container .comments-area .comment-box .reply-btn:hover { color: var(--main-color); } /*** ==================================================================== Static Content ==================================================================== ***/ .static-content { padding-block: 10px; max-width: 1200px; margin: auto; } .static-content h2 { line-height: normal; font-size: 21px; margin-top: 20px; margin-bottom: 10px; font-weight: 600; letter-spacing: .3px; } .static-content p,.static-content li{ font-size: 14px; font-size: 15px; line-height: 23px; color: var(--color-two); margin-bottom: 10px; } .static-content li{ margin-bottom: 7px; } .static-content li strong,.static-content p strong{ color: #333; } .static-content ul.numeric li{ list-style-type: decimal; } .static-content ul.bullet-points li{ list-style-type: disc; } .static-content a:hover { color: black; } .static-content .points p { margin-bottom: 5px; } .static-content .points strong { color: var(--color-three); } /* Gov Page */ .govPage .about-us h2{ font-size: 22px; margin-bottom:1rem; margin-top: 0; } .govPage .about-us p{ margin-bottom:1rem; } .govPage a:hover{ text-decoration:underline; } .govPage .contracts-portion{ margin-top:30px; } .govPage .contract-block .hasMedia{ margin-top:10px; margin-bottom:16px; text-align:center; } .govPage .contract-block .hasMedia img{ max-height:74px; } .govPage .contract-block .hasMedia span{ display:block; margin-top:5px; font-size:14px; font-weight: bold; color: #333; } .govPage .contract-block .contract-details{ border-bottom: 1px solid #ccc; padding:15px; } .govPage .contract-block .contract-details p{ margin-bottom:7px; } .govPage ul.graphic-list{ list-style: none; padding: 0px 0px 20px 0; } .govPage ul.graphic-list li{ position: relative; color: var(--color-twelve); font-size: var(--font-15); padding-left: var(--padding-left-30); margin-bottom: var(--margin-bottom-15); letter-spacing: 0.3px; color: inherit; border-bottom: 1px solid #e7e7e7; } .govPage ul.graphic-list li::before{ position: absolute; content: "\f1a3"; left: 0; font-weight: 800; color: var(--main-color); font-family: Flaticon; } .govPage .right-side .image-container { display: flex; flex-wrap: wrap; /* Allow items to wrap to the next line */ justify-content: center; /* Center items horizontally */ gap:20px; } .govPage .right-side .image-wrapper { /* Adjust the spacing between image wrappers */ text-align: center; /* Center the content within each wrapper */ } .govPage .right-side .image-wrapper img{ max-width:100px; } /*** ==================================================================== Comment Form ==================================================================== ***/ .comment-form .form-group { margin-bottom: var(--margin-bottom-30); } .comment-form .form-group:last-child { margin-bottom: 0px; } .comment-form .form-group input[type="text"], .comment-form .form-group input[type="password"], .comment-form .form-group input[type="tel"], .comment-form .form-group input[type="email"], .comment-form .form-group select, .comment-form .form-group .ui-selectmenu-button.ui-button { position: relative; display: block; width: 100%; line-height: 28px; padding: 10px 25px; height: 60px; border-radius: 0px; font-size: var(--font-16); color: var(--color-sixty); -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; font-family: var(--font-family-Inter); background-color: var(--color-seventythree); border: 1px solid rgba(var(--black-color-rgb), 0.06); } .comment-form .form-group textarea::-webkit-input-placeholder, .comment-form .form-group input::-webkit-input-placeholder { color: var(--color-sixty); } .comment-form .form-group input[type="text"]:focus, .comment-form .form-group input[type="password"]:focus, .comment-form .form-group input[type="tel"]:focus, .comment-form .form-group input[type="email"]:focus, .comment-form .form-group select:focus, .comment-form .form-group textarea:focus { border-color: var(--main-color); background-color: var(--white-color); } .comment-form .form-group textarea { position: relative; display: block; width: 100%; line-height: 24px; padding: 15px 25px 25px; font-size: var(--font-16); color: var(--main-color-two); height: 220px; resize: none; font-size: 16px; border-radius: 0px; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; font-family: var(--font-family-Inter); background-color: var(--color-seventythree); border: 1px solid rgba(var(--black-color-rgb), 0.06); } .comment-form .check-box { position: relative; } .comment-form .check-box label { color: #2b2b2b; } .comment-form .check-box label { position: relative; display: block; width: 100%; cursor: pointer; margin-bottom: 0; font-weight: 400; line-height: 22px; background: #ffffff; padding: 4px 10px 0px; padding-left: 30px; font-size: var(--font-16); color: var(--color-sixty); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .comment-form .check-box input[type="checkbox"]:checked + label { border-color: var(--main-color); } .comment-form .check-box label { padding-left: 30px; padding-top: 1px; cursor: pointer; } .comment-form .check-box label:before { position: absolute; left: 0; top: 2px; height: 20px; width: 20px; background: #ffffff; content: ""; border-radius: 0px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; border: 1px solid rgba(var(--black-color-rgb), 0.1); } .comment-form .check-box label:after { position: absolute; left: 0px; top: 0; height: 15px; line-height: 15px; max-width: 0; font-size: 14px; color: #ffffff; font-weight: 800; overflow: hidden; background: transparent; text-align: center; font-family: "FontAwesome"; -webkit-transition: max-width 500ms ease; -moz-transition: max-width 500ms ease; -ms-transition: max-width 500ms ease; -o-transition: max-width 500ms ease; transition: max-width 500ms ease; } .comment-form .check-box input[type="checkbox"] { display: none; } .comment-form .check-box input[type="checkbox"]:checked + label:before { border: 8px solid var(--main-color); background-color: var(--white-color); } .comment-form .check-box input[type="checkbox"]:checked + label:after { max-width: 20px; opacity: 1; } .comment-form .theme-btn { cursor: pointer; border-radius: 0px; } /*** ==================================================================== Error Section ==================================================================== ***/ .error-section { position: relative; text-align: center; padding: 60px 0px 80px; } .error-section .content { position: relative; } .error-section h1 { line-height: 1em; font-size: 340px; font-weight: 700; color: rgba(var(--black-color-rgb), 0.15); } .error-section h2 { font-weight: 600; font-size: var(--font-55); margin-top: var(--margin-top-15); } .error-section .text { font-size: var(--font-18); color: var(--color-sixtyone); margin-top: var(--margin-top-35); } .error-section .button-box { margin-top: var(--margin-top-35); } /*** ==================================================================== Register Section ==================================================================== ***/ .register-section { position: relative; padding: 110px 0px 80px; } .register-section .column { padding: 0px 40px; border: 1px solid #ccc; } .register-section h4 { font-weight: 500; color: var(--black-color); margin-bottom: var(--margin-bottom-30); margin-inline: auto; margin-bottom: 3.5rem; margin-top: -25px; background: white; width: max-content; font-size: 30px; padding-inline: 20px; } .register-section .column.login_column input { max-width: 450px; } .register-section .alert[id$="-alert"]{ margin-top: -60px; margin-bottom: 30px; } .styled-form { position: relative; } .styled-form .submit-text { font-weight: 400; font-size: var(--font-15); color: var(--main-color-two); margin-top: var(--margin-top-10); } .styled-form .form-group { position: relative; margin-bottom: var(--margin-bottom-30); } .styled-form .form-group label { position: relative; display: block; font-weight: 500; font-size: var(--font-16); margin-bottom: var(--margin-bottom-15); } .checkout-section .styled-form .form-group { position: relative; margin-bottom: var(--margin-bottom-20); } .styled-form .form-group .check-box { line-height: 24px; font-size: var(--font-15); font-weight: normal; padding-top: var(--padding-top-5); color: var(--main-color-two); } .styled-form .form-group .check-box label { position: relative; top: -1px; font-weight: normal; padding: 0px; font-size: 15px; cursor: pointer; } .styled-form input[type="text"], .styled-form input[type="email"], .styled-form input[type="password"], .styled-form input[type="tel"], .styled-form input[type="number"], .styled-form input[type="url"], .styled-form select, .styled-form textarea { position: relative; display: block; width: 100%; background: var(--white-color); line-height: 30px; padding: 8px 30px; height: 40px; font-weight: 400; border-radius: 50px; font-size: var(--font-15); border: 1px solid #ccc; color: var(--color-seventyfour); transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; font-family: var(--font-family-Inter); } .checkout-section .styled-form input[type="text"], .checkout-section .styled-form input[type="email"], .checkout-section .styled-form input[type="password"], .checkout-section .styled-form select { line-height: 26px; height: 44px; } .styled-form select { -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; -o-appearance: none; background: var(--white-color) url(../images/icons/icon-select.png) right center no-repeat; cursor: pointer; } .styled-form select option { text-indent: 20px; } .styled-form .form-group button { font-weight: 500; border-radius: 50px; text-transform: capitalize; font-family: var(--font-family-Inter); background-color: var(--main-color); padding: 7px 20px; } .styled-form textarea { resize: none; height: 110px; } .styled-form input:focus, .styled-form select:focus, .styled-form textarea:focus { border-color: var(--main-color); } /* CheckBox */ .styled-form .form-group .check-box { position: relative; } .styled-form .form-group .check-box label { color: #2b2b2b; } .styled-form .form-group .check-box label { position: relative; display: block; width: 100%; line-height: 22px; padding: 4px 10px 0px; padding-left: 25px; background: #ffffff; font-size: 16px; font-weight: 400; color: #4e4f51; cursor: pointer; margin-bottom: 0; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .styled-form .form-group .check-box label a { color: var(--main-color); } .styled-form .form-group .check-box input[type="checkbox"]:checked + label { border-color: #25a9e0; } .styled-form .form-group .form-group .check-box label { padding-left: 30px; padding-top: 1px; cursor: pointer; } .styled-form .form-group .check-box label:before { position: absolute; left: 0; top: 8px; height: 14px; width: 14px; border-radius: 50%; background-color: var(--white-color); content: ""; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; border: 1px solid rgba(var(--black-color-rgb), 0.15); } .styled-form .form-group .check-box label:after { position: absolute; left: 0px; top: 0; height: 15px; line-height: 15px; max-width: 0; font-size: 14px; color: var(--white-color); font-weight: 800; overflow: hidden; background: transparent; text-align: center; font-family: "FontAwesome"; -webkit-transition: max-width 500ms ease; -moz-transition: max-width 500ms ease; -ms-transition: max-width 500ms ease; -o-transition: max-width 500ms ease; transition: max-width 500ms ease; } .styled-form .form-group .check-box input[type="checkbox"] { display: none; } .styled-form .form-group .check-box input[type="checkbox"]:checked + label:before { border: 5px solid var(--main-color); background: var(--white-color); } .styled-form .form-group .check-box input[type="checkbox"]:checked + label:after { max-width: 20px; opacity: 1; } /*** ==================================================================== Services Section Six ==================================================================== ***/ .services-section-six { position: relative; padding: 110px 0px 50px; } .services-section-six.style-two { padding: 80px 0px 100px; } .services-section-six .owl-dots { display: none; } .services-section-six .owl-nav { position: absolute; left: -90px; top: 50%; right: -90px; margin-top: -50px; } .services-section-six .owl-nav .owl-prev { position: absolute; left: 0px; width: 46px; height: 45px; font-weight: 600; line-height: 46px; text-align: center; font-family: "Flaticon"; font-size: var(--font-24); color: var(--color-seventyfive); border-radius: 50px 50px 50px 0px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .services-section-six .owl-nav .owl-next { position: absolute; right: 0px; width: 46px; height: 45px; font-weight: 600; line-height: 46px; text-align: center; font-family: "Flaticon"; font-size: var(--font-24); color: var(--color-seventyfive); border-radius: 50px 50px 50px 0px; font-family: "Flaticon"; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .services-section-six .owl-nav .owl-prev:hover, .services-section-six .owl-nav .owl-next:hover { color: var(--main-color); } /*** ==================================================================== Services Detail Section ==================================================================== ***/ .service-detail { position: relative; } .service-detail .inner-box { position: relative; } .service-detail .image { position: relative; } .service-detail .image img { position: relative; width: 100%; display: block; } .service-detail .lower-content { position: relative; padding-top: var(--padding-top-35); } .service-detail h3 { font-weight: 500; font-size: var(--font-32); color: var(--black-color); margin-bottom: var(--margin-bottom-20); } .service-detail p { color: var(--color-twentyfour); margin-bottom: var(--margin-bottom-30); } .service-detail .two-column { position: relative; margin-bottom: var(--margin-bottom-30); } .service-detail .list-one { position: relative; } .service-detail .list-one li { position: relative; font-size: var(--font-16); padding-left: var(--padding-left-30); margin-bottom: var(--margin-bottom-20); color: rgba(var(--color-fiftyfive-rgb), 0.8); } .service-detail .list-one li:before { position: absolute; content: "\f1a3"; left: 0px; top: 0px; font-size: var(--font-14); font-family: "Flaticon"; color: var(--main-color); } /* Category List Three */ .category-list-three { position: relative; } .category-list-three li { position: relative; margin-bottom: var(--margin-bottom-10); } .category-list-three li a { position: relative; font-weight: 500; display: block; padding: 20px 25px; font-size: var(--font-18); color: var(--color-seventysix); background-color: rgba(var(--main-color-rgb), 0.03); } .category-list-three li a:before { position: absolute; right: 10px; top: 10px; width: 50px; height: 44px; opacity: 0.8; line-height: 44px; font-weight: 700; content: "\f10e"; border-radius: 5px; text-align: center; font-family: "flaticon"; font-size: var(--font-20); color: var(--color-seventysix); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .category-list-three li.current a:before, .category-list-three li a:hover::before { color: var(--white-color); background-color: var(--main-color); } .category-list-three li.current a, .category-list-three li a:hover { color: var(--main-color); } /* Timing Widget */ .timing-widget { position: relative; } .timing-widget .button-box { position: relative; margin-top: var(--margin-top-40); } .timing-widget .button-box .theme-btn { text-transform: capitalize; font-weight: 500; font-family: var(--font-family-Roboto); } .timing-widget .widget-content { position: relative; padding: 20px 30px 35px; border: 1px solid rgba(var(--black-color-rgb), 0.08); } /* Time List */ .time-list { position: relative; } .time-list li { position: relative; padding: 14px 0px; font-size: var(--font-16); color: var(--color-twentyfour); margin-bottom: var(--margin-bottom-10); border-bottom: 1px solid rgba(var(--black-color-rgb), 0.08); } /* Gallery Widget */ .gallery-widget { position: relative; } .gallery-widget .title { position: relative; display: block; font-weight: 500; color: var(--black-color); font-size: var(--font-24); margin-bottom: var(--margin-bottom-30); } .gallery-widget .image { position: relative; margin-bottom: var(--margin-bottom-25); } .gallery-widget h4 { margin-bottom: var(--margin-bottom-10); } /*** ==================================================================== Project Page Section ==================================================================== ***/ .project-page-section { position: relative; padding: 110px 0px 70px; } /*** ==================================================================== Project Detail Section ==================================================================== ***/ .project-detail-section { position: relative; padding: 110px 0px 70px; } .project-detail-section .image { position: relative; } .project-detail-section .image img { position: relative; width: 100%; display: block; } .project-detail-section .info-outer { position: relative; padding: 35px 0px; } .project-detail-section .info-box { position: relative; margin-right: var(--margin-right-60); } .project-detail-section .info-box:last-child { margin-right: var(--margin-zero); } .project-detail-section .info-box .box-inner { position: relative; color: var(--color-fourtyeight); font-family: var(--font-family-Inter); padding-left: var(--padding-left-55); } .project-detail-section .info-box .icon { position: absolute; left: 0px; top: 7px; line-height: 1em; font-family: "Flaticon"; font-size: var(--font-36); color: var(--color-seven); background: linear-gradient( to left, var(--color-seven) 0%, var(--color-eight) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .project-detail-section .info-box:hover .icon { -webkit-transform: scale(-1) rotate(180deg); -moz-transform: scale(-1) rotate(180deg); -ms-transform: scale(-1) rotate(180deg); -o-transform: scale(-1) rotate(180deg); transform: scale(-1) rotate(180deg); } .project-detail-section .info-box strong { position: relative; display: block; font-weight: 500; font-size: var(--font-15); color: var(--black-color); margin-bottom: var(--margin-bottom-5); } .project-detail-section .button-box { position: relative; padding: 35px 0px; } .project-detail-section .button-box .project-btn { position: relative; padding: 16px 60px; font-weight: 600; border-radius: 5px; font-size: var(--font-15); color: var(--white-color); background-color: var(--color-seventyseven); } .project-detail-section .button-box .project-btn:hover { background-color: var(--main-color); } .project-detail-section h3 { color: var(--black-color); margin-bottom: var(--margin-bottom-15); } .project-detail-section p { color: var(--color-twentyfour); font-family: var(--font-family-Inter); margin-bottom: var(--margin-bottom-20); } .project-detail-section h4 { color: var(--black-color); margin-bottom: var(--margin-bottom-25); } .project-detail-section .options-list { position: relative; } .project-detail-section .options-list li { position: relative; font-size: var(--font-16); padding-left: var(--padding-left-30); margin-bottom: var(--margin-bottom-15); color: rgba(var(--color-fiftyfive-rgb), 0.8); } .project-detail-section .options-list li:before { position: absolute; content: "\f1a3"; left: 0px; top: 0px; font-size: var(--font-14); font-family: "Flaticon"; color: var(--main-color); } .project-detail-section .options-list li:last-child { margin: var(--margin-zero); } /* Project Info Box */ .project-info-box { position: relative; padding: 50px 45px; border-radius: 5px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); } .project-info-box .info-list { position: relative; } .project-info-box .info-list li { position: relative; line-height: 29.8px; font-size: var(--font-16); color: var(--color-seventyeight); font-family: var(--font-family-Inter); margin-bottom: var(--margin-bottom-30); padding-bottom: var(--padding-bottom-25); border-bottom: 1px solid rgba(var(--black-color-rgb), 0.06); } .project-info-box .info-list li strong { position: relative; font-weight: 500; display: block; color: var(--black-color); font-size: var(--font-18); text-transform: capitalize; margin-bottom: var(--margin-bottom-20); padding-left: var(--padding-left-35); } .project-info-box .info-list li strong:before { position: absolute; content: "\f1a7"; left: 0px; top: 3px; line-height: 1em; font-weight: 500; font-size: var(--font-24); font-family: "flaticon"; color: var(--color-seventyseven); } .project-info-box .info-list li a { position: relative; color: var(--color-seventyeight); font-family: var(--font-family-Inter); } .project-info-box .info-list li:last-child { margin-bottom: var(--margin-zero); } .project-info-box .opening { position: relative; line-height: 28px; font-size: var(--font-14); margin-top: var(--margin-top-40); color: var(--color-seventyeight); font-family: var(--font-family-Inter); padding-left: var(--padding-left-100); } .project-info-box .opening .icon { position: absolute; left: 0px; top: 0px; width: 78px; height: 78px; line-height: 78px; text-align: center; border-radius: 3px; font-family: "Flaticon"; font-size: var(--font-40); color: var(--color-seventyseven); background-color: rgba(var(--main-color-rgb), 0.05); } .project-info-box .opening strong { position: relative; font-weight: 500; display: block; color: var(--black-color); font-size: var(--font-18); text-transform: uppercase; margin-bottom: var(--margin-bottom-5); } .project-info-box .social-box { position: relative; margin-top: var(--margin-top-40); } .project-info-box .social-box li { position: relative; display: inline-block; margin-right: var(--margin-right-10); } .project-info-box .social-box li a { position: relative; width: 50px; height: 50px; line-height: 50px; text-align: center; display: inline-block; border-radius: 50px; font-weight: normal; font-size: var(--font-18); font-family: "FontAwesome"; margin-bottom: var(--margin-bottom-5); color: var(--color-seventyseven); background-color: rgba(var(--main-color-rgb), 0.05); } .project-info-box li a .icon { position: relative; top: 1px; display: inline-block; font-family: "Flaticon"; color: var(--color-seventyseven); margin-right: var(--margin-right-15); } .project-info-box .social-box li a:hover { color: var(--white-color); background-color: var(--main-color); } /* ############################################################## (All Brands Page Start) ################################################################ */ .g_in_spacing_block { padding-top: 50px; padding-bottom: 50px; } #shopByBrand .section-header h2 { color: #0c2e8a; font-weight: 700; font-size: 28px; margin: 0; position: relative; text-transform: uppercase; padding-bottom: 20px; margin-bottom: 20px; } #shopByBrand .section-header h2::before { content: ""; position: absolute; display: block; width: 100%; height: 3px; background: #0f3bb2; bottom: 0; left: 0; margin: 0; } #shopByBrand .shop-brand-menu { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding-block: 15px; } #shopByBrand .shop-brand-menu .primarySearchLetter, #shopByBrand .shop-brand-list .primarySearchLetter { display: inline-block; vertical-align: middle; background: #f0f0f0; color: #333; border: 1px solid #e0e0e0; text-align: center; font-size: 16px; padding: 0px; margin: 2px; border-radius: 50%; transition: all 0.1s ease-in-out; } #shopByBrand .shop-brand-menu .primarySearchLetter:hover, #shopByBrand .shop-brand-menu .primarySearchLetter.active { font-size: 18px; box-shadow: 0px 0px 7px #ccc; color: white; background: linear-gradient( to right, var(--color-seven) 0%, var(--color-eight) 100% ); } #shopByBrand .shop-brand-menu .primarySearchLetter > span, #shopByBrand .shop-brand-list .primarySearchLetter > span { width: 35px; height: 35px; border: 0px; display: table-cell; text-align: center; vertical-align: middle; } #shopByBrand .shop-brand-list { padding-block: 20px; } #shopByBrand .brand-list-box { padding-left: 60px; } #shopByBrand .brand-list-box .brandName { display: inline-block; vertical-align: middle; color: inherit; padding: 0px; margin-bottom: 7px; font-size: 13px; } #shopByBrand .brand-list-box .brandName:before { display: inline-block; vertical-align: top; font-family: FontAwesome; content: "\f105"; margin-right: 7px; line-height: inherit; } #shopByBrand .brand-list-box .brandName:hover { color: var(--main-color); } #shopByBrand .brand-list-box .brands-viewMore { margin-block: 10px; } #shopByBrand .brand-list-box .brands-viewMore a { float: right; margin-right: 20px; font-size: 14px; color: var(--main-color); font-weight: 500; } #shopByBrand .brand-list-box .brands-viewMore a:hover { color: var(--color-three); } /* ############################################################## (All Brands Page End) ################################################################ */ /* ############################################################## (All Categories Page Start) ################################################################ */ #shopByCategory .shop-brand-menu { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding-block: 15px; } #shopByCategory .shop-category-icon { display: inline-block; vertical-align: middle; background: var(--color-four); color: #949393; border: 1px solid #e0e0e0; text-align: center; font-size: 16px; margin: 0px; line-height: normal; border-radius: 50%; } #shopByCategory .shop-category-icon .shop-category-icon-wrapper { display: flex; justify-content: center; align-items: center; height: 40px; width: 40px; } #shopByCategory .shop-category-title { display: inline-block; vertical-align: middle; font-size: 20px; color: #333; padding-left: 5px; } #shopByCategory .shop-brand-menu .primarySearchLetter, #shopByCategory .shop-category-list .primarySearchLetter { display: inline-block; vertical-align: middle; background: #f0f0f0; color: #333; border: 1px solid #e0e0e0; text-align: center; font-size: 16px; padding: 0px; margin: 2px; border-radius: 50%; } #shopByCategory .shop-category-list > a:hover .shop-category-icon { background: linear-gradient( to right, var(--color-seven) 0%, var(--color-eight) 100% ); } #shopByCategory .shop-category-list > a:hover .shop-category-icon i { color: white; } #shopByCategory .shop-brand-menu .primarySearchLetter:hover, #shopByCategory .shop-brand-menu .primarySearchLetter.active { font-size: 18px; box-shadow: 0px 0px 7px #ccc; color: #145c87; } #shopByCategory .shop-brand-menu .primarySearchLetter > span, #shopByCategory .shop-category-list .primarySearchLetter > span { width: 35px; height: 35px; border: 0px; display: table-cell; text-align: center; vertical-align: middle; } #shopByCategory .shop-category-list { padding-block: 20px; } #shopByCategory .category-list-box { padding-left: 60px; } #shopByCategory .category-list-box .brandName { display: inline-block; vertical-align: middle; color: var(--color-three); padding: 0px; margin-bottom: 7px; font-size: var(--font-16); padding-left: 10px; } #shopByCategory .category-list-box .brandName:before { display: inline-block; vertical-align: top; font-family: FontAwesome; content: "\f105"; margin-right: 7px; line-height: inherit; } #shopByCategory .category-list-box .brandName:hover { color: var(--main-color); } #shopByCategory .category-list-box .category-viewMore { margin-block: 10px; } #shopByCategory .category-list-box .category-viewMore a { float: right; margin-right: 20px; font-size: 14px; color: var(--main-color); font-weight: 500; } #shopByCategory .category-list-box .category-viewMore a:hover { color: var(--color-three); } /* ############################################################## (All Categories Page End) ################################################################ */ /* ############################################################## (Thank You Page Start) ################################################################ */ .check-wrapper img { display: block; height: 190px; margin-inline: auto; margin-block: 15px; } .thankYou-textBlock { text-align: center; } .thankYou-textBlock h2 { font-weight: 600; color: var(--color-eleven); font-size: 28px; margin: 0; position: relative; text-transform: uppercase; margin-bottom: 10px; text-align: center; } .thankYou-textBlock .sub-title { color: var(--color-three); font-size: 17px; } .thankYou-textBlock .sub-title a { color: inherit; font-weight: 400; } .thankYou-textBlock .sub-title span { position: relative; padding-bottom: 5px; display: inline-block; transition: all 0.1s ease-in; border: 2px solid transparent; } .thankYou-textBlock .sub-title span:hover { transform: translateY(-3px); } .thankYou-textBlock .sub-title span:before { position: absolute; content: ""; left: 0px; right: 0px; bottom: 5px; height: 5px; z-index: -1; background: url(../images/icons/vector-3.png) no-repeat; } /* ############################################################## (Thank You Page End) ################################################################ */ /* ############################################################## (FAQ Page Start) ################################################################ */ section#faq .accordion .accordion-item{ margin-bottom: 15px; border: 1px solid #ccc; border-radius: 0px; } section#faq .accordion .accordion-item .accordion-button:focus{ box-shadow: none; } section#faq .accordion .accordion-item .accordion-button{ padding-block: 5px; font-size: 16px; } section#faq .accordion .accordion-item .accordion-button::after{ box-shadow: none; background-image: none; font-size: 35px; content: '+'; height: auto; width: auto; color: var(--main-color) !important; } section#faq .accordion .accordion-item .accordion-button:not(.collapsed){ background-color: var(--main-color); color: white; border-radius: 0px; } section#faq .accordion .accordion-item .accordion-button:not(.collapsed)::after{ background-image: none; transform: none; content: '-'; color: white !important; } section#faq .accordion .accordion-item .accordion-body{ font-size:14px; background: rgb(247, 247, 247); } /* ############################################################## (FAQ Page End) ################################################################ */ /* ############################################################## (Cart Popup Modal Start) ################################################################ */ .cart-popupModal-wrapper p { line-height: normal; margin-bottom: 8px; } #cart-popupModal .cart-popupModal-wrapper { position: relative; background-color: white; box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25); padding-top: 10px; padding-bottom: 15px; } #cart-popupModal .modal-title { position: relative; } #cart-popupModal strong { font-weight: 600; } #cart-popupModal .modal-title h2 { margin-bottom: 0; color: #606060; font-weight: normal; padding: 0px 0px 0px 40px; font-size: 18px; margin-top: 5px; } #cart-popupModal .modal-title::before { content: ""; position: absolute; left: 0px; top: 10px; background-image: url(/images/resource/modal/check-mark.png), linear-gradient( to right, var(--color-seven) 0%, var(--color-eight) 100% ); background-repeat: no-repeat; background-position: center center; width: 30px; height: 30px; border-radius: 50%; } #cart-popupModal .modal-body { margin-top: 5px; padding: 5px; } #modal-prodImage_container a{ display: inline-block; padding: 20px; max-width: 145px; width: 100%; } #modal-prodImage_container a img{ display: block; margin: auto; } #cart-popupModal .modal-prodDescription-container { height: 100%; display: flex; align-items: center; } #cart-popupModal .modal-prodDescription-container .modal-prodDescription{ flex-basis: 100%; } #cart-popupModal .modal-body .modal-itemTitle { font-size: 16px; line-height: 25px; font-weight: normal; color: var(--black-color); text-align: left; padding-left: 0px; padding-right: 0px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: all 0.3s ease-in-out; margin-bottom: 10px; } #cart-popupModal .modal-body .modal-itemTitle:hover { color: var(--main-color); } .modal-body .modal-product-specs-details { margin-top: 6px; } .modal-body .modal-product-specs-details .modal-mfr-details { display: flex; } .modal-product-specs-details .modal-mfr-details .modal-mfr-name { width: 45%; margin-right: 10px; } .modal-body .modal-product-specs-details .modal-cal-details { display: flex; } .modal-body .modal-product-specs-details .modal-cal-details .modal-itemQty { width: 45%; margin-right: 10px; } .modal-product-specs-details .modal-cal-details .modal-itemQty p { line-height: normal; } .modal-body .modal-itemPrice { color: #4caf50; font-size: 14px; margin-right: 18px; } .modal-body .modal-itemPrice strong { color: var(--mid-dark); } #cart-popupModal .modalFooter { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; } #cart-popupModal .modalFooter .modalFooter-left a { color: var(--main-color); font-weight: 500; font-size: 14px; letter-spacing: 0.5px; } #cart-popupModal .modalFooter .modalFooter-left a:hover { color: var(--black-color); } .modalFooter .modalFooter-right { display: flex; justify-content: flex-end; align-items: center; width: 60%; } #cart-popupModal .modalFooter .modalFooter-right .modal-cartSubTotal { margin-right: 25px; } #cart-popupModal .modalFooter .modalFooter-right .modal-cartSubTotal p { margin-bottom: 0px; } .modalFooter .modalFooter-right .modal-viewCartBtn { color: white; letter-spacing: 0.5px; font-weight: 500; font-size: 12px; background-color: var(--main-color); padding: 15px 15px; display: inline-block; cursor: pointer; line-height: normal; transition: all .3s ease; } .modalFooter .modalFooter-right .modal-viewCartBtn:hover{ box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); } #cart-popupModal #closeModalBtn { position: absolute; top: 25px; opacity: 0.6; right: 6%; background-color: transparent; padding: 5px 4px; border-radius: 30%; color: #000000; border: none; font-size: 18px; transition: all .3s ease; } i.fa-solid.fa-xmark.fa-xl:before { content: "\f00d"; font-family: fontawesome; } .g_overlays_FullVP { display: none; } #cart-popupModal { position: fixed; z-index: 99999; background: rgba(0, 0, 0, 0.4); top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; overflow-x: hidden; z-index: 10000; padding: 1.2rem; display: flex; justify-content: center; align-items: center; } /* ############################################################## (Cart Popup Modal End) ################################################################ */ /* ############################################################## (Request for Quote PageStart) ################################################################ */ #requestforquote .requestforquote_wrapper { padding-block: 15px; } #requestforquote .RFQ-title h1 { color: var(--primeBlue-color); font-weight: 700; font-size: 28px; margin: 0; position: relative; text-transform: uppercase; text-align: center; } #requestforquote .RFQ-title h1 span { position: relative; } #requestforquote .RFQ-title h1 span:before { position: absolute; content: ""; left: 0px; right: 0px; bottom: 3px; height: 5px; z-index: -1; background: url(../images/icons/vector-3.png) no-repeat; } #requestforquote .RFQ-text p { color: inherit; padding: 10px 0; line-height: 20px; font-size: 14px; letter-spacing: 0.5px; text-align: left; color: var(--mid-dark); text-align: center; margin-bottom: 0px; } .RFQ-text ul { padding: 10px 0 20px 20px; list-style-type: disc; list-style-position: inside; } .RFQ-text ul>li { color: #fff; font-size: 14px; line-height: 25px; letter-spacing: 0.5px; margin-bottom: 10px; } #requestforquote .rfq-image img { max-width: 100%; height: auto; max-height: 500px; } .RFQ-form .astrickcolor { color: red; } .RFQ-form .RFQ-form_container { background: white; padding: 25px 20px; border-radius: 20px; } .RFQ-form .form-group { padding: 0 18px 3px; border-radius: 0px; background-color: #fff; color: var(--mid-dark); font-size: 13px; } .RFQ-form .form-group label { margin-bottom: 5px; } .RFQ-form .form-group .form-control { border-radius: 0px; height: 38px; border-color: #dedede; font-size: 13px; color: var(--mid-dark); margin-bottom: 15px !important; } .RFQ-form .form-group .form-control:focus { box-shadow: none; border-color: var(--main-color); color: var(--mid-dark); } .RFQ-form .form-group textarea.form-control { height: 80px; } .RFQ-form .form-group .RFQ-SubmitBtn { color: white; background: var(--main-color); border: none; display: inline-block; padding: 10px 20px; font-size: 13px; border-radius: 0px; transition: all 0.3s ease-in-out; } .RFQ-form .form-group .RFQ-SubmitBtn:hover { background: var(--color-eight); } .RFQ-form .captchaCode p{ margin-bottom: 0px; line-height: 15px; } .btnAfterEffectOnly { position: relative; background: linear-gradient(to right, var(--color-seven) 0%, var(--color-eight) 100%); color: white; font-size: 14px; padding: 10px 30px; overflow: hidden; } .btnAfterEffectOnly:hover:before { top: -40%; } .btnAfterEffectOnly:before { -webkit-transition-duration: 800ms; transition-duration: 800ms; position: absolute; width: 200%; height: 200%; content: ""; top: -200%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 50%; z-index: 1; background: var(--color-eight); background: linear-gradient(to right, var(--color-eight) 0%, var(--color-seven) 100%); } .btnAfterEffectOnly>span { position: relative; z-index: 2; } /* ############################################################## (Request for Quote Page End) ################################################################ */ .rfq_overlays_FullVP { display: none; } .max-popUp-dimensions { max-width: 550px !important; max-height: 90vh; overflow-x: hidden; overflow-y: auto; } #rfq-popupModal { position: fixed; z-index: 99999; background: rgba(0, 0, 0, 0.4); top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; overflow-x: hidden; z-index: 10000; padding: 1.2rem; display: flex; justify-content: center; align-items: center; } #rfq-popupModal .rfq-popupModal-wrapper { position: relative; background-color: white; padding-top: 30px; padding-bottom: 10px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); border-radius: 5px; } #rfq-popupModal #closeRFQModalBtn { position: absolute; top: 13px; right: 2%; background-color: transparent; padding: 5px 8px; border-radius: 50%; border: none; font-size: 30px; } #rfq-popupModal h4.custom-modal-header { color: var(--black-color); font-weight: 700; font-family: var(--font-family-Roboto); font-size: var(--font-30); } #rfq-popupModal h4.custom-modal-header + p > strong { position: relative; opacity: 0.8; line-height: 30px; font-size: var(--font-16); color: var(--color-fiftyfive); margin-top: var(--margin-top-10); font-weight: 500; } #rfq-popupModal label { margin-bottom: 5px; color: var(--mid-dark); } #rfq-popupModal .form-group .form-control { border-radius: 0px; height: 38px; border-color: #dedede; font-size: 13px; color: var(--mid-dark); margin-bottom: 15px !important; } #rfq-popupModal .form-group .form-control:focus { box-shadow: none; border-color: var(--main-color); color: var(--mid-dark); } #rfq-popupModal .form-group textarea.form-control { height: 90px; } #rfq-popupModal .mag-b-2.billing-margin { height: 68px; } #rfq-popupModal .custom-control.custom-checkbox.mr-sm-2 { margin-block: 15px; } #rfq-popupModal p.RFQ-Modal-ProductDescription { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } #rfq-popupModal .decision-Buttons { margin-top: 10px; } #rfq-popupModal .decision-Buttons button#Submit { margin-right: 10px; } #rfq-popupModal select { appearance: auto; outline: 1px solid #dedede; border: none; border-right: 1.2rem solid transparent !important; } .acitemx > div { padding: 2px 0px; } .autocomplete { /*the container must be positioned relative:*/ position: relative; display: inline-block; } .autocomplete-items { position: absolute; border: 1px solid #d4d4d4; border-bottom: none; border-top: none; z-index: 99; /*position the autocomplete items to be the same width as the container:*/ top: 100%; left: 0; right: 0; } .autocomplete-items div { padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4; } .autocomplete-items div:hover { /*when hovering an item:*/ background-color: #e9e9e9; } .autocomplete-active { /*when navigating through the items using the arrow keys:*/ background-color: #b8d1e9 !important; color: #ffffff; }