芝麻web文件管理V1.00
编辑当前文件:/home/digitalh/tricomgroupbd.com/assets/style.css
/*------------------------------------------------------------------ Theme Name: Logtra - Transportation & Logistics HTML Template Author: Kazi Shahiduzzaman Description: Logtra - Transportation & Logistics HTML Template. Can be Used For Various Perposes. Version: 1.0 -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 1. Variable css 2. Mixins Css 3. Typography css 4. Faq css 5. Theme Default css 6. Grids css 7. BG css 8. Margin Padding Css 9. BTN Css 10. Hero css 11. Footer css 12. Scroll top css 13. Navbar css 14. Breadcrumb css 15. RTL css 16. Vidz css 17. Blog Single css 18. Sidebar css 19. Pagination css 20. Gallery css 21. Topbar css 22. Heading css 23. Contact css 24. Text Color css 25. Header Hero Top css 26. About css 27. Service CSS 28. Counter Css 29. Why css 30. Work css 31. Container css 32. Price css 33. Team css 34. Review css 35. Blog css 36. Register css 37. Step css 38. Sub css 39. Project Single css 40. Service Single css 41. Feature css 42. Benefit css 43. Promo css 44. Requ css 45. CTA css -------------------------------------------------------------------*/ /*Start Theme Basic*/ /*------------------------------------------------------- 01. Variable css ---------------------------------------------------------*/ @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap"); :root { --clr-heading: #232323; --clr-body: #666; --clr-body-2: #BBBBBB; --clr-bg: #F7F7F7; --clr-bg-2: #f6f6f6; --clr-bg-3: #EEF3F9; --clr-def: #EA1E00; --clr-def-2: #000671; --clr-def-3: #01054C; --clr-menu: #FF4A17; --clr-white: #fff; --clr-black: #000; --clr-black-2: #080821; --font-1: 'Manrope', sans-serif; --font-2: 'Manrope', sans-serif; --font-3: 'Shadows Into Light', cursive; --font-4: 'Yantramanav', sans-serif; --font-5: 'Oswald', sans-serif; --font-6: 'Roboto', sans-serif; --clr-1:#1a1e2a; --clr-2:#252734; --clr-3:#272b37; --clr-4:#1e202c; --clr-5:#2a2c38; --clr-6:#232323; --clr-ccc:#ccc; --clr-orange:#F42222; --clr-rgb:0, 102, 208; --clr-gradient: radial-gradient(circle, var(--clr-def) 0%, rgba(0,213,157,1) 100%); --clr-gradient-2: radial-gradient(circle, var(--clr-def) 0%, var(--clr-def-3) 100%); --clr-gradient-3: radial-gradient(circle, var(--clr-def) 0%, rgba(0,213,157,1) 100%); --clr-gradient-4: radial-gradient(circle, var(--clr-def) 0%, rgba(203,0,213,1) 100%); --clr-gradient-5: linear-gradient(to right, var(--clr-def) 0%, transparent 100%); --clr-gradient-6: radial-gradient(circle, var(--clr-bg) 0%, var(--clr-bg-2) 100%); --clr-overlay: rgba(5, 20, 65, 0.8); --box-shadow-1: 0 0 10px rgba(0, 0 , 0, .09); } /*------------------------------------------------------- 02. Mixins Css #070E27 #5416CF #0B0F28; ---------------------------------------------------------*/ /*------------------------------------------------------- 03. Typography css ---------------------------------------------------------*/ *, *:before, *:after { box-sizing: inherit; } * { scroll-behavior: inherit !important; } html, body { height: auto; width: 100%; margin: 0; padding: 0; font-size: 62.5%; box-sizing: border-box; } body { font-family: var(--font-1); font-style: normal; font-size: 16px; font-weight: 500; line-height: 1.8; color: var(--clr-body); } main.main { overflow: hidden; } a { color: var(--clr-body); font-weight: 600; } a, a:active, a:focus, a:hover { outline: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; text-decoration: none; } ul { margin: 0; padding: 0; } li { list-style: none; } h1, h2, h3, h4, h5, h6 { color: var(--clr-heading); margin: 0 0 1.5rem 0; font-weight: 800; font-family: var(--font-2); line-height: 1.2; } h1 { font-size: 48px; } h2 { font-size: 36px; } h3 { font-size: 30px; } h4 { font-size: 24px; } h5 { font-size: 18px; } h6 { font-size: 14px; } p { margin-bottom: 1.5rem; } .img, img { max-width: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; height: auto; } hr { padding: 0px; border-bottom: 1px solid #eceff8; border-top: 0px; } label { color: #999; cursor: pointer; font-size: 1.4rem; font-weight: 400; } *::-moz-selection { background: #d6b161; color: #fff; text-shadow: none; } ::-moz-selection { background: #555; color: #fff; text-shadow: none; } ::selection { background: #555; color: #fff; text-shadow: none; } *::-moz-placeholder { color: #999; font-size: 1.4rem; opacity: 1; } *::placeholder { color: #999; font-size: 1.4rem; opacity: 1; } .sohag a:active, .sohag a:focus, .sohag a:hover { border: 2px solid red; } /*------------------------------------------------------- 04. Faq css ---------------------------------------------------------*/ .faq-header .faq-para { padding-right: 71px; } .faq-2-shape img { position: absolute; z-index: -1; } .faq-2-shape img.faq-2-shape-1 { top: 5rem; left: 5rem; } .faq-2-shape img.faq-2-shape-2 { bottom: 5rem; right: 5rem; } .faq-header { margin-bottom: 4rem; padding-bottom: 3.2rem; border-bottom: 2px solid #ccc; } .faq-header .faq-para { padding-right: 31rem; margin-bottom: 0; } .accordion-item { margin-bottom: -1px; border: none; border-bottom: 1px solid #ccc; } .accordion-item:not(last-child) { margin-bottom: 3rem; } .accordion-button { padding: 0 0 2.4rem 0; font-size: 1.6rem; color: rgba(0, 0, 0, 0.7); font-weight: 700; } .accordion-button::after { width: 1.25rem; height: 1.25rem; margin-left: auto; font-family: 'Font Awesome\ 5 Free'; content: "\f067"; /* FontAwesome Unicode */ font-weight: 900; background-image: inherit; font-size: 1.4rem; } .accordion-button:not(.collapsed)::after { transform: rotate(180deg); background-image: inherit; font-family: 'Font Awesome\ 5 Free'; content: "\f068"; /* FontAwesome Unicode */ font-weight: 900; font-size: 1.4rem; } .accordion-button:not(.collapsed) { border: none; } .accordion-button:not(.collapsed) { color: var(--clr-heading); background-color: transparent; box-shadow: none; } .accordion-item:first-of-type .accordion-button { border-top-left-radius: 5px; border-top-right-radius: 5px; } .accordion-button:focus { z-index: 3; border: none; outline: 0; box-shadow: none; } .accordion-body { padding: 2rem 2rem 2rem 2rem; } .accordion-body p { font-size: 1.6rem; } /*------------------------------------------------------- 05. Theme Default css ---------------------------------------------------------*/ .column-2 { column-count: 2; } .overflow-hidden { overflow: hidden; } .element-center { height: 100%; display: flex; align-items: center; } /*Theme button css*/ .about-title { text-align: center; padding-top: 9rem; } .about-title .heading-2 { font-weight: 500; } .about-title::before { position: absolute; content: ''; height: 7rem; width: 2px; z-index: -1; background: var(--clr-white); opacity: 1; left: 50%; top: 0; translate: -50% 0; } .site-title { margin-bottom: 6.4rem; } .site-title h2 { font-weight: 800; line-height: 1.2; letter-spacing: 0.8px; margin-bottom: 1.5rem; font-size: 42px; } .site-title h2:first-letter { text-transform: uppercase; } .site-title h2 span { color: var(--clr-def); font-family: var(--font-3); } .site-title p { padding: 0 15%; } .site-title.mb-0 { margin-bottom: 0; } .site-title.wh p, .site-title.wh h2, .site-title.wh h3 { color: var(--clr-white); } .pos-rel { position: relative; z-index: 1; } .input-style-1 { height: 7rem; border: none; outline: none; border-radius: 2px; font-size: 1.4rem; color: var(--clr-heading); } .input-style-1::placeholder { color: #747070; opacity: 1; } .input-style-2 { height: 7rem; outline: none; border-radius: 5px; font-size: 1.4rem; color: var(--clr-heading); width: 100%; background-color: transparent; border: 1px solid #ccc; } .input-style-2:focus { outline: none; box-shadow: none; } .round-move { animation: round-move 5s linear infinite; } @keyframes round-move { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .up-move { animation: up-move 5s ease-in-out infinite; } @keyframes up-move { 0% { transform: translateY(0); } 50% { transform: translateY(-30px); } 100% { transform: translateY(0px); } } .small-big { animation: small-big 5s ease-in-out infinite; } @keyframes small-big { 0% { transform: scale(0.5); } 51% { transform: scale(1.1); } 100% { transform: scale(0.5); } } .to-left { animation: to-left 5s linear infinite alternate; } @-webkit-keyframes to-left { 0% { transform: translateX(0px); } 50% { transform: translateX(-30px); } 100% { transform: translateX(0px); } } .car-run { animation: run 3s ease-in-out infinite; } @-webkit-keyframes run { 0% { transform: translateX(0); } 50% { transform: translateX(50px); } 100% { transform: translateX(0); } } /*------------------------------------------------------- 06. Grids css ---------------------------------------------------------*/ .grid-2 { display: grid; grid-gap: 3rem; grid-template-columns: repeat(2, 1fr); } .grid-3 { display: grid; grid-gap: 3rem; grid-template-columns: repeat(3, 1fr); } .grid-4 { display: grid; grid-gap: 3rem; grid-template-columns: repeat(4, 1fr); } .grid-5 { display: grid; grid-gap: 3rem; grid-template-columns: repeat(5, 1fr); } .grid-6 { display: grid; grid-gap: 3rem; grid-template-columns: repeat(6, 1fr); } .grid-px-2 { display: grid; grid-gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); } .gap-0 { grid-gap: 0; } .cs-gap-1 { grid-gap: 1rem; } .cs-gap-2 { grid-gap: 2rem; } .cs-gap-3 { grid-gap: 3rem; } .cs-gap-4 { grid-gap: 4rem; } .cs-gap-5 { grid-gap: 5rem; } .cs-gap-6 { grid-gap: 6rem; } .cs-gap-7 { grid-gap: 7rem; } .cs-gap-8 { grid-gap: 8rem; } .cs-gap-9 { grid-gap: 9rem; } .cs-gap-10 { grid-gap: 10rem; } /*------------------------------------------------------- 07. BG css ---------------------------------------------------------*/ .colmn-2 { column-count: 2; } .bg-fix { background-size: cover; background-position: center center; background-attachment: fixed; background-repeat: no-repeat; } .hero-bg { background-position: top left !important; background-size: cover !important; background-repeat: no-repeat !important; } .bg-top-center { background-position: top center; background-size: cover !important; background-repeat: no-repeat !important; } .bg-bottom-right { background-size: 56%; background-position: bottom right; background-repeat: no-repeat; } .pos-rel { position: relative; z-index: 1; } .width-100 { width: 100%; } .overflow-hidden { overflow: hidden; } .text-right { text-align: right; } .space-between { display: flex; justify-content: space-between; align-items: center; } .rad-50 { border-radius: 50%; } .c-pd { padding: 0 7rem; } .s-pd { padding: 0 12rem; } .h-100vh { height: 100vh; } .bg { background-color: var(--clr-bg); } .bg-2 { background-color: var(--clr-bg-2); } .bg-3 { background-color: var(--clr-bg-3); } .bg-theme { background-color: var(--clr-def); } .bg-theme-2 { background-color: var(--clr-def-2); } .bg-theme-3 { background-color: var(--clr-def-3); } .bg-black { background-color: var(--clr-black); } .bg-black-2 { background-color: var(--clr-black-2); } .bg-grad { background-image: var(--clr-gradient); } .bg-grad-2 { background-image: var(--clr-gradient-2); } .bg-grad-3 { background-image: var(--clr-gradient-3); } .bg-grad-4 { background-image: var(--clr-gradient-4); } .bg-grad-5 { background-image: var(--clr-gradient-5); } .bg-grad-6 { background-image: var(--clr-gradient-6); } .bg-clr-1 { background-color: var(--clr-2); } .bg-blur { background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(7.5px); border-radius: 10px; padding: 32px 100px 36px 60px; z-index: 2; } .wh { color: var(--clr-white); } .bg-overlay { position: relative; z-index: 1; } .bg-overlay::before { position: absolute; content: ''; height: 100%; width: 100%; z-index: -1; background: #000521; opacity: 0.83; top: 0; left: 0; } .hero-overlay { position: relative; z-index: 1; } .hero-overlay::before { position: absolute; content: ''; height: 100%; width: 100%; z-index: -1; background: #00162f; opacity: 0.8; top: 0; left: 0; } .hero-overlay-2 { position: relative; z-index: 1; } .hero-overlay-2::before { position: absolute; content: ''; height: 100%; width: 100%; z-index: -1; background: var(--clr-def); opacity: 0.6; top: 0; left: 0; } .hero-overlay-3 { position: relative; z-index: 1; } .hero-overlay-3::before { position: absolute; content: ''; height: 100%; width: 100%; z-index: -1; background: var(--clr-gradient-3); opacity: 0.8; top: 0; left: 0; } .bubble .drop { width: 350px; height: 350px; position: relative; box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.1), 25px 35px 20px rgba(0, 0, 0, 0.1), 25px 30px 30px rgba(0, 0, 0, 0.1), inset -20px -20px 25px rgba(255, 255, 255, 0.8); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem 0; padding: 4rem; transition: border-radius 0.5s; overflow: hidden; text-align: center; animation: drop 2s infinite alternate ease-in-out; } .bubble .drop:nth-child(1) { border-radius: 38% 62% 46% 54% / 46% 51% 49% 54%; } .bubble .drop:nth-child(2) { border-radius: 38% 62% 46% 54% / 46% 51% 49% 54%; } .bubble .drop:nth-child(3) { border-radius: 38% 62% 46% 54% / 46% 51% 49% 54%; } @keyframes drop { from { border-radius: 38% 62% 46% 54% / 46% 51% 49% 54%; } to { border-radius: 50%; } } .bubble .drop::before { content: ""; position: absolute; top: 50px; left: 75px; width: 35px; height: 35px; background: white; border-radius: 50%; opacity: 0.7; } .bubble .drop::after { content: ""; position: absolute; top: 90px; left: 100px; width: 15px; height: 15px; background: white; border-radius: 50%; opacity: 0.7; } /*------------------------------------------------------- 08. Margin Padding Css ---------------------------------------------------------*/ /*margins paddings*/ .p-50 { padding: 50px; } .pb-140 { padding-bottom: 14rem; } .pd-50 { padding: 5rem 0; } .pr-120 { padding-right: 12rem; } .de-padding { padding: 12rem 0; } .de-pt { padding-top: 12rem; } .de-pb { padding-bottom: 12rem; } .pd-0 { padding: 0; } .pl-30 { padding-left: 3rem; } .pl-40 { padding-left: 4rem; } .pl-50 { padding-left: 5rem; } .pl-60 { padding-left: 6rem; } .pl-300 { padding-left: 30rem; } .pt-64 { padding-top: 6.4rem; } .pt-0 { padding-top: 0rem; } .pt-10 { padding-top: 1rem; } .pt-20 { padding-top: 2rem; } .pt-30 { padding-top: 3rem; } .pt-40 { padding-top: 4rem; } .pt-50 { padding-top: 5rem; } .pt-60 { padding-top: 6rem; } .pt-70 { padding-top: 7rem; } .pt-80 { padding-top: 8rem; } .pt-90 { padding-top: 9rem; } .pt-100 { padding-top: 10rem; } .pr-30 { padding-right: 3rem; } .pr-40 { padding-right: 4rem; } .pr-50 { padding-right: 5rem; } .pr-60 { padding-right: 6rem; } .pb-0 { padding-bottom: 0rem; } .pb-10 { padding-bottom: 1rem; } .pb-20 { padding-bottom: 2rem; } .pb-30 { padding-bottom: 3rem; } .pb-40 { padding-bottom: 4rem; } .pb-50 { padding-bottom: 5rem; } .pb-60 { padding-bottom: 6rem; } .pb-70 { padding-bottom: 7rem; } .pb-80 { padding-bottom: 8rem; } .pb-90 { padding-bottom: 9rem; } .pb-100 { padding-bottom: 10rem; } .pb-256 { padding-bottom: 25.6rem; } .pl-60 { padding-left: 6rem; } .mr-100 { margin-right: 10rem; } .mt-64 { margin-top: 6.4rem; } .mt-0 { margin-top: 0; } .mt-10 { margin-top: 1rem; } .mt-20 { margin-top: 2rem; } .mt-30 { margin-top: 3rem; } .mt-40 { margin-top: 4rem; } .mt-50 { margin-top: 5rem; } .mt-60 { margin-top: 6rem; } .mt-70 { margin-top: 7rem; } .mt-80 { margin-top: 8rem; } .mt-90 { margin-top: 9rem; } .mt-100 { margin-top: 10rem; } .mb-0 { margin-bottom: 0; } .mb-10 { margin-bottom: 1rem; } .mb-15 { margin-bottom: 1.5rem; } .mb-20 { margin-bottom: 2rem; } .mb-30 { margin-bottom: 3rem; } .mb-40 { margin-bottom: 4rem; } .mb-50 { margin-bottom: 5rem; } .mb-60 { margin-bottom: 6rem; } .mb-70 { margin-bottom: 7rem; } .mb-80 { margin-bottom: 8rem; } .mb-90 { margin-bottom: 9rem; } .mb-100 { margin-bottom: 10rem; } .ml-300 { margin-left: 30rem; } .ml-30 { margin-left: 3rem; } .ml-40 { margin-left: 4rem; } .ml-50 { margin-left: 5rem; } .ml-60 { margin-left: 6rem; } .ml-70 { margin-left: 7rem; } .ml-80 { margin-left: 8rem; } .ml-90 { margin-left: 9rem; } .ml-100 { margin-left: 100rem; } .mr-300 { margin-right: 30rem; } .mr-20 { margin-right: 20px; } .mr-30 { margin-right: 3rem; } .mr-40 { margin-right: 4rem; } .mr-50 { margin-right: 5rem; } .mr-60 { margin-right: 6rem; } .mr-70 { margin-right: 7rem; } .mr-80 { margin-right: 8rem; } .mr-90 { margin-right: 9rem; } .mr-100 { margin-right: 100rem; } .margin-center { margin: 0 auto; } /*------------------------------------------------------- 09. BTN Css ---------------------------------------------------------*/ /*Theme Button*/ .btn-transparent { display: inline-block; text-align: center; font-size: 16px; font-weight: 700; padding: 1.5rem 3.5rem; background-color: transparent; border: none; color: var(--clr-white); border-radius: 5px; outline: 1px solid var(--clr-white) !important; line-height: 1; transition: all .5s ease; } .btn-transparent.btn-home-2 { outline: 1px solid var(--clr-def) !important; color: var(--clr-heading); } .btn-transparent:hover { background-color: var(--clr-white); color: var(--clr-heading); } .btn-transparent-md { padding: 2rem 5.4rem; } .service-btn-2 { padding: 1.2rem 3rem; line-height: 1; background-color: var(--clr-white); border: 1px solid transparent; color: var(--clr-heading); border-radius: 8px; transition: all .5s ease; display: inline-block; font-weight: 600; line-height: 1; } .service-btn-2:hover { border: 1px solid var(--clr-white); background-color: transparent; color: var(--clr-white); } .btn-1 { display: inline-block; text-align: center; font-size: 16px; font-weight: 700; padding: 2.5rem 5.5rem; background-color: var(--clr-def); color: var(--clr-white); border-radius: 5px; border: none; outline: none; line-height: 1; transition: all .5s ease; } .btn-1 i { margin-left: 1rem; } .btn-1:hover { background-color: var(--clr-def-2); color: var(--clr-white); } .btn-2 { display: inline-block; padding: 2rem 4rem; color: var(--clr-white); border-radius: 4px; text-align: center; font-size: 16px; font-weight: 700; border: none; outline: none; line-height: 1; position: relative; z-index: 1; transition: all .5s ease; } .btn-2::before { position: absolute; content: ''; height: 100%; width: 100%; z-index: -1; background: var(--clr-def); opacity: 1; border-radius: 4px; top: 0; left: 0; transition: all .5s ease; border-radius: 100px; } .btn-2 i { margin-left: 1rem; } .btn-2:hover { background: var(--clr-black); color: var(--clr-white); } .btn-2:hover::before { scale: 0; } .btn-3 { font-weight: 600; color: var(--clr-white); border: none; background: var(--clr-def); padding: 0 3rem; height: 50px; display: inline-block; line-height: 50px; } .btn-3:hover { background: var(--clr-black); color: var(--clr-white); } .btn-3:hover::before { scale: 0; } .btn-4 { display: inline-block; text-align: center; font-size: 16px; font-weight: 700; padding: 1.5rem 3.5rem; background-color: var(--clr-white); border: none; color: var(--clr-heading); border-radius: 5px; line-height: 1; transition: all .5s ease; } .btn-4:hover { background-color: var(--clr-def); color: var(--clr-white); } .btn-5 { display: inline-block; text-align: center; font-size: 16px; font-weight: 700; padding: 2.5rem 5.5rem; background-color: var(--clr-def); color: var(--clr-white); border-radius: 5px; border: none; outline: none; line-height: 1; transition: all .5s ease; } .btn-5:hover { background-color: var(--clr-white); color: var(--clr-black); } .btn-md { padding: 2rem 5.4rem; } .btn-sm { padding: 1.5rem 3.5rem; } .btn-second { background-color: var(--clr-def-2); } .btn-second:hover { background-color: var(--clr-def); color: var(--clr-white); } .btn-gradient { background: linear-gradient(90deg, #0072ff 0%, #00d4ff 100%); } .btn-gradient:hover { background: var(--clr-def); color: var(--clr-white); } .btn-circle { border-radius: 100px; } .btn-border { border: 2px solid var(--clr-white); background-color: transparent; } .btn-border:hover { background-color: var(--clr-def); color: var(--clr-white); border: 2px solid var(--clr-def); } .btn-black { background-color: var(--clr-black); } .btn-black:hover { background-color: var(--clr-white); color: var(--clr-black); } .btn-white { background-color: var(--clr-white); color: var(--clr-black); } .btn-white:hover { background-color: var(--clr-black); color: var(--clr-white); } .btn-no-rad { border-radius: 0; } .btn-sub { height: 7rem; width: 7rem; border: none; background-color: var(--clr-def); border-radius: 2px; outline: none; } /*------------------------------------------------------- 10. Hero css ---------------------------------------------------------*/ .hero-single { height: 1030px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; overflow: hidden; } .hero-single .hero-content .hero-sub-title { margin-bottom: 2rem; } .hero-single .hero-content h2 { margin-bottom: 2rem; color: var(--clr-white); font-size: 60px; line-height: 1.2; } .hero-single .hero-content p { line-height: 3.2rem; margin-bottom: 5rem; color: var(--clr-white); padding-right: 21%; font-size: 18px; } .hero-single .hero-content .para { line-height: 3.2rem; padding-right: 31%; margin-bottom: 6rem; padding-left: 0; } .hero-shapes img { position: absolute; z-index: -1; } .hero-shapes img.hero-car { bottom: -170px; right: -235px; } .hero-shapes img.hero-line-1 { top: -55px; left: -188px; } .hero-shapes img.hero-plane-1 { top: -80px; left: 40%; } .hero-btn .btn-1.btn-md { margin-right: 30px; } .hero-2-before { position: relative; z-index: 1; } .hero-2-before::before { position: absolute; content: ''; height: 100%; width: 100%; z-index: -1; background: var(--clr-gradient-5); opacity: 1; top: 0; left: 0; } .home-2 .hero-content .hero-title { color: var(--clr-heading); } .home-2 .hero-content p { color: var(--clr-body); padding: 0 14rem 0 0; } .hero-2-shapes img { position: absolute; z-index: -1; } .hero-2-shapes img.hero-shape-bottom { bottom: 0; left: 0; } .hero-2-shapes img.hero-half-circle-3 { bottom: 6rem; left: 22%; } .hero-2-shapes img.half-circle-1 { top: 30%; left: 40%; } .hero-2-shapes img.half-circle-2 { right: 20rem; top: 20%; } .hero-2-shapes img.hero-dot-circle { top: 20%; left: 52%; } .hero-2-shapes img.hero-dag { top: 18%; left: 30%; } @keyframes grow { 0%, 20% { transform: scale(1); } 75%, 100% { transform: scale(1.15); } } .swiper-slide.swiper-slide-active .hero-bg-animate { scale: 1.15; animation: grow 4s linear forwards; } .animate-pos { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; -webkit-transition: 10s ease-out; transition: 10s ease-out; -webkit-transform: scale(1.1); transform: scale(1.1); z-index: -5; } .swiper-button-next, .swiper-button-prev { color: var(--clr-def); } .hero-sldr .hero-single .hero-content h2 { opacity: 0; visibility: hidden; transition: all 500ms ease; transform: translateY(-20px); } .hero-sldr .hero-single .hero-content p { opacity: 0; visibility: hidden; transition: all 500ms ease; transform: translateX(-50px); } .hero-sldr .hero-single .hero-content .hero-btn { transform: scaleY(0); transition: all 500ms ease; transition-delay: 2000ms; transform-origin: bottom; } .hero-sldr .hero-single .hdr-pic { opacity: 0; visibility: hidden; transition: all 500ms ease; transform: translateY(50px); } .hero-sldr .swiper-slide-active.hero-single .hero-content h2 { opacity: 1; visibility: visible; transition-delay: 800ms; transform: translateY(0px); } .hero-sldr .swiper-slide-active.hero-single .hero-content p { opacity: 1; visibility: visible; transition-delay: 1600ms; transform: translateX(0px); } .hero-sldr .swiper-slide-active.hero-single .hero-content .hero-btn { transform: scale(1); } .hero-sldr .swiper-slide-active.hero-single .hdr-pic { opacity: 1; visibility: visible; transition-delay: 1200ms; transform: translateY(0px); } /*------------------------------------------------------- 11.Footer css ---------------------------------------------------------*/ /*footer Default*/ .footer p { color: var(--clr-ccc); } .footer-bio { display: flex; align-items: center; gap: 1.5rem; } .footer-bio .footer-bio-text h6 { text-transform: capitalize; margin-bottom: 5px; color: var(--clr-white); } .footer-bio .footer-bio-text span { display: block; line-height: 1; color: var(--clr-body-2); font-size: 1.6rem; } .footer-widget-title { font-weight: 600; color: var(--clr-white); margin-bottom: 4rem; padding-bottom: 2rem; position: relative; z-index: 1; } .footer-widget-title .footer-title-line { width: 4rem; height: 1px; position: absolute; bottom: 0; left: 0; translate: 0 -50%; z-index: 1; background-color: var(--clr-white); } .footer-widget-title .footer-title-line::before { position: absolute; content: ''; height: 1px; width: 30px; z-index: -1; background: var(--clr-white); opacity: 1; top: 5px; left: 0; } .footer-widget-title .footer-title-line::after { position: absolute; content: ''; height: 1px; width: 20px; z-index: -1; background: var(--clr-white); opacity: 1; top: 10px; left: 0; } .footer-logo img { height: 60px; display: block; } .about-us { padding-right: 5rem; margin-right: 3rem; border-right: 1px solid #54589F; } .footer-list { display: flex; flex-direction: column; gap: 1.5rem; } .footer-list li a { display: flex; align-items: center; gap: 5px; color: var(--clr-body-2); } .footer-list li a i { font-size: 1.4rem; } .footer-hours { display: flex; flex-direction: column; gap: 1.5rem; } .footer-hours li { display: flex; align-items: center; justify-content: space-between; } .footer-hours li span { color: var(--clr-body-2); display: inline-block; } .footer-social { display: flex; align-items: center; gap: 1rem; } .footer-social li a { display: inline-block; height: 4.5rem; width: 4.5rem; line-height: 4.5rem; border: 2px solid var(--clr-ccc); text-align: center; -webkit-border-radius: 50%; border-radius: 50%; color: var(--clr-white); transition: all .5s ease; } .footer-social li a:hover { background-color: var(--clr-def); border: 2px solid var(--clr-def); } .subscribe-area form { display: flex; align-items: center; position: relative; z-index: 1; } .subscribe-area form .btn-shape { position: absolute; content: ''; height: 60px; width: 1.6rem; z-index: -1; background: var(--clr-def); opacity: 1; top: 0; right: 60px; clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%); transform: skewX(18deg); z-index: 1; } .subscribe-area form .input-style-4 { width: 100%; background-color: #0F3E71; padding: 8px 1.5rem 8px 2rem; color: var(--clr-white); outline: none; border: none; border-radius: 5px; height: 60px; } .subscribe-area form .input-style-4:focus { outline: none; box-shadow: none; border: none; } .subscribe-area form .input-style-4::placeholder { color: var(--clr-white); } .subscribe-area form .btn-subs { outline: none; box-shadow: none; border: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 35% 100%); background-color: var(--clr-def); font-size: 1.6rem; color: var(--clr-white); width: 75px; height: 60px; position: relative; z-index: 1; } .copyright { padding: 2.2rem 0; background-color: var(--clr-def-2); } /*------------------------------------------------------- 12. Scroll top css ---------------------------------------------------------*/ #scrtop { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; font-size: 18px; border: 1px solid #ddd; outline: none; background-color: var(--clr-def); color: var(--clr-white); cursor: pointer; padding: 15px; border-radius: 4px; line-height: 1; } #scrtop:hover { background-color: var(--clr-heading); } /*------------------------------------------------------- 13. Navbar css ---------------------------------------------------------*/ @media (min-width: 1600px) { .navbar-container-fluid { max-width: 1600px; } } .navbar-container { display: grid; grid-template-columns: 360px 1fr; align-items: center; padding: 0 20rem; } .bsnav-mobile { z-index: 102; } .bsnav-mobile .navbar { right: inherit; transform: translate3d(-300px, 0, 0); left: 0; } .search-cart.nav-profile { width: 200px; text-align: end; } .g-nop { display: none; } .navbar-brand-tog { display: flex; align-items: center; justify-content: space-between; } .nav-item.dropdown > .navbar-nav .nav-item .nav-link { padding: 0; } .navbar-bar-shape { position: absolute; top: 0; left: 0; z-index: 3; height: 100%; } .navbar-extra-logo { position: relative; z-index: 9; } .navbar-menu-opt { position: relative; z-index: 4; } .top-header-menu { padding-left: 0px; } .navbar-brand.nop { display: none; } .header-3 .navbar { background-color: transparent; } .header-3 .bsnav-sidebar { height: 100%; position: relative; } .header-3 .bsnav-sidebar .navbar-brand.align-self-start { margin-left: 0; height: 90px; background-color: var(--clr-def); display: flex; align-items: center; justify-content: center; } .header-3 .bsnav-sidebar .navbar-nav .nav-item.menu-item-has-children .ti-on { display: inline-block; } .header-3 .bsnav-sidebar .navbar-nav .nav-item.menu-item-has-children .ti-off { display: none; } .header-3 .bsnav-sidebar .navbar-nav .nav-item.menu-item-has-children.in .ti-on { display: none; } .header-3 .bsnav-sidebar .navbar-nav .nav-item.menu-item-has-children.in .ti-off { display: inline-block; } .header-3 .bsnav-sidebar .navbar-nav .nav-item .navbar-nav { padding: 0; padding-left: 1.5rem; margin: 0; } .header-3 .bsnav-sidebar .navbar-nav .nav-item .navbar-nav .nav-item .nav-link { line-height: 1; height: inherit; margin-bottom: 1.5rem; margin-right: 0; } .navbar-nav .nav-item.menu-item-has-children .ti-on { display: inline-block; } .navbar-nav .nav-item.menu-item-has-children .ti-off { display: none; } .navbar-nav .nav-item.menu-item-has-children.in .ti-on { display: none; } .navbar-nav .nav-item.menu-item-has-children.in .ti-off { display: inline-block; } .navbar { display: inherit; background-color: var(--clr-def-3); } .navbar.in { box-shadow: 0 0 15px rgba(0, 0, 0, 0.07); } .navbar.in .navbar-brand.nop { display: block; } .navbar.in .navbar-bar-shape { display: none; } .navbar.in::before { display: none; } .navbar.in .top-bar-area { display: none; } .navbar.in .navbar-extra-logo { display: none; } .navbar.in .navbar-container { grid-template-columns: 100% !important; } .navbar.in .top-header-menu { padding-left: 0; } .navbar::before { position: absolute; z-index: -1; background: var(--clr-gradient); top: 0; left: 0; width: 34%; height: 100%; content: ''; clip-path: polygon(0 0, 100% 0, 93% 100%, 0% 100%); display: none; } .header-before-off .navbar.in::before { display: none; } .header-before-off .navbar::before { display: none; } .navbar .navbar-nav .nav-item .nav-link { height: 70px; line-height: 70px; padding: 0; text-transform: capitalize; color: var(--clr-white); margin-right: 4rem; font-size: 17px; font-weight: 600; } .navbar .navbar-nav .nav-item .nav-link i { font-size: 1rem; margin-left: 3px; } .navbar .navbar-nav .nav-item:last-child .nav-link { margin-right: 0; } .navbar .navbar-nav .nav-item.dropdown { border-radius: 0; } .navbar .navbar-nav .nav-item.dropdown .navbar-nav { padding: 3rem 2.5rem; box-shadow: none; border: 1px solid #ddd; } .navbar .navbar-nav .nav-item.dropdown .navbar-nav .nav-item .nav-link { color: var(--clr-heading); line-height: 1; height: inherit; margin-bottom: 1.8rem; margin-right: 0; } .navbar .navbar-nav .nav-item.dropdown .navbar-nav .nav-item:last-child .nav-link { margin-bottom: 0; } .navbar.in .navbar-nav .nav-item .nav-link { color: var(--clr-heading); } .nav-item.dropdown > .navbar-nav { width: 250px; } .header-2 .navbar .navbar-nav .nav-item .nav-link { color: var(--clr-heading); } .header-2 .navbar .navbar-nav .nav-item:last-child .nav-link { margin-right: 0; } .header-2 .navbar .navbar-nav .nav-item.dropdown { border-radius: 0; } .header-2 .navbar .navbar-nav .nav-item.dropdown .navbar-nav .nav-item .nav-link { color: var(--clr-heading); } .header-2 .navbar .navbar-nav .nav-item.dropdown .navbar-nav .nav-item:last-child .nav-link { margin-bottom: 0; } .header-2 .navbar.in .navbar-nav .nav-item .nav-link { color: var(--clr-heading); } .header-2 .nav-item .caret { border-top: solid 5px var(--clr-heading); } .nav-item .caret { border-top: solid 5px var(--clr-white); } .in .nav-item .caret { border-top: solid 5px var(--clr-heading); } .header-border .navbar { border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .header-border .navbar .navbar-brand { padding-right: 3rem; } .header-border .navbar .collapse.navbar-collapse { border-left: 1px solid rgba(255, 255, 255, 0.3); border-right: 1px solid rgba(255, 255, 255, 0.3); padding-right: 3rem; } .header-border-black .navbar { border-bottom: 1px solid rgba(0, 0, 0, 0.3); } .header-border-black .navbar .navbar-brand { padding-right: 3rem; } .header-border-black .navbar .collapse.navbar-collapse { border-left: 1px solid rgba(0, 0, 0, 0.3); border-right: 1px solid rgba(0, 0, 0, 0.3); padding-right: 3rem; } .header-border-black .navbar.in { border-bottom: none; } .header-border-black .navbar.in .navbar-brand { padding-right: 3rem; } .header-border-black .navbar.in .collapse.navbar-collapse { border-left: none; border-right: none; padding-right: 0; } .dropdown.megamenu > .navbar-nav { width: 100%; padding: 0; left: 0; overflow: hidden; } .bsnav-sticky.bsnav-sticky-slide.sticked.in { transition: transform .4s .2s; transform: translate3d(0, 0, 0); background-color: var(--clr-white); top: 0; } .navbar .navbar-brand .logo-display { display: none; } .navbar .navbar-brand .logo-scrolled { display: none; } .navbar.in .navbar-brand .logo-display { display: none; } .navbar.in .navbar-brand .logo-scrolled { display: block; } .navbar-toggler.active, .navbar-toggler.active.btn, .navbar-toggler.active.focus.btn, .navbar-toggler.btn:active, .navbar-toggler.btn:active:focus, .navbar-toggler.btn:active:hover, .navbar-toggler.btn:focus, .navbar-toggler.btn:hover, .navbar-toggler.btn:not(:disabled):not(.disabled).active, .navbar-toggler.btn:not(:disabled):not(.disabled):active, .navbar-toggler.focus.btn, .navbar-toggler:active, .navbar-toggler:active:focus, .navbar-toggler:focus, .navbar-toggler:hover, .navbar-togglerbutton.active, .navbar-togglerbutton.active.focus, .navbar-togglerbutton.focus, .navbar-togglerbutton:active, .navbar-togglerbutton:active:focus, .navbar-togglerbutton:active:hover, .navbar-togglerbutton:focus, .navbar-togglerbutton:hover, .navbar-togglerbutton:not(:disabled):not(.disabled).active, .navbar-togglerbutton:not(:disabled):not(.disabled):active { background: 0 0 !important; border: transparent !important; outline: none; box-shadow: none; } .bsnav-transparent .nav-item.dropdown > .navbar-nav, .bsnav-transparent .nav-item.dropdown > .navbar-nav .navbar-nav { border-radius: 0; } /* ------------------------------------------------------- 14. Breadcrumb css ---------------------------------------------------------*/ .site-breadcrumb { height: 100vh; background-size: cover !important; background-repeat: no-repeat !important; /*! background-position: center center !important; */ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; z-index: 3; box-sizing: border-box; padding: 10px; margin-top: 6%; } .site-breadcrumb::before { position: absolute; content: ''; height: 100%; width: 100%; z-index: -1; background: #030a15; opacity: 0.7; } .site-breadcrumb .breadcrumb-title { font-size: 4rem; text-transform: capitalize; color: var(--clr-white); font-weight: 600; margin-bottom: 20px; letter-spacing: 0.0025em; display: inline-block; line-height: 1; position: relative; z-index: 1; } .site-breadcrumb .breadcrumb-menu li { position: relative; display: inline-block; margin-left: 3rem; color: var(--clr-white); font-weight: 500; text-transform: capitalize; } .site-breadcrumb .breadcrumb-menu li a { color: var(--clr-white); -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .site-breadcrumb .breadcrumb-menu li.active { color: var(--clr-white); } .site-breadcrumb .breadcrumb-menu li::before { position: absolute; content: '/'; font-family: 'Font Awesome\ 5 Free'; font-weight: 900; width: 2rem; right: -24px; top: 3px; text-align: center; font-size: 1.4rem; color: var(--clr-white); } .site-breadcrumb .breadcrumb-menu li:first-child { margin-left: 0; } .site-breadcrumb .breadcrumb-menu li:last-child:before { display: none; } .site-breadcrumb .breadcrumb-menu li:hover { color: #d63031; } .site-breadcrumb-wpr { position: relative; z-index: 1; margin-top: 15.5rem; } /*------------------------------------------------------- 15. RTL css ---------------------------------------------------------*/ body.rtl-mode { direction: rtl; } body.rtl-mode .item-area { direction: ltr; } body.rtl-mode .price-wpr { direction: rtl; } @media (min-width: 992px) { body.rtl-mode .navbar-brand { margin-left: 3rem; } body.rtl-mode .navbar .nav-item .nav-link { margin-left: 3rem; margin-right: 0; } } /*------------------------------------------------------- 16. Vidz css ---------------------------------------------------------*/ .mfp-hide { display: none; } #vidz { display: flex; align-items: center; justify-content: center; } #vidz iframe { width: 853px; height: 480px; } .mfp-close-btn-in .mfp-close { color: #fff !important; } .pl .play-bt { width: 9rem; height: 9rem; text-align: center; -webkit-border-radius: 50%; border-radius: 50%; position: relative; z-index: 1; display: inline-block; background-color: var(--clr-white); line-height: 115px; padding-left: 5px; } .pl .play-bt i { color: var(--clr-def); font-size: 4rem; } .pl .play-bt:hover { color: var(--clr-white); } .pl .play-bt .wave-3, .pl .play-bt::before, .pl .play-bt::after { content: ''; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; -webkit-animation: waves 3s ease-in-out infinite; animation: waves 3s ease-in-out infinite; z-index: -1; background: var(--clr-white); height: 15rem; width: 15rem; } .pl .play-bt::before { -webkit-animation-delay: 0s; animation-delay: 0s; } .pl .play-bt::after { -webkit-animation-delay: 1s; animation-delay: 1s; } .pl .play-bt .wave-3 { -webkit-animation-delay: 2s; animation-delay: 2s; } @keyframes waves { 0% { -webkit-transform: translate(-50%, -50%) scale(0.2, 0.2); transform: translate(-50%, -50%) scale(0.2, 0.2); opacity: 0; } 50% { opacity: 0.9; } 100% { -webkit-transform: translate(-50%, -50%) scale(0.9, 0.9); transform: translate(-50%, -50%) scale(0.9, 0.9); opacity: 0; } } @-webkit-keyframes button_wave { 0% { transform: translate(-50%, -50%) scale(0.5); } 50% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(0.5); } } /*------------------------------------------------------- 17. Blog Single css ---------------------------------------------------------*/ .blockqoute { padding: 4rem 4rem; font-size: 20px; font-weight: 500; background: var(--clr-black); position: relative; z-index: 1; font-style: italic; color: rgba(255, 255, 255, 0.6); } .blockqoute::before { position: absolute; content: ''; height: 100%; width: 5px; z-index: -1; background: var(--clr-def); opacity: 1; top: 0; left: 0; } .blockqoute::after { position: absolute; right: 50px; content: "\efcd"; font-family: "IcoFont"; bottom: -95px; font-weight: 100; opacity: 0.2; font-size: 140px; font-style: normal; color: var(--clr-white); } .blockqoute span { display: block; position: relative; padding-left: 6rem; color: var(--clr-white); font-size: 15px; margin-top: 2rem; } .blockqoute span::before { position: absolute; content: ''; height: 2px; width: 50px; z-index: -1; background: var(--clr-def); opacity: 1; top: 50%; left: 0; transalate: 0 -50%; } .blockqoute .block-qoute { position: absolute; content: ''; left: 3rem; top: 2.5rem; z-index: -1; } .single-content-img { position: relative; z-index: 1; } .single-content-img img { border-radius: 6px; width: 100%; } .single-content-img .single-sci-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 6px; background-color: rgba(7, 14, 39, 0.7); display: flex; align-items: center; justify-content: center; z-index: 1; } .single-commentor-user img { -webkit-border-radius: 50%; border-radius: 50%; } .theme-single.blog-single { background: var(--clr-white); } .single-comments-section.blg-single { background: var(--clr-white); box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.1); padding: 4rem 5rem; margin-top: 3rem; } .single-comments-section.blg-single .single-content-title { margin-bottom: 3rem; font-size: 23px; font-weight: 700; letter-spacing: 0.0015em; } .single-comments-section.blg-single .single-comments-section-form h4 { margin-bottom: 3rem; } .single-comments-section.blg-single .single-comments-section-form form .input-style-2 { border: 1px solid #ccc; } .single-comments-section.blg-single .single-commentor { margin-bottom: 0rem; } .single-comments-section.blg-single .single-commentor ul { display: flex; flex-direction: column; gap: 3rem; } .single-comments-section.blg-single .single-commentor .single-commentor-user { display: flex; align-items: center; gap: 3rem; } .single-comments-section.blg-single .single-comments-section-form form .form-control { margin-bottom: 0; } textarea.input-style-2 { height: 15rem; } .blog-single-pic { margin-bottom: 6rem; display: block; } .blog-single-info .blog-single-header .blog-single-title { font-weight: 400; margin-bottom: 3rem; } .blog-single-info .blog-single-header .blog-single-meta { display: flex; align-items: center; gap: 3rem; border-bottom: 1px solid #eaeaea; padding-bottom: 1.3rem; } .blog-single-info .blog-single-header .blog-single-meta li i { margin-right: 1rem; } .blog-single-info .blog-single-header .blog-single-meta li:first-child i { color: #2878eb; } .blog-single-info .blog-single-header .blog-single-meta li:nth-child(2) i { color: #f14d5d; } .blog-single-info .blog-single-header .blog-single-meta li:nth-child(3) i { color: #00d2ff; } .blog-single-info .blog-single-header .blog-single-meta li:nth-child(4) i { color: #f14d5d; } .blog-single-info .blog-single-header .blog-single-meta li:nth-child(5) i { color: #1a01ff; } .blog-single-info .blog-tag-links { gap: 2rem; } .blog-single-info .blog-single-nxt-prev { display: flex; gap: 1.5rem; } .blog-single-info .blog-single-nxt-prev a i { -webkit-border-radius: 50%; border-radius: 50%; width: 70px; height: 70px; line-height: 70px; background-color: var(--clr-def); text-align: center; color: var(--white-color); display: inline-block; font-size: 3rem; } .blog-single-info .blog-single-nxt-prev a:last-child i { background-color: #f14d5d; } .blog-single-info .blog-single-comment .blog-single-single { display: grid; grid-template-columns: 10rem 1fr; grid-gap: 4rem; align-items: center; margin-bottom: 3rem; } .blog-single-info .blog-single-comment .blog-single-single:last-child { margin-bottom: 0; } .blog-single-info .blog-single-comment .blog-single-single .blog-single-single-bio h5 { font-weight: 500; } .blog-single-info .blog-single-comment .blog-single-single .blog-single-single-bio h5 .reply { color: var(--clr-body); font-size: 1.6rem; font-weight: 400; } .blog-single-info .blog-single-comment .blog-single-single .blog-single-single-bio span { display: block; margin-bottom: 1.5rem; } .single-comments-section-form .input-style-2 { padding: 2.1rem 2rem; border: 1px solid #eaeaea; -webkit-border-radius: 5px; border-radius: 5px; outline: none; line-height: 1; background-color: var(--clr-white); } .single-comments-section-form .input-style-2::placeholder { font-size: 1.6rem; color: #787781; opacity: 1; } .single-comments-section-form .input-style-2:focus { outline: none; box-shadow: none; } .blog-single-area .single-comments-section .single-commentor .single-commentor-user p { margin-bottom: 2rem; } textarea.input-style-2 { height: 15rem !important; } button.theme-btn { border: none; } .single-user-title { font-weight: 500; margin-bottom: 6rem; } .b-qoute { padding: 3rem 6rem; font-style: italic; border: 1px solid #eaeaea; } .theme-single { box-shadow: 0px 0px 50px 0px rgba(34, 34, 34, 0.1); border-radius: 5px; background-color: var(--clr-white); } .theme-info { padding: 5rem 5rem 5rem 5rem; } .theme-pic { position: relative; z-index: 1; } .theme-pic .big-pic { width: 100%; border-radius: 5px 5px 0 0; } .theme-pic .pdt-title { position: absolute; bottom: -5rem; left: 3%; box-shadow: 0px 0px 29px 0px rgba(34, 34, 34, 0.1); padding: 1.5rem 2rem; border-radius: 5px; background-color: var(--clr-white); text-transform: capitalize; font-size: 2.4rem; } .theme-opt-title { font-size: 16px; font-weight: 600; line-height: 28px; letter-spacing: 0.0015em; } .de-list { column-count: 2; column-gap: 4rem; } .de-list li { margin-bottom: 2rem; } .de-list li:last-child { margin-bottom: 0; } .de-list li .de-wpr { display: flex; align-items: flex-start; gap: 2rem; } .de-list li .de-wpr .de-icon { font-size: 5rem; color: var(--clr-def); } .theme-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; } .theme-meta .theme-meta-left ul { display: flex; align-items: center; gap: 3rem; } .theme-meta .theme-meta-left ul li i { color: var(--clr-def); margin-right: 1rem; } .theme-meta .theme-meta-right { display: flex; align-items: center; gap: 3rem; } .theme-meta .theme-meta-right a i { color: var(--clr-def); margin-right: 8px; } .theme-meta .theme-meta-right .footer-social li a i { height: 4rem; width: 4rem; line-height: 4rem; text-align: center; border: 1px solid var(--clr-def); font-size: 1.6rem; color: var(--clr-def); } .theme-meta .share-btn a { display: flex; align-items: center; } .theme-meta .share-btn a i { font-size: 2rem; margin-right: 1rem; } .theme-desc h2 { margin-bottom: 2rem; } .img-grid { display: grid; grid-template-columns: 255px 1fr; gap: 3rem; } .theme-opt { margin-bottom: 3rem; } .theme-opt:last-child { margin-bottom: 0; } .theme-opt ul { display: flex; flex-direction: column; gap: 3px; } .theme-opt ul li { font-size: 16px; font-weight: 400; line-height: 28px; letter-spacing: 0.0015em; position: relative; z-index: 1; padding-left: 2rem; } .theme-opt ul li a { text-decoration: underline; } .theme-opt ul li::before { position: absolute; content: ''; height: 1rem; width: 1rem; -webkit-border-radius: 50%; border-radius: 50%; background-color: var(--clr-heading); top: 50%; left: 0; transform: translate(0, -50%); } .theme-price-plan .theme-price-single { display: flex; justify-content: space-between; align-items: center; } .theme-price-plan .theme-price-single .form-check-input { margin-top: 0; outline: none; vertical-align: middle; position: relative; z-index: 1; } .theme-price-plan .theme-price-single .form-check-input:focus { outline: none; box-shadow: none; } .theme-price-plan .theme-price-single .form-check-input:checked { background-color: transparent; border: 1px solid var(--clr-def); } .theme-price-plan .theme-price-single .form-check-input:checked::before { position: absolute; content: ''; height: 8px; width: 8px; border-radius: 50%; background-color: var(--clr-def); top: 50%; left: 50%; transform: translate(-50%, -50%); } .plan-title { font-size: 16px; font-weight: 500; line-height: 28px; letter-spacing: 0.005em; margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(7, 14, 39, 0.1); } .theme-price-single .form-check-label { margin-left: 1rem; font-size: 14px; font-weight: 400; line-height: 10px; letter-spacing: 0.005em; color: var(--clr-heading); } .theme-price-single .theme-price-value { color: var(--clr-def); font-size: 16px; font-weight: 700; line-height: 10px; letter-spacing: 0.005em; } .theme-bottom-price-btuoon { display: flex; justify-content: space-between; margin-top: 3rem; } .theme-bottom-price-port { margin-top: 3rem; } .price { padding: 3rem 2rem; } .theme-bottom-price-btuoon .btn-6 { padding: 1.2rem 3rem; } .theme-single-pill { box-shadow: 0px 0px 50px 0px rgba(7, 14, 39, 0.1); background-color: var(--clr-white); } .theme-single-pill .nav { display: flex; flex-wrap: inherit; padding-left: 0; margin-bottom: 0; justify-content: space-between; } .theme-single-pill .nav-pills .nav-item { width: 100%; } .theme-single-pill .nav-pills .nav-item .nav-link { border: 3px solid transparent; border-radius: 5px 5px 0 0; padding: 2rem; line-height: 1; margin-right: 0; color: var(--clr-body); font-size: 14px; font-weight: 700; letter-spacing: 0.0015em; width: 100%; } .theme-single-pill .nav-pills .nav-link.active, .theme-single-pill .nav-pills .show > .nav-link { color: var(--clr-white); } .blog-page-single { box-shadow: 0 0 29px rgba(0, 0, 0, 0.09); margin-bottom: 3rem; background-color: var(--clr-white); } .blog-page-single .blog-pic { margin-bottom: 0rem; position: relative; z-index: 1; } .blog-page-single .blog-content { position: relative; z-index: 1; padding: 4rem 4rem 4rem 4rem; } .blog-page-single .blog-content .blog-page-shape { position: absolute; top: 0; left: 0; z-index: -1; } .blog-page-single .blog-content .blog-text { margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px dashed #ccc; line-height: 3.4rem; } .blog-page-single .blog-content .blog-page-title { line-height: 1.4; text-transform: capitalize; } .blog-page-single .blog-content .blog-user { display: flex; align-items: center; justify-content: space-between; } .blog-page-single .blog-content .blog-user .blog-user-info { display: flex; align-items: center; gap: 2rem; line-height: 1; } .blog-page-single .blog-content .blog-user .blog-user-info .blog-user-bio h4 { font-size: 2.2rem; text-transform: capitalize; line-height: 1; margin-bottom: 1rem; } .blog-page-single .blog-content .blog-user .blog-user-info .blog-user-bio span { color: var(--clr-heading); display: block; font-size: 1.4rem; line-height: 1; } .blog-page-single .blog-content .blog-user .blog-mta { display: flex; align-items: center; gap: 2rem; } .blog-page-single .blog-content .blog-user .blog-mta li i { color: var(--clr-def); margin-right: 2rem; } .blog-user-date-yr { display: flex; flex-direction: column; text-align: center; position: absolute; left: 0; bottom: 0; } .blog-user-date-yr .blog-user-date { background-color: var(--clr-black); font-size: 2rem; font-weight: 600; line-height: 1; color: var(--clr-white); padding: 1rem 2rem; text-transform: uppercase; border-radius: 0 2rem 0 0; } .blog-user-date-yr .blog-user-yr { background-color: var(--clr-def); font-size: 2rem; font-weight: 600; line-height: 1; color: var(--clr-white); padding: 1rem 2rem; } .red-more { line-height: 1; } /*------------------------------------------------------- 18. Sidebar css ---------------------------------------------------------*/ .widget { padding: 4rem 3.7rem; box-shadow: 0px 0px 50px 0px rgba(7, 14, 39, 0.1); margin-bottom: 3rem; background-color: var(--clr-white); border-radius: 5px; } .widget:last-child { margin-bottom: 0; } .ps.g-5 { --bs-gutter-x: 5rem; } .work-title { margin-bottom: 30px; padding-bottom: 15px; font-weight: 800; position: relative; z-index: 1; font-size: 24px; } .work-title::before { position: absolute; z-index: -1; height: 2px; width: 6rem; border-radius: 2rem; content: ''; bottom: 0; left: 0; background-color: var(--clr-def); } .search-form { position: relative; z-index: 1; } .search-form .input-style-2 { padding-left: 1rem; } .search-form button { position: absolute; top: 0; right: 0; border-radius: 4px; } .search-form button i { color: var(--clr-white); } .category-list ul { display: flex; flex-direction: column; gap: 1.5rem; } .category-list ul li { padding: 1.2rem 2rem; border: 1px dashed #E7E7E7; } .category-list ul li:hover { background-color: var(--clr-def); border: 1px solid transparent; } .category-list ul li:hover a { color: var(--clr-white); } .category-list ul li:hover a i { color: var(--clr-white); } .category-list ul li a { display: flex; align-items: center; justify-content: space-between; } .category-list ul li a i { color: var(--clr-heading); display: inline-block; font-size: 1.6rem; } .subs.bg-overlay::before { border-radius: 5px; } .subs .work-title { color: var(--clr-white); } .subs .subs-title { color: #BBBBBB; margin-bottom: 25px; } .subs-sub .ipp { margin-bottom: 2rem; } .subs-sub .ipp input { width: 100%; border-radius: 5px; height: 50px; padding-left: 0; text-align: center; border: 2px solid var(--clr-white); background: transparent; } .subs-sub .ipp input::placeholder { color: var(--clr-white); font-size: 1.5rem; } .subs-sub button { background: var(--clr-def); width: 100%; border: none; border-radius: 5px; color: var(--clr-white); font-size: 1.5rem; height: 50px; padding: 1.2rem 2rem; text-align: center; } .slidecontainer { width: 100%; } .slidecontainer .slider { -webkit-appearnce: none; width: 100%; height: 4px; background: var(--clr-bg-2); outline: none; border: none; } .slidecontainer .slider:hover { opacity: 1; } .slidecontainer .slider::-webkit-slider-thumb { -webkit-appearnce: none; width: 5px; height: 5px; background: red; cursor: pointer; } .slidecontainer .slider::-moz-range-thumb { width: 5px; height: 5px; background: red; cursor: pointer; } .sidebar-rating { display: flex; flex-direction: column; gap: 1.5rem; } .sidebar-rating li { display: flex; justify-content: space-between; position: relative; z-index: 1; padding-left: 3rem; } .sidebar-rating li::before { position: absolute; content: ''; width: 16px; height: 16px; border: 1px solid var(--clr-def); border-radius: 50%; left: 0; top: 50%; transform: translate(0, -50%); } .sidebar-rating li::after { width: 8px; height: 8px; position: absolute; content: ''; z-index: -1; background: var(--clr-def); left: 4px; border-radius: 50%; top: 50%; transform: translate(0, -50%); } .recent-post-single { display: grid; gap: 2rem; align-items: center; margin-bottom: 2rem; grid-template-columns: 80px 1fr; } .recent-post-single:last-child { margin-bottom: 0; } .recent-post-single .recent-post-bio h6 { font-size: 15px; font-weight: 800; line-height: 20px; margin-bottom: 0; } .recent-post-single .recent-post-bio span { font-size: 13px; font-weight: 600; line-height: 1; display: flex; gap: 8px; margin-bottom: 10px; } .recent-post-single .recent-post-bio span i { color: var(--clr-def); } .content-tags { display: flex; align-items: center; gap: 1.5rem; } .content-tags h5 { font-size: 19px; font-weight: 600; line-height: 28px; letter-spacing: 0.0015em; } .content-tags ul { display: flex; align-items: center; gap: 1.5rem; } .tags-link { padding: 1.5rem 2rem; background-color: var(--clr-bg); border-radius: 4px; font-size: 14px; font-weight: 500; line-height: 10px; letter-spacing: 0.0025em; color: var(--clr-heading); display: inline-block; } .tags-link:hover { background-color: var(--clr-def); color: var(--clr-white); } .sidebar-tags .tags a { margin: 8px 8px 8px 0; } .share { font-size: 14px; font-weight: 500; line-height: 10px; letter-spacing: 0.0025em; text-transform: capitalize; color: var(--clr-heading); } .share img { margin-right: 7px; } .de-bpd { padding-left: 10rem; } .service-sidebar ul li { margin-bottom: 1.5rem; display: block; } .service-sidebar ul li:last-child { margin-bottom: 0; } .service-sidebar ul li a { display: flex; padding: 15px 20px; font-size: 18px; border-radius: 5px; border: 2px solid #e6ecf7; background-color: var(--clr-bg); align-items: center; justify-content: space-between; } .theme-pic .pdt-title { margin-right: 3rem; } .project-sidebar-single { box-shadow: 0 0 10px #eee; padding: 30px; margin-bottom: 3rem; background-color: var(--clr-white); } .project-sidebar-single:last-child { margin-bottom: 0; } .project-sidebar-single ul li { border-bottom: 1px solid #e7e7e7; display: block; margin-bottom: 10px; padding-bottom: 10px; text-transform: uppercase; font-family: var(--font-2); font-weight: 600; line-height: 33px; } .project-sidebar-single ul li:last-child { margin-bottom: 0px; padding-bottom: 0px; border-bottom: none; } .project-sidebar-single ul li span { display: block; font-weight: normal; margin: 0; text-transform: capitalize; } .rating a i { color: var(--clr-def); } .range-label { color: var(--clr-heading); cursor: pointer; font-size: 1.8rem; font-weight: 400; display: block; margin-bottom: 1.5rem; } .range-slider { width: 100%; } .range-slider__range { -webkit-appearance: none; width: calc(100% - (73px)); height: 10px; border-radius: 5px; background: #d7dcdf; outline: none; padding: 0; margin: 0; } .range-slider__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #2c3e50; cursor: pointer; -webkit-transition: background 0.15s ease-in-out; transition: background 0.15s ease-in-out; } .range-slider__range::-webkit-slider-thumb:hover { background: var(--clr-def); } .range-slider__range:active::-webkit-slider-thumb { background: var(--clr-def); } .range-slider__range:active::-moz-range-thumb { background: var(--clr-def); } .range-slider__range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #2c3e50; cursor: pointer; -moz-transition: background 0.15s ease-in-out; transition: background 0.15s ease-in-out; } .range-slider__range::-moz-range-thumb:hover { background: var(--clr-def); } .range-slider__range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--clr-def); } .range-slider__value { display: inline-block; position: relative; width: 60px; color: #fff; line-height: 20px; text-align: center; border-radius: 3px; background: #2c3e50; padding: 5px 10px; margin-left: 8px; } .range-slider__value:after { position: absolute; top: 8px; left: -7px; width: 0; height: 0; border-top: 7px solid transparent; border-right: 7px solid #2c3e50; border-bottom: 7px solid transparent; content: ""; } ::-moz-range-track { background: #d7dcdf; border: 0; } input::-moz-focus-inner, input::-moz-focus-outer { border: 0; } ul.chk { display: flex; flex-direction: column; gap: 1.5rem; } .styled-checkbox { position: absolute; opacity: 0; } .styled-checkbox + label { position: relative; cursor: pointer; padding: 0; line-height: 18px; color: var(--clr-heading); font-size: 1.8rem; font-weight: 400; } .styled-checkbox + label:before { content: ""; margin-right: 10px; display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: var(--clr-def); } .styled-checkbox:hover + label:before { background: var(--clr-def); } .styled-checkbox:focus + label:before { box-shadow: none; } .styled-checkbox:checked + label:before { background: var(--clr-def); } .styled-checkbox:disabled + label { color: #b8b8b8; cursor: auto; } .styled-checkbox:disabled + label:before { box-shadow: none; background: #ddd; } .styled-checkbox:checked + label:after { content: ""; position: absolute; left: 5px; top: 9px; background: var(--clr-white); width: 2px; height: 2px; box-shadow: 2px 0 0 var(--clr-white), 4px 0 0 var(--clr-white), 4px -2px 0 var(--clr-white), 4px -4px 0 var(--clr-white), 4px -6px 0 var(--clr-white), 4px -8px 0 var(--clr-white); transform: rotate(45deg); } /*------------------------------------------------------- 19. Pagination css ---------------------------------------------------------*/ .pagination { display: block; margin-top: 6rem; margin-bottom: 0px; text-align: center; } .pagination .page-value { width: 43px; height: 43px; line-height: 45px; text-align: center; display: inline-block; background-color: var(--clr-white); font-size: 15px; font-weight: 600; margin: 0 2px 10px; padding: 0; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .pagination .page-value.current { background-color: var(--clr-def-2); color: var(--clr-white); } .pagination .page-value:hover { background-color: var(--clr-def-2); color: var(--clr-white); } .pagination .page-value i { font-size: 15px; } /*------------------------------------------------------- 20. Gallery css ---------------------------------------------------------*/ :root { --swiper-image-ratio: 33.3%; /* ratio 16:9 = 56.25% */ --swiper-width: 50%; --swiper-inactive-scale: .85; /* makes the other slide smaller */ /* responsive settings */ --swiper-mobile-width: 90%; --swiper-mobile-inactive-scale: .95; } .gallery-pic { position: relative; z-index: 1; } .gallery-pic::before { position: absolute; content: ''; height: 100%; width: 100%; z-index: -1; background: linear-gradient(to top, var(--clr-def-2) 0%, transparent 100%); opacity: 0.7; top: 0; left: 0; z-index: 0; } .gallery-pic .gallery-desc { position: absolute; bottom: 50px; left: 50%; translate: -50% 0; padding: 50px; z-index: 1; min-width: 50%; opacity: 0; } .gallery-pic .gallery-desc::before { position: absolute; content: ''; height: 100%; width: 100%; z-index: -1; background: var(--clr-def-2); opacity: 0.7; top: 0; left: 0; } .gallery-pic .gallery-desc .heading-3 { color: var(--clr-white); } .gallery-pic .gallery-desc p { color: var(--clr-white); margin-bottom: 3rem; } .gallery-btn { color: var(--clr-white); } .gallery-btn i { height: 50px; width: 50px; line-height: 50px; text-align: center; -webkit-border-radius: 50%; border-radius: 50%; background-color: var(--clr-def); display: inline-block; color: var(--clr-white); margin-right: 1.5rem; } .gallery-shape { position: absolute; z-index: -1; top: 0; right: -90px; height: 790px; opacity: .3; } .port-sldr.swiper .swiper-pagination .swiper-pagination-bullet { background: transparent; height: 20px; width: 20px; border: 1px solid #dfdbdb; position: relative; z-index: 1; opacity: 1; } .port-sldr.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { border-color: var(--clr-def); } .port-sldr.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after { position: absolute; left: 50%; top: 50%; content: ""; height: 5px; width: 5px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--clr-def); transition: all 0.35s ease-in-out; } .port-sldr .swiper-horizontal > .swiper-pagination-bullets, .port-sldr .swiper-pagination-bullets.swiper-pagination-horizontal, .port-sldr .swiper-pagination-custom, .port-sldr .swiper-pagination-fraction { bottom: 33px; } .port-sldr .swiper-slide { flex-shrink: 0; width: 50%; opacity: 1; transform: scale(0.94); transition: all .3s ease-in-out; overflow: hidden; } .swiper-slide.swiper-slide-active .gallery-pic .gallery-desc { opacity: 1; } @media only screen and (min-width: 4000px) { .port-sldr .swiper { height: calc(var(--swiper-mobile-width) * var(--swiper-image-ratio) / 100%) !important; } .port-sldr .swiper-slide { width: var(--swiper-mobile-width) !important; transform: scale(var(--swiper-mobile-inactive-scale)) !important; } } /*------------------------------------------------------- 21. Topbar css ---------------------------------------------------------*/ .top-bar-area { height: 90px; line-height: 90px; } .top-bar-area::before { position: absolute; background: var(--clr-def-2); content: ''; z-index: -1; top: 0; left: -270px; height: 100%; width: 140%; } .top-barshp { position: absolute; z-index: -1; top: 0; right: 0; } .top-social { display: flex; align-items: center; gap: 2rem; justify-content: flex-end; } .top-social li a i { color: var(--clr-white); font-size: 1.5rem; } .topbar-before-off::before { display: none; } .top-box { display: flex; align-items: center; gap: 2rem; color: var(--clr-heading); } .top-box i { color: var(--clr-def); height: 4rem; width: 4rem; line-height: 4rem; text-align: center; border-radius: 50%; background-color: var(--clr-white); } .top-bar-shape { position: absolute; right: -20rem; top: 0; z-index: -1; height: 100%; } .top-box.top-location.hm-2 span { font-size: 2rem; letter-spacing: 1px; } .top-box.top-location.hm-2 span:first-letter { text-transform: uppercase; } .top-box.top-login { justify-content: flex-end; } .topbar-white .top-box { color: var(--clr-white); } .topbar-white .top-box a { color: var(--clr-white); } /*------------------------------------------------------- 22. Heading css ---------------------------------------------------------*/ .heading-1 { font-size: 42px; line-height: 1.2; font-weight: 800; } .heading-light-1 { font-size: 42px; line-height: 1.2; font-weight: 200; } .heading-2 { font-size: 36px; line-height: 50px; font-weight: 800; } .heading-light-2 { font-size: 36px; line-height: 50px; font-weight: 200; } .heading-3 { font-size: 28px; line-height: 40px; font-weight: 800; } .heading-light-3 { font-size: 28px; line-height: 40px; font-weight: 200; } .heading-4 { font-size: 24px; line-height: 38px; font-weight: 800; } .heading-light-4 { font-size: 24px; line-height: 38px; font-weight: 200; } .heading-5 { font-size: 20px; line-height: 32px; font-weight: 800; } .heading-light-5 { font-size: 20px; line-height: 32px; font-weight: 200; } .heading-6 { font-size: 16px; line-height: 32px; font-weight: 800; } .heading-light-6 { font-size: 16px; line-height: 32px; font-weight: 200; } .para { font-size: 1.6rem; line-height: 3.2rem; } .faq-para { font-size: 16px; line-height: 32px; font-weight: 400; color: var(--clr-heading); } .hero-title { font-size: 9rem; line-height: 1.1em; font-weight: 800; font-family: var(--font-2); } .hero-title span { color: var(--clr-def-2); font-family: var(--font-2); font-weight: 200; border-bottom: 3px solid var(--clr-def); } .hero-title-light { font-size: 7.2rem; line-height: 7.6rem; font-weight: 300; font-family: var(--font-2); } .hero-title-light span { color: var(--clr-def); font-family: var(--font-2); font-weight: 200; } .hero-title-2 { font-size: 55px; line-height: 1.1em; font-weight: 800; letter-spacing: -0.01em; } .hero-sub-title { font-size: 1.6rem; font-weight: 800; line-height: 1; display: inline-block; font-family: var(--font-2); color: var(--clr-def); text-transform: uppercase; position: relative; z-index: 1; padding-left: 5rem; } .hero-sub-title .hero-line { width: 4rem; height: 1px; position: absolute; top: 18%; left: 0; translate: 0 -50%; z-index: 1; background-color: var(--clr-def); } .hero-sub-title .hero-line::before { position: absolute; content: ''; height: 1px; width: 30px; z-index: -1; background: var(--clr-def); opacity: 1; top: 5px; left: 0; } .hero-sub-title .hero-line::after { position: absolute; content: ''; height: 1px; width: 20px; z-index: -1; background: var(--clr-def); opacity: 1; top: 10px; left: 0; } .hero-sub-title-light { font-size: 2.2rem; font-weight: 300; line-height: 1; display: inline-block; font-family: var(--font-2); color: var(--clr-def); text-transform: uppercase; position: relative; z-index: 1; } /* CSS Document */ /*------------------------------------------------------- 23. Contact css ---------------------------------------------------------*/ .contact-cn-1 { position: absolute; bottom: 0; right: -95px; width: 370px; } .contact-cnt { box-shadow: 3px 4px 20px rgba(0, 0, 0, 0.15); background-color: var(--clr-white); } .white-overlay { position: relative; z-index: 1; background-repeat: repeat; background-position: top left; } .white-overlay::before { position: absolute; content: ''; height: 100%; width: 90%; z-index: -1; background: var(--clr-bg); opacity: 1; top: 0; right: 0; -webkit-border-radius: 0 0 0 50%; border-radius: 0 0 0 50%; } .contact-home textarea { height: 205px !important; } .contact-home .contact-form { padding: 80px; background: var(--clr-white); } .contact-home .contact-form .contact-form-title .heading-1 { font-size: 36px; } .contact-home .contact-form .form-check-input[type=checkbox] { border-radius: 0; margin-top: 0; vertical-align: top; float: none; margin-left: 0; } .contact-home .contact-form .form-check-label span { color: var(--clr-def); } .contact-home .form-control.input-style-2 { border: none; height: 50px; outline: none; border-radius: 5px; box-shadow: none; padding-left: 20px; font-size: 14px; background: #EEF3F9; } .contact-home .form-control.input-style-2::placeholder { color: var(--clr-body); } .contact-right { padding-left: 3rem; } .contact-up-title { margin-bottom: 4rem; padding-bottom: 3rem; border-bottom: 1px solid #d4d4d4; } .addr-home .addr-box .addr-box-single:nth-child(2) .addr-icon i { background-color: var(--clr-def-2); } .addr-home .addr-box .addr-box-single:nth-child(3) .addr-icon i { background-color: #0077B5; } .addr-home .addr-box-single { display: flex; align-items: flex-start; gap: 3rem; margin-bottom: 3rem; } .addr-home .addr-box-single:last-child { margin-bottom: 0; } .addr-home .addr-box-single .addr-icon i { height: 6rem; width: 6rem; line-height: 6rem; text-align: center; font-size: 2.4rem; display: block; color: var(--clr-white); border-radius: 5px; background-color: var(--clr-def); } .addr-home .addr-box-single .addr-desc h5 { margin-bottom: 5px; } .contact-title p { padding-right: 10rem; } .contact-page .addr-box-single { display: flex; align-items: center; gap: 3rem; margin-bottom: 5rem; } .contact-page .addr-box-single:last-child { margin-bottom: 0; } .contact-page .addr-box-single .addr-icon i { font-size: 4.5rem; display: block; color: var(--clr-def); } .contact-page .addr-box-single .addr-desc h5 { margin-bottom: 5px; } .contact-page .addr-box-single .addr-desc p { line-height: 1.5; } .contact-us-wpr.contact-page .input-style-2 { color: var(--clr-white); } .contact-ads form { background: var(--clr-gradient); padding: 6rem; } .contact-ads form .btn-4 { border: none; margin-top: 5rem; } .contact-ads form .form-control { background-color: transparent; } .contact-ads form .form-control::placeholder { color: var(--clr-white); opacity: .7; } .contact-ads form .form-control::placeholder:focus { border: none; box-shadow: none; outline: none; } .form-control.input-style-2 { border: 1px solid #fff; height: 50px; outline: none; border-radius: 5px; box-shadow: none; padding-left: 20px; font-size: 14px; } .form-control.input-style-2:focus { box-shadow: none; outline: none; border: 1px solid #19ce67; } .form-title { margin-bottom: 3rem; text-transform: capitalize; } .btn-submit { border: none; text-transform: uppercase; background-color: var(--clr-def); padding: 1.2rem 4rem; color: #fff; border-radius: 5px; transition: all .5s ease; display: inline-block; } .btn-submit:hover { background-color: #000; text-decoration: none; color: var(--clr-white); } .contact-opt-box i { height: 7rem; width: 7rem; line-height: 7rem; text-align: center; -webkit-border-radius: 50%; border-radius: 50%; background-color: var(--clr-def); font-size: 3rem; display: inline-block; color: var(--clr-white); margin-bottom: 3rem; } .btn-4.sub-btn { border: none; margin-top: 5rem; } .appointment-here-form form .form-group { position: relative; z-index: 1; } .appointment-here-form form .form-group i { position: absolute; top: 50%; left: 10px; translate: 0 -50%; color: var(--clr-def); font-size: 14px; } /*Google Maps*/ .g-map-area { height: 50vh; } .g-map--wrapper iframe { width: 100%; height: 100vh; border: none; } /*------------------------------------------------------- 24. Text COlor css ---------------------------------------------------------*/ .text-grad { background: var(--clr-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .text-grad-2 { background: var(--clr-gradient-2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .text-theme { background: var(--clr-def); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .text-theme-2 { background: var(--clr-def-2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .text-theme-3 { background: var(--clr-def-3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /*End Theme Basic*/ /*------------------------------------------------------- 25. Header Hero Top css ---------------------------------------------------------*/ .header-hero-top { display: grid; grid-template-columns: 250px 1fr; } /*------------------------------------------------------- 26. About css ---------------------------------------------------------*/ .about-location { position: absolute; bottom: 0; left: -288px; z-index: -1; } .about-bottom { display: flex; align-items: center; } .about-bottom .about-btm-btn { padding-right: 1rem; margin-right: 3rem; border-right: 1px solid #BBBBBB; } .about-bottom .about-btm-user { display: flex; align-items: center; gap: 15px; } .about-bottom .about-btm-user .about-btm-bio h6 { line-height: 1; margin-bottom: 10px; font-size: 1.8rem; } .about-bottom .about-btm-user .about-btm-bio span { line-height: 1; font-size: 1.6rem; display: block; } .about-opt { display: grid; align-items: center; gap: 30px; grid-template-columns: 150px 1fr; margin-bottom: 4rem; } .about-opt .about-yr .about-yr-element { height: 150px; width: 150px; background-color: #202942; display: flex; align-items: center; justify-content: center; border-radius: 5px; } .about-opt .about-yr .about-yr-element::before { position: absolute; content: ''; height: 20px; width: 20px; z-index: -1; background: #202942; opacity: 1; top: 0; right: -16px; clip-path: polygon(100% 0, 0 0, 0 100%); } .about-opt .about-yr .about-yr-element .about-value { font-size: 60px; position: absolute; top: 50%; left: 50%; translate: -50% -50%; color: var(--clr-white); font-weight: 900; } .about-opt .about-yr-text h4 { font-size: 25px; text-transform: capitalize; } .about-opt .about-yr-text p { margin: 0; } .about-jahaj-2 { position: absolute; bottom: 0; right: -38rem; z-index: -1; } .about-left-img { position: relative; z-index: 1; } .about-left-img .about-left-img-shape { position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: -1; } .about-opt-2 { display: grid; gap: 5rem; grid-template-columns: 250px 1fr; } .about-opt-left-2 { padding: 50px 30px; border: 2px solid; border-radius: 8px; } .about-opt-left-2 p { font-weight: 800; font-size: 1.8rem; color: var(--clr-heading); line-height: 1.6; } .about-opt-right-box-2 { display: flex; align-items: center; gap: 2rem; } .about-opt-right-box-2 .about-opt-icon-2 i { height: 8rem; width: 8rem; line-height: 80px; background-color: #E5F1FF; text-align: center; border-radius: 5px; display: block; } .about-opt-right-box-2 .about-opt-desc-2 h2 { font-size: 40px; margin-bottom: 5px; line-height: 1; } .about-opt-right-box-2 .about-opt-desc-2 h5 { font-size: 18px; font-weight: 600; } .about-opt-right-pd { margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px solid #E7E7E7; } .about-opt-right-pd:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } /*------------------------------------------------------- 27. Service CSS ---------------------------------------------------------*/ .service-box { padding: 6rem 4rem; background-color: var(--clr-black); -webkit-transition: all .5s ease; transition: all .5s ease; } .service-box:hover { background-color: var(--clr-def); } .service-box:hover .service-icon i { background-color: var(--clr-white); } .service-box:hover .service-icon i img.service-clr-icon { display: none; } .service-box:hover .service-icon i img.service-icon-clr { display: inline-block; } .service-box:hover .service-desc p { color: #fff; } .service-box .service-icon { margin-bottom: 3rem; } .service-box .service-icon i { height: 70px; width: 70px; line-height: 70px; text-align: center; background-color: var(--clr-def); display: block; -webkit-transition: all .5s ease; transition: all .5s ease; } .service-box .service-icon i img { -webkit-transition: all .5s ease; transition: all .5s ease; } .service-box .service-icon i img.service-clr-icon { display: inline-block; } .service-box .service-icon i img.service-icon-clr { display: none; } .service-box .service-desc h4 { text-transform: capitalize; margin-bottom: 2rem; color: var(--clr-white); } .service-box .service-desc p { color: #BBBBBB; } .service-middle img { min-height: 100%; } .service-shape img { position: absolute; z-index: -1; } .service-shape img.service-wavy { left: 0; top: -5%; } .service-shape img.service-jahaj-3 { right: -108px; top: 43%; width: 555px; } .service-shape-2 { position: absolute; top: 0; left: 0; z-index: -1; } .service-middle img { width: 100%; } .element-bottom { display: flex; align-items: flex-end; justify-content: center; height: 100%; } .service-box-2 { padding-top: 5rem; } .service-box-2:hover .service-pic-2 .service-desc-2 { height: auto; } .service-box-2:hover .service-pic-2 .service-desc-2::before { height: 100%; background-color: var(--clr-def-2); } .service-box-2:hover .service-pic-2 .service-desc-2 .service-icon-title .service-icon-2 i img { filter: none; } .service-box-2:hover .service-pic-2 .service-desc-2 .service-icon-title .service-title-2 h5 { color: var(--clr-white); } .service-box-2:hover .service-pic-2 .service-desc-2 .service-text { opacity: 1; } .service-box-2 .service-pic-2 { position: relative; z-index: 1; } .service-box-2 .service-pic-2 .service-desc-2 { padding: 4rem 3rem; position: absolute; top: -50px; left: 50%; width: 76%; translate: -50% 0; height: 130px; transition: all .5s ease; transition-delay: .5s; overflow: hidden; } .service-box-2 .service-pic-2 .service-desc-2::before { position: absolute; content: ''; height: 130px; width: 100%; z-index: -1; background: var(--clr-white); opacity: 1; top: 0; left: 0; transition: all .5s ease; } .service-box-2 .service-pic-2 .service-desc-2 .service-icon-title { display: flex; align-items: center; gap: 2rem; margin-bottom: 3rem; } .service-box-2 .service-pic-2 .service-desc-2 .service-icon-title .service-icon-2 i img { filter: invert(1); } .service-box-2 .service-pic-2 .service-desc-2 .service-icon-title .service-title-2 h5 { color: var(--clr-heading); font-size: 2rem; line-height: 2.8rem; } .service-box-2 .service-pic-2 .service-desc-2 .service-text { transition: all .5s ease; opacity: 0; } .service-box-2 .service-pic-2 .service-desc-2 .service-text p { color: var(--clr-white); margin-bottom: 3rem; } /*------------------------------------------------------- 28. Counter Css ---------------------------------------------------------*/ .center-center { display: flex; justify-content: center; align-items: center; height: 100%; } .counter-title h2 { color: var(--clr-white); } .counter-title span { color: var(--clr-white); } .counter-title span .hero-line { background-color: var(--clr-white); } .counter-title span .hero-line::before { background-color: var(--clr-white); } .counter-title span .hero-line::after { background-color: var(--clr-white); } .counter-1 { border-left: 1px solid var(--clr-white); padding-left: 8rem; } .counter-1 .fun-fact .counter-icon { margin-bottom: 3rem; } .counter-1 .fun-fact .counter { position: relative; display: flex; align-items: center; justify-content: flex-start; font-size: 60px; font-weight: 600; color: var(--clr-white); line-height: 1; margin-bottom: 2rem; } .counter-1 .fun-fact span { font-weight: 600; color: var(--clr-white); display: block; font-size: 1.5rem; line-height: 1; } /*------------------------------------------------------- 29. Why css ---------------------------------------------------------*/ .circle-plus { position: absolute; z-index: -1; bottom: -10rem; right: 0; } .why-right .heading-1 { line-height: 5.3rem; font-weight: 500; } .why-text { margin-bottom: 20px; } .why-list { display: flex; flex-direction: column; gap: 1.5rem; } .why-list li { font-size: 18px; line-height: 20px; font-weight: 500; } .why-list li i { height: 2.3rem; width: 2.3rem; line-height: 2.3rem; border-radius: 50%; text-align: center; border: 1px solid var(--clr-def); color: var(--clr-def); font-size: 1.3rem; display: inline-block; margin-right: 1.5rem; } .why-h3 { text-decoration: underline; font-weight: 500; text-transform: capitalize; color: var(--clr-body); margin-bottom: 3rem; } .why-left-up-2 { margin-bottom: 6rem; } .why-left-up-2 .heading-1 { margin-bottom: 2rem; } .why-left-up-2 p { line-height: 3.4rem; padding-right: 10rem; } .why-option-single-2 { display: flex; flex-direction: column; gap: 15rem; background-color: var(--clr-white); padding: 30px 30px 30px 30px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; position: relative; z-index: 1; } .why-option-single-2 .why-wavy-line { position: absolute; top: 50%; left: 50%; translate: -50% -50%; } .why-option-single-2 .why-circle-2 { position: absolute; content: ''; height: 10px; width: 10px; z-index: -1; background: var(--clr-def); opacity: 1; top: 45%; left: 34%; translate: -50% -50%; -webkit-border-radius: 50%; border-radius: 50%; } .why-option-single-2 .why-circle-2::before { position: absolute; content: ''; height: 20px; width: 20px; z-index: -1; background: var(--clr-def); opacity: 0.4; top: 50%; left: 50%; translate: -50% -50%; -webkit-border-radius: 50%; border-radius: 50%; animation: smBg 3s linear infinite; } .why-option-single-2 .why-option-up-2 { display: flex; align-items: center; justify-content: space-between; } .why-option-single-2 .why-option-up-2 h5 { text-transform: capitalize; } .why-option-single-2 .why-option-up-2 i { font-size: 4rem; color: var(--clr-def); } @keyframes smBg { 0% { scale: 0; } 50% { scale: 1.3; } 100% { scale: 0; } } .why-right-pic-2 .why-pic-4, .why-right-pic-2 .why-pic-3, .why-right-pic-2 .why-pic-2 { position: absolute; filter: brightness(100%) contrast(100%) saturate(30%) blur(0) hue-rotate(0deg); border-radius: 1rem; box-shadow: 0 5px 15px 0 rgba(2, 6, 38, 0.12); } .why-right-pic-2 .why-pic-2 { bottom: 25px; right: 90px; z-index: -1; width: 120px; } .why-right-pic-2 .why-pic-3 { top: 0; left: 0; z-index: -1; width: 170px; } .why-right-pic-2 .why-pic-4 { width: 100px; top: 0; right: 0; z-index: -1; } /*------------------------------------------------------- 30. Work css ---------------------------------------------------------*/ @media (min-width: 1600px) { .sd-container-fluid { max-width: 1825px; } } .project-page .project-card { overflow: hidden; } .project-page .project-card .project-img { position: relative; z-index: 1; } .project-page .project-card .project-img:hover .port-overlay .port-desc { transform: scale(1); } .project-page .project-card .project-img .port-overlay { position: absolute; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; -webkit-transition: all .5s ease; transition: all .5s ease; display: flex; align-items: flex-end; justify-content: flex-end; } .project-page .project-card .project-img .port-overlay .port-desc { padding: 4rem 3rem; background: var(--clr-def); margin: 0 3rem 3rem 3rem; border-radius: 5px; transform: scale(0); transition: all .5s ease-in-out; } .project-page .project-card .project-img .port-overlay .port-desc .port-links { margin-bottom: 2rem; display: flex; background: var(--clr-white); border-radius: 5px; width: fit-content; padding: 18px 3rem; line-height: 1; } .project-page .project-card .project-img .port-overlay .port-desc .port-links a { margin-right: 1rem; padding-right: 1rem; border-right: 1px solid #e7e7e7; font-size: 1.4rem; color: var(--clr-def); } .project-page .project-card .project-img .port-overlay .port-desc .port-links a:last-child { margin-right: 0; padding-right: 0; border-right: none; } .project-page .project-card .project-img .port-overlay .port-desc .port-content h4 { color: var(--clr-white); } .project-page .project-card .project-img .port-overlay .port-desc .port-content p { color: var(--clr-white); } .filter-active.project-page.magnific-mix-gallery { display: grid; grid-template-columns: repeat(5, 1fr); } .sec-btn-area { margin-bottom: 6rem; } .filter-menu-style-1 button { padding: 1.7rem 3rem 1.5rem 3rem; margin-right: 1rem; background: var(--clr-white); color: var(--clr-heading); font-weight: 600; border: 1px solid var(--clr-body-2); text-transform: capitalize; -webkit-border-radius: 5px; border-radius: 5px; line-height: 1; font-family: var(--font-2); letter-spacing: 1px; -webkit-transition: background-color .5s ease; transition: background-color .5s ease; } .filter-menu-style-1 button:hover, .filter-menu-style-1 button.active { background-color: var(--clr-def); color: var(--clr-white); } /*------------------------------------------------------- 31. Container css ---------------------------------------------------------*/ @media (min-width: 1250px) { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1250px; } } .container-full { padding: 0 15px; margin: auto; max-width: 1400px; } @media (max-width: 576px) { .container-full { max-width: 100%; width: 100%; } } @media (min-width: 576px) { .container-full { max-width: 540px; width: 100%; } } @media (min-width: 768px) { .container-full { max-width: 720px; width: 100%; } } @media (min-width: 992px) { .container-full { max-width: 960px; width: 100%; } } @media (min-width: 1200px) { .container-full { max-width: 95%; width: 95%; } } .container-fill { padding: 0 15px; margin: auto; max-width: 100%; } @media (min-width: 576px) { .container-fill { max-width: 540px; width: 100%; } } @media (min-width: 768px) { .container-fill { max-width: 720px; width: 100%; } } @media (min-width: 992px) { .container-fill { max-width: 960px; width: 100%; } } @media (min-width: 1200px) { .container-fill { width: 100%; max-width: 100%; } } @media (max-width: 1199px) { .container-fill { padding: 0 15px; width: 100%; } } @media only screen and (min-width: 1367px) { .container-stage { margin-left: calc((100% - 1250px)/ 2); width: auto; max-width: inherit; padding-right: 0; } } @media only screen and (max-width: 767px) { .row { --bs-gutter-x: 1.5rem; } } .bg-cover { background-position: center center !important; background-size: cover !important; } .bg-fixed { background-attachment: fixed !important; background-position: center center !important; background-size: cover !important; } .bg-fit { background-size: 100% 100% !important; background-position: center !important; } /*------------------------------------------------------- 32. Price css ---------------------------------------------------------*/ .price-sidebar { background-color: var(--clr-def-2); padding: 3rem 4rem; border-radius: 8px; } .price-sidebar .price-list { display: flex; flex-direction: column; } .price-sidebar .price-list li { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #3B3F8A; color: var(--clr-white); display: flex; align-items: center; justify-content: space-between; } .price-sidebar .price-list li i { color: var(--clr-white); } .price-sidebar .price-list li:last-child { padding-bottom: 0px; margin-bottom: 0px; border-bottom: none; } .price-nav-style { height: 5.6rem; width: 220px; background-color: var(--clr-white); border-radius: 3rem; } .price-nav-style .nav-link { color: var(--clr-heading); font-size: 1.7rem; padding: 2rem 3rem; line-height: 1; border-radius: 3rem; } .price-nav-style .nav-link.active { background-color: var(--clr-def); } .price-box .price-right { width: 225px; } .price-nav { text-align: center; display: flex; justify-content: center; } .price-box { border: 2px solid; padding: 4rem; background-color: var(--clr-white); border-radius: 8px; display: grid; align-items: center; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-bottom: 3rem; transition: all .5s ease; } .price-box:hover { background-color: var(--clr-def); border: 2px solid transparent; } .price-box:hover .price-left h4 { color: var(--clr-white); } .price-box:hover .price-left span { color: var(--clr-white); } .price-box:hover .price-middle .heading-1 { color: var(--clr-white); } .price-box:hover .price-right { text-align: right; } .price-box:hover .price-right .btn-1 { border: 1px solid var(--clr-white); color: var(--clr-white); background-color: transparent; } .price-box:last-child { margin-bottom: 0; } .price-box .price-left h4 { line-height: 1; margin-bottom: 5px; } .price-box .price-left span { line-height: 1; display: block; font-size: 1.4rem; } .price-box .price-middle .heading-1 { border-left: 1px solid #C4C4C4; padding: 0 6rem; } .price-box .price-right { text-align: right; } .price-box .price-right .btn-1 { border: 1px solid transparent; } /*------------------------------------------------------- 33. Team css ---------------------------------------------------------*/ .team-box { position: relative; z-index: 1; } .team-box:hover::before { background-color: var(--clr-def); } .team-box:hover .team-bio h4 { color: var(--clr-white); } .team-box:hover .team-bio span { color: var(--clr-white); } .team-box:hover .team-pic .team-shape { display: none; } .team-box:hover .team-pic .team-shape-2 { display: block; } .team-box:hover .team-social { opacity: 1; visibility: visible; } .team-box::before { position: absolute; content: ''; height: 280px; width: 100%; z-index: -1; background: var(--clr-bg-3); opacity: 1; top: 0; left: 0; transition: all .5s ease; } .team-box .team-bio { padding: 3rem 37px; } .team-box .team-bio h4 { text-transform: capitalize; margin-bottom: 10px; transition: all .5s ease; } .team-box .team-bio span { display: block; line-height: 1; font-size: 1.4rem; transition: all .5s ease; } .team-box .team-pic { position: relative; z-index: 1; padding: 0 37px; } .team-box .team-pic .team-main { width: 100%; } .team-box .team-pic .team-shape { position: absolute; bottom: -2px; left: 0; width: 100%; z-index: -1; padding: 0 37px; display: block; } .team-box .team-pic .team-shape-2 { position: absolute; bottom: 0px; left: 0; width: 100%; z-index: -1; padding: 0 37px; display: none; } .team-social { position: absolute; left: 6rem; bottom: 6rem; display: flex; flex-direction: column; gap: 1rem; opacity: 0; visibility: hidden; transition: all .5s ease; } .team-social li a i { height: 4rem; width: 4rem; line-height: 4rem; text-align: center; border-radius: 50%; color: var(--clr-white); font-size: 1.8rem; background-color: var(--clr-def); } /*------------------------------------------------------- 34. Review css ---------------------------------------------------------*/ .review-pic-content { position: relative; z-index: 1; } .review-pic-content .review-customer { position: absolute; bottom: 40px; right: 40px; } .review-pic-content .review-customer span { position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: inline-block; color: var(--clr-white); text-align: center; line-height: 1.2; font-size: 15px; } .review-pic-content .review-customer span b { font-size: 2.2rem; margin-bottom: 3px; display: block; } .big-car { position: absolute; z-index: -1; bottom: 0; right: 0; } .review-single { padding: 3.5rem; background-color: var(--clr-white); box-shadow: 0 2px 35px rgba(0, 0, 0, 0.15); margin-bottom: 3rem; } .review-single:last-child { margin-bottom: 0; } .review-single .review-pic-content { display: flex; align-items: center; gap: 2rem; margin-bottom: 30px; } .review-single .review-pic-content .review-pic-pic { position: relative; z-index: 1; width: 25%; } .review-single .review-pic-content .review-pic-pic i { height: 26px; width: 26px; line-height: 26px; text-align: center; background-color: var(--clr-def); -webkit-border-radius: 50%; border-radius: 50%; color: var(--clr-white); position: absolute; bottom: 0; right: 0; font-size: 1.4rem; } .review-single .review-pic-content .review-bio h4 { text-transform: capitalize; margin-bottom: 10px; line-height: 1; } .review-single .review-pic-content .review-bio span { line-height: 1; display: block; } .review-single .review-desc .review-star { display: flex; align-items: center; gap: 3px; font-size: 1.4rem; color: var(--clr-def); margin-bottom: 30px; } .review-single .review-desc p { position: relative; z-index: 1; padding-left: 2rem; } .review-single .review-desc p::before { position: absolute; content: ''; height: 100%; width: 1px; z-index: -1; background: var(--clr-def); opacity: 1; top: 0; left: 0; } .testi-wpr .swiper { width: 100%; height: 300px; margin-left: auto; margin-right: auto; } .testi-wpr .swiper-slide { background-size: cover; background-position: center; } .testi-wpr .swiper-slide img { display: block; object-fit: cover; border-radius: 50%; border: 2px solid transparent; } .testi-wpr .testi-sldr-2 { height: 80%; width: 100%; } .testi-wpr .testi-sldr { height: 20%; box-sizing: border-box; padding: 0 0 8rem 0; } .testi-wpr .testi-sldr .swiper-slide { width: 25%; height: 100%; opacity: 1; } .testi-wpr .testi-sldr .swiper-slide-thumb-active { opacity: 1; } .testi-up { position: relative; z-index: 1; } .testi-up::before { position: absolute; bottom: 32px; left: 0; width: 100%; content: ''; background: #767CB4; height: 2px; } .testi-single { margin-top: 3rem; padding: 0 10rem; text-align: center; } .testi-single p { font-size: 2.6rem; line-height: 1.7; margin-bottom: 3rem; } .testi-single .testi-star-bio .testi-bio { margin-top: 1.2em; } .testi-single .testi-star-bio .testi-bio h4 { margin-bottom: 8px; line-height: 1.1; text-transform: capitalize; } .testi-single .testi-star-bio .testi-bio span { display: inline-block; font-size: 1.5rem; } .train-shape { position: absolute; z-index: -1; bottom: 0; left: 0; } .testi-star { display: flex; align-items: center; font-size: 1.4rem; color: var(--clr-def); justify-content: center; line-height: 1; } .swiper-slide.swiper-slide-thumb-active img { border: 2px solid var(--clr-def); } .swiper-slide.swiper-slide-thumb-active::before { position: absolute; content: ''; bottom: -80px; left: 35%; background-image: url(img/icon/testi-arrow.png); height: 3.4rem; width: 6rem; transform: translate(-50%, 0); } .swiper-slide.swiper-slide-thumb-active::after { position: absolute; content: ''; bottom: -48px; left: 35%; background-color: var(--clr-bg-3); height: 2px; width: 37px; transform: translate(-50%, 0); } .review-sldr.swiper .swiper-pagination { position: inherit; margin-bottom: -18px; margin-top: 40px; } .review-sldr.swiper .swiper-pagination .swiper-pagination-bullet { background: transparent; height: 20px; width: 20px; border: 1px solid var(--clr-def); position: relative; z-index: 1; opacity: 1; } .review-sldr.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { border-color: var(--clr-def); } .review-sldr.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after { position: absolute; left: 50%; top: 50%; content: ""; height: 5px; width: 5px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--clr-def); transition: all 0.35s ease-in-out; } /*------------------------------------------------------- 35. Blog css ---------------------------------------------------------*/ .blog-box .blog-pic img { width: 100%; } .blog-box .blog-desc h4 { line-height: 1.2; margin-bottom: 1.3rem; } .blog-box .blog-desc .blog-text { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--clr-body-2); } .blog-box .blog-desc .blog-meta { display: flex; align-items: center; justify-content: space-between; font-size: 1.4rem; } .blog-box .blog-desc .blog-meta i { color: var(--clr-def); } .blog-box .blog-desc .blog-meta .blog-admin { display: flex; align-items: center; gap: 10px; } .blog-box .blog-desc .blog-meta .blog-like-com { display: flex; align-items: center; gap: 20px; } .blog-box .blog-desc .blog-meta .blog-like-com .blog-like { display: flex; align-items: center; gap: 10px; } .blog-box .blog-desc .blog-meta .blog-like-com .blog-com { display: flex; align-items: center; gap: 10px; } .blog-df { display: grid; grid-template-columns: 286px 1fr; grid-gap: 30px; margin-bottom: 30px; } .blog-df:last-child { margin-bottom: 0; } .blog-df.blog-page-df { grid-template-columns: 550px 1fr; align-items: center; } .blog-page-shadow { box-shadow: 3px 4px 20px rgba(0, 0, 0, 0.15); background: var(--clr-white); margin-bottom: 3rem; border-radius: 0 0 10px 10px; } .blog-page-shadow .blog-desc { padding: 5rem; } /*------------------------------------------------------- 36. Reg css ---------------------------------------------------------*/ .reg-area { position: relative; z-index: 1; } .reg-area::before { position: absolute; content: ''; height: 50%; width: 100%; z-index: -1; background: linear-gradient(90deg, var(--clr-def) 0, var(--clr-def-3) 100%); opacity: 1; clip-path: polygon(100% 100%, 100% 0, 0 100%); bottom: 0; left: 0; } .reg-wpr { display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; } .login-shape { position: absolute; z-index: -1; top: 50%; left: 60%; transform: translate(-50%, -50%); width: 100%; } .login-form { text-align: center; width: 47rem; padding: 6rem 5rem; box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.1); border-radius: 2rem; background-color: var(--clr-white); } .login-form .header-icon { display: block; margin-bottom: 3rem; } .login-form .input-style-2 { height: 5.5rem; border-radius: 4px; border: 1px solid #eee; } .login-form .input-style-2::placeholder { font-size: 1.6rem; } .login-form .login-btn { display: block; width: 100%; text-align: center; } .login-form .reg-acc { display: block; font-size: 16px; font-weight: 400; letter-spacing: 0.005em; margin-top: 3rem; } .login-form .reg-acc a { color: var(--clr-def); } .form-check { display: block; min-height: 1.5rem; padding-left: 0; margin-bottom: 0; line-height: 1; } .form-check-input[type=checkbox] { border-radius: 0; margin-top: 0; vertical-align: top; float: inherit; margin-left: -3em; } .rs-ps { margin-top: -7px; display: block; font-size: 1.4rem; } .form-check-label { color: var(--clr-body); margin-left: 1rem; } .register-title { font-size: 23px; font-weight: 700; letter-spacing: 0.005em; } /*------------------------------------------------------- 37. Step css ---------------------------------------------------------*/ .step-box { text-align: center; } .step-box .step-icon { position: relative; z-index: 1; margin-bottom: 2rem; } .step-box .step-icon .step-note-icon { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 60px; } .step-box .step-icon .step-num { position: absolute; top: 35px; right: 5px; height: 40px; width: 40px; line-height: 40px; text-align: center; font-size: 1.6rem; -webkit-border-radius: 50%; border-radius: 50%; background-color: var(--clr-def); color: var(--clr-white); } .step-box .step-desc { transform: translateX(-50px); } .step-elm-elm { position: relative; z-index: 1; } .step-elm { display: flex; align-items: center; gap: 3rem; } /*------------------------------------------------------- 38. Sub css ---------------------------------------------------------*/ .zozo-main-pic { width: 440px; } .zozo-sec-pic { width: 50%; display: block; } .zozo-sub { margin-top: 5rem; } .zozo-sub form .input-style-3 { margin-bottom: 3rem; } .input-style-3 { border: 1px solid var(--clr-ccc); padding: 1.5rem; width: 100%; border-radius: 3rem; } .input-style-3:focus { outline: none; box-shadow: none; } .zozo-dew-pic { position: absolute; z-index: -1; left: 0; top: -51px; opacity: 1; } .sub-area .site-title { margin-bottom: 11.4rem; } /*------------------------------------------------------- 39. Project Single css ---------------------------------------------------------*/ .project-client-single h5 { line-height: 1; margin-bottom: 1rem; } .project-single-text p { padding-right: 6rem; } .pw { width: 100%; } .project-client-info { background: var(--clr-def); padding: 50px; } .project-client-single h5 { color: var(--clr-white); } .project-client-single p { color: var(--clr-white); } /*------------------------------------------------------- 40. Service Single css ---------------------------------------------------------*/ .service-single-list { display: flex; flex-direction: column; gap: 1rem; } .service-single-list li { display: flex; align-items: center; gap: 1.5rem; font-weight: 500; } .service-single-list li i { font-size: 1.4rem; color: var(--clr-def); } /*------------------------------------------------------- 41. Feature css ---------------------------------------------------------*/ .feature-p-1 { position: absolute; top: 0; right: 0; z-index: -1; } .feature-p-2 { position: absolute; top: 0; right: 40px; z-index: -1; } .feature-box { box-shadow: 0 2px 35px rgba(0, 0, 0, 0.15); } .feature-box .feature-icon-no { padding: 3rem 4rem; background-color: var(--clr-def-2); display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; } .feature-box .feature-icon-no .feature-no span { color: white; -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */ -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: white; font-size: 60px; font-weight: 800; line-height: 1; } .feature-box .feature-desc { padding: 4rem 5rem; } .feature-box .feature-desc h4 { margin-bottom: 2rem; } .feature-box .feature-desc p { margin-bottom: 3rem; } .feature-btn i { height: 50px; width: 50px; line-height: 50px; text-align: center; -webkit-border-radius: 50%; border-radius: 50%; background-color: var(--clr-def); display: inline-block; color: var(--clr-white); } /*------------------------------------------------------- 42. Benefit css ---------------------------------------------------------*/ .benefit-single { padding: 5rem 3rem; border-radius: 10px; } .benefit-single i { width: 7rem; display: block; margin-bottom: 30px; } .benefit-one { background: rgba(11, 77, 245, 0.1); } .benefit-one h4 { text-transform: capitalize; } .benefit-one p { margin-bottom: 0; } .benefit-two { box-shadow: 0 3px 40px 0 rgba(0, 0, 0, 0.1); background-color: var(--clr-white); } .benefit-two h4 { margin-bottom: 0; line-height: 1; } .heading-regular { line-height: 5.3rem; font-weight: 500; font-size: 42px; } .benefit-star { position: absolute; z-index: -1; bottom: 0; right: 0; width: 30rem; } /*------------------------------------------------------- 43. Promo css ---------------------------------------------------------*/ .promo-margin { margin-left: 333px; } .promo-area { background-size: cover; background-attachment: fixed; background-position: top left; background-repeat: no-repeat; } .pattern-1 { position: absolute; z-index: -1; top: 0; left: 0; } .promo-right-content .heading-5 { color: var(--clr-white); margin-bottom: 3rem; } .promo-right-content .promo-number { display: block; color: var(--clr-white); font-size: 72px; line-height: 1; font-weight: 700; margin-bottom: 5rem; } /*------------------------------------------------------- 44. Requ css ---------------------------------------------------------*/ .requ-delivery { background-color: #1A207F; } .mr-33-5 { margin-right: 33.5rem; } .requ-contact { padding: 8rem 8rem 8rem 8rem; background-color: #1A207F; max-width: 850px; } .requ-contact .heading-1 { color: var(--clr-white); } .req-delivery-two { max-width: 610px; } .requ-contact-pic { display: flex; align-items: flex-end; justify-content: center; height: 100%; } .contact-form-requ .input-style-2 { background-color: #000671; border: none; color: var(--clr-white); margin-bottom: 2.9rem; } .contact-form-requ .input-style-2::placeholder { color: var(--clr-white); font-size: 1.5rem; } .contact-form-requ .input-style-2:focus { border: none; outline: none; box-shadow: none; } .requ-left-pic { height: 100%; } select.form-control.input-style-2.form-select { color: var(--clr-white); position: relative; z-index: 1; background-image: url("data:image/svg+xml,
"); } .requ-contact-white { background-color: var(--clr-white); } .requ-contact-white .heading-1 { color: var(--clr-heading); } .requ-contact-white .btn-1 { width: 100%; } .requ-contact-white input[type=number] { color: var(--clr-body) !important; } .requ-contact-white .contact-form-requ .input-style-2 { background-color: transparent; border: 1px solid var(--clr-body); color: var(--clr-heading); margin-bottom: 2.9rem; } .requ-contact-white .contact-form-requ .input-style-2::placeholder { color: var(--clr-body); font-size: 1.5rem; } .requ-contact-white .contact-form-requ .input-style-2:focus { border: 1px solid var(--clr-body); outline: none; box-shadow: none; } .requ-contact-white .contact-form-requ select.form-control.input-style-2.form-select { color: var(--clr-body); background-image: url("data:image/svg+xml,
"); } .requ-contact-white .contact-form-requ .sst-title { color: var(--clr-body); } .requ-contact-white .contact-form-requ .styled-checkbox + label { color: var(--clr-body); } .requ-contact-white .contact-form-requ .styled-checkbox + label:before { border: 1px solid var(--clr-body); } .destination { display: flex; align-items: center; gap: 1.5rem; } .styled-checkbox { position: absolute; opacity: 0; } .styled-checkbox + label { position: relative; cursor: pointer; padding: 0; line-height: 18px; color: var(--clr-white); font-size: 1.5rem; font-weight: 400; } .styled-checkbox + label:before { content: ""; margin-right: 10px; display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: transparent; border: 1px solid var(--clr-white); } .styled-checkbox:hover + label:before { background: var(--clr-def); } .styled-checkbox:focus + label:before { box-shadow: none; } .styled-checkbox:checked + label:before { background: var(--clr-def); } .styled-checkbox:checked + label:after { content: ""; position: absolute; left: 5px; top: 9px; background: var(--clr-white); width: 2px; height: 2px; box-shadow: 2px 0 0 var(--clr-white), 4px 0 0 var(--clr-white), 4px -2px 0 var(--clr-white), 4px -4px 0 var(--clr-white), 4px -6px 0 var(--clr-white), 4px -8px 0 var(--clr-white); transform: rotate(45deg); } .styled-checkbox:disabled + label { color: #b8b8b8; cursor: auto; } .styled-checkbox:disabled + label:before { box-shadow: none; background: #ddd; } .requ-input-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .requ-input-label label { font-size: 1.5rem; color: var(--clr-white); display: block; } .requ-input-label input { font-size: 1.5rem; color: var(--clr-white); display: block; background-color: transparent; border: none; text-align: end; } .requ-input-label input:focus { outline: none; border: none; box-shadow: none; } .requ-sldr { margin-bottom: 3rem; /* Firefox */ } .requ-sldr input::-webkit-outer-spin-button, .requ-sldr input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .requ-sldr input[type=number] { -moz-appearance: textfield; width: auto; height: auto; background: transparent; font-size: 15px; color: var(--clr-white); } .requ-sldr input[type=number]:focus { outline: none; box-shadow: none; border: none; } .requ-sldr .ui-slider.ui-widget-content { background: var(--clr-def); border: none; } .requ-sldr .ui-slider.ui-slider-horizontal { height: 5px; } .requ-sldr .ui-slider .ui-slider-handle { border-radius: 50%; width: 12px; height: 12px; top: -4px; } .requ-sldr .ui-slider .ui-widget-header { background: var(--clr-def); } /*------------------------------------------------------- 45. CTA css ---------------------------------------------------------*/ .cta-wpr .heading-1 { color: var(--clr-white); } .cta-contact { display: flex; align-items: center; gap: 2rem; justify-content: center; } .cta-contact .cta-contact-icon i { height: 65px; width: 65px; line-height: 65px; text-align: center; background-color: var(--clr-white); display: inline-block; -webkit-border-radius: 50%; border-radius: 50%; position: relative; z-index: 1; } .cta-contact .cta-contact-desc { text-align: left; } .cta-contact .cta-contact-desc span { display: block; margin-bottom: 10px; line-height: 1; color: var(--clr-white); } .cta-contact .cta-contact-desc h4 { color: var(--clr-white); line-height: 1; } /*------------------------------------------------------- 45.Woocommerce css ---------------------------------------------------------*/ .woocommerce-message, .woocommerce-info { position: relative; border: 1px solid #d8d8d8; padding: 11px 20px; background-color: var(--clr-body); color: var(--clr-white); font-size: 14px; font-weight: 700; margin-bottom: 20px; border-radius: 5px; } .woocommerce-message a, .woocommerce-info a { color: inherit; } .woocommerce-message a:hover, .woocommerce-info a:hover { text-decoration: underline; } .woocommerce-message:before, .woocommerce-info:before { content: '\f06a'; font-family: #ddd; font-weight: 900; margin-right: 10px; } .woocommerce-notices-wrapper .woocommerce-message { background-color: var(--clr-def); } .woocommerce-notices-wrapper .woocommerce-message:before { content: '\f14a'; font-weight: 300; } .woocommerce-form-coupon, .woocommerce-form-login { display: none; } .woocommerce-form-login-toggle .woocommerce-info { background-color: var(--clr-def); } .woocommerce-checkout .form-select, .woocommerce-checkout .form-group { margin-bottom: 0.5rem; } .woocommerce-checkout .form-control { margin-bottom: 15px; } .woocommerce-checkout .shipping_address { display: none; } .woocommerce-product-rating .star-rating { display: inline-block; vertical-align: middle; } .woocommerce-cart-form { text-align: center; } .cart_table { border: 1px solid #eaf0f2; margin-bottom: 45px; } .cart_table thead { background-color: #ecf0f1; } .cart_table td:before, .cart_table th { font-family: var(--font-2); color: var(--clr-heading); font-weight: 700; text-transform: uppercase; border: none; padding: 27px 15px; } .cart_table td:before { content: attr(data-title); position: absolute; left: 15px; top: 50%; vertical-align: top; padding: 0; transform: translateY(-50%); display: none; } .cart_table td { border: none; border-bottom: 1px solid #f3f3f3; color: #8b8b8b; padding: 20px 10px; position: relative; } .cart_table .product-quantity { color: var(--clr-heading); } .cart_table .cart-productname { font-weight: 600; font-family: var(--font-2); color: inherit; } .cart_table .cart-productimage { display: inline-block; border: 1px solid #ddd; } .cart_table .remove { color: #29af8a; font-size: 18px; } .cart_table .quantity { display: inline-flex; align-items: center; } .cart_table .qut-btn { border: 2px solid var(--clr-menu); background-color: transparent; color: #b8c6d0; padding: 0; width: 30px; height: 30px; font-size: 16px; border-radius: 4px; position: relative; top: 0; left: 0; } .cart_table .qut-btn.quantity-minus { top: 0; } .cart_table .qut-btn:hover { background-color: var(--clr-def); color: var(--clr-white); border-color: transparent; } .cart_table .qty-input { vertical-align: middle; border: 2px solid var(--clr-menu); width: 70px; height: 30px; font-size: 14px; text-align: center; color: #2c3e50; font-weight: 700; margin: 0 10px; border-radius: 4px; padding-right: 0; /* Firefox */ } .cart_table .qty-input::-webkit-outer-spin-button, .cart_table .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cart_table .qty-input[type=number] { -moz-appearance: textfield; } .cart_table .actions { text-align: right; vertical-align: middle; } .cart_table .actions > .vs-btn { margin-right: 15px; } .cart_table .actions > .vs-btn:last-child { margin-right: 0; } .cart_table .tb-cart-coupon { float: left; margin: 0; width: 455px; max-width: 100%; display: flex; } .cart_table .tb-cart-coupon input { height: 5rem; width: calc(100% - 200px); margin-right: 10px; padding-left: 20px; } .cart_table .tb-cart-coupon .vs-btn { width: 200px; padding-left: 0; padding-right: 0; } .cart_totals { border: 1px solid #ecf0f1; } .cart_totals th, .cart_totals td { vertical-align: top; padding: 20px 20px; border: none; border-bottom: 1px solid #ecf0f1; font-size: 14px; color: var(--clr-heading); width: 55%; } .cart_totals th:first-child, .cart_totals td:first-child { width: 45%; background-color: #f9fbfb; font-weight: 700; font-size: 14px; color: #333333; } .cart_totals .shipping-calculator-button { display: inline-block; border-bottom: 1px solid; color: var(--clr-heading); font-weight: 700; } .cart_totals .shipping-calculator-button:hover { color: var(--clr-def); } .cart_totals .woocommerce-shipping-destination { margin-bottom: 10px; } .cart_totals .woocommerce-shipping-methods { margin-bottom: 0; } .cart_totals .shipping-calculator-form { display: none; } .cart_totals .shipping-calculator-form p:first-child { margin-top: 20px; } .cart_totals .shipping-calculator-form p:last-child { margin-bottom: 0; } .cart_totals .shipping-calculator-form .vs-btn { padding: 5px 30px; } .cart_totals .amount { font-weight: 700; } .cart_totals .order-total .amount { color: #1abc9c; } .shipping-calculator-form .form-select, .shipping-calculator-form .form-control { height: 40px; padding-left: 15px; font-size: 16px; border-radius: 0; background-position: right 13px center; } .shipping-calculator-form .vs-btn { font-size: 14px; padding: 0 20px; width: max-content; height: 40px; } .checkout-ordertable th, .checkout-ordertable td { border: none; vertical-align: top; padding: 5px 0; font-size: 14px; font-weight: 700; color: var(--clr-body); border: 1px solid #ededed; text-align: right; padding: 5px 20px; } .checkout-ordertable th { text-align: left; } .checkout-ordertable ul { margin: 0; padding: 0; } .checkout-ordertable .order-total .amount { color: #29af8a; } .checkout-ordertable input[type="hidden"] ~ label { color: #29af8a; } .woocommerce-checkout-payment ul { margin: 0; padding: 0; list-style-type: none; } .woocommerce-checkout-payment ul li { padding-top: 10px; border-bottom: 1px solid #d8d8d8; border-radius: 4px; } .woocommerce-checkout-payment .place-order { padding-top: 30px; } .woocommerce-checkout-payment .payment_box { color: #a1b1bc; background-color: var(--clr-def); border: 1px solid #d8d8d8; border-bottom: none; font-size: 14px; padding: 10px 20px; border-radius: 4px; display: none; } .woocommerce-checkout-payment .payment_box p { margin: 0; } .woocommerce-checkout-payment input[type="radio"] ~ label { margin-bottom: 15px; color: var(--clr-body); } .woocommerce-checkout-payment input[type="radio"] ~ label img { margin-bottom: -2px; margin-left: 10px; } .star-rating { overflow: hidden; position: relative; width: 100px; height: 1.2em; line-height: 1.2em; display: block; font-family: #ddd; font-weight: 700; font-size: 14px; } .star-rating:before { content: "\f005\f005\f005\f005\f005"; color: var(--clr-def-3); float: left; top: 0; left: 0; font-weight: 400; position: absolute; letter-spacing: 3px; } .star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; } .star-rating span:before { content: "\f005\f005\f005\f005\f005"; top: 0; position: absolute; left: 0; color: var(--clr-def-3); letter-spacing: 3px; } .rating-select label { margin: 0; margin-right: 10px; } .rating-select p.stars { margin-bottom: 0; line-height: 1; } .rating-select p.stars a { position: relative; height: 14px; width: 18px; text-indent: -999em; display: inline-block; text-decoration: none; } .rating-select p.stars a::before { display: block; position: absolute; top: 0; left: 0; width: 18px; height: 14px; line-height: 1; font-family: #ddd; content: "\f005"; font-weight: 400; text-indent: 0; color: var(--clr-def-3); } .rating-select p.stars a:hover ~ a::before { content: "\f005"; font-weight: 400; } .rating-select p.stars:hover a::before { content: "\f005"; font-weight: 700; } .rating-select p.stars.selected a.active::before { content: "\f005"; font-weight: 700; } .rating-select p.stars.selected a.active ~ a::before { content: "\f005"; font-weight: 400; } .rating-select p.stars.selected a:not(.active)::before { content: "\f005"; font-weight: 700; } @media only screen and (min-width: 768px) and (max-width: 991px) { .cart_table th { padding: 23px 8px; font-size: 14px; } .cart_table .cart-productname { font-size: 14px; } .cart_table .tb-cart-coupon { width: 100%; margin-bottom: 20px; } .cart_table .actions { text-align: center; } .cart_table .tb-udp button { margin-bottom: 2rem; } } @media only screen and (max-width: 767px) { .tb-udp button { margin-bottom: 1rem; } .cart_table { text-align: left; min-width: auto; border-collapse: separate; border-spacing: 0 20px; border: none; margin-right: 0; padding-right: 0; width: 100%; } .cart_table thead { display: none; } .cart_table td { padding: 15px; display: block; width: 100%; padding-left: 25%; text-align: right; border: 1px solid #f3f3f3; border-bottom: none; font-size: 1.3rem; } .cart_table td::before { display: block; } .cart_table td:last-child { border-bottom: 1px solid #f3f3f3; } .cart_table td.actions { padding-left: 15px; text-align: center; } .cart_table td.actions > .vs-btn { margin-top: 10px; margin-right: 0; display: block; width: max-content; margin-left: auto; margin-right: auto; } .cart_table td.actions > .vs-btn:last-child { margin-right: auto; } .cart_table .tb-cart-coupon { width: 100%; text-align: center; float: none; justify-content: center; display: block; padding-bottom: 10px; } .cart_table .tb-cart-coupon input { width: 100%; margin-bottom: 10px; } tfoot.checkout-ordertable th { display: none; } .woocommerce-checkout-payment ul input[type="radio"] ~ label img { max-width: 150px; } .woocommerce-message, .woocommerce-info { font-size: 12px; padding: 5px 10px; } .cart_totals th, .cart_totals td { padding: 15px 10px; } .cart_totals th:first-child, .cart_totals td:first-child { width: 17%; line-height: 1.4; } } /*------------------------------------------------------- 46.Shop css ---------------------------------------------------------*/ /*Shop Page*/ .tb-pagination { text-align: center; } .tb-pagination ul { display: flex; align-items: center; gap: 8px; justify-content: center; } .tb-pagination ul li a { display: inline-block; height: 5rem; width: 5rem; line-height: 4.5rem; font-size: 1.6rem; font-weight: 700; border: 2px solid #eef1f5; border-radius: 50%; } .tb-pagination ul li a.active, .tb-pagination ul li a:hover { color: var(--clr-white); background-color: var(--clr-def); border-color: transparent; } .select-opt { display: flex; gap: 5rem; justify-content: flex-end; } .select-opt .select-option { display: grid; align-items: center; grid-template-columns: 7rem 1fr; } .select-opt .select-option label { font-size: 14px; margin-bottom: 0; margin-right: 15px; font-weight: 500; line-height: 1; color: var(--clr-heading); } .select-opt .select-option .form-select { height: 35px; border-width: 2px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: auto; color: var(--clr-heading); padding-right: 30px; padding-left: 20px; font-size: 14px; margin: 0; } .shop-filter { display: flex; align-items: center; gap: 1.5rem; } .shop-filter a { height: 5rem; width: 5rem; line-height: 5rem; text-align: center; background-color: var(--clr-def); color: var(--clr-white); display: inline-block; } .products-wpr.product-list.grid-2 { grid-row-gap: 4.5rem; } .product-list .products-box { display: flex; align-items: center; background-color: var(--clr-white); } .product-list .products-box .products-desc { border: none; } /*Shop details*/ .sh-de-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); grid-gap: 6rem; } .shop-datails-pic img, .sh-pic img { border: 1px solid #ddd; } .sh-de-left .nav-tabs { border-bottom: none; } .sh-de-left .nav-tabs .nav-link { border: none; padding: 0; } .sh-de-left .nav-tabs .nav-link:last-child { margin-right: 0; } .sh-de-left nav { margin-top: 2rem; } .sh-pic img { background-color: #FAFAFA; width: 100%; } .shop-datails-pic img { background-color: #FAFAFA; width: 100%; } /*Shop Quantity Number*/ .quantity { display: inline-block; } .quantity .input-text.qty { width: 35px; height: 39px; padding: 0 5px; text-align: center; background-color: transparent; border: 1px solid #efefef; } .quantity.buttons_added { text-align: left; position: relative; white-space: nowrap; vertical-align: top; } .quantity.buttons_added input { display: inline-block; margin: 0; vertical-align: top; box-shadow: none; } .quantity.buttons_added .minus, .quantity.buttons_added .plus { padding: 7px 10px 8px; height: 41px; background-color: #ffffff; border: 1px solid #efefef; cursor: pointer; } .quantity.buttons_added .minus { border-right: 0; } .quantity.buttons_added .plus { border-left: 0; } .quantity.buttons_added .minus:hover, .quantity.buttons_added .plus:hover { background: #eeeeee; } .quantity input::-webkit-outer-spin-button, .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; margin: 0; } .quantity.buttons_added .minus:focus, .quantity.buttons_added .plus:focus { outline: none; } .sh-de-header h4 { text-transform: capitalize; font-weight: 700; } .sh-de-header p { margin-bottom: 2rem; } .sh-de-rating { margin-bottom: 1.5rem; } .sh-de-rating i { color: #F9C936; margin-right: 8px; } .sh-de-price { margin-bottom: 2rem; } .sh-de-price span { font-size: 2.4rem; font-weight: 700; color: var(--clr-heading); font-family: var(--font-2); display: block; } .sh-de-quantity { display: flex; align-items: center; margin-bottom: 2rem; } .sh-de-quantity .quantity.buttons_added { margin-right: 0; } .sh-de-color { margin-bottom: 1.5rem; } .sh-de-color ul li { display: inline-block; margin-right: 1rem; } .sh-de-color ul li:last-child { display: inline-block; margin-right: 0; } .sh-de-color ul li .d-colors span { display: inline-block; height: 1rem; width: 1rem; border-radius: 50%; } .sh-de-color ul li .d-colors span:first-child { background-color: #FA3150; } .sh-de-color ul li .d-colors span:nth-child(2) { background-color: #F9C936; } .sh-de-color ul li .d-colors span:nth-child(3) { background-color: #92B8B9; } .sh-de-btn { margin-bottom: 2rem; } .sh-de-btn a { display: inline-block; padding: 1rem 3rem; border: 1px solid #ECEBEB; margin-right: 1rem; transition: .5s ease; text-transform: uppercase; line-height: 1; color: var(--heading-color); } .sh-de-btn a:hover { background: var(--clr-black); border: 1px solid transparent; color: var(--clr-white); } .sh-de-btn .sh-de-btn-1 i { margin-left: 7px; } .sh-de-btn .sh-de-btn-2 i { margin-right: 7px; } .product-rev-wrapper .nav-item { width: 25%; overflow: hidden; display: inline-block; } .product-rev-wrapper .nav-pills .nav-link { border-radius: 0; text-align: center; border: 1px solid #eaeaea; width: 100%; } .product-rev-wrapper div#pills-tabContent { margin-top: 3rem; } .nav-pills .nav-link.active { color: var(--clr-heading); background-color: #f8f8f8; } .nav-pills .show > .nav-link { color: var(--clr-heading); background-color: #f8f8f8; } /*Cart Page Css*/ .form-cop .input-style-2 { height: 7rem; margin-right: 1rem; } .ui-w-40 { width: 40px !important; height: auto; } .ui-product-color { display: inline-block; overflow: hidden; margin: .144em; width: .875rem; height: .875rem; border-radius: 10rem; -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset; vertical-align: middle; } .cart-qty .card { box-shadow: none; border: none; background-color: transparent; } .cart-qty .card-body { padding: 0; } .cart-qty .card-body .media { display: flex; align-items: center; gap: 1rem; } .cart-qty .table thead th { border-bottom: none; font-weight: 400; font-size: 1.6rem; color: var(--clr-body); } .cart-qty .close { color: #DDDDDD; font-size: 4.6rem; font-weight: 100; opacity: 1; } .cart-qty .form-control.bk { padding: 17px 1rem; border: none; border-radius: 1.25rem; background-color: #fff; font-size: 1.6rem; outline: none; } .cart-tl ul li { margin-bottom: 1rem; border-bottom: 1px solid #ddd; padding-bottom: 1.5rem; } .cart-tl .cart-tl-title { color: var(--clr-heading); border-bottom: 1px solid #dfdfdf; padding-bottom: 1.5rem; } .cart-tt { display: flex; justify-content: space-between; align-items: center; } .cart-n p { margin-bottom: 1.2rem; line-height: 1; } .cart-n p:last-child { margin-bottom: 0; } .cr-tl-btn { margin-top: 3rem; display: flex; justify-content: center; } .cr-tl-btn a { padding: 1rem 3rem; text-align: center; border: 1px solid #dfdfdf; display: inline-block; margin-right: 3rem; transition: .5s ease; } .cr-tl-btn a:hover { background-color: var(--clr-def); color: var(--clr-heading); } .cr-tl-btn a:last-child { margin-right: 0; } .course-over-fet { background-color: var(--clr-white); box-shadow: 0 3px 1.5rem rgba(139, 139, 139, 0.16); padding: 6rem; } .course-over-bio { display: flex; align-items: center; margin-bottom: 2rem; } .course-over-name { margin-left: 2.5rem; } .course-over-name h5 { line-height: 1; margin-bottom: 9px; } .course-over-name h6 { line-height: 1; margin-bottom: 3px; } .course-over-rating i { color: var(--clr-def); } .course-ovr-wrp .single-content-title { margin-bottom: 2.5rem; } .course-ovr-wrp .single-comments-section { margin-top: 3rem; } .course-ovr-wrp .row.csf.align-items-center { margin-top: -3.5rem; } .single-comments-section-form h2 { margin-bottom: 3rem; } /*Comment Section*/ .single-comments-section .single-commentor .single-commentor-user { display: grid; grid-template-columns: 7rem 1fr; align-items: center; grid-gap: 2rem; } .single-comments-section .single-commentor .single-commentor-user .single-commentor-user-bio-head { display: flex; justify-content: space-between; align-items: center; } .single-comments-section .single-commentor .single-commentor-user .single-commentor-user-bio-head h6 { text-transform: capitalize; margin-bottom: 7px; } .single-comments-section .single-commentor .single-commentor-user .single-commentor-user-bio-head h6 span { text-transform: uppercase; color: var(--clr-body); position: relative; z-index: 1; padding-left: 2rem; } .single-comments-section .single-commentor .single-commentor-user .single-commentor-user-bio-head h6 span::before { position: absolute; content: ''; top: 50%; left: 1rem; height: 1.6rem; width: 1px; background: #5156ea; transform: translate(0, -50%); } .single-comments-section .single-commentor .single-commentor-user .single-commentor-user-bio-head a i { font-size: 1.4rem; margin-right: 7px; } .single-comments-section .single-commentor .single-commentor-user .single-commentor-user-bio-head a:hover i { color: #5156ea; } .single-comments-section .single-commentor .single-commentor-user p { margin-bottom: 0; } .single-comments-section .single-commentor ul li { margin-bottom: 3rem; } .single-comments-section .single-commentor .single-commentor-user.rlp .single-commentor-user-bio-head h6 { color: var(--clr-def); } .single-commentor-user.rlp { padding-left: 7rem; } /*single-comments-section-form*/ .single-comments-section-form form .form-control { outline: none; height: 5rem; border: 1px solid #e5e5e5; background: #f8f8f8; padding: 1rem 3rem; line-height: 1; margin-bottom: 3.5rem; } .single-comments-section-form form .form-control::placeholder { font-size: 1.6rem; font-weight: 300; color: var(--clr-body); line-height: 1; text-transform: capitalize; } .single-comments-section-form form textarea.form-control { height: 15rem; } .single-comments-section-form form button { padding: 1rem 3rem; font-family: var(--font-2); font-size: 2.2rem; border: none; font-weight: 400; background: var(--clr-def); color: var(--clr-white); } /*Slider wrp*/ .sldr.owl-theme .owl-nav [class*=owl-] { color: var(--clr-def); font-size: 3rem; margin: 0; padding: 0; background: none; display: inline-block; cursor: pointer; border-radius: 0; } .sldr.owl-theme .owl-nav [class*=owl-]:hover { background: none; color: var(--clr-def); text-decoration: none; } .sldr.owl-theme .owl-nav .owl-prev { left: 0rem; } .sldr.owl-theme .owl-nav .owl-next { right: 0rem; } .sldr.owl-theme .owl-nav .owl-prev, .sldr.owl-theme .owl-nav .owl-next { position: absolute; top: 50%; transform: translate(0, -50%); } /*------------------------------------------------------- 12. Products css ---------------------------------------------------------*/ .product-tree img { position: absolute; z-index: -1; } .product-tree img:first-child { bottom: 0; right: 0; } .product-tree img:nth-child(2) { top: 0; left: 2rem; } .products-wpr.grid-4 { row-gap: 4.5rem; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } @-webkit-keyframes circle-hover { 0% { opacity: 1; } 40% { opacity: 1; } to { width: 200%; height: 200%; opacity: 0; } } @keyframes circle-hover { 0% { opacity: 1; } 40% { opacity: 1; } to { width: 200%; height: 200%; opacity: 0; } } .products-box { text-transform: capitalize; position: relative; z-index: 1; background-color: var(--clr-white); } .products-box .products-pic { position: relative; z-index: 1; overflow: hidden; } .products-box .products-pic img { background: #f8f8f8; } .products-box .products-pic::before { position: absolute; top: 50%; left: 50%; display: block; content: ""; width: 0; height: 0; background: rgba(255, 255, 255, 0.2); border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; z-index: 10; } .products-box .products-pic .carts { position: absolute; top: 1.5rem; right: 1.5rem; flex-direction: column; gap: 1.5rem; transform: translateY(-140%); transition: all .5s ease-in-out; } .products-box .products-pic .carts li a i { height: 3rem; width: 3rem; line-height: 3.2rem; text-align: center; background-color: var(--clr-def); color: var(--clr-white); display: block; font-size: 1.4rem; border-radius: 50%; transition: all .5s ease-in-out; padding-left: 2px; } .products-box .products-pic .carts li a i:hover { background-color: var(--clr-def-2); color: var(--clr-white); } .products-box .products-desc { border: 1px solid #eee; border-top: none; padding: 3rem 2rem 4.5rem 2rem; } .products-box .products-desc h5 { text-transform: capitalize; margin-bottom: 2rem; } .products-box .products-desc p { margin-bottom: 2rem; } .products-box .products-desc .products-price { line-height: 1; margin-bottom: 2rem; } .products-box .products-desc .products-price span { font-weight: 600; color: var(--clr-def); display: inline-block; } .products-box .products-desc .add-to-cart { line-height: 1; } .products-box .products-desc .add-to-cart .cart-btn { padding: 7px 1.5rem; line-height: 1; background-color: var(--clr-def); color: var(--clr-white); border-radius: 2rem; display: inline-block; position: relative; z-index: 1; overflow: hidden; font-size: 1.6rem; } .products-box .products-desc .add-to-cart .cart-btn::before { position: absolute; height: 0%; width: 100%; top: 0; left: 0; background-color: var(--clr-def-2); content: ''; z-index: -1; transition: all .5s ease-in-out; border-radius: 2rem 2rem 0 0; } .products-box .products-desc .add-to-cart .cart-btn::after { position: absolute; height: 0%; width: 100%; bottom: 0; left: 0; background-color: var(--clr-def-2); content: ''; z-index: -1; transition: all .5s ease-in-out; border-radius: 0 0 2rem 2rem; } .products-box:hover .carts { transform: translateY(0%); } .products-box:hover .add-to-cart .cart-btn::before { height: 50%; } .products-box:hover .add-to-cart .cart-btn::after { height: 50%; } .products-box:hover .products-pic::before { -webkit-animation: circle-hover .75s; animation: circle-hover .75s; } .load-more { line-height: 14px; } /*------------------------------------------------------- 20. Checkout css ---------------------------------------------------------*/ .checkout-wrapper { display: flex; justify-content: center; animation: slideUp 2000ms ease; } @keyframes slideUp { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .checkout h2 { align-self: center; } .checkout { background-color: var(--clr-def); -webkit-box-shadow: 9px 13px 25px 0px rgba(0, 0, 0, 0.18); -moz-box-shadow: 9px 13px 25px 0px rgba(0, 0, 0, 0.18); box-shadow: 9px 13px 25px 0px rgba(0, 0, 0, 0.18); border-radius: 1rem; padding: 6rem 4rem; } .checkout input { width: 100%; min-height: 25px; border: 0; font-size: 1.5rem; letter-spacing: .15rem; color: var(--clr-heading); border-radius: 10px; margin-bottom: 2rem; } .checkout label { text-transform: uppercase; font-size: 15px; letter-spacing: 2px; color: var(--clr-white); margin-bottom: 1rem; } .checkout h2 { font-size: 24px; line-height: 1; color: var(--clr-white); letter-spacing: 1px; } .name { justify-content: space-between; display: flex; width: 100%; } .name div { width: 45%; } .address-info { display: flex; justify-content: space-between; } .address-info div { width: 30%; } .cc-info { display: flex; justify-content: space-between; } .cc-info div { width: 45%; } .btns { display: flex; align-items: center; justify-content: center; gap: 3rem; margin-top: 2rem; } .btns button { margin: 0; color: var(--clr-def); background-color: var(--clr-white); text-transform: uppercase; border: 0; border-radius: 1rem; letter-spacing: -1px; font-weight: 600; padding: 1.2rem 3rem; line-height: 1; } .btns button:hover { animation-name: btn-hov; animation-duration: 550ms; animation-fill-mode: forwards; } @keyframes btn-hov { 100% { background-color: #cfc9e1; color: #4a3b76; transform: scale(1.05); } } input:focus, button:focus { outline: none; box-shadow: none; } .p-info { font-size: 24px; line-height: 1; color: var(--clr-white); letter-spacing: 1px; margin-top: 3rem; margin-bottom: 2rem; } @media (max-width: 736px) { .checkout-wrapper { width: 100%; } .btns { flex-direction: column; } .btns button { width: 100%; } .checkout h2 { text-align: center; line-height: 1.4; } .name, .address-info, .cc-info { flex-direction: column; width: 100%; justify-content: space-between; } .name div, .address-info div, .cc-info div { align-items: center; flex-direction: column; width: 100%; display: flex; } .street, .cc-num { text-align: center; } .checkout input { margin: 5px 0; min-height: 30px; } }