@import url("https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap"); a, a:hover { text-decoration: none; } ul { padding: 0; margin: 0; } ul li { list-style: none; } h2, p { margin-bottom: 0; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0; } input, textarea { background: none; border: none; outline: none; } img { max-width: 100%; max-height: 100%; } .space6 { height: 6px; } .space8 { height: 8px; } .space10 { height: 10px; } .space12 { height: 12px; } .space14 { height: 14px; } .space16 { height: 16px; } .space18 { height: 18px; } .space20 { height: 20px; } .space22 { height: 22px; } .space24 { height: 24px; } .space26 { height: 26px; } .space28 { height: 28px; } .space30 { height: 30px; } .space32 { height: 32px; } .space34 { height: 34px; } .space36 { height: 36px; } .space38 { height: 38px; } .space40 { height: 40px; } .space42 { height: 42px; } .space44 { height: 44px; } .space46 { height: 46px; } .space48 { height: 48px; } .space50 { height: 50px; } .space52 { height: 52px; } .space54 { height: 54px; } .space56 { height: 56px; } .space58 { height: 58px; } .space60 { height: 60px; } .space62 { height: 62px; } .space64 { height: 64px; } .space66 { height: 66px; } .space68 { height: 68px; } .space70 { height: 70px; } .space72 { height: 72px; } .space74 { height: 74px; } .space76 { height: 76px; } .space78 { height: 78px; } .space80 { height: 80px; } .space82 { height: 82px; } .space84 { height: 84px; } .space86 { height: 86px; } .space { height: 88px; } .space90 { height: 90px; } .space92 { height: 92px; } .space94 { height: 94px; } .space96 { height: 96px; } .space98 { height: 98px; } .space100 { height: 100px; } @keyframes animation-5 { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } .aniamtion-key-5 { position: relative; animation-name: animation-5; animation-duration: 1.5s; animation-iteration-count: infinite; animation-direction: alternate; transition: all 0.4s ease-in-out; } @keyframes animation-7 { 0% { transform: rotate(0); } 100% { transform: rotate(-1000deg); } } .keyframe5 { position: relative; animation-name: animation-7; animation-duration: 90s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: cubic-bezier(0.59, 0.59, 1, 1); } @keyframes animation-1 { 0% { transform: translateY(0); } 100% { transform: translateY(30px); } } .aniamtion-key-1 { position: relative; animation-name: animation-1; animation-duration: 3s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes animation-2 { 0% { transform: translateX(0); } 100% { transform: translateX(50px); } } .aniamtion-key-2 { position: relative; animation-name: animation-2; animation-duration: 2.5s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes animation-3 { 0% { transform: translateY(0); } 100% { transform: translateY(60px); } } .aniamtion-key-3 { position: relative; animation-name: animation-3; animation-duration: 1.3s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes animation-4 { 0% { transform: translateY(0); } 100% { transform: translateY(40px); } } .aniamtion-key-4 { position: relative; animation-name: animation-4; animation-duration: 1.6s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes animation-6 { 0% { transform: translateY(0); } 100% { transform: translateY(50px); } } .aniamtion-key-6 { position: relative; animation-name: animation-6; animation-duration: 1.9s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes animation-8 { 0% { padding-left: 0px; } 100% { padding-left: 50px; } } .aniamtion-key-7 { position: relative; animation-name: animation-8; animation-duration: 1.3s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes fade-in-down { 0% { transform: translate3d(0, -50px, 0); } 100% { opacity: 1; transform: none; } } @keyframes pulse-border { 0% { transform: translateX(0) translateY(0) translateZ(0) scale(1); opacity: 1; } 100% { transform: translateX(0) translateY(0) translateZ(0) scale(1.5); opacity: 1; } } .pulse-border { position: relative; animation-name: pulse-border; animation-duration: 1500ms; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes video-btn { 0% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } .video-btn { position: relative; animation-name: video-btn; animation-duration: 1500ms; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translatex(-100%); } } @keyframes marquee-2 { 0% { transform: translateX(-100%); } 100% { transform: translatex(0); } } :root { --ztc-text-text-1: #fff; --ztc-text-text-2: #1888CD; --ztc-text-text-3: #042327; --ztc-text-text-4: #50595A; --ztc-text-text-5: rgba(4, 35, 39, 0.1); --ztc-text-text-6: #5A5A5A; --ztc-text-text-7: #01031B; --ztc-text-text-8: #F6F8F9; --ztc-text-text-9: #FA8100; --ztc-text-text-10: #1C0F01; --ztc-text-text-11: #1D070F; --ztc-text-text-12: #5F5F5F; --ztc-text-text-13: #D80758; --ztc-bg-bg-1: #fff; --ztc-bg-bg-2: #1888CD; --ztc-bg-bg-3: rgba(12, 15, 0, 0.08); --ztc-bg-bg-4: rgba(255, 255, 255, 0.08); --ztc-bg-bg-5: rgba(24, 136, 205, 0.1); --ztc-bg-bg-6: #EEF2F2; --ztc-bg-bg-7: #1623A4; --ztc-bg-bg-8: #EFF1FF; --ztc-bg-bg-9: #E2E0F2; --ztc-bg-bg-10: #D9DCF6; --ztc-bg-bg-11: #FA8100; --ztc-bg-bg-12: rgba(255, 255, 255, 0.1); --ztc-bg-bg-13: rgba(250, 129, 0, 0.1); --ztc-bg-bg-14: #FEF9F3; --ztc-bg-bg-15: #FFF0F6; --ztc-bg-bg-16: rgba(216, 7, 88, 0.1); --ztc-bg-bg-17: rgba(255, 255, 255, 0.1); --ztc-border-border-1: #E5E7EB; --ztc-border-border-2: #dfdcdc; --ztc-font-size-font-s10: 10px; --ztc-font-size-font-s12: 12px; --ztc-font-size-font-s14: 14px; --ztc-font-size-font-s16: 16px; --ztc-font-size-font-s18: 18px; --ztc-font-size-font-s20: 20px; --ztc-font-size-font-s22: 22px; --ztc-font-size-font-s24: 24px; --ztc-font-size-font-s26: 26px; --ztc-font-size-font-s28: 28px; --ztc-font-size-font-s30: 30px; --ztc-font-size-font-s32: 32px; --ztc-font-size-font-s34: 34px; --ztc-font-size-font-s36: 36px; --ztc-font-size-font-s38: 38px; --ztc-font-size-font-s40: 40px; --ztc-font-size-font-s42: 42px; --ztc-font-size-font-s44: 44px; --ztc-font-size-font-s46: 46px; --ztc-font-size-font-s48: 48px; --ztc-font-size-font-s50: 50px; --ztc-font-size-font-s52: 52px; --ztc-font-size-font-s54: 54px; --ztc-font-size-font-s56: 56px; --ztc-font-size-font-s58: 58px; --ztc-font-size-font-s60: 60px; --ztc-font-size-font-s62: 62px; --ztc-font-size-font-s64: 64px; --ztc-font-size-font-s66: 66px; --ztc-font-size-font-s68: 68px; --ztc-font-size-font-s70: 70px; --ztc-font-size-font-s10: 10px; --ztc-font-size-font-s12: 12px; --ztc-font-size-font-s14: 14px; --ztc-font-size-font-s16: 16px; --ztc-font-size-font-s18: 18px; --ztc-font-size-font-s20: 20px; --ztc-font-size-font-s22: 22px; --ztc-font-size-font-s24: 24px; --ztc-font-size-font-s26: 26px; --ztc-font-size-font-s28: 28px; --ztc-font-size-font-s30: 30px; --ztc-font-size-font-s32: 32px; --ztc-font-size-font-s34: 34px; --ztc-font-size-font-s36: 36px; --ztc-font-size-font-s38: 38px; --ztc-font-size-font-s40: 40px; --ztc-font-size-font-s42: 42px; --ztc-font-size-font-s44: 44px; --ztc-font-size-font-s46: 46px; --ztc-font-size-font-s48: 48px; --ztc-font-size-font-s50: 50px; --ztc-font-size-font-s52: 52px; --ztc-font-size-font-s54: 54px; --ztc-font-size-font-s56: 56px; --ztc-font-size-font-s58: 58px; --ztc-font-size-font-s60: 60px; --ztc-font-size-font-s62: 62px; --ztc-font-size-font-s64: 64px; --ztc-font-size-font-s66: 66px; --ztc-font-size-font-s68: 68px; --ztc-font-size-font-s70: 70px; --ztc-specing-height6: 6px; --ztc-specing-height8: 8px; --ztc-specing-height10: 10px; --ztc-specing-height12: 12px; --ztc-specing-height14: 114px; --ztc-specing-height16: 16px; --ztc-specing-height18: 18px; --ztc-specing-height20: 20px; --ztc-specing-height22: 22px; --ztc-specing-height24: 24px; --ztc-specing-height26: 26px; --ztc-specing-height28: 28px; --ztc-specing-height30: 30px; --ztc-specing-height32: 32px; --ztc-specing-height34: 34px; --ztc-specing-height36: 36px; --ztc-specing-height38: 38px; --ztc-specing-height40: 40px; --ztc-specing-height42: 42px; --ztc-specing-height44: 44px; --ztc-specing-height46: 46px; --ztc-specing-height48: 48px; --ztc-specing-height50: 50px; --ztc-specing-height52: 52px; --ztc-specing-height54: 54px; --ztc-specing-height56: 56px; --ztc-specing-height58: 58px; --ztc-specing-height60: 60px; --ztc-specing-height70: 70px; --ztc-specing-height80: 80px; --ztc-specing-height90: 90px; --ztc-specing-height100: 100px; --ztc-specing-height110: 110px; --ztc-specing-height120: 120px; --ztc-specing-height130: 130px; --ztc-weight-regular: 400; --ztc-weight-medium: 500; --ztc-weight-semibold: 600; --ztc-weight-bold: 700; --ztc-weight-black: 800; --ztc-family-font1: 'Afacad', sans-serif; } /* ============================ Name: Securix - Security And CCTV Html Templete Version: 1.0.0 Description: Securix - Security And CCTV Html Templete Author: Vikiglab Author URI: https://themeforest.net/user/vikinglab/portfolio Location: ============================ */ /*============= HEDAER CSS AREA ===============*/ /*============= HERO CSS AREA ===============*/ /*============= MOBILE-MENU CSS AREA ===============*/ /*============= ABOUT CSS AREA ===============*/ /*============= SERVICE CSS AREA ===============*/ /*============= WORK CSS AREA ===============*/ /*============= TESTIMONIAL CSS AREA ===============*/ /*============= BLOG CSS AREA ===============*/ /*============= CONTACT CSS AREA ===============*/ /*============= TEAM CSS AREA ===============*/ /*============= PRICING_PLAN CSS AREA ===============*/ /*============= PROJECT CSS AREA ===============*/ /*============= SHOP CSS AREA ===============*/ /*============= FAQ CSS AREA ===============*/ /*============= CASE CSS AREA ===============*/ /*============= CTA CSS AREA ===============*/ /*============= OTHERS CSS AREA ===============*/ /*============= FOOTER CSS AREA ===============*/ /*============= COMMON CSS AREA ===============*/ .heading1 h5 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-1); border-radius: 4px; transition: all 0.4s; padding: 8px; position: relative; z-index: 1; display: inline-block; margin-bottom: 16px; background: var(--ztc-bg-bg-4); } .heading1 h5 img { margin: 0 6px 0 0; } .heading1 h1 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s64); line-height: var(--ztc-font-size-font-s70); font-weight: var(--ztc-weight-bold); color: var(--ztc-text-text-1); margin-bottom: 16px; } @media (max-width: 767px) { .heading1 h1 { font-size: var(--ztc-font-size-font-s32); line-height: var(--ztc-font-size-font-s40); } } .heading1 p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: var(--ztc-font-size-font-s26); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-1); opacity: 0.9 !important; } .heading2 h5 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-3); border-radius: 4px; transition: all 0.4s; padding: 8px; position: relative; z-index: 1; display: inline-block; margin-bottom: 16px; background: var(--ztc-bg-bg-5); } .heading2 h5 img { margin: 0 6px 0 0; } .heading2 h2 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s44); line-height: var(--ztc-font-size-font-s52); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-3); margin-bottom: 16px; } @media (max-width: 767px) { .heading2 h2 { font-size: var(--ztc-font-size-font-s32); line-height: var(--ztc-font-size-font-s40); } } .heading2 p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s26); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-4); } .heading3 h5 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-1); border-radius: 4px; transition: all 0.4s; padding: 8px; position: relative; z-index: 1; display: inline-block; margin-bottom: 16px; background: #202327; } .heading3 h5 img { margin: 0 6px 0 0; } .heading3 h1 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s64); line-height: var(--ztc-font-size-font-s70); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-1); margin-bottom: 16px; } @media (max-width: 767px) { .heading3 h1 { font-size: var(--ztc-font-size-font-s32); line-height: var(--ztc-font-size-font-s40); } } .heading3 h2 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s44); line-height: var(--ztc-font-size-font-s52); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-1); margin-bottom: 16px; } @media (max-width: 767px) { .heading3 h2 { font-size: var(--ztc-font-size-font-s32); line-height: var(--ztc-font-size-font-s40); } } .heading3 p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-1); opacity: 80% !important; } .heading4 h5 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-7); border-radius: 4px; transition: all 0.4s; padding: 8px; position: relative; z-index: 1; display: inline-block; margin-bottom: 16px; background: var(--ztc-bg-bg-8); } .heading4 h5 img { margin: 0 6px 0 0; } .heading4 h1 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s64); line-height: var(--ztc-font-size-font-s70); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-7); margin-bottom: 16px; } @media (max-width: 767px) { .heading4 h1 { font-size: var(--ztc-font-size-font-s32); line-height: var(--ztc-font-size-font-s40); } } .heading4 h2 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s44); line-height: var(--ztc-font-size-font-s52); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-7); margin-bottom: 16px; } @media (max-width: 767px) { .heading4 h2 { font-size: var(--ztc-font-size-font-s32); line-height: var(--ztc-font-size-font-s40); } } .heading4 p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-6); } .heading5 h5 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-1); border-radius: 4px; transition: all 0.4s; padding: 8px; position: relative; z-index: 1; display: inline-block; margin-bottom: 16px; background: var(--ztc-bg-bg-12); } .heading5 h5 img { margin: 0 6px 0 0; height: 16px; width: 16px !important; display: inline-block !important; } .heading5 h1 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s64); line-height: var(--ztc-font-size-font-s70); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-1); margin-bottom: 16px; } @media (max-width: 767px) { .heading5 h1 { font-size: var(--ztc-font-size-font-s32); line-height: var(--ztc-font-size-font-s40); } } .heading5 h2 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s44); line-height: var(--ztc-font-size-font-s52); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-1); margin-bottom: 16px; } @media (max-width: 767px) { .heading5 h2 { font-size: var(--ztc-font-size-font-s32); line-height: var(--ztc-font-size-font-s40); } } .heading5 p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-1); opacity: 0.9; } .heading6 h5 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-10); border-radius: 4px; transition: all 0.4s; padding: 8px; position: relative; z-index: 1; display: inline-block; margin-bottom: 16px; background: var(--ztc-bg-bg-13); } .heading6 h5 img { margin: 0 6px 0 0; height: 16px; width: 16px !important; display: inline-block !important; } .heading6 h1 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s64); line-height: var(--ztc-font-size-font-s70); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-10); margin-bottom: 16px; } @media (max-width: 767px) { .heading6 h1 { font-size: var(--ztc-font-size-font-s32); line-height: var(--ztc-font-size-font-s40); } } .heading6 h2 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s44); line-height: var(--ztc-font-size-font-s52); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-10); margin-bottom: 16px; } @media (max-width: 767px) { .heading6 h2 { font-size: var(--ztc-font-size-font-s32); line-height: var(--ztc-font-size-font-s40); } } .heading6 p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-6); } .heading7 h5 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: var(--ztc-font-size-font-s16); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-11); border-radius: 50px; transition: all 0.4s; padding: 8px; position: relative; z-index: 1; display: inline-block; margin-bottom: 16px; background: rgba(216, 7, 88, 0.1); } .heading7 h5 img { margin: 0 6px 0 0; height: 16px; width: 16px !important; display: inline-block !important; } .heading7 h1 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s64); line-height: var(--ztc-font-size-font-s70); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-11); margin-bottom: 16px; } @media (max-width: 767px) { .heading7 h1 { font-size: var(--ztc-font-size-font-s32); line-height: var(--ztc-font-size-font-s40); } } .heading7 h2 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s44); line-height: var(--ztc-font-size-font-s52); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-1); margin-bottom: 16px; } @media (max-width: 767px) { .heading7 h2 { font-size: var(--ztc-font-size-font-s32); line-height: var(--ztc-font-size-font-s40); } } .heading7 p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-12); } .heading8 h5 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: var(--ztc-font-size-font-s16); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-11); border-radius: 50px; transition: all 0.4s; padding: 8px; position: relative; z-index: 1; display: inline-block; margin-bottom: 16px; background: rgba(216, 7, 88, 0.1); } .heading8 h5 img { margin: 0 6px 0 0; height: 16px; width: 16px !important; display: inline-block !important; } .heading8 h1 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s64); line-height: var(--ztc-font-size-font-s70); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-11); margin-bottom: 16px; } @media (max-width: 767px) { .heading8 h1 { font-size: var(--ztc-font-size-font-s32); line-height: var(--ztc-font-size-font-s40); } } .heading8 h2 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s44); line-height: var(--ztc-font-size-font-s52); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-11); margin-bottom: 16px; } @media (max-width: 767px) { .heading8 h2 { font-size: var(--ztc-font-size-font-s32); line-height: var(--ztc-font-size-font-s40); } } .heading8 p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-12); } .heading9 h5 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: var(--ztc-font-size-font-s16); font-weight: var(--ztc-weight-medium); color: var(--ztc-bg-bg-17); border-radius: 8px; transition: all 0.4s; position: relative; padding: 6px 10px; z-index: 1; display: inline-block; margin-bottom: 16px; background: var(--ztc-bg-bg-19); } .heading9 h5 img { margin: 0 6px 0 0; } .heading9 h1 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s56); line-height: var(--ztc-font-size-font-s68); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-10); margin-bottom: 16px; } @media (max-width: 767px) { .heading9 h1 { font-size: var(--ztc-font-size-font-s32); line-height: var(--ztc-font-size-font-s40); } } .heading9 h1 span { color: var(--ztc-text-text-6); display: inline-block; position: relative; } .heading9 h1 span img { position: absolute; left: 0; bottom: -25px; } .heading9 p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: var(--ztc-font-size-font-s26); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-10); opacity: 80%; } .heading10 h5 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: var(--ztc-font-size-font-s16); font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-12); border-radius: 8px; transition: all 0.4s; padding: 6px 10px; position: relative; z-index: 1; display: inline-block; margin-bottom: 16px; } .heading10 h5::after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; transition: all 0.4s; background: var(--ztc-bg-bg-20); border-radius: 8px; } .heading10 h5 img { margin: 0 6px 0 0; } .heading10 h2 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s44); line-height: var(--ztc-font-size-font-s52); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-2); margin-bottom: 16px; } .heading10 h2 span { color: var(--ztc-text-text-6); display: inline-block; position: relative; } .heading10 h2 span img { position: absolute; left: 0; bottom: -10px; } @media (max-width: 767px) { .heading10 h2 span img { display: none; } } @media (max-width: 767px) { .heading10 h2 { font-size: var(--ztc-font-size-font-s32); line-height: var(--ztc-font-size-font-s40); } } .heading10 p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: var(--ztc-font-size-font-s26); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-3); } .heading10 h3 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s32); line-height: var(--ztc-font-size-font-s40); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-2); margin-bottom: 24px; } .header-btn1 { display: inline-block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-bold); background: var(--ztc-bg-bg-1); color: var(--ztc-text-text-3); transition: all 0.4s; border-radius: 4px; padding: 16px 20px; position: relative; } .header-btn1 i { margin-left: 4px; transform: rotate(-45deg); } .header-btn1:hover { color: var(--ztc-text-text-3); transition: all 0.4s; } .header-btn1:hover::after { top: 0; left: 0; transition: all 0.4s; } .header-btn1::after { position: absolute; content: ""; height: 100%; width: 100%; left: 4px; transition: all 0.4s; top: -4px; border: 1px solid var(--ztc-text-text-1); border-radius: 4px; z-index: 1; } .header-btn2 { display: inline-block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-bold); background: var(--ztc-text-text-3); color: var(--ztc-text-text-1); transition: all 0.4s; border-radius: 4px; padding: 16px 20px; position: relative; } .header-btn2 i { margin-left: 4px; transform: rotate(-45deg); } .header-btn2:hover { color: var(--ztc-text-text-1); transition: all 0.4s; } .header-btn2:hover::after { top: 0; left: 0; transition: all 0.4s; } .header-btn2::after { position: absolute; content: ""; height: 100%; width: 100%; left: 4px; transition: all 0.4s; top: -4px; border: 1px solid var(--ztc-text-text-3); border-radius: 4px; z-index: -1; } .header-btn3 { display: inline-block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-bold); background: var(--ztc-bg-bg-7); color: var(--ztc-text-text-1); transition: all 0.4s; border-radius: 4px; padding: 16px 20px; position: relative; } .header-btn3 i { margin-left: 4px; transform: rotate(-45deg); } .header-btn3:hover { color: var(--ztc-text-text-1); transition: all 0.4s; } .header-btn3:hover::after { top: 0; left: 0; transition: all 0.4s; } .header-btn3::after { position: absolute; content: ""; height: 100%; width: 100%; left: 4px; transition: all 0.4s; top: -4px; border: 1px solid var(--ztc-bg-bg-7); border-radius: 4px; z-index: 1; } .header-btn4 { display: inline-block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-bold); background: var(--ztc-bg-bg-11); color: var(--ztc-text-text-1); transition: all 0.4s; border-radius: 4px; padding: 16px 20px; position: relative; } .header-btn4 i { margin-left: 4px; transform: rotate(-45deg); } .header-btn4:hover { color: var(--ztc-text-text-1); transition: all 0.4s; } .header-btn4:hover::after { top: 0; left: 0; transition: all 0.4s; } .header-btn4::after { position: absolute; content: ""; height: 100%; width: 100%; left: 4px; transition: all 0.4s; top: -4px; border: 1px solid #FA8100; border-radius: 4px; z-index: 1; } .header-btn5 { display: inline-block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-bold); background: #FA8100; color: var(--ztc-text-text-1); transition: all 0.4s; border-radius: 50px; padding: 16px 20px; position: relative; } .header-btn5 i { margin-left: 4px; transform: rotate(-45deg); transition: all 0.4s; } .header-btn5:hover { color: var(--ztc-text-text-1); transition: all 0.4s; } .header-btn5:hover::after { top: 0; left: 0; transition: all 0.4s; } .header-btn5:hover i { transform: rotate(0); transition: all 0.4s; } .header-btn5::after { position: absolute; content: ""; height: 100%; width: 100%; left: 4px; transition: all 0.4s; top: -4px; border: 1px solid #FA8100; border-radius: 50px; z-index: 1; } .header-btn6 { display: inline-block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-bold); background: var(--ztc-text-text-11); color: var(--ztc-text-text-1); transition: all 0.4s; border-radius: 50px; padding: 16px 20px; position: relative; } .header-btn6 i { margin-left: 4px; transform: rotate(-45deg); transition: all 0.4s; } .header-btn6:hover { color: var(--ztc-text-text-1); transition: all 0.4s; } .header-btn6:hover::after { top: 0; left: 0; transition: all 0.4s; } .header-btn6:hover i { transform: rotate(0); transition: all 0.4s; } .header-btn6::after { position: absolute; content: ""; height: 100%; width: 100%; left: 4px; transition: all 0.4s; top: -4px; border: 1px solid var(--ztc-text-text-11); border-radius: 50px; z-index: 1; } .header-btn7 { display: inline-block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-bold); background: var(--ztc-text-text-2); color: var(--ztc-text-text-1); transition: all 0.4s; border-radius: 4px; padding: 16px 20px; position: relative; } .header-btn7 i { margin-left: 4px; transform: rotate(-45deg); transition: all 0.4s; } .header-btn7:hover { color: var(--ztc-text-text-1); transition: all 0.4s; } .header-btn7:hover::after { top: 0; left: 0; transition: all 0.4s; } .header-btn7:hover i { transform: rotate(0); transition: all 0.4s; } .header-btn7::after { position: absolute; content: ""; height: 100%; width: 100%; left: 4px; transition: all 0.4s; top: -4px; border: 1px solid var(--ztc-text-text-2); border-radius: 4px; z-index: 1; } .header-btn8 { display: inline-block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-bold); color: var(--ztc-text-text-1); background: var(--ztc-text-text-6); padding: 16px 24px; transition: all 0.4s; border: 1px solid var(--ztc-text-text-6); border-radius: 30px; } .header-btn8:hover { color: var(--ztc-text-text-1); transition: all 0.4s; transform: translateY(-5px); } .header-btn9 { display: inline-block; font-size: var(--ztc-font-size-font-s18); font-family: var(--ztc-family-font1); color: var(--ztc-text-text-2); padding: 16px; font-weight: var(--ztc-weight-bold); transition: all 0.4s; line-height: var(--ztc-font-size-font-s18); background: var(--ztc-bg-bg-17); border-radius: 4px; text-transform: capitalize; position: relative; z-index: 1; } .header-btn9::after { position: absolute; content: ""; height: 100%; left: 50%; top: 0; width: 1px; transition: all 0.4s; z-index: -1; background-color: var(--ztc-text-text-1); border-radius: 4px; visibility: hidden; opacity: 0; } .header-btn9 i { margin-left: 4px; transform: rotate(-45deg); } .header-btn9:hover { color: var(--ztc-text-text-2); transition: all 0.4s; transform: translateY(-5px); } .header-btn9:hover::after { visibility: visible; opacity: 1; left: 0; top: 0; width: 100%; transition: all 0.4s; } .header-btn10 { display: inline-block; font-size: var(--ztc-font-size-font-s18); font-family: var(); color: var(--ztc-bg-bg-17); padding: 15px; font-weight: var(--ztc-weight-bold); transition: all 0.4s; line-height: var(--ztc-font-size-font-s18); border: 1px solid var(--ztc-bg-bg-17); border-radius: 4px; text-transform: capitalize; position: relative; z-index: 1; } .header-btn10::after { position: absolute; content: ""; height: 100%; left: 50%; top: 0; width: 1px; transition: all 0.4s; z-index: -1; background-color: #A3FF00; border-radius: 4px; visibility: hidden; opacity: 0; } .header-btn10 i { margin-left: 4px; transform: rotate(-45deg); } .header-btn10:hover { color: var(--ztc-text-text-2); transition: all 0.4s; transform: translateY(-5px); } .header-btn10:hover::after { visibility: visible; opacity: 1; left: 0; top: 0; width: 100%; transition: all 0.4s; } .header-btn11 { display: inline-block; font-size: var(--ztc-font-size-font-s18); font-family: var(); color: var(--ztc-text-text-2); padding: 16px; font-weight: var(--ztc-weight-bold); transition: all 0.4s; line-height: var(--ztc-font-size-font-s18); background: var(--ztc-bg-bg-17); border-radius: 4px; text-transform: capitalize; position: relative; z-index: 1; } .header-btn11::after { position: absolute; content: ""; height: 100%; left: 50%; top: 0; width: 1px; transition: all 0.4s; z-index: -1; background-color: var(--ztc-bg-bg-18); border-radius: 4px; visibility: hidden; opacity: 0; } .header-btn11 i { margin-left: 4px; transform: rotate(-45deg); } .header-btn11:hover { color: var(--ztc-text-text-1); transition: all 0.4s; } .header-btn11:hover::after { visibility: visible; opacity: 1; left: 0; top: 0; width: 100%; transition: all 0.4s; } .header-btn4.btn2:hover { color: var(--ztc-text-text-1); transition: all 0.4s; background: var(--ztc-text-text-2); } .bg-white { background: var(--ztc-text-text-1) !important; } .bg2 { background: var(--ztc-bg-bg-4); } /*============= COMMON CSS AREA ENDS===============*/ .sp1 { padding: 100px 0 100px; } @media (max-width: 767px) { .sp1 { padding: 50px 0 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .sp1 { padding: 50px 0 50px; } } .sp2 { padding: 100px 0 70px; } @media (max-width: 767px) { .sp2 { padding: 50px 0 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .sp2 { padding: 50px 0 20px; } } .sp3 { padding: 100px 0 50px; } .sp4 { padding: 80px 0 80px; } @media (max-width: 767px) { .sp4 { padding: 40px 0 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .sp4 { padding: 40px 0 40px; } } .sp5 { padding: 60px 0 60px; } @media (max-width: 767px) { .sp5 { padding: 30px 0 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .sp5 { padding: 30px 0 30px; } } .sp6 { padding: 120px 0 120px; } @media (max-width: 767px) { .sp6 { padding: 60px 0 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .sp6 { padding: 60px 0 60px; } } .sp7 { padding: 120px 0 90px; } @media (max-width: 767px) { .sp7 { padding: 60px 0 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .sp7 { padding: 60px 0 30px; } } .sp8 { padding: 100px 0 0; } @media (max-width: 767px) { .sp8 { padding: 50px 0 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .sp8 { padding: 50px 0 0; } } .sp9 { padding: 120px 0 0; } @media (max-width: 767px) { .sp9 { padding: 60px 0 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .sp9 { padding: 60px 0 0; } } .sp10 { padding: 0 0 100px; } @media (max-width: 767px) { .sp10 { padding: 0 0 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .sp10 { padding: 0 0 50px; } } /*============= ABOUT CSS AREA ===============*/ .about1-section-area .about-images img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .about1-section-area .about-content-area { padding: 0 0 0 50px; } @media (max-width: 767px) { .about1-section-area .about-content-area { padding: 0; margin-top: 30px; text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about1-section-area .about-content-area { padding: 0; margin-top: 30px; text-align: center; } } .about1-section-area .about-content-area .counter-area { display: flex; align-items: center; padding-top: 20px; padding-bottom: 24px; border-bottom: 1px solid rgba(4, 35, 39, 0.08); } @media (max-width: 767px) { .about1-section-area .about-content-area .counter-area { display: inline-block; } } .about1-section-area .about-content-area .counter-area:hover .counter-box h2 { color: var(--ztc-text-text-2); transition: all 0.4s; } .about1-section-area .about-content-area .counter-area .counter-box h2 { color: rgba(4, 35, 39, 0.1); font-family: var(--ztc-family-font1); font-size: 96px; font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 96px; margin: 0 32px 0 0; min-width: 176px; transition: all 0.4s; } @media (max-width: 767px) { .about1-section-area .about-content-area .counter-area .counter-box h2 { min-width: 100%; } } .about2-section-area { position: relative; z-index: 1; } .about2-section-area .about-header { padding: 0 70px 0 0; } @media (max-width: 767px) { .about2-section-area .about-header { padding: 0; margin-bottom: 30px; text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about2-section-area .about-header { padding: 0; margin-bottom: 30px; text-align: center; } } .about2-section-area .about-header p { padding-bottom: 24px; border-bottom: 1px solid #E6E6E8; } .about2-section-area .about-header .btn-area { margin-top: 32px; } .about2-section-area .about-header .contact-boxarea { margin-top: 24px; position: relative; z-index: 1; } .about2-section-area .about-header .contact-boxarea .img1 { height: 70px; width: 70px; text-align: center; line-height: 70px; display: inline-block; border-radius: 50%; background: var(--ztc-bg-bg-10); margin-bottom: 24px; } .about2-section-area .about-header .contact-boxarea .content p { padding-bottom: 0; border: none; } .about2-section-area .about-header .contact-boxarea .content a { color: var(--ztc-text-text-7); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: 600; line-height: var(--ztc-font-size-font-s20); display: inline-block; transition: all 0.4s; margin-bottom: 16px; } .about2-section-area .about-header .contact-boxarea .content a:hover { color: var(--ztc-bg-bg-7); transition: all 0.4s; } .about2-section-area .about-header .contact-boxarea1 { margin-top: 24px; } .about2-section-area .about-header .contact-boxarea1 .img1 { height: 70px; width: 70px; text-align: center; line-height: 70px; display: inline-block; border-radius: 50%; background: var(--ztc-bg-bg-10); margin-bottom: 24px; } .about2-section-area .about-header .contact-boxarea1 .content p { padding-bottom: 0; border: none; } .about2-section-area .about-header .contact-boxarea1 .content a { color: var(--ztc-text-text-7); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: 600; line-height: var(--ztc-font-size-font-s20); display: inline-block; transition: all 0.4s; margin-bottom: 16px; } .about2-section-area .about-header .contact-boxarea1 .content a:hover { color: var(--ztc-bg-bg-7); transition: all 0.4s; } .about2-section-area .about-images-area { position: relative; z-index: 1; } .about2-section-area .about-images-area .img1 { overflow: hidden; } .about2-section-area .about-images-area .img1 img { width: 370px; height: 415px; border-radius: 4px; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about2-section-area .about-images-area .img1 img { width: 425px; } } @media (max-width: 767px) { .about2-section-area .about-images-area .img1 img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } } .about2-section-area .about-images-area .img2 { position: relative; margin-top: -200px; left: 80px; overflow: hidden; } @media (max-width: 767px) { .about2-section-area .about-images-area .img2 { left: 0; margin-top: 30px; } } .about2-section-area .about-images-area .img2 img { height: 322px; width: 270px; -o-object-fit: cover; object-fit: cover; border-radius: 4px; } @media (max-width: 767px) { .about2-section-area .about-images-area .img2 img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } } .about2-section-area .about-images-area .counter-area { text-align: center; display: inline-block; background: var(--ztc-bg-bg-8); padding: 20px; border-radius: 4px; position: absolute; top: 0; left: 50px; } @media (max-width: 767px) { .about2-section-area .about-images-area .counter-area { position: relative; width: 100%; left: 0; margin-top: 30px; } } .about2-section-area .about-images-area .counter-area h3 { color: var(--ztc-text-text-7); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; margin-bottom: 12px; } .about2-section-area .about-images-area .counter-area p { color: var(--ztc-text-text-6); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .about2-section-area .about-images-area .counter-area .icons { height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50%; transition: all 0.4s; background: var(--ztc-bg-bg-7); margin: 0 auto; } .about3-section-area { position: relative; z-index: 1; } .about3-section-area .about-images-area { position: relative; overflow: hidden; } .about3-section-area .about-images-area .img1 { overflow: hidden !important; position: relative; } .about3-section-area .about-images-area .img1 img { width: 470px; height: 506px; border-radius: 4px; -o-object-fit: contain; object-fit: contain; } @media (max-width: 767px) { .about3-section-area .about-images-area .img1 img { height: 100%; width: 100%; -o-object-fit: contain; object-fit: contain; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about3-section-area .about-images-area .img1 img { height: 100%; width: 100%; -o-object-fit: contain; object-fit: contain; } } .about3-section-area .about-images-area .img2 { overflow: hidden; position: absolute; right: 0; top: 28%; } @media (max-width: 767px) { .about3-section-area .about-images-area .img2 { position: relative; top: 0; right: 0; margin-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about3-section-area .about-images-area .img2 { position: relative; top: 0; right: 0; margin-top: 30px; } } .about3-section-area .about-images-area .img2 img { width: 200px; height: 240px; -o-object-fit: contain; object-fit: contain; border-radius: 4px; } @media (max-width: 767px) { .about3-section-area .about-images-area .img2 img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about3-section-area .about-images-area .img2 img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px; } } .about3-section-area .about-images-area .about-pera p { color: rgba(255, 255, 255, 0.9); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 26px; display: inline-block; background: var(--ztc-bg-bg-11); padding: 20px 24px; border-radius: 4px; width: 185px; text-align: center; position: absolute; top: 20px; left: 20px; } .about3-section-area .about-header-area { padding: 0 0 0 50px; } @media (max-width: 767px) { .about3-section-area .about-header-area { padding: 0; margin-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about3-section-area .about-header-area { padding: 0; margin-top: 30px; } } .about3-section-area .about-header-area .all-progress-area { border-radius: 4px; padding: 16px; position: relative; border: 1px solid var(--ztc-border-border-1); } .about3-section-area .about-header-area .all-progress-area .progres-section-area .check span { height: 32px; width: 32px; text-align: center; line-height: var(--ztc-font-size-font-s32); border-radius: 4px; transition: all 0.4s; color: var(--ztc-bg-bg-11); display: inline-block; background: rgba(250, 129, 0, 0.2); position: absolute; } .about3-section-area .about-header-area .all-progress-area .progres-section-area .about5-boxes { padding-left: 50px; } .about3-section-area .about-header-area .all-progress-area .progres-section-area .about5-boxes h3 { color: var(--ztc-text-text-10); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); font-style: normal; font-weight: var(--ztc-weight-medium); line-height: 16px; margin-bottom: 10px; } .about3-section-area .about-header-area .all-progress-area .progres-section-area .about5-boxes .about5-bar { height: 6px; width: 100%; border-radius: 30px; background: #E8E7E6; } .about3-section-area .about-header-area .all-progress-area .progres-section-area .about5-boxes .about5-bar .about5-per { position: relative; display: block; height: 100%; width: 95%; background: var(--ztc-text-text-10); border-radius: 30px; animation: progress 0.8s ease-in-out forwards; opacity: 0; } @keyframes progress { 0% { width: 0; opacity: 0; } 100% { opacity: 1; } } .about3-section-area .about-header-area .all-progress-area .progres-section-area .about5-boxes .about5-bar .about5-per .per { position: absolute; right: -10px; top: -30px; display: inline-block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: var(--ztc-font-size-font-s16); font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-10) !important; } .about3-section-area .about-header-area .all-progress-area .progres-section-area .about5-boxes .about5-bar2 { height: 6px; width: 100%; border-radius: 30px; background: #E8E7E6; } .about3-section-area .about-header-area .all-progress-area .progres-section-area .about5-boxes .about5-bar2 .about5-per2 { position: relative; display: block; height: 100%; width: 97%; background: var(--ztc-text-text-10); border-radius: 30px; animation: progress 0.8s ease-in-out forwards; opacity: 0; } @keyframes progress { 0% { width: 0; opacity: 0; } 100% { opacity: 1; } } .about3-section-area .about-header-area .all-progress-area .progres-section-area .about5-boxes .about5-bar2 .about5-per2 .per { position: absolute; right: -10px; top: -30px; display: inline-block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: var(--ztc-font-size-font-s16); font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-10) !important; } .about3-section-area .about-header-area .btn-area { margin-top: 32px; } .about3-section-area { position: relative; } .about3-section-area .about-images img { height: 100%; width: 100%; border-radius: 4px; } @media (max-width: 767px) { .about3-section-area .about-header-area { margin-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about3-section-area .about-header-area { margin-top: 30px; } } .about3-section-area .about-header-area .about-boxarea { margin-top: 32px; } @media (max-width: 767px) { .about3-section-area .about-header-area .about-boxarea { text-align: start !important; } } .about3-section-area .about-header-area .about-boxarea:hover .icons1 { background: var(--ztc-text-text-13); transition: all 0.4s; transform: rotateY(180deg); } .about3-section-area .about-header-area .about-boxarea:hover .icons1 img { filter: brightness(0) invert(1); transition: all 0.4s; } .about3-section-area .about-header-area .about-boxarea .icons1 { height: 80px; width: 80px; text-align: center; line-height: 80px; transition: all 0.4s; border-radius: 50%; background: #FBE6EE; } @media (max-width: 767px) { .about3-section-area .about-header-area .about-boxarea .icons1 { margin: 0 auto; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about3-section-area .about-header-area .about-boxarea .icons1 { margin: 0 auto; } } .about3-section-area .about-header-area .about-boxarea .icons1 img { transition: all 0.4s; } .about3-section-area .about-header-area .about-boxarea .content { margin-top: 20px; } .about3-section-area .about-header-area .about-boxarea .content a { color: var(--ztc-text-text-11); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; transition: all 0.4s; display: inline-block; margin-bottom: 16px; } .about3-section-area .about-header-area .about-boxarea .content a:hover { color: var(--ztc-text-text-13); transition: all 0.4s; } .about-inner-section-area .about-images .img1 { position: relative; } @media (max-width: 767px) { .about-inner-section-area .about-images .img1 { margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-inner-section-area .about-images .img1 { margin-bottom: 30px; } } .about-inner-section-area .about-images .img1 img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px; } .about-inner-section-area .about-images .circle-arrow { height: 140px; width: 140px; text-align: center; display: inline-block; line-height: 140px; border-radius: 50%; background: var(--ztc-text-text-2); position: absolute; top: -15px; z-index: 1; right: -75px; } @media (max-width: 767px) { .about-inner-section-area .about-images .circle-arrow { display: none; } } .about-inner-section-area .about-images .circle-arrow .arrow-icons1 { height: 28px; width: 28px; text-align: center; } .about-inner-section-area .about-images .circle-arrow .elements29 { height: 110px; width: 110px; display: block; border-radius: 50%; position: absolute; left: 15px; top: 15px; -o-object-fit: contain; object-fit: contain; } .about-inner-section-area .about-content-area { padding: 0 0 0 50px; } @media (max-width: 767px) { .about-inner-section-area .about-content-area { padding: 0; text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-inner-section-area .about-content-area { padding: 0; text-align: center; } } .about-inner-section-area .about-content-area .about-boxarea { margin-top: 32px; } .about-inner-section-area .about-content-area .about-boxarea:hover .icons { background: var(--ztc-text-text-2); transition: all 0.4s; } .about-inner-section-area .about-content-area .about-boxarea:hover .icons img { transform: rotateY(180deg); transition: all 0.4s; filter: brightness(0) invert(1); } .about-inner-section-area .about-content-area .about-boxarea .icons { height: 50px; width: 50px; text-align: center; display: inline-block; border-radius: 50%; transition: all 0.4s; line-height: 50px; border-radius: 100px; background: rgba(24, 136, 205, 0.1); } .about-inner-section-area .about-content-area .about-boxarea .icons img { transition: all 0.4s; } .about-inner-section-area .about-content-area .about-boxarea .content a { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-medium); line-height: 20px; transition: all 0.4s; display: inline-block; margin-top: 24px; margin-bottom: 16px; } .about-inner-section-area .about-content-area .about-boxarea .content a:hover { color: var(--ztc-text-text-2); transition: all 0.4s; } .about3-inner-section-area { position: relative; z-index: 1; } .about3-inner-section-area .about-images-area { position: relative; overflow: hidden; } .about3-inner-section-area .about-images-area .img1 { overflow: hidden !important; position: relative; } .about3-inner-section-area .about-images-area .img1 img { width: 470px; height: 506px; border-radius: 4px; -o-object-fit: contain; object-fit: contain; } @media (max-width: 767px) { .about3-inner-section-area .about-images-area .img1 img { height: 100%; width: 100%; -o-object-fit: contain; object-fit: contain; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about3-inner-section-area .about-images-area .img1 img { height: 100%; width: 100%; -o-object-fit: contain; object-fit: contain; } } .about3-inner-section-area .about-images-area .img2 { overflow: hidden; position: absolute; right: 0; top: 28%; } @media (max-width: 767px) { .about3-inner-section-area .about-images-area .img2 { position: relative; top: 0; right: 0; margin-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about3-inner-section-area .about-images-area .img2 { position: relative; top: 0; right: 0; margin-top: 30px; } } .about3-inner-section-area .about-images-area .img2 img { width: 200px; height: 240px; -o-object-fit: contain; object-fit: contain; border-radius: 4px; } @media (max-width: 767px) { .about3-inner-section-area .about-images-area .img2 img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about3-inner-section-area .about-images-area .img2 img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px; } } .about3-inner-section-area .about-images-area .about-pera p { color: rgba(255, 255, 255, 0.9); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 26px; display: inline-block; background: var(--ztc-bg-bg-2); padding: 20px 24px; border-radius: 4px; width: 185px; text-align: center; position: absolute; top: 20px; left: 20px; } .about3-inner-section-area .about-header-area { padding: 0 0 0 50px; } @media (max-width: 767px) { .about3-inner-section-area .about-header-area { padding: 0; margin-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about3-inner-section-area .about-header-area { padding: 0; margin-top: 30px; } } .about3-inner-section-area .about-header-area ul li { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-medium); line-height: 18px; margin-top: 16px; } .about3-inner-section-area .about-header-area ul li img { margin: 0 6px 0 0; } .about3-inner-section-area .about-header-area .btn-area { margin-top: 32px; } /*============= ABOUT CSS AREA ENDS ===============*/ /*============= SERVICE CSS AREA ===============*/ .service1-section-area { position: relative; z-index: 1; background: var(--ztc-bg-bg-6); } .service1-section-area .service-header { margin-bottom: 60px; } @media (max-width: 767px) { .service1-section-area .service-header { margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service1-section-area .service-header { margin-bottom: 30px; } } .service1-section-area .service-boxs-area { display: flex; align-items: center; justify-content: space-between; position: relative; } @media (max-width: 767px) { .service1-section-area .service-boxs-area { display: inline-block; } } .service1-section-area .service-boxs-area .elements19 { position: absolute; top: 35px; left: 18%; } @media (max-width: 767px) { .service1-section-area .service-boxs-area .elements19 { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service1-section-area .service-boxs-area .elements19 { display: none; } } .service1-section-area .service-boxs-area .elements20 { position: absolute; top: 0; right: 21%; } @media (max-width: 767px) { .service1-section-area .service-boxs-area .elements20 { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service1-section-area .service-boxs-area .elements20 { display: none; } } .service1-section-area .service-boxs-area .service-boxarea { text-align: center; position: relative; z-index: 1; transition: all 0.4s; max-width: 290px; margin-bottom: 30px; } @media (max-width: 767px) { .service1-section-area .service-boxs-area .service-boxarea { max-width: 100%; } } .service1-section-area .service-boxs-area .service-boxarea:hover .icons { transform: rotateY(180deg); transition: all 0.4s; } .service1-section-area .service-boxs-area .service-boxarea .icons { height: 60px; width: 60px; text-align: center; line-height: 60px; border-radius: 50%; display: inline-block; transition: all 0.4s; background: var(--ztc-bg-bg-2); margin-bottom: 24px; } .service1-section-area .service-boxs-area .service-boxarea .content a { color: var(--ztc-text-text-3); text-align: center; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); display: inline-block; line-height: 24px; margin-bottom: 16px; transition: all 0.4s; } .service1-section-area .service-boxs-area .service-boxarea .content a:hover { color: var(--ztc-bg-bg-2); transition: all 0.4s; } .service1-section-area .service-boxs-area .service-boxarea .content p { color: var(--ztc-text-text-4); text-align: center; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; } .service1-section-area .service-boxs-area .service-boxarea .content .readmore { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-bold); line-height: 16px; display: inline-block; margin-bottom: 0; margin-top: 24px; transition: all 0.4s; } .service1-section-area .service-boxs-area .service-boxarea .content .readmore:hover { color: var(--ztc-bg-bg-2); transition: all 0.4s; } .service1-section-area .service-boxs-area .service-boxarea .content .readmore i { transform: rotate(-45deg); transition: all 0.4s; } .service2-section-area { position: relative; z-index: 1; background: var(--ztc-bg-bg-8); } .service2-section-area .service-header { margin-bottom: 60px; } @media (max-width: 767px) { .service2-section-area .service-header { margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service2-section-area .service-header { margin-bottom: 30px; } } .service2-section-area .service-header h5 { background: var(--ztc-bg-bg-1); } .service2-section-area .service-boxes-area { position: relative; z-index: 1; margin-bottom: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .service2-section-area .service-boxes-area { margin-bottom: 80px; } } @media (max-width: 767px) { .service2-section-area .service-boxes-area { margin-bottom: 80px; } } .service2-section-area .service-boxes-area:hover .service-img { border-radius: 4px; } .service2-section-area .service-boxes-area:hover .service-img img { transform: scale(1.1) rotate(4deg); transition: all 0.4s; border-radius: 4px; } .service2-section-area .service-boxes-area:hover .service-content { height: 245px; background: var(--ztc-bg-bg-7); transition: all 0.4s; } @media (max-width: 767px) { .service2-section-area .service-boxes-area:hover .service-content { height: 280px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service2-section-area .service-boxes-area:hover .service-content { height: 280px; } } .service2-section-area .service-boxes-area:hover .service-content .service-icons-text .icons { background: var(--ztc-bg-bg-1); transition: all 0.4s; transform: rotateY(180deg); } .service2-section-area .service-boxes-area:hover .service-content .service-icons-text .icons img { filter: none; transition: all 0.4s; } .service2-section-area .service-boxes-area:hover .service-content .service-icons-text .text a { color: var(--ztc-bg-bg-1); transition: all 0.4s; } .service2-section-area .service-boxes-area:hover .service-content .pera p { color: var(--ztc-bg-bg-1); transition: all 0.4s; opacity: 0.8; } .service2-section-area .service-boxes-area .service-img { overflow: hidden; position: relative; transition: all 0.4s; border-radius: 4px; } .service2-section-area .service-boxes-area .service-img img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px; transition: all 0.4s; } .service2-section-area .service-boxes-area .service-content { background: var(--ztc-bg-bg-1); border-radius: 4px; padding: 24px; transition: all 0.4s; z-index: 1; position: absolute; overflow: hidden; margin: 0px 28px; bottom: -50px; z-index: 1; height: 98px; } .service2-section-area .service-boxes-area .service-content .service-icons-text { display: flex; align-items: center; } .service2-section-area .service-boxes-area .service-content .service-icons-text .icons { height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50%; transition: all 0.4s; display: inline-block; background: var(--ztc-bg-bg-7); } .service2-section-area .service-boxes-area .service-content .service-icons-text .icons img { filter: brightness(0) invert(1); transition: all 0.4s; } .service2-section-area .service-boxes-area .service-content .service-icons-text .text a { color: var(--ztc-text-text-7); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 26px; display: inline-block; padding-left: 16px; transition: all 0.4s; } .service2-section-area .service-boxes-area .service-content .pera p { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 28px; transition: all 0.4s; } .service2-section-area .service-boxes-area .service-content .pera a { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-bold); line-height: 16px; display: inline-block; transition: all 0.4s; margin-top: 24px; } .service2-section-area .service-boxes-area .service-content .pera a i { margin-left: 4px; transform: rotate(-45deg); } .service3-section-area { position: relative; background: var(--ztc-bg-bg-14); border-radius: 50px 0 0 0; } .service3-section-area .service-header { margin-bottom: 60px; } @media (max-width: 767px) { .service3-section-area .service-header { margin-bottom: 30px; text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service3-section-area .service-header { margin-bottom: 30px; text-align: center; } } .service3-section-area .service-carousel-area { position: relative; } .service3-section-area .service-carousel-area .owl-nav { position: absolute; top: -150px; right: 0; } @media (max-width: 767px) { .service3-section-area .service-carousel-area .owl-nav { position: relative; top: 0; margin-top: 30px; text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service3-section-area .service-carousel-area .owl-nav { position: relative; top: 0; margin-top: 30px; text-align: center; } } .service3-section-area .service-carousel-area .owl-nav button { height: 48px; width: 48px; text-align: center; line-height: 48px; border-radius: 4px; background: #FEEDDC; transition: all 0.4s; display: inline-block; margin: 0 16px 0 0; } .service3-section-area .service-carousel-area .owl-nav button:hover { background: var(--ztc-bg-bg-11); color: var(--ztc-bg-bg-1); transition: all 0.4s; } .service3-section-area .service-carousel-area .service-boxarea { position: relative; z-index: 1; overflow: hidden; } .service3-section-area .service-carousel-area .service-boxarea:hover .img1 { border-radius: 4px; } .service3-section-area .service-carousel-area .service-boxarea:hover .img1::after { visibility: visible; opacity: 0.6; transition: all 0.4s; transform: scale(1); } .service3-section-area .service-carousel-area .service-boxarea:hover .img1 img { transform: scale(1.1) rotate(-4deg); transition: all 0.4s; } .service3-section-area .service-carousel-area .service-boxarea:hover .content-area { transition: all 0.4s; } .service3-section-area .service-carousel-area .service-boxarea:hover .content-area::after { height: 100%; transition: all 0.4s; } .service3-section-area .service-carousel-area .service-boxarea:hover .content-area .icons { transition: all 0.4s; background: var(--ztc-bg-bg-1); transform: rotateY(180deg); } .service3-section-area .service-carousel-area .service-boxarea:hover .content-area .icons img { transition: all 0.4s; filter: none; } .service3-section-area .service-carousel-area .service-boxarea:hover .content-area .content-area-pera a { color: var(--ztc-bg-bg-1); transition: all 0.4s; } .service3-section-area .service-carousel-area .service-boxarea:hover .content-area .content-area-pera p { color: var(--ztc-text-text-1); transition: all 0.4s; visibility: visible; opacity: 1; height: 66px; margin-top: 16px; } .service3-section-area .service-carousel-area .service-boxarea:hover .content-area .content-area-pera .readmore { color: var(--ztc-text-text-1); transition: all 0.4s; } .service3-section-area .service-carousel-area .service-boxarea .img1 { position: relative; z-index: 1; overflow: hidden; transition: all 0.4s; border-radius: 4px; } .service3-section-area .service-carousel-area .service-boxarea .img1::after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; transition: all 0.4s; background: var(--ztc-text-text-10); opacity: 0; transform: scale(0.8); visibility: hidden; } .service3-section-area .service-carousel-area .service-boxarea .img1 img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px; transition: all 0.4s; } .service3-section-area .service-carousel-area .service-boxarea .content-area { background: var(--ztc-text-text-1); position: absolute; padding: 62px 24px 24px 24px; transition: all 0.4s; z-index: 1; margin: 0 30px 30px 30px; bottom: 0; border-radius: 4px; } .service3-section-area .service-carousel-area .service-boxarea .content-area::after { position: absolute; content: ""; height: 5px; width: 100%; border-radius: 4px; transition: all 0.4s; bottom: 0; left: 0; background: var(--ztc-bg-bg-11); z-index: -1; } .service3-section-area .service-carousel-area .service-boxarea .content-area .icons { height: 60px; width: 60px; text-align: center; line-height: 60px; border-radius: 50%; transition: all 0.4s; background: var(--ztc-bg-bg-11); position: absolute; top: -30px; margin: 0 auto; left: 42%; right: 40%; } .service3-section-area .service-carousel-area .service-boxarea .content-area .icons img { transition: all 0.4s; filter: brightness(0) invert(1); height: 32px; width: 32px !important; display: inline-block !important; } .service3-section-area .service-carousel-area .service-boxarea .content-area .content-area-pera { text-align: center; } .service3-section-area .service-carousel-area .service-boxarea .content-area .content-area-pera a { color: var(--ztc-text-text-10); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); display: inline-block; transition: all 0.4s; line-height: 20px; } .service3-section-area .service-carousel-area .service-boxarea .content-area .content-area-pera p { color: var(--ztc-text-text-10); text-align: center; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; transition: all 0.4s; visibility: hidden; opacity: 0; height: 0; } .service3-section-area .service-carousel-area .service-boxarea .content-area .content-area-pera .readmore { color: var(--ztc-text-text-10); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-bold); line-height: 16px; display: inline-block; transition: all 0.4s; margin-top: 24px; } .service3-section-area .service-carousel-area .service-boxarea .content-area .content-area-pera .readmore i { margin-left: 4px; transform: rotate(-45deg); } .service4-section-area { position: relative; z-index: 1; background: var(--ztc-text-text-11); } @media (max-width: 767px) { .service4-section-area .service-header { margin-bottom: 30px; text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service4-section-area .service-header { margin-bottom: 30px; text-align: center; } } .service4-section-area .service-header h5 { background: rgba(255, 255, 255, 0.15); color: var(--ztc-bg-bg-1); } .service4-section-area .service-header h2 { color: var(--ztc-bg-bg-1); } .service4-section-area .service-header p { color: var(--ztc-bg-bg-1); opacity: 0.8; } .service4-section-area .service-boxes-area .service-boxes { border-radius: 4px; background: rgba(255, 255, 255, 0.1); box-shadow: 0px 4px 30px 0px rgba(33, 37, 41, 0.04); position: relative; transition: all 0.4s; padding: 16px; margin-bottom: 30px; } .service4-section-area .service-boxes-area .service-boxes:hover { background: var(--ztc-bg-bg-1); transition: all 0.4s; transform: translateY(-5px); } .service4-section-area .service-boxes-area .service-boxes:hover .icons { background: var(--ztc-text-text-13); transition: all 0.4s; transform: rotateY(180deg); } .service4-section-area .service-boxes-area .service-boxes:hover .content-area a { color: var(--ztc-text-text-11); transition: all 0.4s; } .service4-section-area .service-boxes-area .service-boxes:hover .content-area p { color: var(--ztc-text-text-11); transition: all 0.4s; } .service4-section-area .service-boxes-area .service-boxes:hover .content-area .readmore { color: var(--ztc-text-text-11); transition: all 0.4s; } .service4-section-area .service-boxes-area .service-boxes .icons { height: 60px; width: 60px; text-align: center; line-height: 60px; border-radius: 50%; transition: all 0.4s; display: inline-block; background: rgba(255, 255, 255, 0.1); } .service4-section-area .service-boxes-area .service-boxes .content-area a { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 20px; display: inline-block; transition: all 0.4s; } .service4-section-area .service-boxes-area .service-boxes .content-area a:hover { color: var(--ztc-text-text-13); transition: all 0.4s; } .service4-section-area .service-boxes-area .service-boxes .content-area p { color: var(--ztc-bg-bg-1); opacity: 0.8; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; margin-top: 16px; transition: all 0.4s; } .service4-section-area .service-boxes-area .service-boxes .content-area a.readmore { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 20px; display: inline-block; transition: all 0.4s; margin-top: 24px; } .service4-section-area .service-boxes-area .service-boxes .content-area a.readmore:hover { color: var(--ztc-text-text-13); transition: all 0.4s; } .service4-section-area .service-boxes-area .service-boxes .content-area a.readmore i { margin-left: 4px; transform: rotate(-45deg); } .service3-inner-section-area { position: relative; background: var(--ztc-bg-bg-6); } .service3-inner-section-area .service-header { margin-bottom: 60px; } @media (max-width: 767px) { .service3-inner-section-area .service-header { margin-bottom: 30px; text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service3-inner-section-area .service-header { margin-bottom: 30px; text-align: center; } } .service3-inner-section-area .service-carousel-area { position: relative; } .service3-inner-section-area .service-carousel-area .owl-nav { position: absolute; top: -150px; right: 0; } @media (max-width: 767px) { .service3-inner-section-area .service-carousel-area .owl-nav { position: relative; top: 0; margin-top: 30px; text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service3-inner-section-area .service-carousel-area .owl-nav { position: relative; top: 0; margin-top: 30px; text-align: center; } } .service3-inner-section-area .service-carousel-area .owl-nav button { height: 48px; width: 48px; text-align: center; line-height: 48px; border-radius: 4px; background: #D9E7EE; transition: all 0.4s; display: inline-block; margin: 0 16px 0 0; } .service3-inner-section-area .service-carousel-area .owl-nav button:hover { background: var(--ztc-bg-bg-2); color: var(--ztc-bg-bg-1); transition: all 0.4s; } .service3-inner-section-area .service-carousel-area .service-boxarea { position: relative; z-index: 1; overflow: hidden; } .service3-inner-section-area .service-carousel-area .service-boxarea:hover .img1 { border-radius: 4px; } .service3-inner-section-area .service-carousel-area .service-boxarea:hover .img1::after { visibility: visible; opacity: 0.6; transition: all 0.4s; transform: scale(1); } .service3-inner-section-area .service-carousel-area .service-boxarea:hover .img1 img { transform: scale(1.1) rotate(-4deg); transition: all 0.4s; } .service3-inner-section-area .service-carousel-area .service-boxarea:hover .content-area { transition: all 0.4s; } .service3-inner-section-area .service-carousel-area .service-boxarea:hover .content-area::after { height: 100%; transition: all 0.4s; } .service3-inner-section-area .service-carousel-area .service-boxarea:hover .content-area .icons { transition: all 0.4s; background: var(--ztc-bg-bg-1); transform: rotateY(180deg); } .service3-inner-section-area .service-carousel-area .service-boxarea:hover .content-area .icons img { transition: all 0.4s; filter: none; } .service3-inner-section-area .service-carousel-area .service-boxarea:hover .content-area .content-area-pera a { color: var(--ztc-bg-bg-1); transition: all 0.4s; } .service3-inner-section-area .service-carousel-area .service-boxarea:hover .content-area .content-area-pera p { color: var(--ztc-text-text-1); transition: all 0.4s; visibility: visible; opacity: 1; height: 66px; margin-top: 16px; } .service3-inner-section-area .service-carousel-area .service-boxarea:hover .content-area .content-area-pera .readmore { color: var(--ztc-text-text-1); transition: all 0.4s; } .service3-inner-section-area .service-carousel-area .service-boxarea .img1 { position: relative; z-index: 1; overflow: hidden; transition: all 0.4s; border-radius: 4px; } .service3-inner-section-area .service-carousel-area .service-boxarea .img1::after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; transition: all 0.4s; background: var(--ztc-text-text-3); opacity: 0; transform: scale(0.8); visibility: hidden; } .service3-inner-section-area .service-carousel-area .service-boxarea .img1 img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px; transition: all 0.4s; } .service3-inner-section-area .service-carousel-area .service-boxarea .content-area { background: var(--ztc-text-text-1); position: absolute; padding: 62px 24px 24px 24px; transition: all 0.4s; z-index: 1; margin: 0 30px 30px 30px; bottom: 0; border-radius: 4px; } .service3-inner-section-area .service-carousel-area .service-boxarea .content-area::after { position: absolute; content: ""; height: 5px; width: 100%; border-radius: 4px; transition: all 0.4s; bottom: 0; left: 0; background: var(--ztc-bg-bg-2); z-index: -1; } .service3-inner-section-area .service-carousel-area .service-boxarea .content-area .icons { height: 60px; width: 60px; text-align: center; line-height: 60px; border-radius: 50%; transition: all 0.4s; background: var(--ztc-bg-bg-2); position: absolute; top: -30px; margin: 0 auto; left: 42%; right: 40%; } .service3-inner-section-area .service-carousel-area .service-boxarea .content-area .icons img { transition: all 0.4s; filter: brightness(0) invert(1); height: 32px; width: 32px !important; display: inline-block !important; } .service3-inner-section-area .service-carousel-area .service-boxarea .content-area .content-area-pera { text-align: center; } .service3-inner-section-area .service-carousel-area .service-boxarea .content-area .content-area-pera a { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); display: inline-block; transition: all 0.4s; line-height: 20px; } .service3-inner-section-area .service-carousel-area .service-boxarea .content-area .content-area-pera p { color: var(--ztc-text-text-4); text-align: center; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; transition: all 0.4s; visibility: hidden; opacity: 0; height: 0; } .service3-inner-section-area .service-carousel-area .service-boxarea .content-area .content-area-pera .readmore { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-bold); line-height: 16px; display: inline-block; transition: all 0.4s; margin-top: 24px; } .service3-inner-section-area .service-carousel-area .service-boxarea .content-area .content-area-pera .readmore i { margin-left: 4px; transform: rotate(-45deg); } /*============= SERVICE CSS AREA ENDS===============*/ .service-inner-section-area { position: relative; z-index: 1; } .service-inner-section-area .service-boxarea { position: relative; z-index: 1; overflow: hidden; margin-bottom: 30px; } .service-inner-section-area .service-boxarea:hover .img1 { border-radius: 4px; } .service-inner-section-area .service-boxarea:hover .img1::after { visibility: visible; opacity: 0.6; transition: all 0.4s; transform: scale(1); } .service-inner-section-area .service-boxarea:hover .img1 img { transform: scale(1.1) rotate(-4deg); transition: all 0.4s; } .service-inner-section-area .service-boxarea:hover .content-area { transition: all 0.4s; } .service-inner-section-area .service-boxarea:hover .content-area::after { height: 100%; transition: all 0.4s; } .service-inner-section-area .service-boxarea:hover .content-area .icons { transition: all 0.4s; background: var(--ztc-bg-bg-1); transform: rotateY(180deg); } .service-inner-section-area .service-boxarea:hover .content-area .icons img { transition: all 0.4s; filter: none; } .service-inner-section-area .service-boxarea:hover .content-area .content-area-pera a { color: var(--ztc-bg-bg-1); transition: all 0.4s; } .service-inner-section-area .service-boxarea:hover .content-area .content-area-pera p { color: var(--ztc-text-text-1); transition: all 0.4s; visibility: visible; opacity: 1; height: 66px; margin-top: 16px; } .service-inner-section-area .service-boxarea:hover .content-area .content-area-pera .readmore { color: var(--ztc-text-text-1); transition: all 0.4s; } .service-inner-section-area .service-boxarea .img1 { position: relative; z-index: 1; overflow: hidden; transition: all 0.4s; border-radius: 4px; } .service-inner-section-area .service-boxarea .img1::after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; transition: all 0.4s; background: var(--ztc-text-text-3); opacity: 0; transform: scale(0.8); visibility: hidden; } .service-inner-section-area .service-boxarea .img1 img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px; transition: all 0.4s; } .service-inner-section-area .service-boxarea .content-area { background: var(--ztc-text-text-1); position: absolute; padding: 62px 24px 24px 24px; transition: all 0.4s; z-index: 1; margin: 0 30px 30px 30px; bottom: 0; border-radius: 4px; } .service-inner-section-area .service-boxarea .content-area::after { position: absolute; content: ""; height: 5px; width: 100%; border-radius: 4px; transition: all 0.4s; bottom: 0; left: 0; background: var(--ztc-bg-bg-2); z-index: -1; } .service-inner-section-area .service-boxarea .content-area .icons { height: 60px; width: 60px; text-align: center; line-height: 60px; border-radius: 50%; transition: all 0.4s; background: var(--ztc-bg-bg-2); position: absolute; top: -30px; margin: 0 auto; left: 42%; right: 40%; } .service-inner-section-area .service-boxarea .content-area .icons img { transition: all 0.4s; filter: brightness(0) invert(1); height: 32px; width: 32px !important; display: inline-block !important; } .service-inner-section-area .service-boxarea .content-area .content-area-pera { text-align: center; } .service-inner-section-area .service-boxarea .content-area .content-area-pera a { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); display: inline-block; transition: all 0.4s; line-height: 20px; } .service-inner-section-area .service-boxarea .content-area .content-area-pera p { color: var(--ztc-text-text-3); text-align: center; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; transition: all 0.4s; visibility: hidden; opacity: 0; height: 0; } .service-inner-section-area .service-boxarea .content-area .content-area-pera .readmore { color: var(--ztc-text-text-10); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-bold); line-height: 16px; display: inline-block; transition: all 0.4s; margin-top: 24px; } .service-inner-section-area .service-boxarea .content-area .content-area-pera .readmore i { margin-left: 4px; transform: rotate(-45deg); } .pagination-area ul li a { color: var(--ztc-text-text-3); text-align: center; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 20px; display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 40px; border-radius: 4px; transition: all 0.4s; border: none; background: var(--03-home-p-age-gray-colors, #EEF2F2); margin: 0 8px 0 0; box-shadow: none; } .pagination-area ul li a.active { background: var(--ztc-bg-bg-2); color: var(--ztc-bg-bg-1); } .pagination-area ul li a:hover { background: var(--ztc-bg-bg-2); color: var(--ztc-bg-bg-1); transition: all 0.4s; } .service-single-inner-area .service-left-area { background: var(--ztc-bg-bg-6); border-radius: 4px; padding: 32px 20px; position: sticky; top: 100px; } .service-single-inner-area .service-left-area h3 { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; display: inline-block; } .service-single-inner-area .service-left-area .search-area form { position: relative; z-index: 1; background: var(--ztc-bg-bg-1); border-radius: 4px; transition: all 0.4s; margin-top: 24px; height: 48px; line-height: 17px; } .service-single-inner-area .service-left-area .search-area form input { width: 100%; padding: 16px; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); color: var(--ztc-text-text-3); outline: none; font-weight: var(--ztc-weight-semibold); line-height: 19px; } .service-single-inner-area .service-left-area .search-area form input::-moz-placeholder { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); opacity: 0.6; } .service-single-inner-area .service-left-area .search-area form input::placeholder { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); opacity: 0.6; } .service-single-inner-area .service-left-area .search-area form button { border: none; background: var(--ztc-bg-bg-2); outline: none; border-radius: 0 4px 4px 0; height: 48px; width: 48px; text-align: center; line-height: 48px; transition: all 0.4s; display: inline-block; position: absolute; right: 0; top: 0; } .service-single-inner-area .service-left-area .search-area form button:hover { background: var(--ztc-text-text-3); transition: all 0.4s; } .service-single-inner-area .service-left-area .service-area ul { margin-top: 4px; } .service-single-inner-area .service-left-area .service-area ul li a { display: flex; align-items: center; justify-content: space-between; color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 20px; border-radius: 4px; padding: 20px 16px; transition: all 0.4s; background: var(--ztc-bg-bg-1); margin-top: 20px; } .service-single-inner-area .service-left-area .service-area ul li a i { transition: all 0.4s; } .service-single-inner-area .service-left-area .service-area ul li a:hover { background: var(--ztc-bg-bg-2); color: var(--ztc-bg-bg-1); transition: all 0.4s; transform: translateY(-3px); } .service-single-inner-area .service-left-area .service-area ul li a:hover i { transform: rotate(-45deg); transition: all 0.4s; } .service-single-inner-area .service-left-area .tags-area ul li { display: inline-block; } .service-single-inner-area .service-left-area .tags-area ul li a { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-medium); line-height: 18px; display: inline-block; border-radius: 4px; transition: all 0.4s; padding: 12px 16px; background: var(--ztc-bg-bg-1); margin: 16px 6px 0 0; } .service-single-inner-area .service-left-area .tags-area ul li a:hover { color: var(--ztc-bg-bg-1); background: var(--ztc-bg-bg-2); transition: all 0.4s; transform: translateY(-3px); } .service-single-inner-area .service-left-area .download-area { background: var(--ztc-bg-bg-2); border-radius: 4px; transition: all 0.4s; padding: 24px 20px; } .service-single-inner-area .service-left-area .download-area h3 { color: var(--ztc-bg-bg-1); } .service-single-inner-area .service-left-area .download-area .btn-area .header-btn7 { background: var(--ztc-bg-bg-1); color: var(--ztc-bg-bg-2); transition: all 0.4s; } .service-single-inner-area .service-left-area .download-area .btn-area .header-btn7::after { border: 1px solid var(--ztc-bg-bg-1); } .service-single-inner-area .service-left-area .download-btn-area { background: var(--ztc-bg-bg-1); border-radius: 4px; transition: all 0.4s; padding: 24px 20px; } .service-single-inner-area .service-left-area .download-btn-area p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-4); display: inline-block; margin-top: 16px; } .service-single-inner-area .service-left-area .download-btn-area .btn-area a { width: 100%; text-align: center; } .service-single-inner-area .service-left-area .download-btn-area .btn-area a img { margin: -5px 4px 0 0; } .service-single-inner-area .service-left-area .download-btn-area .btn-area .header-btn7.btn { background: var(--ztc-bg-bg-6); color: var(--ztc-text-text-3); border: none; transition: all 0.4s; } .service-single-inner-area .service-left-area .download-btn-area .btn-area .header-btn7.btn img { filter: brightness(0); margin: -5px 4px 0 0; transition: all 0.4s; } .service-single-inner-area .service-left-area .download-btn-area .btn-area .header-btn7.btn::after { display: none; } .service-single-inner-area .service-left-area .download-btn-area .btn-area .header-btn7.btn:hover { background: var(--ztc-bg-bg-2); color: var(--ztc-bg-bg-1); transition: all 0.4s; } .service-single-inner-area .service-left-area .download-btn-area .btn-area .header-btn7.btn:hover img { filter: none; transition: all 0.4s; } .service-single-inner-area .service-left-area .follow-area { background: var(--ztc-bg-bg-1); border-radius: 4px; transition: all 0.4s; padding: 24px 20px; } .service-single-inner-area .service-left-area .follow-area ul { margin-top: 24px; } .service-single-inner-area .service-left-area .follow-area ul li { display: inline-block; margin: 0 12px 0 0; } .service-single-inner-area .service-left-area .follow-area ul li a { height: 40px; width: 40px; text-align: center; line-height: 40px; border-radius: 50%; background: var(--ztc-bg-bg-6); transition: all 0.4s; color: var(--ztc-text-text-3); display: inline-block; } .service-single-inner-area .service-left-area .follow-area ul li a:hover { background: var(--ztc-bg-bg-2); color: var(--ztc-bg-bg-1); transition: all 0.4s; transform: translateY(-3px); } .service-single-inner-area .service-left-area .contact-form-area .input-area { margin-top: 20px; } .service-single-inner-area .service-left-area .contact-form-area .input-area input { width: 100%; background: var(--ztc-bg-bg-1); border-radius: 4px; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-semibold); transition: all 0.4s; padding: 16px; height: 52px; } .service-single-inner-area .service-left-area .contact-form-area .input-area input::-moz-placeholder { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .service-single-inner-area .service-left-area .contact-form-area .input-area input::placeholder { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .service-single-inner-area .service-left-area .contact-form-area .input-area textarea { width: 100%; background: var(--ztc-bg-bg-1); border-radius: 4px; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-semibold); transition: all 0.4s; padding: 16px; height: 120px; } .service-single-inner-area .service-left-area .contact-form-area .input-area textarea::-moz-placeholder { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .service-single-inner-area .service-left-area .contact-form-area .input-area textarea::placeholder { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .service-single-inner-area .service-left-area .contact-form-area .btn-area button { border: none; outline: none; } .service-single-inner-area .padding-left { padding: 0 0 0 50px !important; } @media (max-width: 767px) { .service-single-inner-area .padding-left { padding: 0 !important; margin-top: 30px !important; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service-single-inner-area .padding-left { padding: 0 !important; margin-top: 30px !important; } } .service-single-inner-area .padding-right { padding: 0 50px 0 0 !important; } @media (max-width: 767px) { .service-single-inner-area .padding-right { padding: 0 !important; margin-bottom: 30px !important; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service-single-inner-area .padding-right { padding: 0 !important; margin-bottom: 30px !important; } } .service-single-inner-area .service-right-single-area h2 { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s32); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 32px; } .service-single-inner-area .service-right-single-area h2 { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s28); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 32px; } .service-single-inner-area .service-right-single-area p { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; } .service-single-inner-area .service-right-single-area h4 { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 32px; } .service-single-inner-area .service-right-single-area .pera { padding-bottom: 32px; border-bottom: 1px solid #E6E9E9; } .service-single-inner-area .service-right-single-area .lista-area { display: flex; align-items: center; padding-bottom: 32px; border-bottom: 1px solid #E6E9E9; } @media (max-width: 767px) { .service-single-inner-area .service-right-single-area .lista-area { display: inline-block; } } .service-single-inner-area .service-right-single-area .lista-area ul { margin: 0 35px 0 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .service-single-inner-area .service-right-single-area .lista-area ul { margin: 0 20px 0 0; } } .service-single-inner-area .service-right-single-area .lista-area ul li { margin-top: 16px; color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-medium); line-height: 18px; } .service-single-inner-area .service-right-single-area .lista-area ul li img { margin: 0 6px 0 0; } .service-single-inner-area .service-right-single-area .boxarea { position: relative; z-index: 1; background: var(--ztc-bg-bg-6); border-radius: 4px; padding: 24px 32px; } .service-single-inner-area .service-right-single-area .boxarea .icons { height: 60px; width: 60px; text-align: center; display: inline-block; transition: all 0.4s; line-height: 60px; background: #D9E7EE; border-radius: 50%; position: absolute; } .service-single-inner-area .service-right-single-area .boxarea .content { padding-left: 80px; } .service-single-inner-area .service-right-single-area .boxarea .content a { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 20px; display: inline-block; transition: all 0.4s; margin-bottom: 16px; } .service-single-inner-area .service-right-single-area .img1 img { height: 100%; width: 100%; border-radius: 4px; } .service-single-inner-area .service-right-single-area .img2 { margin-top: 32px; } .service-single-inner-area .service-right-single-area .img2 img { height: 100%; width: 100%; border-radius: 4px; } .service-single-inner-area .service-right-single-area .service-accordian-area .accordion .accordion-item { border: none; background: var(--ztc-bg-bg-2); border-radius: 4px; } .service-single-inner-area .service-right-single-area .service-accordian-area .accordion .accordion-item .accordion-header button { box-shadow: none; border: none; color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-medium); line-height: 20px; display: inline-block; border-radius: 4px; background: #F3F5F7 !important; padding: 20px 16px 16px 20px !important; } .service-single-inner-area .service-right-single-area .service-accordian-area .accordion .accordion-item .accordion-header button::after { filter: brightness(0); position: absolute; right: 20px; } .service-single-inner-area .service-right-single-area .service-accordian-area .accordion .accordion-item .accordion-header button:not(.collapsed) { background: none !important; transition: all 0.4s; color: var(--ztc-bg-bg-1); } .service-single-inner-area .service-right-single-area .service-accordian-area .accordion .accordion-item .accordion-header button:not(.collapsed)::after { filter: brightness(0) invert(1); } .service-single-inner-area .service-right-single-area .service-accordian-area .accordion .accordion-item .accordion-body { color: var(--ztc-bg-bg-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; padding: 0 16px 20px 20px; opacity: 0.8; } .service-single-inner-area .service-right-single-area .all-progress-area .progres-section-area .about5-boxes h3 { color: var(--ztc-text-text-10); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); font-style: normal; font-weight: var(--ztc-weight-medium); line-height: 16px; margin-bottom: 10px; } .service-single-inner-area .service-right-single-area .all-progress-area .progres-section-area .about5-boxes .about5-bar { height: 6px; width: 100%; border-radius: 30px; background: #E8E7E6; } .service-single-inner-area .service-right-single-area .all-progress-area .progres-section-area .about5-boxes .about5-bar .about5-per { position: relative; display: block; height: 100%; width: 95%; background: var(--ztc-text-text-10); border-radius: 30px; animation: progress 0.8s ease-in-out forwards; opacity: 0; } @keyframes progress { 0% { width: 0; opacity: 0; } 100% { opacity: 1; } } .service-single-inner-area .service-right-single-area .all-progress-area .progres-section-area .about5-boxes .about5-bar .about5-per .per { position: absolute; right: -10px; top: -30px; display: inline-block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: var(--ztc-font-size-font-s16); font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-10) !important; } .service-single-inner-area .service-right-single-area .all-progress-area .progres-section-area .about5-boxes .about5-bar2 { height: 6px; width: 100%; border-radius: 30px; background: #E8E7E6; } .service-single-inner-area .service-right-single-area .all-progress-area .progres-section-area .about5-boxes .about5-bar2 .about5-per2 { position: relative; display: block; height: 100%; width: 97%; background: var(--ztc-text-text-10); border-radius: 30px; animation: progress 0.8s ease-in-out forwards; opacity: 0; } @keyframes progress { 0% { width: 0; opacity: 0; } 100% { opacity: 1; } } .service-single-inner-area .service-right-single-area .all-progress-area .progres-section-area .about5-boxes .about5-bar2 .about5-per2 .per { position: absolute; right: -10px; top: -30px; display: inline-block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: var(--ztc-font-size-font-s16); font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-10) !important; } .service-single-inner-area .service-right-single-area .peragraph { position: relative; z-index: 1; border-radius: 4px; background: var(--ztc-bg-bg-6); } .service-single-inner-area .service-right-single-area .peragraph::after { position: absolute; content: ""; height: 100%; width: 10px; left: 0; top: 0; background: var(--ztc-bg-bg-2); border-radius: 4px; } .service-single-inner-area .service-right-single-area .peragraph p { padding: 24px 32px; color: #50595A; } /*============= SERVICE CSS AREA ENDS===============*/ /*============= HERO CSS AREA ===============*/ .hero1-section-area { position: relative; z-index: 1; background: var(--ztc-text-text-2); padding: 160px 0 100px; overflow: hidden; } @media (max-width: 767px) { .hero1-section-area .hero-main-area { text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero1-section-area .hero-main-area { text-align: center; } } .hero1-section-area .hero-main-area .btn-area .header-btn2 { margin-top: 40px; } @media (max-width: 767px) { .hero1-section-area .hero-main-area .btn-area .header-btn2 { display: block; } } .hero1-section-area .hero-main-area .btn-area .header-btn1 { margin-left: 28px; margin-top: 40px; } @media (max-width: 767px) { .hero1-section-area .hero-main-area .btn-area .header-btn1 { margin-left: 0; margin-top: 30px; display: block; } } .hero1-section-area .hero-main-area .others-area { display: flex; align-items: center; position: absolute; left: 120px; bottom: 30px; z-index: 1; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .hero1-section-area .hero-main-area .others-area { left: 80px !important; } } @media (max-width: 767px) { .hero1-section-area .hero-main-area .others-area { display: none; } } .hero1-section-area .hero-main-area .others-area .img1 { margin: 0 16px 0 0; } .hero1-section-area .hero-main-area .others-area h4 { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; margin: 0 8px 0 0; } .hero1-section-area .hero-main-area .others-area p { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; } .hero1-section-area .header-images { position: relative; z-index: 1; } @media (max-width: 767px) { .hero1-section-area .header-images { margin-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero1-section-area .header-images { margin-top: 30px; text-align: center; } } .hero1-section-area .header-images .image img { height: 100%; width: 100%; border-radius: 4px; } .hero1-section-area .header-images .elements8 { position: absolute; top: -20px; right: -100px; z-index: -1; } .hero1-section-area .header-images .elements7 { position: absolute; bottom: 0; left: 0; } .hero1-section-area .elements1 { position: absolute; top: 0; left: 0; } .hero1-section-area .elements2 { position: absolute; top: 0; left: 0; } .hero1-section-area .elements3 { position: absolute; bottom: 0; right: 0; } .hero1-section-area .elements4 { position: absolute; bottom: 0; right: 0; } .hero1-section-area .elements5 { position: absolute; bottom: -200px; right: -100px; } .hero1-section-area .elements6 { position: absolute; bottom: 40px; left: 0; } .hero1-section-area .bg { position: absolute; bottom: 0; left: 0; } .hero2-section-area { position: relative; padding: 200px 0 30px 0; } @media (max-width: 767px) { .hero2-section-area { padding: 160px 0 30px 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero2-section-area { padding: 160px 0 30px 0; } } .hero2-section-area .header-img1 { position: relative; left: -100px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero2-section-area .header-img1 { display: none; } } @media (max-width: 767px) { .hero2-section-area .header-img1 { display: none; } } .hero2-section-area .header-img1 img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 300px; } .hero2-section-area .header-img2 { position: relative; right: -100px; } @media (max-width: 767px) { .hero2-section-area .header-img2 { right: 0; margin-top: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero2-section-area .header-img2 { right: 0; margin-top: 50px; } } .hero2-section-area .header-img2 img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 300px; } .hero2-section-area .header-main-content { margin-top: -60px; position: relative; } .hero2-section-area .header-main-content .header-btn3 { margin-top: 32px; } @media (max-width: 767px) { .hero2-section-area .header-main-content .header-btn3 { margin-left: 0; display: block; } } .hero2-section-area .header-main-content .header-btn1 { margin-top: 32px; margin-left: 20px; } @media (max-width: 767px) { .hero2-section-area .header-main-content .header-btn1 { margin-left: 0; display: block; } } .hero2-section-area .header-main-content .elements21 { position: absolute; top: -60px; left: -150px; } @media (max-width: 767px) { .hero2-section-area .header-main-content .elements21 { display: none; } } .hero2-section-area .header-main-content .elements22 { position: absolute; bottom: -50px; right: -50px; } @media (max-width: 767px) { .hero2-section-area .header-main-content .elements22 { display: none; } } .carousel-area.owl-carousel .owl-stage-outer { border-radius: 0 0 150px 0; } @media (max-width: 767px) { .carousel-area.owl-carousel .owl-stage-outer { border-radius: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .carousel-area.owl-carousel .owl-stage-outer { border-radius: 0; } } .carousel-area { border-radius: 0 0 0 100px; } .carousel-area .owl-item.active .hero3-section-area .header-img4 { transform: scale(1.1); } .carousel-area .owl-item.active .hero3-section-area .header-main-content h5 { transition: transform 1400ms ease, opacity 1400ms ease; transform: translateX(0px); opacity: 1; } .carousel-area .owl-item.active .hero3-section-area .header-main-content h1 { transition: transform 1600ms ease, opacity 1600ms ease; transform: translateX(0px); opacity: 1; } .carousel-area .owl-item.active .hero3-section-area .header-main-content p { transition: transform 1700ms ease, opacity 1700ms ease; transform: translateX(0px); opacity: 1; } .carousel-area .owl-item.active .hero3-section-area .header-main-content .btn-area { transition: transform 1800ms ease, opacity 1800ms ease; transform: translateX(0px); opacity: 1; } .carousel-area .owl-item.active .hero3-section-area .header-main-content .header-bottom-images { transition: transform 2000ms ease, opacity 2000ms ease; transform: translateX(0px); opacity: 1; } .carousel-area .hero3-section-area { position: relative; z-index: 1; padding: 260px 0 130px; } @media (max-width: 767px) { .carousel-area .hero3-section-area { padding: 160px 0 50px; text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .carousel-area .hero3-section-area { padding: 160px 0 50px; text-align: center; } } .carousel-area .hero3-section-area .elements23 { position: absolute; bottom: 0; left: -140px; width: 400px; height: 140px; -o-object-fit: contain; object-fit: contain; } .carousel-area .hero3-section-area .elements24 { position: absolute; bottom: 0; right: -140px; width: 400px; height: 140px; -o-object-fit: contain; object-fit: contain; } .carousel-area .hero3-section-area .header-img4 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100% !important; -o-object-fit: cover; object-fit: cover; background-size: cover; background-repeat: no-repeat; background-position: center; transform: scale(1); transition: transform 8000ms ease, opacity 1800ms ease-in; z-index: -1; } .carousel-area .hero3-section-area .header-main-content .btn-area .header-btn4 { margin-top: 32px; } .carousel-area .hero3-section-area .header-main-content .btn-area .header-btn1 { margin-top: 32px; color: var(--ztc-text-text-10); margin-left: 20px; } @media (max-width: 767px) { .carousel-area .hero3-section-area .header-main-content .btn-area .header-btn1 { margin-left: 0; } } .carousel-area .hero3-section-area .header-main-content h5 { transition: transform 1300ms ease, opacity 1500ms ease; transform: translateX(-300px); opacity: 0; position: relative; } .carousel-area .hero3-section-area .header-main-content h1 { transition: transform 1400ms ease, opacity 1400ms ease; transform: translateX(-300px); position: relative; opacity: 0; } .carousel-area .hero3-section-area .header-main-content p { transition: transform 1600ms ease, opacity 1400ms ease; transform: translateX(-350px); position: relative; opacity: 0; } .carousel-area .hero3-section-area .header-main-content .btn-area { transition: transform 1800ms ease, opacity 1400ms ease; transform: translateX(-400px); position: relative; opacity: 0; } .carousel-area .hero3-section-area .header-main-content .btn-area .header-btn1 { margin-top: 30px; } @media (max-width: 767px) { .carousel-area .hero3-section-area .header-main-content .btn-area .header-btn1 { margin-left: 0; display: block; } } .carousel-area .hero3-section-area .header-main-content .btn-area .header-btn4 { margin-top: 30px; } @media (max-width: 767px) { .carousel-area .hero3-section-area .header-main-content .btn-area .header-btn4 { margin-left: 0; display: block; } } .carousel-area .hero3-section-area .header-main-content .header-bottom-images { transition: transform 2000ms ease, opacity 2000ms ease; transform: translateX(-450px); opacity: 0; display: flex; align-items: center; margin-top: 32px; } @media (max-width: 767px) { .carousel-area .hero3-section-area .header-main-content .header-bottom-images { justify-content: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .carousel-area .hero3-section-area .header-main-content .header-bottom-images { justify-content: center; } } .carousel-area .hero3-section-area .header-main-content .header-bottom-images .img1 img { height: 40px; width: 112px !important; } .carousel-area .hero3-section-area .header-main-content .header-bottom-images .text { text-align: center; margin-left: 24px; } .carousel-area .hero3-section-area .header-main-content .header-bottom-images .text p { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); font-style: normal; font-weight: var(--ztc-weight-medium); line-height: 16px; margin-bottom: 10px; } .carousel-area .hero3-section-area .header-main-content .header-bottom-images .text p span { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 20px; margin: 0 8px 0 0; } .carousel-area .hero3-section-area .header-main-content .header-bottom-images .text ul li { color: var(--ztc-text-text-1); display: inline-block; } .hero4-section-area { position: relative; z-index: 1; background: var(--ztc-bg-bg-15); padding: 200px 0 130px; } @media (max-width: 767px) { .hero4-section-area { padding: 160px 0 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero4-section-area { padding: 160px 0 60px; } } .hero4-section-area .elements25 { position: absolute; top: 0; left: 0; } .hero4-section-area .elements26 { position: absolute; bottom: 0; left: 0; } .hero4-section-area .bg3 { position: absolute; top: 0; right: 0; } @media (max-width: 767px) { .hero4-section-area .hero-main-text { text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero4-section-area .hero-main-text { text-align: center; } } .hero4-section-area .hero-main-text .header-btn5 { margin-top: 32px; } @media (max-width: 767px) { .hero4-section-area .hero-main-text .header-btn5 { width: 100%; } } .hero4-section-area .hero-main-text .header-btn6 { margin-top: 32px; margin-left: 20px; } @media (max-width: 767px) { .hero4-section-area .hero-main-text .header-btn6 { margin-left: 0; width: 100%; } } .hero4-section-area .images { overflow: hidden; position: relative; z-index: 1; } @media (max-width: 767px) { .hero4-section-area .images { margin-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero4-section-area .images { margin-top: 30px; } } .hero4-section-area .images img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .header-area.homepage1.inner .header-elements { background: rgba(255, 255, 255, 0.1) !important; } .header-area.homepage1.inner.sticky .header-elements { background: none !important; } .hero-inner-section-area { position: relative; z-index: 1; background: var(--ztc-text-text-3); padding: 160px 0 100px; overflow: hidden; } @media (max-width: 767px) { .hero-inner-section-area .hero-main-area { text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-inner-section-area .hero-main-area { text-align: center; } } .hero-inner-section-area .hero-main-area a { color: var(--ztc-text-text-1); text-align: center; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; transition: all 0.4s; } .hero-inner-section-area .hero-main-area a i { margin: 0 6px; } .hero-inner-section-area .hero-main-area a span { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 18px; } .hero-inner-section-area .elements1 { position: absolute; top: 0; left: 0; } .hero-inner-section-area .elements2 { position: absolute; top: 0; left: 0; } .hero-inner-section-area .elements3 { position: absolute; bottom: 0; right: 0; } .hero-inner-section-area .elements4 { position: absolute; bottom: 0; right: 0; } .hero-inner-section-area .elements5 { position: absolute; bottom: -200px; right: -100px; } .hero-inner-section-area .elements6 { position: absolute; bottom: 40px; left: 0; } .hero-inner-section-area .bg { position: absolute; bottom: 0; left: 0; } /*============= HERO CSS AREA ===============*/ /*============= MOBILE MENU CSS AREA ===============*/ .mobile-header.mobile-haeder1 { background: var(--ztc-text-text-2); position: fixed; } .mobile-header.mobile-haeder1 .mobile-nav-icon { color: var(--ztc-text-text-1); } .mobile-sidebar.mobile-sidebar1 { background: var(--ztc-text-text-2); overflow-y: scroll; } .mobile-sidebar.mobile-sidebar1 .menu-close { color: var(--ztc-text-text-1); } .mobile-sidebar.mobile-sidebar1 .mobile-nav.mobile-nav1 .mobile-nav-list.nav-list1 span.submenu-button:before { background: var(--ztc-text-text-1); } .mobile-sidebar.mobile-sidebar1 .mobile-nav.mobile-nav1 .mobile-nav-list.nav-list1 span.submenu-button::after { background: var(--ztc-text-text-1); } .mobile-sidebar.mobile-sidebar1 .mobile-nav.mobile-nav1 .mobile-nav-list.nav-list1 li a { font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-1); } .mobile-sidebar.mobile-sidebar1 .mobile-nav.mobile-nav1 .mobile-nav-list.nav-list1 li ul li a li a { font-family: var(--ztc-family-font1) !important; font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-medium) !important; line-height: var(--ztc-font-size-font-s18); color: var(--ztc-text-text-1); display: inline-block; } .mobile-sidebar.mobile-sidebar1 .mobile-nav.mobile-nav1 .header-btn1 { margin-top: 20px; margin-bottom: 30px; width: 100%; text-align: center; } .mobile-sidebar.mobile-sidebar1 .mobile-nav.mobile-nav1 h3 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); line-height: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-1); margin-bottom: 20px; } .mobile-sidebar.mobile-sidebar1 .footer1-contact-info .contact-info-single { display: flex; margin-bottom: 16px; } .mobile-sidebar.mobile-sidebar1 .footer1-contact-info .contact-info-single i { color: var(--ztc-text-text-1); filter: brightness(0) invert(1); } .mobile-sidebar.mobile-sidebar1 .footer1-contact-info .contact-info-single .contact-info-text a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-1); line-height: var(--ztc-font-size-font-s24); margin-left: 6px; display: inline-block; } .mobile-sidebar.mobile-sidebar1 .footer1-contact-info .social-links-mobile-menu { margin-bottom: 50px; } .mobile-sidebar.mobile-sidebar1 .footer1-contact-info .social-links-mobile-menu ul li { display: inline-block; line-height: 30px; } .mobile-sidebar.mobile-sidebar1 .footer1-contact-info .social-links-mobile-menu ul li a { height: 40px; width: 40px; display: inline-block; text-align: center; background: var(--ztc-text-text-1); border: 1px solid var(--ztc-text-text-1); border-radius: 50%; padding: 0; line-height: 42px; transition: all 0.4s ease-in-out; color: var(--ztc-text-text-3); } .mobile-sidebar.mobile-sidebar1 .footer1-contact-info .social-links-mobile-menu ul li a:hover { background: var(--ztc-text-text-3); transition: all 0.4s ease-in-out; transform: translateY(-3px); color: var(--ztc-text-text-1); border: 1px solid var(--ztc-text-text-3); } .mobile-header.mobile-haeder2 { background: var(--ztc-text-text-1); position: fixed; } .mobile-header.mobile-haeder2 .mobile-nav-icon { color: var(--ztc-text-text-7); } .mobile-sidebar.mobile-sidebar2 { background: var(--ztc-text-text-1); overflow-y: scroll; } .mobile-sidebar.mobile-sidebar2 .menu-close { color: var(--ztc-text-text-7); } .mobile-sidebar.mobile-sidebar2 .mobile-nav.mobile-nav1 .mobile-nav-list.nav-list1 span.submenu-button:before { background: var(--ztc-text-text-7); } .mobile-sidebar.mobile-sidebar2 .mobile-nav.mobile-nav1 .mobile-nav-list.nav-list1 span.submenu-button::after { background: var(--ztc-text-text-7); } .mobile-sidebar.mobile-sidebar2 .mobile-nav.mobile-nav1 .mobile-nav-list.nav-list1 li { font-family: var(--ztc-family-font1) !important; } .mobile-sidebar.mobile-sidebar2 .mobile-nav.mobile-nav1 .mobile-nav-list.nav-list1 li a { font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-7); font-size: var(--ztc-font-size-font-s18) !important; } .mobile-sidebar.mobile-sidebar2 .mobile-nav.mobile-nav1 .mobile-nav-list.nav-list1 li ul li a li a { font-family: var(--ztc-family-font1) !important; font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-medium) !important; line-height: var(--ztc-font-size-font-s18); color: var(--ztc-text-text-7); display: inline-block; } .mobile-sidebar.mobile-sidebar2 .mobile-nav.mobile-nav1 .header-btn3 { margin-top: 20px; margin-bottom: 30px; width: 100%; text-align: center; } .mobile-sidebar.mobile-sidebar2 .mobile-nav.mobile-nav1 h3 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); line-height: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-7); margin-bottom: 20px; } .mobile-sidebar.mobile-sidebar2 .footer1-contact-info .contact-info-single { display: flex; margin-bottom: 16px; } .mobile-sidebar.mobile-sidebar2 .footer1-contact-info .contact-info-single i { color: var(--ztc-text-text-7); } .mobile-sidebar.mobile-sidebar2 .footer1-contact-info .contact-info-single .contact-info-text a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-7); line-height: var(--ztc-font-size-font-s24); margin-left: 6px; display: inline-block; } .mobile-sidebar.mobile-sidebar2 .footer1-contact-info .social-links-mobile-menu { margin-bottom: 50px; } .mobile-sidebar.mobile-sidebar2 .footer1-contact-info .social-links-mobile-menu ul li { display: inline-block; line-height: 30px; } .mobile-sidebar.mobile-sidebar2 .footer1-contact-info .social-links-mobile-menu ul li a { height: 40px; width: 40px; display: inline-block; text-align: center; background: var(--ztc-text-text-1); border: 1px solid var(--ztc-text-text-7); border-radius: 50%; padding: 0; line-height: 42px; transition: all 0.4s ease-in-out; color: var(--ztc-text-text-7); } .mobile-sidebar.mobile-sidebar2 .footer1-contact-info .social-links-mobile-menu ul li a:hover { background: var(--ztc-bg-bg-7); transition: all 0.4s ease-in-out; transform: translateY(-3px); color: var(--ztc-text-text-1); border: 1px solid var(--ztc-text-text-3); } .mobile-header.mobile-haeder3 { background: var(--ztc-text-text-10); position: fixed; } .mobile-header.mobile-haeder3 .mobile-nav-icon { color: var(--ztc-text-text-1); } .mobile-sidebar.mobile-sidebar3 { background: var(--ztc-text-text-10); overflow-y: scroll; } .mobile-sidebar.mobile-sidebar3 .menu-close { color: var(--ztc-text-text-1); } .mobile-sidebar.mobile-sidebar3 .mobile-nav.mobile-nav1 .mobile-nav-list.nav-list1 span.submenu-button:before { background: var(--ztc-text-text-1); } .mobile-sidebar.mobile-sidebar3 .mobile-nav.mobile-nav1 .mobile-nav-list.nav-list1 span.submenu-button::after { background: var(--ztc-text-text-1); } .mobile-sidebar.mobile-sidebar3 .mobile-nav.mobile-nav1 .mobile-nav-list.nav-list1 li { font-family: var(--ztc-family-font1) !important; } .mobile-sidebar.mobile-sidebar3 .mobile-nav.mobile-nav1 .mobile-nav-list.nav-list1 li a { font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-1); font-size: var(--ztc-font-size-font-s18) !important; } .mobile-sidebar.mobile-sidebar3 .mobile-nav.mobile-nav1 .mobile-nav-list.nav-list1 li ul li a li a { font-family: var(--ztc-family-font1) !important; font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-medium) !important; line-height: var(--ztc-font-size-font-s18); color: var(--ztc-text-text-1); display: inline-block; } .mobile-sidebar.mobile-sidebar3 .mobile-nav.mobile-nav1 .header-btn4 { margin-top: 20px; margin-bottom: 30px; width: 100%; text-align: center; } .mobile-sidebar.mobile-sidebar3 .mobile-nav.mobile-nav1 h3 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); line-height: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-1); margin-bottom: 20px; } .mobile-sidebar.mobile-sidebar3 .footer1-contact-info .contact-info-single { display: flex; margin-bottom: 16px; } .mobile-sidebar.mobile-sidebar3 .footer1-contact-info .contact-info-single i { color: var(--ztc-text-text-1); } .mobile-sidebar.mobile-sidebar3 .footer1-contact-info .contact-info-single .contact-info-text a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-1); line-height: var(--ztc-font-size-font-s24); margin-left: 6px; display: inline-block; } .mobile-sidebar.mobile-sidebar3 .footer1-contact-info .social-links-mobile-menu { margin-bottom: 50px; } .mobile-sidebar.mobile-sidebar3 .footer1-contact-info .social-links-mobile-menu ul li { display: inline-block; line-height: 30px; } .mobile-sidebar.mobile-sidebar3 .footer1-contact-info .social-links-mobile-menu ul li a { height: 40px; width: 40px; display: inline-block; text-align: center; background: var(--ztc-text-text-1); border: 1px solid var(--ztc-text-text-7); border-radius: 50%; padding: 0; line-height: 42px; transition: all 0.4s ease-in-out; color: var(--ztc-text-text-10); } .mobile-sidebar.mobile-sidebar3 .footer1-contact-info .social-links-mobile-menu ul li a:hover { background: var(--ztc-bg-bg-11); transition: all 0.4s ease-in-out; transform: translateY(-3px); color: var(--ztc-text-text-1); border: 1px solid var(--ztc-text-text-9); } .mobile-header.mobile-haeder4 { background: var(--ztc-text-text-1); position: fixed; } .mobile-header.mobile-haeder4 .mobile-nav-icon { color: var(--ztc-text-text-11); } .mobile-sidebar.mobile-sidebar4 { background: var(--ztc-text-text-1); overflow-y: scroll; } .mobile-sidebar.mobile-sidebar4 .menu-close { color: var(--ztc-text-text-11); } .mobile-sidebar.mobile-sidebar4 .mobile-nav.mobile-nav1 .mobile-nav-list.nav-list1 span.submenu-button:before { background: var(--ztc-text-text-11); } .mobile-sidebar.mobile-sidebar4 .mobile-nav.mobile-nav1 .mobile-nav-list.nav-list1 span.submenu-button::after { background: var(--ztc-text-text-11); } .mobile-sidebar.mobile-sidebar4 .mobile-nav.mobile-nav1 .mobile-nav-list.nav-list1 li { font-family: var(--ztc-family-font1) !important; } .mobile-sidebar.mobile-sidebar4 .mobile-nav.mobile-nav1 .mobile-nav-list.nav-list1 li a { font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-11); font-size: var(--ztc-font-size-font-s18) !important; } .mobile-sidebar.mobile-sidebar4 .mobile-nav.mobile-nav1 .mobile-nav-list.nav-list1 li ul li a li a { font-family: var(--ztc-family-font1) !important; font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-medium) !important; line-height: var(--ztc-font-size-font-s18); color: var(--ztc-text-text-11); display: inline-block; } .mobile-sidebar.mobile-sidebar4 .mobile-nav.mobile-nav1 .header-btn5 { margin-top: 20px; margin-bottom: 30px; width: 100%; text-align: center; } .mobile-sidebar.mobile-sidebar4 .mobile-nav.mobile-nav1 h3 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); line-height: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-11); margin-bottom: 20px; } .mobile-sidebar.mobile-sidebar4 .footer1-contact-info .contact-info-single { display: flex; margin-bottom: 16px; } .mobile-sidebar.mobile-sidebar4 .footer1-contact-info .contact-info-single i { color: var(--ztc-text-text-11); } .mobile-sidebar.mobile-sidebar4 .footer1-contact-info .contact-info-single .contact-info-text a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-12); line-height: var(--ztc-font-size-font-s24); margin-left: 6px; display: inline-block; } .mobile-sidebar.mobile-sidebar4 .footer1-contact-info .social-links-mobile-menu { margin-bottom: 50px; } .mobile-sidebar.mobile-sidebar4 .footer1-contact-info .social-links-mobile-menu ul li { display: inline-block; line-height: 30px; } .mobile-sidebar.mobile-sidebar4 .footer1-contact-info .social-links-mobile-menu ul li a { height: 40px; width: 40px; display: inline-block; text-align: center; background: var(--ztc-text-text-1); border: 1px solid var(--ztc-text-text-11); border-radius: 50%; padding: 0; line-height: 42px; transition: all 0.4s ease-in-out; color: var(--ztc-text-text-11); } .mobile-sidebar.mobile-sidebar4 .footer1-contact-info .social-links-mobile-menu ul li a:hover { background: var(--ztc-text-text-13); transition: all 0.4s ease-in-out; transform: translateY(-3px); color: var(--ztc-text-text-1); border: 1px solid var(--ztc-text-text-13); } .reveal { position: relative; display: -ms-inline-flexbox; visibility: hidden; overflow: hidden; } .reveal img { height: 100%; width: 100%; display: inline-block; -o-object-fit: cover; object-fit: cover; transform-origin: left; } /*============= MOBILE MENU CSS AREA ===============*/ /*============= BLOG CSS AREA ===============*/ .blog1-section-area { position: relative; } .blog1-section-area .blog-header { margin-bottom: 60px; } @media (max-width: 767px) { .blog1-section-area .blog-header { margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog1-section-area .blog-header { margin-bottom: 30px; } } .blog1-section-area .blog-author-boxraea { padding: 20px 24px; position: relative; z-index: 1; border: 1px solid rgba(4, 35, 39, 0.1); border-radius: 4px; margin-bottom: 30px; overflow: hidden; } .blog1-section-area .blog-author-boxraea:hover .blog-img img { transform: scale(1.1) rotate(4deg); transition: all 0.4s; } .blog1-section-area .blog-author-boxraea .othera-content { display: flex; align-items: center; } .blog1-section-area .blog-author-boxraea .othera-content .img1 img { height: 48px; width: 48px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; } .blog1-section-area .blog-author-boxraea .othera-content .text a { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 26px; padding-left: 16px; display: inline-block; } .blog1-section-area .blog-author-boxraea .blog-img { overflow: hidden; transition: all 0.4s; position: relative; border-radius: 4px; } .blog1-section-area .blog-author-boxraea .blog-img img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px; transition: all 0.4s; } .blog1-section-area .blog-author-boxraea .blog-content { padding-top: 24px; } .blog1-section-area .blog-author-boxraea .blog-content .tags { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; display: inline-block; border-radius: 4px; padding: 8px 12px; background: rgba(24, 136, 205, 0.1); } .blog1-section-area .blog-author-boxraea .blog-content a { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 26px; display: inline-block; margin-top: 12px; margin-bottom: 12px; transition: all 0.4s; } .blog1-section-area .blog-author-boxraea .blog-content a:hover { color: var(--ztc-text-text-2); transition: all 0.4s; } .blog1-section-area .blog-author-boxraea .blog-content p { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; display: inline-block; transition: all 0.4s; } .blog1-section-area .blog-author-boxraea .blog-content .readmore { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-bold); line-height: 16px; transition: all 0.4s; margin-bottom: 0; } .blog1-section-area .blog-author-boxraea .blog-content .readmore:hover { color: var(--ztc-text-text-2); transition: all 0.4s; } .blog1-section-area .blog-author-boxraea .blog-content .readmore i { transition: all 0.4s; transform: rotate(-45deg); } .blog2-section-area { position: relative; z-index: 1; } .blog2-section-area .blog-header { margin-bottom: 60px; } @media (max-width: 767px) { .blog2-section-area .blog-header { margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog2-section-area .blog-header { margin-bottom: 30px; } } .blog2-section-area .blog-auhtor-boxes { position: relative; z-index: 1; margin-bottom: 30px; } .blog2-section-area .blog-auhtor-boxes:hover .blog-img img { transform: scale(1.1) rotate(4deg); transition: all 0.4s; } .blog2-section-area .blog-auhtor-boxes:hover .date-format { background: var(--ztc-bg-bg-7); } .blog2-section-area .blog-auhtor-boxes:hover .date-format a { color: var(--ztc-text-text-1); transition: all 0.4s; } .blog2-section-area .blog-auhtor-boxes .blog-img { overflow: hidden; position: relative; border-radius: 4px 4px 0 0; transition: all 0.4s; } .blog2-section-area .blog-auhtor-boxes .blog-img img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px 4px 0 0; transition: all 0.4s; } .blog2-section-area .blog-auhtor-boxes .date-format { background: var(--ztc-text-text-1); display: inline-block; border-radius: 4px; text-align: center; padding: 12px; position: absolute; top: 55%; left: 15%; z-index: 1; right: 15%; transition: all 0.4s; } @media (max-width: 767px) { .blog2-section-area .blog-auhtor-boxes .date-format { left: 6%; right: 6%; top: 48%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog2-section-area .blog-auhtor-boxes .date-format { left: 6%; right: 6%; top: 48%; } } .blog2-section-area .blog-auhtor-boxes .date-format a { color: var(--ztc-text-text-7); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; display: inline-block; transition: all 0.4s; margin: 0 16px 0 0; text-align: center; } .blog2-section-area .blog-auhtor-boxes .date-format a i { margin: 0 4px 0 0; } .blog2-section-area .blog-auhtor-boxes .content-area { border-radius: 0px 0px 4px 4px; background: var(--ztc-bg-bg-8); position: relative; padding: 49px 24px 24px 24px; } .blog2-section-area .blog-auhtor-boxes .content-area a.head { color: var(--ztc-text-text-7); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 26px; display: inline-block; transition: all 0.4s; margin-bottom: 12px; } .blog2-section-area .blog-auhtor-boxes .content-area a.head:hover { color: var(--ztc-bg-bg-7); transition: all 0.4s; } .blog2-section-area .blog-auhtor-boxes .content-area p { color: var(--ztc-text-text-6); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; transition: all 0.4s; margin-bottom: 24px; } .blog2-section-area .blog-auhtor-boxes .content-area a.readmore { color: var(--ztc-text-text-7); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-bold); line-height: 16px; display: inline-block; transition: all 0.4s; margin: 0; } .blog2-section-area .blog-auhtor-boxes .content-area a.readmore:hover { color: var(--ztc-bg-bg-7); transition: all 0.4s; } .blog2-section-area .blog-auhtor-boxes .content-area a.readmore i { margin-left: 4px; transform: rotate(-45deg); } .blog3-section-area { position: relative; z-index: 1; height: 745px; } @media (max-width: 767px) { .blog3-section-area { height: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog3-section-area { height: 100%; } } @media (max-width: 767px) { .blog3-section-area .blog-header-area { margin-bottom: 30px; text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog3-section-area .blog-header-area { margin-bottom: 30px; text-align: center; } } .blog3-section-area .blog-slider-area.owl-carousel .owl-stage-outer { position: absolute; } @media (max-width: 767px) { .blog3-section-area .blog-slider-area.owl-carousel .owl-stage-outer { position: relative; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog3-section-area .blog-slider-area.owl-carousel .owl-stage-outer { position: relative; } } .blog3-section-area .blog-slider-area { position: relative; } .blog3-section-area .blog-slider-area .owl-nav { position: absolute; left: -440px; top: 330px; } @media (max-width: 767px) { .blog3-section-area .blog-slider-area .owl-nav { position: relative; left: 0; top: 0; margin-top: 30px; text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog3-section-area .blog-slider-area .owl-nav { position: relative; left: 0; top: 0; margin-top: 30px; text-align: center; } } .blog3-section-area .blog-slider-area .owl-nav button { height: 48px; width: 48px; text-align: center; line-height: 48px; border-radius: 4px; transition: all 0.4s; display: inline-block; color: var(--ztc-text-text-10); background: #FFF2E6; margin: 0 16px 0 0; } .blog3-section-area .blog-slider-area .owl-nav button:hover { background: var(--ztc-bg-bg-11); transition: all 0.4s; color: var(--ztc-bg-bg-1); } .blog3-section-area .blog-slider-area .blog-boxarea { position: relative; z-index: 1; background: var(--ztc-bg-bg-14); border-radius: 4px; } .blog3-section-area .blog-slider-area .blog-boxarea:hover .img1 { border-radius: 4px; transition: all 0.4s; } .blog3-section-area .blog-slider-area .blog-boxarea:hover .img1::after { height: 100%; transition: all 0.4s; } .blog3-section-area .blog-slider-area .blog-boxarea:hover .img1 img { transform: scale(1.1) rotate(-4deg); transition: all 0.4s; } .blog3-section-area .blog-slider-area .blog-boxarea .img1 { overflow: hidden; border-radius: 4px 4px 0 0; position: relative; transition: all 0.4s; } .blog3-section-area .blog-slider-area .blog-boxarea .img1::after { position: absolute; content: ""; height: 0; width: 100%; left: 0; top: 0; transition: all 0.4s; background: var(--ztc-bg-bg-11); opacity: 0.7; border-radius: 4px 4px 0 0; } .blog3-section-area .blog-slider-area .blog-boxarea .img1 img { height: 100%; width: 100%; border-radius: 4px 4px 0 0; transition: all 0.4s; } .blog3-section-area .blog-slider-area .blog-boxarea .content-area { padding: 50px 24px 24px 24px; position: relative; } .blog3-section-area .blog-slider-area .blog-boxarea .content-area .date { height: 60px; width: 75px; text-align: center; line-height: 65px; position: absolute; top: -30px; right: 24px; } .blog3-section-area .blog-slider-area .blog-boxarea .content-area .date a { color: var(--ztc-bg-bg-1); position: relative; left: -8px; } .blog3-section-area .blog-slider-area .blog-boxarea .content-area .date a:hover { color: var(--ztc-bg-bg-1); transition: all 0.4s; } .blog3-section-area .blog-slider-area .blog-boxarea .content-area a { color: var(--ztc-text-text-10); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 26px; transition: all 0.4s; display: inline-block; margin-bottom: 12px; } .blog3-section-area .blog-slider-area .blog-boxarea .content-area a:hover { color: var(--ztc-bg-bg-11); transition: all 0.4s; } .blog3-section-area .blog-slider-area .blog-boxarea .content-area p { color: var(--ztc-text-text-6); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; display: inline-block; } .blog3-section-area .blog-slider-area .blog-boxarea .content-area .readmore { color: var(--ztc-text-text-10); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-bold); line-height: 16px; display: inline-block; transition: all 0.4s; margin-top: 24px; } .blog3-section-area .blog-slider-area .blog-boxarea .content-area .readmore:hover { color: var(--ztc-bg-bg-11); transition: all 0.4s; } .blog3-section-area .blog-slider-area .blog-boxarea .content-area .readmore i { margin-left: 4px; transform: rotate(-45deg); } .blog4-section-area { position: relative; z-index: 1; } .blog4-section-area .blog-header { margin-bottom: 60px; } @media (max-width: 767px) { .blog4-section-area .blog-header { margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog4-section-area .blog-header { margin-bottom: 30px; } } .blog4-section-area .blog-auhtor-boxes { position: relative; z-index: 1; margin-bottom: 30px; } .blog4-section-area .blog-auhtor-boxes:hover .blog-img::after { width: 100%; height: 100%; transition: all 0.4s; } .blog4-section-area .blog-auhtor-boxes:hover .blog-img img { transform: scale(1.1) rotate(4deg); transition: all 0.4s; } .blog4-section-area .blog-auhtor-boxes:hover .date-format { background: var(--ztc-text-text-13); } .blog4-section-area .blog-auhtor-boxes:hover .date-format a { color: var(--ztc-text-text-1); transition: all 0.4s; } .blog4-section-area .blog-auhtor-boxes .blog-img { overflow: hidden; position: relative; border-radius: 4px 4px 0 0; transition: all 0.4s; } .blog4-section-area .blog-auhtor-boxes .blog-img::after { position: absolute; content: ""; height: 0; top: 0; width: 100%; left: 0; transition: all 0.4s; background: var(--ztc-text-text-13); opacity: 0.7; } .blog4-section-area .blog-auhtor-boxes .blog-img img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px 4px 0 0; transition: all 0.4s; } .blog4-section-area .blog-auhtor-boxes .date-format { background: var(--ztc-text-text-1); display: inline-block; border-radius: 4px; text-align: center; padding: 12px; position: absolute; top: 55%; left: 15%; z-index: 1; right: 15%; transition: all 0.4s; } @media (max-width: 767px) { .blog4-section-area .blog-auhtor-boxes .date-format { left: 6%; right: 6%; top: 48%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog4-section-area .blog-auhtor-boxes .date-format { left: 6%; right: 6%; top: 48%; } } .blog4-section-area .blog-auhtor-boxes .date-format a { color: var(--ztc-text-text-11); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; display: inline-block; transition: all 0.4s; margin: 0 16px 0 0; text-align: center; } .blog4-section-area .blog-auhtor-boxes .date-format a i { margin: 0 4px 0 0; } .blog4-section-area .blog-auhtor-boxes .content-area { border-radius: 0px 0px 4px 4px; background: var(--ztc-bg-bg-15); position: relative; padding: 49px 24px 24px 24px; } .blog4-section-area .blog-auhtor-boxes .content-area a.head { color: var(--ztc-text-text-11); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 26px; display: inline-block; transition: all 0.4s; margin-bottom: 12px; } .blog4-section-area .blog-auhtor-boxes .content-area a.head:hover { color: var(--ztc-text-text-13); transition: all 0.4s; } .blog4-section-area .blog-auhtor-boxes .content-area p { color: var(--ztc-text-text-12); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; transition: all 0.4s; margin-bottom: 24px; } .blog4-section-area .blog-auhtor-boxes .content-area a.readmore { color: var(--ztc-text-text-11); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-bold); line-height: 16px; display: inline-block; transition: all 0.4s; margin: 0; } .blog4-section-area .blog-auhtor-boxes .content-area a.readmore:hover { color: var(--ztc-text-text-13); transition: all 0.4s; } .blog4-section-area .blog-auhtor-boxes .content-area a.readmore i { margin-left: 4px; transform: rotate(-45deg); } .blog-single-inner-area .blog-left-area { background: var(--ztc-bg-bg-6); border-radius: 4px; padding: 32px 20px; position: sticky; top: 100px; } .blog-single-inner-area .blog-left-area h3 { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; display: inline-block; } .blog-single-inner-area .blog-left-area .search-area form { position: relative; z-index: 1; background: var(--ztc-bg-bg-1); border-radius: 4px; transition: all 0.4s; margin-top: 24px; height: 48px; line-height: 17px; } .blog-single-inner-area .blog-left-area .search-area form input { width: 100%; padding: 16px; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); color: var(--ztc-text-text-3); outline: none; font-weight: var(--ztc-weight-semibold); line-height: 19px; } .blog-single-inner-area .blog-left-area .search-area form input::-moz-placeholder { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); opacity: 0.6; } .blog-single-inner-area .blog-left-area .search-area form input::placeholder { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); opacity: 0.6; } .blog-single-inner-area .blog-left-area .search-area form button { border: none; background: var(--ztc-bg-bg-2); outline: none; border-radius: 0 4px 4px 0; height: 48px; width: 48px; text-align: center; line-height: 48px; transition: all 0.4s; display: inline-block; position: absolute; right: 0; top: 0; } .blog-single-inner-area .blog-left-area .search-area form button:hover { background: var(--ztc-text-text-3); transition: all 0.4s; } .blog-single-inner-area .blog-left-area .service-area ul { margin-top: 4px; } .blog-single-inner-area .blog-left-area .service-area ul li a { display: flex; align-items: center; justify-content: space-between; color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 20px; border-radius: 4px; padding: 20px 16px; transition: all 0.4s; background: var(--ztc-bg-bg-1); margin-top: 20px; } .blog-single-inner-area .blog-left-area .service-area ul li a i { transition: all 0.4s; } .blog-single-inner-area .blog-left-area .service-area ul li a:hover { background: var(--ztc-bg-bg-2); color: var(--ztc-bg-bg-1); transition: all 0.4s; transform: translateY(-3px); } .blog-single-inner-area .blog-left-area .service-area ul li a:hover i { transform: rotate(-45deg); transition: all 0.4s; } .blog-single-inner-area .blog-left-area .tags-area ul li { display: inline-block; } .blog-single-inner-area .blog-left-area .tags-area ul li a { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-medium); line-height: 18px; display: inline-block; border-radius: 4px; transition: all 0.4s; padding: 12px 16px; background: var(--ztc-bg-bg-1); margin: 16px 6px 0 0; } .blog-single-inner-area .blog-left-area .tags-area ul li a:hover { color: var(--ztc-bg-bg-1); background: var(--ztc-bg-bg-2); transition: all 0.4s; transform: translateY(-3px); } .blog-single-inner-area .blog-left-area .download-area { background: var(--ztc-bg-bg-2); border-radius: 4px; transition: all 0.4s; padding: 24px 20px; } .blog-single-inner-area .blog-left-area .download-area h3 { color: var(--ztc-bg-bg-1); } .blog-single-inner-area .blog-left-area .download-area .btn-area .header-btn7 { background: var(--ztc-bg-bg-1); color: var(--ztc-bg-bg-2); transition: all 0.4s; } .blog-single-inner-area .blog-left-area .download-area .btn-area .header-btn7::after { border: 1px solid var(--ztc-bg-bg-1); } .blog-single-inner-area .blog-left-area .download-btn-area { background: var(--ztc-bg-bg-1); border-radius: 4px; transition: all 0.4s; padding: 24px 20px; } .blog-single-inner-area .blog-left-area .download-btn-area p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-4); display: inline-block; margin-top: 16px; } .blog-single-inner-area .blog-left-area .download-btn-area .btn-area a { width: 100%; text-align: center; } .blog-single-inner-area .blog-left-area .download-btn-area .btn-area a img { margin: -5px 4px 0 0; } .blog-single-inner-area .blog-left-area .download-btn-area .btn-area .header-btn7.btn { background: var(--ztc-bg-bg-6); color: var(--ztc-text-text-3); border: none; transition: all 0.4s; } .blog-single-inner-area .blog-left-area .download-btn-area .btn-area .header-btn7.btn img { filter: brightness(0); margin: -5px 4px 0 0; transition: all 0.4s; } .blog-single-inner-area .blog-left-area .download-btn-area .btn-area .header-btn7.btn::after { display: none; } .blog-single-inner-area .blog-left-area .download-btn-area .btn-area .header-btn7.btn:hover { background: var(--ztc-bg-bg-2); color: var(--ztc-bg-bg-1); transition: all 0.4s; } .blog-single-inner-area .blog-left-area .download-btn-area .btn-area .header-btn7.btn:hover img { filter: none; transition: all 0.4s; } .blog-single-inner-area .blog-left-area .follow-area { background: var(--ztc-bg-bg-1); border-radius: 4px; transition: all 0.4s; padding: 24px 20px; } .blog-single-inner-area .blog-left-area .follow-area ul { margin-top: 24px; } .blog-single-inner-area .blog-left-area .follow-area ul li { display: inline-block; margin: 0 12px 0 0; } .blog-single-inner-area .blog-left-area .follow-area ul li a { height: 40px; width: 40px; text-align: center; line-height: 40px; border-radius: 50%; background: var(--ztc-bg-bg-6); transition: all 0.4s; color: var(--ztc-text-text-3); display: inline-block; } .blog-single-inner-area .blog-left-area .follow-area ul li a:hover { background: var(--ztc-bg-bg-2); color: var(--ztc-bg-bg-1); transition: all 0.4s; transform: translateY(-3px); } .blog-single-inner-area .blog-left-area .contact-form-area .input-area { margin-top: 20px; } .blog-single-inner-area .blog-left-area .contact-form-area .input-area input { width: 100%; background: var(--ztc-bg-bg-1); border-radius: 4px; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-semibold); transition: all 0.4s; padding: 16px; height: 52px; } .blog-single-inner-area .blog-left-area .contact-form-area .input-area input::-moz-placeholder { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .blog-single-inner-area .blog-left-area .contact-form-area .input-area input::placeholder { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .blog-single-inner-area .blog-left-area .contact-form-area .input-area textarea { width: 100%; background: var(--ztc-bg-bg-1); border-radius: 4px; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-semibold); transition: all 0.4s; padding: 16px; height: 120px; } .blog-single-inner-area .blog-left-area .contact-form-area .input-area textarea::-moz-placeholder { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .blog-single-inner-area .blog-left-area .contact-form-area .input-area textarea::placeholder { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .blog-single-inner-area .blog-left-area .contact-form-area .btn-area button { border: none; outline: none; } .blog-single-inner-area .blog-left-area .recent-blogs-area .recent-boxarea { position: relative; z-index: 1; margin-top: 20px; } .blog-single-inner-area .blog-left-area .recent-blogs-area .recent-boxarea .img1 { position: absolute; } .blog-single-inner-area .blog-left-area .recent-blogs-area .recent-boxarea .img1 img { height: 100px; width: 100px; -o-object-fit: cover; object-fit: cover; border-radius: 4px; } .blog-single-inner-area .blog-left-area .recent-blogs-area .recent-boxarea .content { padding-left: 130px; padding-top: 15px; } .blog-single-inner-area .blog-left-area .recent-blogs-area .recent-boxarea .content .date { display: block; color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; margin-bottom: 8px; } .blog-single-inner-area .blog-left-area .recent-blogs-area .recent-boxarea .content a { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 26px; display: inline-block; transition: all 0.4s; } .blog-single-inner-area .blog-left-area .recent-blogs-area .recent-boxarea .content a:hover { color: var(--ztc-bg-bg-2); transition: all 0.4s; } .blog-single-inner-area .blog-left-area .blog-auhtor-area .author-images { display: flex; align-items: center; } .blog-single-inner-area .blog-left-area .blog-auhtor-area .author-images .img1 { margin: 16px 10px 0 0; } .blog-single-inner-area .padding-left { padding: 0 0 0 50px !important; } @media (max-width: 767px) { .blog-single-inner-area .padding-left { padding: 0 !important; margin-top: 30px !important; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog-single-inner-area .padding-left { padding: 0 !important; margin-top: 30px !important; } } .blog-single-inner-area .padding-right { padding: 0 50px 0 0 !important; } @media (max-width: 767px) { .blog-single-inner-area .padding-right { padding: 0 !important; margin-bottom: 30px !important; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog-single-inner-area .padding-right { padding: 0 !important; margin-bottom: 30px !important; } } .blog-single-inner-area .blog-right-single-area h1 { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s44); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 52px; } .blog-single-inner-area .blog-right-single-area h2 { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s28); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 32px; } .blog-single-inner-area .blog-right-single-area p { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; } .blog-single-inner-area .blog-right-single-area h4 { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 32px; } .blog-single-inner-area .blog-right-single-area .pera { padding-bottom: 32px; border-bottom: 1px solid #E6E9E9; } .blog-single-inner-area .blog-right-single-area .lista-area { display: flex; align-items: center; padding-bottom: 32px; border-bottom: 1px solid #E6E9E9; } @media (max-width: 767px) { .blog-single-inner-area .blog-right-single-area .lista-area { display: inline-block; } } .blog-single-inner-area .blog-right-single-area .lista-area ul { margin: 0 35px 0 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog-single-inner-area .blog-right-single-area .lista-area ul { margin: 0 20px 0 0; } } .blog-single-inner-area .blog-right-single-area .lista-area ul li { margin-top: 16px; color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-medium); line-height: 18px; } .blog-single-inner-area .blog-right-single-area .lista-area ul li img { margin: 0 6px 0 0; } .blog-single-inner-area .blog-right-single-area .boxarea { position: relative; z-index: 1; background: var(--ztc-bg-bg-6); border-radius: 4px; padding: 24px 32px; } .blog-single-inner-area .blog-right-single-area .boxarea .icons { height: 60px; width: 60px; text-align: center; display: inline-block; transition: all 0.4s; line-height: 60px; background: #D9E7EE; border-radius: 50%; position: absolute; } .blog-single-inner-area .blog-right-single-area .boxarea .content { padding-left: 80px; } .blog-single-inner-area .blog-right-single-area .boxarea .content a { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 20px; display: inline-block; transition: all 0.4s; margin-bottom: 16px; } .blog-single-inner-area .blog-right-single-area .img1 img { height: 100%; width: 100%; border-radius: 4px; } .blog-single-inner-area .blog-right-single-area .img2 { margin-top: 32px; position: relative; } .blog-single-inner-area .blog-right-single-area .img2 img { height: 100%; width: 100%; border-radius: 4px; } .blog-single-inner-area .blog-right-single-area .img2 .play-btn-area { position: absolute; top: 40%; left: 40%; right: 40%; z-index: 1; } .blog-single-inner-area .blog-right-single-area .img2 .play-btn-area a { height: 60px; width: 60px; text-align: center; line-height: 60px; border-radius: 50%; display: inline-block; background: var(--ztc-bg-bg-2); transition: all 0.4s; color: var(--ztc-bg-bg-1); } .blog-single-inner-area .blog-right-single-area .service-accordian-area .accordion .accordion-item { border: none; background: var(--ztc-bg-bg-2); border-radius: 4px; } .blog-single-inner-area .blog-right-single-area .service-accordian-area .accordion .accordion-item .accordion-header button { box-shadow: none; border: none; color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-medium); line-height: 20px; display: inline-block; border-radius: 4px; background: #F3F5F7 !important; padding: 20px 16px 16px 20px !important; } .blog-single-inner-area .blog-right-single-area .service-accordian-area .accordion .accordion-item .accordion-header button::after { filter: brightness(0); position: absolute; right: 20px; } .blog-single-inner-area .blog-right-single-area .service-accordian-area .accordion .accordion-item .accordion-header button:not(.collapsed) { background: none !important; transition: all 0.4s; color: var(--ztc-bg-bg-1); } .blog-single-inner-area .blog-right-single-area .service-accordian-area .accordion .accordion-item .accordion-header button:not(.collapsed)::after { filter: brightness(0) invert(1); } .blog-single-inner-area .blog-right-single-area .service-accordian-area .accordion .accordion-item .accordion-body { color: var(--ztc-bg-bg-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; padding: 0 16px 20px 20px; opacity: 0.8; } .blog-single-inner-area .blog-right-single-area .all-progress-area .progres-section-area .about5-boxes h3 { color: var(--ztc-text-text-10); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); font-style: normal; font-weight: var(--ztc-weight-medium); line-height: 16px; margin-bottom: 10px; } .blog-single-inner-area .blog-right-single-area .all-progress-area .progres-section-area .about5-boxes .about5-bar { height: 6px; width: 100%; border-radius: 30px; background: #E8E7E6; } .blog-single-inner-area .blog-right-single-area .all-progress-area .progres-section-area .about5-boxes .about5-bar .about5-per { position: relative; display: block; height: 100%; width: 95%; background: var(--ztc-text-text-10); border-radius: 30px; animation: progress 0.8s ease-in-out forwards; opacity: 0; } @keyframes progress { 0% { width: 0; opacity: 0; } 100% { opacity: 1; } } .blog-single-inner-area .blog-right-single-area .all-progress-area .progres-section-area .about5-boxes .about5-bar .about5-per .per { position: absolute; right: -10px; top: -30px; display: inline-block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: var(--ztc-font-size-font-s16); font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-10) !important; } .blog-single-inner-area .blog-right-single-area .all-progress-area .progres-section-area .about5-boxes .about5-bar2 { height: 6px; width: 100%; border-radius: 30px; background: #E8E7E6; } .blog-single-inner-area .blog-right-single-area .all-progress-area .progres-section-area .about5-boxes .about5-bar2 .about5-per2 { position: relative; display: block; height: 100%; width: 97%; background: var(--ztc-text-text-10); border-radius: 30px; animation: progress 0.8s ease-in-out forwards; opacity: 0; } @keyframes progress { 0% { width: 0; opacity: 0; } 100% { opacity: 1; } } .blog-single-inner-area .blog-right-single-area .all-progress-area .progres-section-area .about5-boxes .about5-bar2 .about5-per2 .per { position: absolute; right: -10px; top: -30px; display: inline-block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); line-height: var(--ztc-font-size-font-s16); font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-10) !important; } .blog-single-inner-area .blog-right-single-area .peragraph { position: relative; z-index: 1; border-radius: 4px; background: var(--ztc-bg-bg-6); } .blog-single-inner-area .blog-right-single-area .peragraph::after { position: absolute; content: ""; height: 100%; width: 10px; left: 0; top: 0; background: var(--ztc-bg-bg-2); border-radius: 4px; } .blog-single-inner-area .blog-right-single-area .peragraph p { padding: 24px 32px; color: #50595A; } .blog-single-inner-area .blog-right-single-area .post-share-area { display: flex; align-items: center; justify-content: space-between; padding-top: 40px; padding-bottom: 40px; border-top: 1px solid var(--ztc-bg-bg-6); border-bottom: 1px solid var(--ztc-bg-bg-6); } .blog-single-inner-area .blog-right-single-area .post-share-area .posts ul li { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 18px; display: inline-block; margin: 0 16px 0 0; } .blog-single-inner-area .blog-right-single-area .post-share-area .posts ul li a { padding: 10px 12px; background: var(--ztc-bg-bg-6); border-radius: 4px; transition: all 0.4s; display: inline-block; color: var(--ztc-text-text-3); } .blog-single-inner-area .blog-right-single-area .post-share-area .posts ul li a:hover { background: var(--ztc-bg-bg-2); transition: all 0.4s; color: var(--ztc-bg-bg-1); } .blog-single-inner-area .blog-right-single-area .post-share-area .share ul li { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 18px; display: inline-block; margin: 0 16px 0 0; } .blog-single-inner-area .blog-right-single-area .post-share-area .share ul li a { background: var(--ztc-bg-bg-6); border-radius: 50%; height: 32px; width: 32px; text-align: center; line-height: 32px; font-size: var(--ztc-font-size-font-s16); transition: all 0.4s; display: inline-block; color: var(--ztc-text-text-3); } .blog-single-inner-area .blog-right-single-area .post-share-area .share ul li a:hover { background: var(--ztc-bg-bg-2); transition: all 0.4s; color: var(--ztc-bg-bg-1); } .blog-single-inner-area .blog-right-single-area .comments-all-box.boxes2 { margin: 30px 0 0 40px; } @media (max-width: 767px) { .blog-single-inner-area .blog-right-single-area .comments-all-box.boxes2 { margin: 30px 0 0 0; } } .blog-single-inner-area .blog-right-single-area .comments-all-box { position: relative; background: var(--ztc-bg-bg-6); border-radius: 4px; padding: 24px; transition: all 0.4s; margin-top: 30px; } .blog-single-inner-area .blog-right-single-area .comments-all-box .comments-boxarea { display: flex; align-items: center; justify-content: space-between; } .blog-single-inner-area .blog-right-single-area .comments-all-box .comments-boxarea .comments-auhtor-boxes { display: flex; align-items: center; } .blog-single-inner-area .blog-right-single-area .comments-all-box .comments-boxarea .comments-auhtor-boxes .content { margin-left: 16px; } .blog-single-inner-area .blog-right-single-area .comments-all-box .comments-boxarea .comments-auhtor-boxes .content a { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); display: block; transition: all 0.4s; line-height: 20px; margin-bottom: 8px; } .blog-single-inner-area .blog-right-single-area .comments-all-box .comments-boxarea .reply a { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 16px; display: inline-block; transition: all 0.4s; } .blog-single-inner-area .blog-right-single-area .comments-all-box .comments-boxarea .reply a:hover { color: var(--ztc-text-text-2); transition: all 0.4s; } .blog-single-inner-area .blog-right-single-area .comments-all-box .comments-boxarea .reply a i { margin: 0 4px 0 0; } .blog-single-inner-area .blog-right-single-area .contact-form-area { position: relative; background: var(--ztc-bg-bg-6); border-radius: 4px; padding: 32px; } .blog-single-inner-area .blog-right-single-area .contact-form-area .input-area { margin-top: 20px; } .blog-single-inner-area .blog-right-single-area .contact-form-area .input-area input { width: 100%; background: var(--ztc-bg-bg-1); border-radius: 4px; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-semibold); transition: all 0.4s; padding: 16px; height: 52px; } .blog-single-inner-area .blog-right-single-area .contact-form-area .input-area input::-moz-placeholder { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .blog-single-inner-area .blog-right-single-area .contact-form-area .input-area input::placeholder { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .blog-single-inner-area .blog-right-single-area .contact-form-area .input-area textarea { width: 100%; background: var(--ztc-bg-bg-1); border-radius: 4px; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-semibold); transition: all 0.4s; padding: 16px; height: 140px; } .blog-single-inner-area .blog-right-single-area .contact-form-area .input-area textarea::-moz-placeholder { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .blog-single-inner-area .blog-right-single-area .contact-form-area .input-area textarea::placeholder { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .blog-single-inner-area .blog-right-single-area .contact-form-area .btn-area button { border: none; outline: none; } .blog-single-inner-area .blog-auhtor-area ul li { display: inline-block; margin: 0 32px 0 0; position: relative; } .blog-single-inner-area .blog-auhtor-area ul li::after { position: absolute; content: ""; height: 16px; width: 1px; background: var(--ztc-text-text-3); opacity: 0.2; right: -16px; top: 15px; } .blog-single-inner-area .blog-auhtor-area ul li a { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; display: inline-block; transition: all 0.4s; } .blog-single-inner-area .blog-auhtor-area ul li a img { margin: 0 6px 0 0; } .blog-single-inner-area .blog-auhtor-area ul li a i { margin: 0 6px 0 0; } .blog-single-inner-area .blog-auhtor-area ul li:nth-child(2)::after { top: 4px; } .blog-single-inner-area .blog-auhtor-area ul li:nth-child(3)::after { top: 4px; } .blog-single-inner-area .blog-auhtor-area ul li:last-child::after { display: none; } /*============= BLOG CSS AREA ENDS ===============*/ /*============= FOOTER CSS AREA ===============*/ .footer1-section-area { position: relative; background: var(--ztc-text-text-3); overflow: hidden; padding: 236px 0 0 0; } .footer1-section-area .elements10 { position: absolute; top: 0; left: 0; } .footer1-section-area .elements11 { position: absolute; top: 0; left: 0; } .footer1-section-area .elements12 { position: absolute; bottom: 0; right: 0; } .footer1-section-area .elements13 { position: absolute; bottom: 0; right: 0; } .footer1-section-area .elements5 { position: absolute; bottom: -200px; right: -100px; } @media (max-width: 767px) { .footer1-section-area .logo-content { text-align: center; } } .footer1-section-area .logo-content p { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; opacity: 0.8; margin-top: 24px; margin-bottom: 24px; } .footer1-section-area .logo-content ul li { display: inline-block; } .footer1-section-area .logo-content ul li a { display: inline-block; height: 36px; width: 36px; text-align: center; line-height: 36px; transition: all 0.4s; border-radius: 165px; background: rgba(255, 255, 255, 0.15); color: var(--ztc-text-text-1); margin: 0 12px 0 0; } .footer1-section-area .logo-content ul li a:hover { background: var(--ztc-text-text-2); transition: all 0.4s; transform: translateY(-3px); } @media (max-width: 767px) { .footer1-section-area .footer-list { text-align: center; } } .footer1-section-area .footer-list h4 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); line-height: var(--ztc-font-size-font-s20); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-1); transition: all 0.4s; margin-bottom: 4px; } .footer1-section-area .footer-list ul li a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-1); display: inline-block; transition: all 0.4s; opacity: 0.8; margin-top: 20px; position: relative; z-index: 1; } .footer1-section-area .footer-list ul li a:hover { padding-left: 4px; transition: all 0.4s; color: var(--ztc-text-text-1); opacity: 1; } .footer1-section-area .head h4 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); line-height: var(--ztc-font-size-font-s20); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-1); transition: all 0.4s; margin-bottom: 4px; } @media (max-width: 767px) { .footer1-section-area .head h4 { margin-top: 30px; text-align: center; } } .footer1-section-area .location-area { display: flex; align-items: center; margin-top: 20px; transition: all 0.4s; cursor: pointer; } @media (max-width: 767px) { .footer1-section-area .location-area { text-align: center; justify-content: center; } } .footer1-section-area .location-area:hover { transition: all 0.4s; } .footer1-section-area .location-area:hover .img1 a { background: var(--ztc-text-text-2); transition: all 0.4s; } .footer1-section-area .location-area:hover .text a { color: var(--ztc-text-text-1); transition: all 0.4s; opacity: 1; } .footer1-section-area .location-area .img1 a { height: 30px; width: 30px; text-align: center; line-height: 30px; border-radius: 50%; transition: all 0.4s; display: inline-block; color: var(--ztc-text-text-1); font-size: 13px; background: rgba(255, 255, 255, 0.15); } .footer1-section-area .location-area .text a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-1); opacity: 0.8; transition: all 0.4s; display: inline-block; padding-left: 16px; } .footer1-section-area .copyright p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-1); opacity: 80%; transition: all 0.4s; text-align: center; padding: 24px 0 32px 0; border-top: 1px solid #2B4447; } .footer2-section-area { position: relative; background: var(--ztc-text-text-7); overflow: hidden; padding: 100px 0 0 0; } @media (max-width: 767px) { .footer2-section-area .logo-content { text-align: center; } } .footer2-section-area .logo-content p { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; opacity: 0.8; margin-top: 24px; margin-bottom: 24px; } .footer2-section-area .logo-content ul li { display: inline-block; } .footer2-section-area .logo-content ul li a { display: inline-block; height: 36px; width: 36px; text-align: center; line-height: 36px; transition: all 0.4s; border-radius: 165px; background: rgba(255, 255, 255, 0.15); color: var(--ztc-text-text-1); margin: 0 12px 0 0; } .footer2-section-area .logo-content ul li a:hover { background: var(--ztc-bg-bg-7); transition: all 0.4s; transform: translateY(-3px); } @media (max-width: 767px) { .footer2-section-area .footer-list { text-align: center; } } .footer2-section-area .footer-list h4 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); line-height: var(--ztc-font-size-font-s20); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-1); transition: all 0.4s; margin-bottom: 4px; } .footer2-section-area .footer-list ul li a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-1); display: inline-block; transition: all 0.4s; opacity: 0.8; margin-top: 20px; position: relative; z-index: 1; } .footer2-section-area .footer-list ul li a:hover { padding-left: 4px; transition: all 0.4s; color: var(--ztc-text-text-1); opacity: 1; } .footer2-section-area .head h4 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); line-height: var(--ztc-font-size-font-s20); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-1); transition: all 0.4s; margin-bottom: 4px; } @media (max-width: 767px) { .footer2-section-area .head h4 { margin-top: 30px; text-align: center; } } .footer2-section-area .location-area { display: flex; align-items: center; margin-top: 20px; transition: all 0.4s; cursor: pointer; } @media (max-width: 767px) { .footer2-section-area .location-area { text-align: center; justify-content: center; } } .footer2-section-area .location-area:hover { transition: all 0.4s; } .footer2-section-area .location-area:hover .img1 a { background: var(--ztc-bg-bg-7); transition: all 0.4s; } .footer2-section-area .location-area:hover .text a { color: var(--ztc-text-text-1); transition: all 0.4s; opacity: 1; } .footer2-section-area .location-area .img1 a { height: 30px; width: 30px; text-align: center; line-height: 30px; border-radius: 50%; transition: all 0.4s; display: inline-block; color: var(--ztc-text-text-1); font-size: 13px; background: rgba(255, 255, 255, 0.15); } .footer2-section-area .location-area .text a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-1); opacity: 0.8; transition: all 0.4s; display: inline-block; padding-left: 16px; } .footer2-section-area .copyright p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-1); opacity: 80%; transition: all 0.4s; text-align: center; padding: 24px 0 32px 0; border-top: 1px solid #27293C; } .footer3-section-area { position: relative; background: var(--ztc-text-text-1); overflow: hidden; padding: 100px 0 0 0; } .footer3-section-area .bg1 { position: absolute; top: 0; left: 0; } @media (max-width: 767px) { .footer3-section-area .logo-content { text-align: center; } } .footer3-section-area .logo-content p { color: var(--ztc-text-text-6); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; margin-top: 24px; margin-bottom: 24px; } .footer3-section-area .logo-content ul li { display: inline-block; } .footer3-section-area .logo-content ul li a { display: inline-block; height: 36px; width: 36px; text-align: center; line-height: 36px; transition: all 0.4s; border-radius: 165px; background: rgba(250, 129, 0, 0.2); color: var(--ztc-text-text-10); margin: 0 12px 0 0; } .footer3-section-area .logo-content ul li a:hover { background: var(--ztc-bg-bg-11); transition: all 0.4s; transform: translateY(-3px); color: var(--ztc-text-text-1); } @media (max-width: 767px) { .footer3-section-area .footer-list { text-align: center; } } .footer3-section-area .footer-list h4 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); line-height: var(--ztc-font-size-font-s20); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-10); transition: all 0.4s; margin-bottom: 4px; } .footer3-section-area .footer-list ul li a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-6); display: inline-block; transition: all 0.4s; margin-top: 20px; position: relative; z-index: 1; } .footer3-section-area .footer-list ul li a:hover { padding-left: 4px; transition: all 0.4s; color: var(--ztc-text-text-9); } .footer3-section-area .head h4 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); line-height: var(--ztc-font-size-font-s20); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-10); transition: all 0.4s; margin-bottom: 4px; } @media (max-width: 767px) { .footer3-section-area .head h4 { margin-top: 30px; text-align: center; } } .footer3-section-area .location-area { display: flex; align-items: center; margin-top: 20px; transition: all 0.4s; cursor: pointer; } @media (max-width: 767px) { .footer3-section-area .location-area { text-align: center; justify-content: center; } } .footer3-section-area .location-area:hover { transition: all 0.4s; } .footer3-section-area .location-area:hover .img1 a { background: var(--ztc-bg-bg-11); transition: all 0.4s; color: var(--ztc-text-text-1); } .footer3-section-area .location-area:hover .text a { color: var(--ztc-text-text-9); transition: all 0.4s; } .footer3-section-area .location-area .img1 a { height: 30px; width: 30px; text-align: center; line-height: 30px; border-radius: 50%; transition: all 0.4s; display: inline-block; color: var(--ztc-text-text-10); font-size: 13px; background: rgba(250, 129, 0, 0.2); } .footer3-section-area .location-area .text a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-6); transition: all 0.4s; display: inline-block; padding-left: 16px; } .footer3-section-area .copyright p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-6); transition: all 0.4s; text-align: center; padding: 24px 0 32px 0; border-top: 1px solid #DDDBD9; } .footer4-section-area { position: relative; background: var(--ztc-text-text-1); overflow: hidden; padding: 100px 0 0 0; } .footer4-section-area .bg1 { position: absolute; top: 0; left: 0; } @media (max-width: 767px) { .footer4-section-area .logo-content { text-align: center; } } .footer4-section-area .logo-content p { color: var(--ztc-text-text-12); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; margin-top: 24px; margin-bottom: 24px; } .footer4-section-area .logo-content ul li { display: inline-block; } .footer4-section-area .logo-content ul li a { display: inline-block; height: 36px; width: 36px; text-align: center; line-height: 36px; transition: all 0.4s; border-radius: 165px; background: rgba(216, 7, 88, 0.1); color: var(--ztc-text-text-11); margin: 0 12px 0 0; } .footer4-section-area .logo-content ul li a:hover { background: var(--ztc-text-text-13); transition: all 0.4s; transform: translateY(-3px); color: var(--ztc-text-text-1); } @media (max-width: 767px) { .footer4-section-area .footer-list { text-align: center; } } .footer4-section-area .footer-list h4 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); line-height: var(--ztc-font-size-font-s20); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-11); transition: all 0.4s; margin-bottom: 4px; } .footer4-section-area .footer-list ul li a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-12); display: inline-block; transition: all 0.4s; margin-top: 20px; position: relative; z-index: 1; } .footer4-section-area .footer-list ul li a:hover { padding-left: 4px; transition: all 0.4s; color: var(--ztc-text-text-13); } .footer4-section-area .head h4 { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); line-height: var(--ztc-font-size-font-s20); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-11); transition: all 0.4s; margin-bottom: 4px; } @media (max-width: 767px) { .footer4-section-area .head h4 { margin-top: 30px; text-align: center; } } .footer4-section-area .location-area { display: flex; align-items: center; margin-top: 20px; transition: all 0.4s; cursor: pointer; } @media (max-width: 767px) { .footer4-section-area .location-area { text-align: center; justify-content: center; } } .footer4-section-area .location-area:hover { transition: all 0.4s; } .footer4-section-area .location-area:hover .img1 a { background: var(--ztc-text-text-13); transition: all 0.4s; color: var(--ztc-text-text-1); } .footer4-section-area .location-area:hover .text a { color: var(--ztc-text-text-13); transition: all 0.4s; } .footer4-section-area .location-area .img1 a { height: 30px; width: 30px; text-align: center; line-height: 30px; border-radius: 50%; transition: all 0.4s; display: inline-block; color: var(--ztc-text-text-10); font-size: 13px; background: rgba(216, 7, 88, 0.1); } .footer4-section-area .location-area .text a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-12); transition: all 0.4s; display: inline-block; padding-left: 16px; } .footer4-section-area .copyright p { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-6); transition: all 0.4s; text-align: center; padding: 24px 0 32px 0; border-top: 1px solid #DDDBD9; } /*============= FOOTER CSS AREA ===============*/ /*============= HEADER CSS AREA ===============*/ .homepage1-body, html { overflow-x: hidden !important; } .homepage1-body { overflow-x: hidden; } .homepage1-body .header-area.homepage1.single-page1 nav#navbar-example2 { display: block !important; padding: 0 !important; } .homepage1-body .header-area.homepage1.single-page1 .header-elements .main-menu ul li a.nav-link.active::after { width: 50% !important; } .homepage1-body .header-area.homepage1.single-page1 .header-elements .main-menu .tp-submenu { left: -370px; } .homepage1-body .header-area.homepage1 { position: absolute; width: 100%; z-index: 9999; padding: 16px 0; transition: all 0.4s; } .homepage1-body .header-area.homepage1 .header-elements { display: flex; align-items: center; justify-content: space-between; position: relative; transition: all 0.4s; background: var(--ztc-bg-bg-3); padding: 24px; border-radius: 4px; height: 82px; } .homepage1-body .header-area.homepage1 .header-elements .main-menu { position: relative; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul:hover > li { color: var(--ztc-text-text-3) !important; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li { display: inline-block; position: relative; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu { background: var(--ztc-text-text-1) !important; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb { transition: all 0.4s; position: relative; z-index: 1; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb:hover .img1::after { transform: scale(1); transition: all 0.4s; visibility: visible; opacity: 0.7; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb:hover .homemenu-btn { top: 38%; visibility: visible; opacity: 1; transition: all 0.6s; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1 { position: relative; z-index: 1; overflow: hidden; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1::after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; transition: all 0.4s; background: var(--ztc-text-text-3); opacity: 0; border-radius: 4px; transform: scale(0.8); z-index: 1; visibility: hidden; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1 img { height: 100%; width: 100%; border-radius: 4px; transition: all 0.4s; border: 1px solid #E5E7EB; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn { position: absolute; top: 30%; z-index: 2; visibility: hidden; opacity: 0; text-align: center; transition: all 0.6s; margin: 0 auto; left: 20%; right: 20%; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn1 { display: inline-block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-bold); background: var(--ztc-bg-bg-1); color: var(--ztc-text-text-3); transition: all 0.4s; border-radius: 4px; padding: 16px 20px; position: relative; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn1 i { margin-left: 4px; transform: rotate(-45deg); } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn1:hover { color: var(--ztc-text-text-3); transition: all 0.4s; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn1:hover::after { top: 0; left: 0; transition: all 0.4s; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn1::after { position: absolute; content: ""; height: 100%; width: 100%; left: 4px; transition: all 0.4s; top: -4px; border: 1px solid var(--ztc-text-text-1); background: none !important; border-radius: 4px; z-index: -1; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu .homemenu-content a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); line-height: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-3); transition: all 0.4s; margin-top: 20px; text-align: center; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li:hover .tp-submenu { visibility: visible; transition: all 0.5s ease-in-out; opacity: 1; z-index: 9; top: 292.3%; position: absolute; transition: all 0.4s; transform: scale(1); } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li:hover ul.dropdown-padding { visibility: visible; transition: all 0.5s ease-in-out; opacity: 1; z-index: 9; top: 292.3%; transform: scale(1); position: absolute; transition: all 0.4s; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-1); line-height: var(--ztc-font-size-font-s18); display: block; transition: all 0.4s; padding: 0 20px; position: relative; z-index: 1; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li a i.fa-solid.fa-angle-down { font-size: 12px; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li a:hover::after { width: 60%; transition: all 0.4s; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li a::after { position: absolute; content: ""; height: 1px; width: 0; left: 20px; bottom: 0; transition: all 0.4s; background: var(--ztc-text-text-1); } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li:hover > a { transition: all 0.4s; color: var(--ztc-text-text-1) !important; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li:hover > a::after { width: 60%; left: 20px; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li .tp-submenu { visibility: hidden; opacity: 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; position: absolute; background: var(--ztc-text-text-1); top: 292.3%; transform: scale(1, 0); z-index: 0; transition: all 0.4s; border-radius: 5px; padding: 15px; left: -340px; width: 1300px; overflow: hidden; transform-origin: top; display: block; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding { visibility: hidden; opacity: 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; position: absolute; background: var(--ztc-text-text-1); top: 201.3%; transform: scale(1, 0); width: 225px; z-index: 1; transition: all 0.4s; border-radius: 5px; padding: 15px; display: block; transform-origin: top; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu { position: relative; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu:hover { color: var(--ztc-text-text-3) !important; transition: all 0.4s; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu:hover > a { transition: all 0.4s; padding-left: 25px; color: var(--ztc-text-text-3) !important; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu:hover > a::after { background: var(--ztc-text-text-3); transition: all 0.4s; visibility: visible; opacity: 1; color: var(--ztc-text-text-3); } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li { display: block; color: var(--ztc-text-text-3) !important; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li:hover > a { color: var(--ztc-text-text-3) !important; transition: all 0.4s; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li a { font-family: var(--ztc-family-font1); font-weight: var(--ztc-weight-medium); transition: all 0.4s; padding: 8px; display: block; position: relative; z-index: 1; border-radius: 4px; color: var(--ztc-text-text-3); } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li a::after { position: absolute; content: ""; height: 25px; width: 3px; transition: all 0.4s; z-index: -1; left: -10px; top: 20%; border-radius: 4px; display: inline-block; visibility: hidden; opacity: 0; background: var(--ztc-text-text-3); } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li a:hover { padding-left: 25px; color: var(--ztc-text-text-3) !important; } .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li a:hover::after { border-radius: 4px; visibility: visible; transition: all 0.4s; opacity: 1; left: 0; } .header-area.homepage1.sticky { position: fixed; top: 0; left: 0; width: 100%; transform: translate3d(0, 0, 0); z-index: 111; animation-name: fade-in-down; animation-duration: 1s; animation-fill-mode: forwards; background: var(--ztc-text-text-2); transition: all 0.4s; padding: 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; } .header-area.homepage1.sticky .header-elements { padding: 0; transition: all 0.4s; background: none; } .homepage2-body, html { overflow-x: hidden !important; } .homepage2-body { overflow-x: hidden; } .homepage2-body .header-area.homepage2.single-page2 nav#navbar-example2 { display: block !important; padding: 0 !important; } .homepage2-body .header-area.homepage2.single-page2 .header-elements .main-menu ul li a.nav-link.active::after { width: 50% !important; } .homepage2-body .header-area.homepage2.single-page2 .header-elements .main-menu .tp-submenu { left: -370px; } .homepage2-body .header-area.homepage2 { position: absolute; width: 100%; z-index: 9999; padding: 16px 0; transition: all 0.4s; background: var(--ztc-bg-bg-8); height: 108px; } .homepage2-body .header-area.homepage2 .header-top-area { display: flex; align-items: center; justify-content: space-between; transition: all 0.4s; } .homepage2-body .header-area.homepage2 .header-top-area .other-links-area a { color: var(--ztc-text-text-6); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; display: inline-block; } .homepage2-body .header-area.homepage2 .header-top-area .other-links-area a img { margin: 0 8px 0 0; } .homepage2-body .header-area.homepage2 .header-elements { display: flex; align-items: center; justify-content: space-between; position: relative; transition: all 0.4s; background: var(--ztc-bg-bg-1); padding: 24px; border-radius: 4px; height: 82px; top: 24px; } .homepage2-body .header-area.homepage2 .header-elements .main-menu { position: relative; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li { display: inline-block; position: relative; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu { background: var(--ztc-text-text-1) !important; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb { transition: all 0.4s; position: relative; z-index: 1; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb:hover .img1::after { transform: scale(1); transition: all 0.4s; visibility: visible; opacity: 0.7; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb:hover .homemenu-btn { top: 38%; visibility: visible; opacity: 1; transition: all 0.6s; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1 { position: relative; z-index: 1; overflow: hidden; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1::after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; transition: all 0.4s; background: var(--ztc-text-text-7); opacity: 0; border-radius: 4px; transform: scale(0.8); z-index: 1; visibility: hidden; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1 img { height: 100%; width: 100%; border-radius: 4px; transition: all 0.4s; border: 1px solid #E5E7EB; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn { position: absolute; top: 30%; z-index: 2; visibility: hidden; opacity: 0; text-align: center; transition: all 0.6s; margin: 0 auto; left: 20%; right: 20%; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn1 { display: inline-block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-bold); background: var(--ztc-bg-bg-1); color: var(--ztc-text-text-7); transition: all 0.4s; border-radius: 4px; padding: 16px 20px; position: relative; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn1 i { margin-left: 4px; transform: rotate(-45deg); } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn1:hover { color: var(--ztc-text-text-3); transition: all 0.4s; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn1:hover::after { top: 0; left: 0; transition: all 0.4s; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn1::after { position: absolute; content: ""; height: 100%; width: 100%; left: 4px; transition: all 0.4s; top: -4px; border: 1px solid var(--ztc-text-text-1); background: none !important; border-radius: 4px; z-index: -1; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu .homemenu-content a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); line-height: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-7); transition: all 0.4s; margin-top: 20px; text-align: center; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li:hover .tp-submenu { visibility: visible; transition: all 0.5s ease-in-out; opacity: 1; z-index: 9; position: absolute; transition: all 0.4s; transform: scale(1); top: 202.3%; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li:hover ul.dropdown-padding { visibility: visible; transition: all 0.5s ease-in-out; opacity: 1; z-index: 9; top: 202.3%; transform: scale(1); position: absolute; transition: all 0.4s; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-7); line-height: var(--ztc-font-size-font-s18); display: inline-block; transition: all 0.4s; padding: 0 20px; position: relative; z-index: 1; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li a i.fa-solid.fa-angle-down { font-size: 12px; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li a:hover::after { width: 60%; transition: all 0.4s; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li a::after { position: absolute; content: ""; height: 1px; width: 0; left: 20px; bottom: 0; transition: all 0.4s; background: var(--ztc-bg-bg-7); } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li:hover > a { transition: all 0.4s; color: var(--ztc-bg-bg-7) !important; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li:hover > a::after { width: 60%; left: 20px; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li .tp-submenu { visibility: hidden; opacity: 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; position: absolute; background: var(--ztc-text-text-1); z-index: 1; transition: all 0.4s; border-radius: 5px; padding: 15px; left: -340px; width: 1300px; overflow: hidden; transform-origin: top; display: block; top: 202.3%; transform: scale(1, 0); } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li ul.dropdown-padding { visibility: hidden; opacity: 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; position: absolute; background: var(--ztc-text-text-1); width: 225px; z-index: 1; transition: all 0.4s; border-radius: 5px; padding: 15px; top: 201.3%; transform: scale(1, 0); display: block; transform-origin: top; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu { position: relative; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu:hover > a { transition: all 0.4s; padding-left: 25px; color: var(--ztc-text-text-3) !important; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu:hover > a::after { background: var(--ztc-text-text-3); transition: all 0.4s; visibility: visible; opacity: 1; color: var(--ztc-text-text-3); } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li ul.dropdown-padding li { display: block; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li ul.dropdown-padding li a { font-family: var(--ztc-family-font1); font-weight: var(--ztc-weight-medium); transition: all 0.4s; padding: 8px; display: block; position: relative; z-index: 1; border-radius: 4px; color: var(--ztc-text-text-7); } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li ul.dropdown-padding li a::after { position: absolute; content: ""; height: 25px; width: 3px; transition: all 0.4s; z-index: -1; left: -10px; top: 20%; border-radius: 4px; display: inline-block; visibility: hidden; opacity: 0; background: var(--ztc-bg-bg-7); } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li ul.dropdown-padding li a:hover { padding-left: 25px; color: var(--ztc-bg-bg-7) !important; } .homepage2-body .header-area.homepage2 .header-elements .main-menu ul li ul.dropdown-padding li a:hover::after { border-radius: 4px; visibility: visible; transition: all 0.4s; opacity: 1; left: 0; } .header-area.homepage2.sticky { position: fixed; top: 0; left: 0; width: 100%; transform: translate3d(0, 0, 0); z-index: 111; animation-name: fade-in-down; animation-duration: 1s; animation-fill-mode: forwards; background: var(--ztc-text-text-1); transition: all 0.4s; padding: 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; height: auto; } .header-area.homepage2.sticky .header-top-area { display: none; transition: all 0.4s; } .header-area.homepage2.sticky .header-elements { padding: 0; transition: all 0.4s; background: none; top: 0; } .homepage3-body, html { overflow-x: hidden !important; } .homepage3-body { overflow-x: hidden; } .homepage3-body .header-area.homepage3.single-page3 nav#navbar-example2 { display: block !important; padding: 0 !important; } .homepage3-body .header-area.homepage3.single-page3 .header-elements .main-menu ul li a.nav-link.active { color: var(--ztc-text-text-9); } .homepage3-body .header-area.homepage3.single-page3 .header-elements .main-menu ul li a.nav-link.active::after { width: 50% !important; } .homepage3-body .header-area.homepage3.single-page3 .header-elements .main-menu .tp-submenu { left: -370px; } .homepage3-body .header-area.homepage3 { position: absolute; width: 100%; z-index: 9999; padding: 16px 0; transition: all 0.4s; } .homepage3-body .header-area.homepage3 .header-elements { display: flex; align-items: center; justify-content: space-between; position: relative; transition: all 0.4s; border-radius: 4px; } .homepage3-body .header-area.homepage3 .header-elements .main-menu { position: relative; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li { display: inline-block; position: relative; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu { background: var(--ztc-text-text-1) !important; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb { transition: all 0.4s; position: relative; z-index: 1; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb:hover .img1::after { transform: scale(1); transition: all 0.4s; visibility: visible; opacity: 0.7; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb:hover .homemenu-btn { top: 38%; visibility: visible; opacity: 1; transition: all 0.6s; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1 { position: relative; z-index: 1; overflow: hidden; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1::after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; transition: all 0.4s; background: var(--ztc-text-text-10); opacity: 0; border-radius: 4px; transform: scale(0.8); z-index: 1; visibility: hidden; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1 img { height: 100%; width: 100%; border-radius: 4px; transition: all 0.4s; border: 1px solid #E5E7EB; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn { position: absolute; top: 30%; z-index: 2; visibility: hidden; opacity: 0; text-align: center; transition: all 0.6s; margin: 0 auto; left: 20%; right: 20%; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn1 { display: inline-block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-bold); background: var(--ztc-bg-bg-1); color: var(--ztc-text-text-7); transition: all 0.4s; border-radius: 4px; padding: 16px 20px; position: relative; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn1 i { margin-left: 4px; transform: rotate(-45deg); } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn1:hover { color: var(--ztc-text-text-3); transition: all 0.4s; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn1:hover::after { top: 0; left: 0; transition: all 0.4s; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn1::after { position: absolute; content: ""; height: 100%; width: 100%; left: 4px; transition: all 0.4s; top: -4px; border: 1px solid var(--ztc-text-text-1); background: none !important; border-radius: 4px; z-index: -1; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-content a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); line-height: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-7); transition: all 0.4s; margin-top: 20px; text-align: center; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu .homemenu-content a:hover { color: var(--ztc-bg-bg-11); transition: all 0.4s; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li:hover .tp-submenu { visibility: visible; transition: all 0.5s ease-in-out; opacity: 1; z-index: 9; position: absolute; transition: all 0.4s; top: 201.3%; transform: scale(1); } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li:hover ul.dropdown-padding { visibility: visible; transition: all 0.5s ease-in-out; opacity: 1; z-index: 9; top: 201.3%; transform: scale(1); position: absolute; transition: all 0.4s; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-1); line-height: var(--ztc-font-size-font-s18); display: inline-block; transition: all 0.4s; padding: 0 20px; position: relative; z-index: 1; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li a i.fa-solid.fa-angle-down { font-size: 12px; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li a:hover::after { width: 60%; transition: all 0.4s; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li a::after { position: absolute; content: ""; height: 1px; width: 0; left: 20px; bottom: 0; transition: all 0.4s; background: var(--ztc-bg-bg-11); } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li:hover > a { transition: all 0.4s; color: var(--ztc-text-text-9) !important; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li:hover > a::after { width: 60%; left: 20px; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li .tp-submenu { visibility: hidden; opacity: 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; position: absolute; background: var(--ztc-text-text-1); z-index: 1; transition: all 0.4s; border-radius: 5px; padding: 15px; left: -340px; width: 1300px; overflow: hidden; top: 201.3%; transform: scale(1, 0); transform-origin: top; display: block; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li ul.dropdown-padding { visibility: hidden; opacity: 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; position: absolute; background: var(--ztc-text-text-1); width: 225px; z-index: 1; transition: all 0.4s; border-radius: 5px; padding: 15px; top: 201.3%; transform: scale(1, 0); display: block; transform-origin: top; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu { position: relative; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu:hover > a { transition: all 0.4s; padding-left: 25px; color: var(--ztc-text-text-9) !important; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu:hover > a::after { background: var(--ztc-text-text-9); transition: all 0.4s; visibility: visible; opacity: 1; color: var(--ztc-text-text-3); } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li ul.dropdown-padding li { display: block; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li ul.dropdown-padding li a { font-family: var(--ztc-family-font1); font-weight: var(--ztc-weight-medium); transition: all 0.4s; padding: 8px; display: block; position: relative; z-index: 1; border-radius: 4px; color: var(--ztc-text-text-10); } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li ul.dropdown-padding li a::after { position: absolute; content: ""; height: 25px; width: 3px; transition: all 0.4s; z-index: -1; left: -10px; top: 20%; border-radius: 4px; display: inline-block; visibility: hidden; opacity: 0; background: var(--ztc-bg-bg-11); } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li ul.dropdown-padding li a:hover { padding-left: 25px; color: var(--ztc-bg-bg-11) !important; } .homepage3-body .header-area.homepage3 .header-elements .main-menu ul li ul.dropdown-padding li a:hover::after { border-radius: 4px; visibility: visible; transition: all 0.4s; opacity: 1; left: 0; } .header-area.homepage3.sticky { position: fixed; top: 0; left: 0; width: 100%; transform: translate3d(0, 0, 0); z-index: 111; animation-name: fade-in-down; animation-duration: 1s; animation-fill-mode: forwards; background: var(--ztc-text-text-10); transition: all 0.4s; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; height: auto; } .homepage4-body, html { overflow-x: hidden !important; } .homepage4-body { overflow-x: hidden; } .homepage4-body .header-area.homepage4.single-page4 nav#navbar-example2 { display: block !important; padding: 0 !important; } .homepage4-body .header-area.homepage4.single-page4 .header-elements .main-menu ul li a.nav-link.active { color: var(--ztc-text-text-13); } .homepage4-body .header-area.homepage4.single-page4 .header-elements .main-menu ul li a.nav-link.active::after { width: 50% !important; } .homepage4-body .header-area.homepage4.single-page4 .header-elements .main-menu .tp-submenu { left: -370px; } .homepage4-body .header-area.homepage4 { position: absolute; width: 100%; z-index: 9999; padding: 16px 0; transition: all 0.4s; } .homepage4-body .header-area.homepage4 .header-elements { display: flex; align-items: center; justify-content: space-between; position: relative; transition: all 0.4s; border-radius: 4px; } .homepage4-body .header-area.homepage4 .header-elements .main-menu { position: relative; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li { display: inline-block; position: relative; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu { background: var(--ztc-text-text-1) !important; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb { transition: all 0.4s; position: relative; z-index: 1; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb:hover .img1::after { transform: scale(1); transition: all 0.4s; visibility: visible; opacity: 0.7; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb:hover .homemenu-btn { top: 38%; visibility: visible; opacity: 1; transition: all 0.6s; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1 { position: relative; z-index: 1; overflow: hidden; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1::after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; transition: all 0.4s; background: #000; opacity: 0; border-radius: 4px; transform: scale(0.8); z-index: 1; visibility: hidden; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .img1 img { height: 100%; width: 100%; border-radius: 4px; transition: all 0.4s; border: 1px solid #E5E7EB; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn { position: absolute; top: 30%; z-index: 2; visibility: hidden; opacity: 0; text-align: center; transition: all 0.6s; margin: 0 auto; left: 20%; right: 20%; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn5 { display: inline-block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-bold); background: var(--ztc-text-text-13) !important; color: var(--ztc-text-text-1); transition: all 0.4s; border-radius: 50px; padding: 16px 20px; position: relative; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn5 i { margin-left: 4px; transform: rotate(-45deg); } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn5:hover { color: var(--ztc-text-text-1); transition: all 0.4s; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn5:hover::after { top: 0; left: 0; transition: all 0.4s; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-thumb .homemenu-btn .header-btn5::after { position: absolute; content: ""; height: 100%; width: 100%; left: 4px; transition: all 0.4s; top: -4px; border: 1px solid var(--ztc-text-text-13); border-radius: 50px; z-index: 1; background: none !important; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-content a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); line-height: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-11); transition: all 0.4s; margin-top: 20px; text-align: center; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu .homemenu-content a:hover { color: var(--ztc-text-text-13); transition: all 0.4s; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li:hover .tp-submenu { visibility: visible; transition: all 0.5s ease-in-out; opacity: 1; z-index: 9; position: absolute; transition: all 0.4s; top: 201.3%; transform: scale(1); } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li:hover ul.dropdown-padding { visibility: visible; transition: all 0.5s ease-in-out; opacity: 1; z-index: 9; top: 201.3%; transform: scale(1); position: absolute; transition: all 0.4s; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-11); line-height: var(--ztc-font-size-font-s18); display: inline-block; transition: all 0.4s; padding: 0 20px; position: relative; z-index: 1; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li a i.fa-solid.fa-angle-down { font-size: 12px; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li a:hover::after { width: 60%; transition: all 0.4s; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li a::after { position: absolute; content: ""; height: 1px; width: 0; left: 20px; bottom: 0; transition: all 0.4s; background: var(--ztc-text-text-13); } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li:hover > a { transition: all 0.4s; color: var(--ztc-text-text-13) !important; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li:hover > a::after { width: 60%; left: 20px; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li .tp-submenu { visibility: hidden; opacity: 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; position: absolute; background: var(--ztc-text-text-1); top: 201.3%; transform: scale(1, 0); z-index: 1; transition: all 0.4s; border-radius: 5px; padding: 15px; left: -340px; width: 1300px; overflow: hidden; transform-origin: top; display: block; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li ul.dropdown-padding { visibility: hidden; opacity: 0; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; position: absolute; background: var(--ztc-text-text-1); top: 201.3%; transform: scale(1, 0); width: 225px; z-index: 1; transition: all 0.4s; border-radius: 5px; padding: 15px; display: block; transform-origin: top; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu { position: relative; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu:hover > a { transition: all 0.4s; padding-left: 25px; color: var(--ztc-text-text-13) !important; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li ul.dropdown-padding li.main-small-menu:hover > a::after { background: var(--ztc-text-text-13); transition: all 0.4s; visibility: visible; opacity: 1; color: var(--ztc-text-text-11); } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li ul.dropdown-padding li { display: block; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li ul.dropdown-padding li a { font-family: var(--ztc-family-font1); font-weight: var(--ztc-weight-medium); transition: all 0.4s; padding: 8px; display: block; position: relative; z-index: 1; border-radius: 4px; color: var(--ztc-text-text-11); } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li ul.dropdown-padding li a::after { position: absolute; content: ""; height: 25px; width: 3px; transition: all 0.4s; z-index: -1; left: -10px; top: 20%; border-radius: 4px; display: inline-block; visibility: hidden; opacity: 0; background: var(--ztc-text-text-13); } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li ul.dropdown-padding li a:hover { padding-left: 25px; color: var(--ztc-text-text-13) !important; } .homepage4-body .header-area.homepage4 .header-elements .main-menu ul li ul.dropdown-padding li a:hover::after { border-radius: 4px; visibility: visible; transition: all 0.4s; opacity: 1; left: 0; } .header-area.homepage4.sticky { position: fixed; top: 0; left: 0; width: 100%; transform: translate3d(0, 0, 0); z-index: 111; animation-name: fade-in-down; animation-duration: 1s; animation-fill-mode: forwards; background: var(--ztc-text-text-1); transition: all 0.4s; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px; height: auto; } /*============= HEADER CSS AREA ENDS ===============*/ /*============= WORK CSS AREA ===============*/ .wroks4-section-area { position: relative; z-index: 1; } .wroks4-section-area .works-images img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .wroks4-section-area .works-content-area { padding: 0 0 0 50px; } @media (max-width: 767px) { .wroks4-section-area .works-content-area { padding: 0; margin-top: 30px; text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .wroks4-section-area .works-content-area { padding: 0; margin-top: 30px; text-align: center; } } .wroks4-section-area .works-content-area .step-auhtor-area { position: relative; z-index: 1; } .wroks4-section-area .works-content-area .step-auhtor-area .step-boxarea.after::before { display: none; } .wroks4-section-area .works-content-area .step-auhtor-area .step-boxarea { position: relative; z-index: 1; padding-left: 50px; } .wroks4-section-area .works-content-area .step-auhtor-area .step-boxarea:hover::after { background: var(--ztc-text-text-13); transition: all 0.4s; opacity: 1; } .wroks4-section-area .works-content-area .step-auhtor-area .step-boxarea::before { position: absolute; content: ""; height: 100%; width: 1px; border: 1px dashed var(--ztc-text-text-12); left: 9px; top: 22px; z-index: -1; opacity: 0.2; } .wroks4-section-area .works-content-area .step-auhtor-area .step-boxarea::after { position: absolute; content: ""; height: 20px; width: 20px; border-radius: 50%; transition: all 0.4s; background: var(--ztc-text-text-13); opacity: 0.2; top: 0; left: 0; z-index: 1; } .wroks4-section-area .works-content-area .step-auhtor-area .step-boxarea a { color: var(--ztc-text-text-11); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; display: inline-block; margin-bottom: 16px; transition: all 0.4s; } .wroks4-section-area .works-content-area .step-auhtor-area .step-boxarea a:hover { color: var(--ztc-text-text-13); transition: all 0.4s; } .work4-section-area .work4-header { padding: 0 30px 0 0; } @media (max-width: 767px) { .work4-section-area .work4-header { padding: 0; margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .work4-section-area .work4-header { padding: 0; margin-bottom: 30px; } } .work4-section-area .work-accordian-area .accordion .accordion-item { border-top: 1px solid #E8E6E7; border-bottom: 1px solid #E8E6E7; position: relative; padding: 24px 0; } .work4-section-area .work-accordian-area .accordion .accordion-item button { background: none; box-shadow: none; border: none; padding: 0; color: var(--ztc-text-text-11); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; transition: all 0.4s; } .work4-section-area .work-accordian-area .accordion .accordion-item button::after { height: 13px; width: 2px; background: var(--ztc-text-text-11); display: inline-block; content: ""; visibility: visible; opacity: 1; transition: all 0.4s; } .work4-section-area .work-accordian-area .accordion .accordion-item button::before { height: 13px; width: 2px; background: var(--ztc-text-text-11); display: inline-block; content: ""; position: absolute; z-index: 2; right: 0; top: 6px; transform: rotate(-90deg); transition: all 0.4s; } @media (max-width: 767px) { .work4-section-area .work-accordian-area .accordion .accordion-item button::before { top: 18px; } } .work4-section-area .work-accordian-area .accordion .accordion-item .accordion-button:not(.collapsed)::after { visibility: hidden; opacity: 0; transition: all 0.4s; } .work4-section-area .work-accordian-area .accordion .accordion-item .accordion-body { padding: 0; color: var(--ztc-text-text-12); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; transition: all 0.4s; padding-top: 16px; } /*============= WORK CSS AREA ===============*/ /*============= OTHERS CSS AREA STARTS ===============*/ .preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999999999; background-color: var(--ztc-text-text-1); display: flex; align-items: center; justify-content: center; } .preloader2 { background: var(--ztc-bg-bg-1) !important; } .preloader3 { background: var(--ztc-text-text-5) !important; } .preloader4 { background: var(--ztc-bg-bg-7) !important; } .loading-container, .loading { height: 100px; position: relative; width: 100px; border-radius: 100%; } .loading-container { margin: 40px auto; } .loading { border: 1px solid transparent; border-color: transparent var(--ztc-text-text-2) transparent var(--ztc-text-text-2); animation: rotate-loading 1.5s linear 0s infinite normal; transform-origin: 50% 50%; } .preloader2 .loading { border-color: transparent var(--ztc-bg-bg-7) transparent var(--ztc-bg-bg-7) !important; border: 1px solid transparent; animation: rotate-loading 1.5s linear 0s infinite normal; transform-origin: 50% 50%; } .preloader2 #loading-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 50px; width: 50px; animation: inherit !important; } .loading-container:hover .loading, .loading-container .loading { transition: all 0.5s ease-in-out; } #loading-icon { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); height: 80px; width: 80px; animation: move 2s linear 0s infinite normal; } @media (max-width: 767px) { #loading-icon { left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { #loading-icon { left: 0; } } @keyframes rotate-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Moving animation */ @keyframes move { 0% { transform: translateX(-20px) rotate(-15deg); } 50% { transform: translateX(20px) rotate(15deg); } 100% { transform: translateX(-20px) rotate(-15deg); } } .ctn-preloader { align-items: center; cursor: default; display: flex; height: 100%; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; z-index: 99999; } .ctn-preloader .animation-preloader { z-index: 1000; } .ctn-preloader .animation-preloader .txt-loading { font: bold 5em var(--ztc-family-font1); text-align: center; -webkit-user-select: none; -moz-user-select: none; user-select: none; position: relative; top: 70px; left: 50px; } @media (max-width: 767px) { .ctn-preloader .animation-preloader .txt-loading { left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .ctn-preloader .animation-preloader .txt-loading { left: 0; } } .ctn-preloader .animation-preloader .txt-loading .letters-loading { color: rgba(0, 0, 0, 0.2); position: relative; } .ctn-preloader .animation-preloader .txt-loading .letters-loading:before { animation: letters-loading 4s infinite; color: #000000; content: attr(data-text-preloader); left: 0; opacity: 0; font-family: var(--ztc-family-font1); position: absolute; top: -3px; transform: rotateY(-90deg); } .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before { animation-delay: 0.2s; } .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before { animation-delay: 0.4s; } .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before { animation-delay: 0.6s; } .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before { animation-delay: 0.8s; } .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before { animation-delay: 1s; } .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before { animation-delay: 1.2s; } .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before { animation-delay: 1.4s; } .ctn-preloader.dark .animation-preloader .spinner { border-color: rgba(255, 255, 255, 0.2); border-top-color: #fff; } .ctn-preloader.dark .animation-preloader .txt-loading .letters-loading { color: rgba(255, 255, 255, 0.2); } .ctn-preloader.dark .animation-preloader .txt-loading .letters-loading:before { color: #fff; } .ctn-preloader p { font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 8px; color: #3b3b3b; } .ctn-preloader .loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; font-size: 0; z-index: 1; pointer-events: none; } .ctn-preloader .loader .row { height: 100%; } .ctn-preloader .loader .loader-section { padding: 0px; } .ctn-preloader .loader .loader-section .bg { background-color: #ffffff; height: 100%; left: 0; width: 100%; transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); } .ctn-preloader .loader.dark_bg .loader-section .bg { background: #111339; } .ctn-preloader.loaded .animation-preloader { opacity: 0; transition: 0.3s ease-out; } .ctn-preloader.loaded .loader-section .bg { width: 0; transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1); } @keyframes spinner { to { transform: rotateZ(360deg); } } @keyframes letters-loading { 0%, 75%, 100% { opacity: 0; transform: rotateY(-90deg); } 25%, 50% { opacity: 1; transform: rotateY(0deg); } } @media screen and (max-width: 767px) { .ctn-preloader .animation-preloader .spinner { height: 8em; width: 8em; } .ctn-preloader .animation-preloader .txt-loading { font: bold 3.5em "Roboto", sans-serif; } } @media screen and (max-width: 500px) { .ctn-preloader .animation-preloader .spinner { height: 7em; width: 7em; } .ctn-preloader .animation-preloader .txt-loading { font: bold 2em "Roboto", sans-serif; } } .others4-section-area { position: relative; z-index: 1; background: var(--ztc-bg-bg-15); } .others4-section-area .elements28 { position: absolute; } .others4-section-area .others-header { margin-bottom: 60px; } @media (max-width: 767px) { .others4-section-area .others-header { margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .others4-section-area .others-header { margin-bottom: 30px; } } .others4-section-area .shop-auhtor-area { position: relative; overflow: hidden; transition: all 0.4s; border-radius: 4px; margin-bottom: 30px; } .others4-section-area .shop-auhtor-area:hover .img1::after { visibility: visible; opacity: 0.7; transition: all 0.4s; transform: scale(1); } .others4-section-area .shop-auhtor-area:hover .img1 img { transform: scale(1.1) rotate(4deg); transition: all 0.4s; } .others4-section-area .shop-auhtor-area:hover .content-area { visibility: visible; opacity: 1; top: 46%; transition: all 0.6s; } .others4-section-area .shop-auhtor-area .img1 { position: relative; z-index: 1; overflow: hidden; border-radius: 4px; transition: all 0.4s; } .others4-section-area .shop-auhtor-area .img1::after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; border-radius: 4px; transition: all 0.4s; background: var(--ztc-text-text-11); transform: scale(0.8); visibility: hidden; opacity: 0; } .others4-section-area .shop-auhtor-area .img1 img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px; transition: all 0.4s; } .others4-section-area .shop-auhtor-area .content-area { text-align: center; position: absolute; top: 30%; z-index: 2; margin: 0 auto; transition: all 0.6s; left: 25%; right: 25%; visibility: hidden; opacity: 0; } .others4-section-area .shop-auhtor-area .content-area ul li { display: inline-block; } .others4-section-area .shop-auhtor-area .content-area ul li a { height: 50px; width: 50px; text-align: center; line-height: 50px; display: inline-block; border-radius: 50%; background: var(--ztc-bg-bg-1); transition: all 0.4s; } .others4-section-area .shop-auhtor-area .content-area ul li a img { transition: all 0.4s; } .others4-section-area .shop-auhtor-area .content-area ul li a:hover { background: var(--ztc-text-text-13); transition: all 0.4s; } .others4-section-area .shop-auhtor-area .content-area ul li a:hover img { filter: brightness(0) invert(1); transition: all 0.4s; } /*============= COUNTER CSS AREA STARTS ===============*/ .counter-section-area { position: relative; z-index: 1; padding: 60px 0 30px; background: var(--ztc-bg-bg-6); } .counter-section-area .counter-boxarea { text-align: center; background: var(--ztc-bg-bg-1); padding: 48px; border-radius: 4px; transition: all 0.4s; margin-bottom: 30px; } .counter-section-area .counter-boxarea:hover { background: var(--ztc-bg-bg-2); transition: all 0.4s; transform: translateY(-5px); } .counter-section-area .counter-boxarea:hover h2 { color: var(--ztc-bg-bg-1); transition: all 0.4s; } .counter-section-area .counter-boxarea:hover p { color: var(--ztc-bg-bg-1); transition: all 0.4s; } .counter-section-area .counter-boxarea h2 { margin-bottom: 10px !important; transition: all 0.4s; } .counter-section-area .counter-boxarea p { transition: all 0.4s; } .progress-wrap { position: fixed; right: 30px; bottom: 30px; height: 56px; width: 56px; cursor: pointer; display: block; border-radius: 50px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1); z-index: 10000; opacity: 0; visibility: hidden; transform: translateY(15px); transition: all 200ms linear; } .progress-wrap:hover { background: var(--ztc-text-text-2); transform: translateY(-5px); box-shadow: 0 0 15px 0 var(--ztc-text-text-16); transition: all 0.4s ease-in-out; color: var(--ztc-text-text-1); } .progress-wrap.active-progress { opacity: 1; visibility: visible; transform: translateY(0); } .progress-wrap::after { position: absolute; font-family: "FontAwesome"; content: "\f062"; text-align: center; line-height: 56px; font-size: 18px; color: var(--ztc-text-text-2); left: 0; top: 0; height: 56px; width: 56px; cursor: pointer; display: block; z-index: 1; transition: all 200ms linear; border-radius: 50%; } .progress-wrap:hover::after { opacity: 0; } .progress-wrap::before { position: absolute; font-family: "FontAwesome"; content: "\f062"; text-align: center; line-height: 56px; font-size: 18px; opacity: 0; left: 0; top: 0; height: 56px; width: 56px; cursor: pointer; display: block; z-index: 2; transition: all 200ms linear; } .progress-wrap:hover::before { opacity: 1; } .progress-wrap svg path { fill: none; } .progress-wrap svg.progress-circle path { stroke: var(--ztc-text-text-2); stroke-width: 4; box-sizing: border-box; transition: all 200ms linear; } .progress-wrap.active-progress { opacity: 1; visibility: visible; transform: translateY(0); } .others-inner-section-area { position: relative; z-index: 1; background: var(--ztc-text-text-3); } .others-inner-section-area .others-boxarea { position: relative; background: var(--ztc-bg-bg-1); border-radius: 4px; padding: 24px 24px 24px 40px; transition: all 0.4s; } .others-inner-section-area .others-boxarea:hover { background: var(--ztc-bg-bg-2); transition: all 0.4s; transform: translateY(-5px); } .others-inner-section-area .others-boxarea:hover .icons { background: var(--ztc-bg-bg-1); transition: all 0.4s; } .others-inner-section-area .others-boxarea:hover .icons::after { background: var(--ztc-bg-bg-1); opacity: 0.1; } .others-inner-section-area .others-boxarea:hover .icons span { color: var(--ztc-bg-bg-2); transition: all 0.4s; } .others-inner-section-area .others-boxarea:hover .content a { color: var(--ztc-bg-bg-1); transition: all 0.4s; } .others-inner-section-area .others-boxarea:hover .content p { color: var(--ztc-bg-bg-1); transition: all 0.4s; opacity: 0.8; } .others-inner-section-area .others-boxarea .icons { height: 30px; width: 30px; text-align: center; line-height: 30px; border-radius: 50%; display: inline-block; transition: all 0.4s; background: var(--ztc-bg-bg-2); position: absolute; top: 35px; z-index: 1; } .others-inner-section-area .others-boxarea .icons::after { position: absolute; content: ""; height: 60px; width: 60px; text-align: center; display: inline-block; background: var(--ztc-bg-bg-2); opacity: 0.2; transition: all 0.4s; border-radius: 50%; top: -15px; left: -15px; z-index: -1; } .others-inner-section-area .others-boxarea .icons span { color: var(--ztc-text-text-1); transition: all 0.4s; } .others-inner-section-area .others-boxarea .content { padding-left: 60px; } .others-inner-section-area .others-boxarea .content a { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); display: inline-block; transition: all 0.4s; margin-bottom: 12px; line-height: 24px; } .others-inner-section-area .others-boxarea .content p { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; transition: all 0.4s; } .others-inner-section-area .other-content-area { padding: 0 0 0 70px; } @media (max-width: 767px) { .others-inner-section-area .other-content-area { padding: 0; margin-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .others-inner-section-area .other-content-area { padding: 0; margin-top: 30px; } } .others-inner-section-area .other-content-area h5 { color: var(--ztc-bg-bg-1); transition: all 0.4s; border-radius: 4px; background: rgba(255, 255, 255, 0.1); } .others-inner-section-area .other-content-area h2 { color: var(--ztc-bg-bg-1); } .others-inner-section-area .other-content-area p { color: var(--ztc-text-text-1); opacity: 80%; } .history-inner-section-area { position: relative; z-index: 1; background: var(--ztc-bg-bg-6); overflow: hidden; } .history-inner-section-area .history-header { margin-bottom: 60px; } @media (max-width: 767px) { .history-inner-section-area .history-header { margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .history-inner-section-area .history-header { margin-bottom: 30px; } } .history-inner-section-area .history-tabs-area ul { justify-content: center; margin-bottom: 60px; } @media (max-width: 767px) { .history-inner-section-area .history-tabs-area ul { margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .history-inner-section-area .history-tabs-area ul { margin-bottom: 30px; } } @media (max-width: 767px) { .history-inner-section-area .history-tabs-area ul li { width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .history-inner-section-area .history-tabs-area ul li { margin-bottom: 10px; } } .history-inner-section-area .history-tabs-area ul li button { color: var(--ztc-text-text-3); text-align: center; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 18px; display: inline-block; padding: 15px 40px; border-radius: 4px; transition: all 0.4s; background: var(--ztc-bg-bg-1); margin: 0 20px 0 0; } .history-inner-section-area .history-tabs-area ul li button.active { background: var(--ztc-bg-bg-2); color: var(--ztc-bg-bg-1); } @media (max-width: 767px) { .history-inner-section-area .history-tabs-area ul li button { display: block; width: 100%; margin-bottom: 10px; } } .history-inner-section-area .history-tabs-area .tab-content .tab-pane { position: relative; top: 200px; transition: all 0.4s; } .history-inner-section-area .history-tabs-area .tab-content .tab-pane .images img { height: 420px; width: 100%; border-radius: 4px; -o-object-fit: cover; object-fit: cover; } @media (max-width: 767px) { .history-inner-section-area .history-tabs-area .tab-content .tab-pane .images img { height: 100%; width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .history-inner-section-area .history-tabs-area .tab-content .tab-pane .images img { height: 100%; } } .history-inner-section-area .history-tabs-area .tab-content .tab-pane .tabs-content-area { background: var(--ztc-bg-bg-1); padding: 60px 40px; border-radius: 4px; } @media (max-width: 767px) { .history-inner-section-area .history-tabs-area .tab-content .tab-pane .tabs-content-area { padding: 30px; width: 100%; } } .history-inner-section-area .history-tabs-area .tab-content .tab-pane .tabs-content-area p span { font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-3); display: inline-block; } .history-inner-section-area .history-tabs-area .tab-content .tab-pane.fade.show { top: 0; transition: all 0.4s; } /*============= OTHERS CSS AREA ENDS ===============*/ /*============= TEAM CSS AREA ===============*/ .team1-section-area .team-header { margin-bottom: 60px; } @media (max-width: 767px) { .team1-section-area .team-header { margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .team1-section-area .team-header { margin-bottom: 30px; } } .team1-section-area .team-boxarea { position: relative; z-index: 1; margin-bottom: 30px; } .team1-section-area .team-boxarea:hover .img1 img { transform: scale(1.1) rotate(4deg); transition: all 0.4s; } .team1-section-area .team-boxarea .img1 { overflow: hidden; border-radius: 4px; transition: all 0.4s; } .team1-section-area .team-boxarea .img1 img { height: 100%; width: 100%; border-radius: 4px; transition: all 0.4s; } .team1-section-area .team-boxarea .content { text-align: center; background: var(--ztc-bg-bg-6); border-radius: 4px; transform: all 0.4s; padding: 24px; margin: 0 20px; margin-top: -75px; position: relative; z-index: 1; } .team1-section-area .team-boxarea .content a { color: var(--ztc-text-text-3); text-align: center; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; display: inline-block; margin-bottom: 12px; } .team1-section-area .team-boxarea .content p { color: var(--ztc-text-text-4); text-align: center; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; transition: all 0.4s; } .team1-section-area .team-boxarea .content ul { margin-top: 24px; } .team1-section-area .team-boxarea .content ul li { display: inline-block; } .team1-section-area .team-boxarea .content ul li a { height: 40px; width: 40px; text-align: center; line-height: 40px; border-radius: 50%; background: var(--ztc-text-text-1); transition: all 0.4s; font-size: var(--ztc-font-size-font-s16); margin: 0 6px 0 0; } .team1-section-area .team-boxarea .content ul li a:hover { background: var(--ztc-text-text-2); transition: all 0.4s; transform: translateY(-3px); color: var(--ztc-text-text-1); } .team2-section-area { position: relative; z-index: 1; } .team2-section-area .team-header { margin-bottom: 60px; } @media (max-width: 767px) { .team2-section-area .team-header { margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .team2-section-area .team-header { margin-bottom: 30px; } } .team2-section-area .team-boxes-area { position: relative; transition: all 0.4s; text-align: center; margin-bottom: 30px; } .team2-section-area .team-boxes-area:hover .team-author-area .team-img { transition: all 0.4s; } .team2-section-area .team-boxes-area:hover .team-author-area .team-img::after { visibility: visible; opacity: 0.5; transition: all 0.4s; transform: scale(1); } .team2-section-area .team-boxes-area:hover .team-author-area .team-img img { transform: scale(1.1); transition: all 0.8s; } .team2-section-area .team-boxes-area:hover .team-author-area .social-links { transition: all 0.6s; bottom: 24px; visibility: visible; opacity: 1; } .team2-section-area .team-boxes-area .team-author-area { overflow: hidden; position: relative; border-radius: 4px; } .team2-section-area .team-boxes-area .team-author-area .team-img { overflow: hidden; border-radius: 4px; transition: all 0.4s; position: relative; z-index: 1; } .team2-section-area .team-boxes-area .team-author-area .team-img::after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; transition: all 0.4s; background: var(--ztc-text-text-7); opacity: 0.5; visibility: hidden; opacity: 0; transform: scale(0.8); } .team2-section-area .team-boxes-area .team-author-area .team-img img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px; transition: all 0.8s; } .team2-section-area .team-boxes-area .team-author-area .social-links { position: absolute; bottom: 100px; z-index: 1; text-align: center; transition: all 0.6s; left: 25%; right: 25%; visibility: hidden; opacity: 0; } @media (max-width: 767px) { .team2-section-area .team-boxes-area .team-author-area .social-links { left: 20%; right: 20%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .team2-section-area .team-boxes-area .team-author-area .social-links { left: 20%; right: 20%; } } .team2-section-area .team-boxes-area .team-author-area .social-links ul li { display: inline-block; } .team2-section-area .team-boxes-area .team-author-area .social-links ul li a { height: 40px; width: 40px; text-align: center; display: inline-block; border-radius: 50%; background: var(--ztc-text-text-1); transition: all 0.4s; line-height: 40px; color: var(--ztc-text-text-7); margin: 0 6px 0 0; } .team2-section-area .team-boxes-area .team-author-area .social-links ul li a:hover { background: var(--ztc-bg-bg-7); transition: all 0.4s; color: var(--ztc-text-text-1); transform: translateY(-3px); } .team2-section-area .team-boxes-area .content { margin-top: 24px; } .team2-section-area .team-boxes-area .content a { color: var(--ztc-text-text-7); text-align: center; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; transition: all 0.4s; margin-bottom: 12px; display: inline-block; } .team2-section-area .team-boxes-area .content a:hover { color: var(--ztc-bg-bg-7); transition: all 0.4s; } .team2-section-area .team-boxes-area .content p { color: var(--ztc-text-text-6); text-align: center; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } /*============= TEAM CSS AREA STARTS ===============*/ /*============= FAQ CSS AREA ===============*/ .faq-section-area { position: relative; z-index: 1; background: var(--ztc-bg-bg-14); border-radius: 0 150px 0 0; } @media (max-width: 767px) { .faq-section-area { border-radius: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .faq-section-area { border-radius: 0; } } .faq-section-area .faq-header-area { margin-bottom: 60px; } @media (max-width: 767px) { .faq-section-area .faq-header-area { margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .faq-section-area .faq-header-area { margin-bottom: 30px; } } .faq-section-area .faq-author-area { padding: 0 50px 0 0; } @media (max-width: 767px) { .faq-section-area .faq-author-area { padding: 0; margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .faq-section-area .faq-author-area { padding: 0; margin-bottom: 30px; } } .faq-section-area .faq-author-area .accordion .accordion-item { border: none; background: var(--ztc-bg-bg-11); border-radius: 4px; } .faq-section-area .faq-author-area .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) { background: none; color: var(--ztc-text-text-1); } .faq-section-area .faq-author-area .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after { filter: brightness(0) invert(1); position: absolute; right: 16px; } .faq-section-area .faq-author-area .accordion .accordion-item .accordion-header button { color: var(--ztc-text-text-10); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 20px; display: inline-block; box-shadow: none; border: none; border-radius: 4px; padding: 20px 16px 16px; } .faq-section-area .faq-author-area .accordion .accordion-item .accordion-header button::after { position: absolute; right: 16px; } .faq-section-area .faq-author-area .accordion .accordion-item .accordion-body { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; padding: 0 16px 20px; opacity: 0.9; } .faq-section-area .faq-images-area { background: var(--ztc-bg-bg-1); border-radius: 4px; } .faq-section-area .faq-images-area .img1 { overflow: hidden; } .faq-section-area .faq-images-area .img1 img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px 0 0 4px; } .faq-section-area .faq-images-area .faq-progress-area { padding: 32px 32px 32px 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .faq-section-area .faq-images-area .faq-progress-area { display: flex; align-items: center; } } @media (max-width: 767px) { .faq-section-area .faq-images-area .faq-progress-area { padding: 32px 0 32px 0; } } .faq-section-area .faq-images-area .faq-progress-area .progresbar { text-align: center; margin: 0 auto; } .faq-section-area .faq-images-area .faq-progress-area .progresbar p { color: var(--ztc-text-text-10); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 30px; transition: all 0.4s; text-align: center; margin-top: 20px; } .faq-section-area .faq-images-area .faq-progress-area .progressbar { width: 120px; height: 120px; text-align: center; margin: 0 auto; transform: rotate(); } .faq-section-area .faq-images-area .faq-progress-area .circle { width: 100%; height: 100%; margin: 0 auto; margin-top: 10px; display: inline-block; position: relative; text-align: center; position: relative; z-index: 1; } .faq-section-area .faq-images-area .faq-progress-area .circle canvas { vertical-align: middle; border-radius: 50%; } .faq-section-area .faq-images-area .faq-progress-area .circle div { position: absolute; top: 15%; left: 15%; width: 100%; color: var(--ztc-text-text-1); text-align: center; font-size: var(--ztc-font-size-font-s32); font-weight: var(--ztc-weight-semibold); font-family: var(--ztc-family-font1); background: var(--ztc-bg-bg-11); height: 85px; width: 85px; display: inline-block; text-align: center; line-height: 85px; border-radius: 50%; } .faq-section-area .faq-images-area .faq-progress-area .circle strong i { font-style: normal; font-size: 0.6em; font-weight: normal; } .faq-section-area .faq-images-area .faq-progress-area .circle span { display: block; color: black; margin-top: 12px; } .faq-section-area .faq-images-area .faq-progress-area .circle:before { position: absolute; top: 65%; right: 17%; font-size: 15px; font-weight: bold; color: var(--ztc-text-text-1); } .faq-inner-area { position: relative; z-index: 1; } .faq-inner-area .faq-accordian-area .accordion .accordion-item { border: none; background: var(--ztc-bg-bg-2); border-radius: 4px; } .faq-inner-area .faq-accordian-area .accordion .accordion-item .accordion-header button { box-shadow: none; border: none; color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-medium); line-height: 20px; display: inline-block; border-radius: 4px; background: #F3F5F7 !important; padding: 20px 16px 16px 20px !important; } .faq-inner-area .faq-accordian-area .accordion .accordion-item .accordion-header button::after { filter: brightness(0); position: absolute; right: 20px; } .faq-inner-area .faq-accordian-area .accordion .accordion-item .accordion-header button:not(.collapsed) { background: none !important; transition: all 0.4s; color: var(--ztc-bg-bg-1); } .faq-inner-area .faq-accordian-area .accordion .accordion-item .accordion-header button:not(.collapsed)::after { filter: brightness(0) invert(1); } .faq-inner-area .faq-accordian-area .accordion .accordion-item .accordion-body { color: var(--ztc-bg-bg-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; padding: 0 16px 20px 20px; opacity: 0.8; } /*============= FAQ CSS AREA ===============*/ /*============= CONTACT CSS AREA ===============*/ .contact1-section-area { position: relative; z-index: 1; background: var(--ztc-bg-bg-8); } .contact1-section-area .contact-header { padding: 0 75px 0 0; } @media (max-width: 767px) { .contact1-section-area .contact-header { padding: 0; margin-bottom: 30px; text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact1-section-area .contact-header { padding: 0; margin-bottom: 30px; text-align: center; } } .contact1-section-area .contact-header h5 { background: var(--ztc-bg-bg-1); } .contact1-section-area .contact-header p { padding-bottom: 32px; border-bottom: 1px solid #BFC1D1; } .contact1-section-area .contact-header .contact-boxarea { margin-top: 32px; position: relative; z-index: 1; } .contact1-section-area .contact-header .contact-boxarea::after { position: absolute; content: ""; height: 100%; width: 1px; background: #BFC1D1; top: 0; right: 60px; } @media (max-width: 767px) { .contact1-section-area .contact-header .contact-boxarea::after { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact1-section-area .contact-header .contact-boxarea::after { right: 0; } } .contact1-section-area .contact-header .contact-boxarea .img1 { height: 70px; width: 70px; text-align: center; line-height: 70px; display: inline-block; border-radius: 50%; background: var(--ztc-bg-bg-10); margin-bottom: 16px; } .contact1-section-area .contact-header .contact-boxarea .content p { padding-bottom: 0; border: none; margin-bottom: 12px; } .contact1-section-area .contact-header .contact-boxarea .content a { color: var(--ztc-text-text-7); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: 600; line-height: var(--ztc-font-size-font-s24); display: inline-block; transition: all 0.4s; } .contact1-section-area .contact-header .contact-boxarea .content a:hover { color: var(--ztc-bg-bg-7); transition: all 0.4s; } .contact1-section-area .contact-header .contact-boxarea1 { margin-top: 32px; } .contact1-section-area .contact-header .contact-boxarea1 .img1 { height: 70px; width: 70px; text-align: center; line-height: 70px; display: inline-block; border-radius: 50%; background: var(--ztc-bg-bg-10); margin-bottom: 16px; } .contact1-section-area .contact-header .contact-boxarea1 .content p { padding-bottom: 0; border: none; margin-bottom: 12px; } .contact1-section-area .contact-header .contact-boxarea1 .content a { color: var(--ztc-text-text-7); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: 600; line-height: var(--ztc-font-size-font-s24); display: inline-block; transition: all 0.4s; } .contact1-section-area .contact-header .contact-boxarea1 .content a:hover { color: var(--ztc-bg-bg-7); transition: all 0.4s; } .contact1-section-area .contact-form-area { position: relative; border-radius: 4px; background: var(--ztc-bg-bg-1); padding: 32px; } .contact1-section-area .contact-form-area h3 { color: var(--ztc-text-text-7); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; margin-bottom: 20px; } .contact1-section-area .contact-form-area p { color: var(--ztc-text-text-6); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; } .contact1-section-area .contact-form-area form .input-area input { width: 100%; background: #F2F2F4; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-7); padding: 19px 16px; height: 56px; margin-top: 20px; } .contact1-section-area .contact-form-area form .input-area input::-moz-placeholder { color: var(--ztc-text-text-7); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; opacity: 0.7; } .contact1-section-area .contact-form-area form .input-area input::placeholder { color: var(--ztc-text-text-7); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; opacity: 0.7; } .contact1-section-area .contact-form-area form .input-area textarea { width: 100%; background: #F2F2F4; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-7); padding: 19px 16px; height: 140px; margin-top: 20px; } .contact1-section-area .contact-form-area form .input-area textarea::-moz-placeholder { color: var(--ztc-text-text-7); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; opacity: 0.7; } .contact1-section-area .contact-form-area form .input-area textarea::placeholder { color: var(--ztc-text-text-7); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; opacity: 0.7; } .contact1-section-area .contact-form-area form .input-area button { border: none; outline: none; margin-top: 32px; } .contact2-section-area { position: relative; z-index: 1; } .contact2-section-area .contact-header { padding: 0 75px 0 0; } @media (max-width: 767px) { .contact2-section-area .contact-header { padding: 0; margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact2-section-area .contact-header { padding: 0; margin-bottom: 30px; } } .contact2-section-area .contact-header .contact-boxarea { margin-top: 48px; position: relative; z-index: 1; } .contact2-section-area .contact-header .contact-boxarea .all-content { display: flex; align-items: center; } .contact2-section-area .contact-header .contact-boxarea .all-content:hover .img1 { background: var(--ztc-bg-bg-11); transition: all 0.4s; } .contact2-section-area .contact-header .contact-boxarea .all-content:hover .img1 img { filter: brightness(0) invert(1); transition: all 0.4s; } .contact2-section-area .contact-header .contact-boxarea .all-content .img1 { height: 48px; width: 48px; text-align: center; line-height: 48px; display: inline-block; border-radius: 4px; background: #FDE6CD; transition: all 0.4s; } .contact2-section-area .contact-header .contact-boxarea .all-content .img1 img { transition: all 0.4s; } .contact2-section-area .contact-header .contact-boxarea .all-content .content { margin-left: 16px; } .contact2-section-area .contact-header .contact-boxarea .all-content .content p { padding-bottom: 0; border: none; margin-bottom: 6px; font-family: var(--ztc-font-size-font-s20); color: var(--ztc-text-text-10); font-weight: var(--ztc-weight-semibold); } .contact2-section-area .contact-header .contact-boxarea .all-content .content a { color: var(--ztc-text-text-10); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: var(--ztc-font-size-font-s18); display: inline-block; transition: all 0.4s; } .contact2-section-area .contact-header .contact-boxarea .all-content .content a:hover { color: var(--ztc-bg-bg-11); transition: all 0.4s; } .contact2-section-area .contact-form-area { position: relative; border-radius: 4px; background: var(--ztc-bg-bg-11); padding: 32px; } .contact2-section-area .contact-form-area h3 { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; margin-bottom: 12px; } .contact2-section-area .contact-form-area p { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); margin-bottom: 12px !important; } .contact2-section-area .contact-form-area form .input-area { margin-top: 20px; } .contact2-section-area .contact-form-area form .input-area input { width: 100%; border-radius: 4px; background: rgba(255, 255, 255, 0.2); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-1); padding: 19px 16px; height: 56px; } .contact2-section-area .contact-form-area form .input-area input::-moz-placeholder { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .contact2-section-area .contact-form-area form .input-area input::placeholder { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .contact2-section-area .contact-form-area form .input-area textarea { width: 100%; border-radius: 4px; background: rgba(255, 255, 255, 0.2); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-1); padding: 19px 16px; height: 140px; } .contact2-section-area .contact-form-area form .input-area textarea::-moz-placeholder { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .contact2-section-area .contact-form-area form .input-area textarea::placeholder { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .contact2-section-area .contact-form-area form .input-area button { border: none; outline: none; margin-top: 12px; background: var(--ztc-bg-bg-1); color: var(--ztc-bg-bg-11); } .contact2-section-area .contact-form-area form .input-area button::after { border: 1px solid var(--ztc-bg-bg-1); } .contact4-section-area { position: relative; background: var(--ztc-text-text-13); } .contact4-section-area .camera { position: absolute; top: 0; left: 0; } .contact4-section-area .bg4 { position: absolute; right: 0; top: 0; } @media (max-width: 767px) { .contact4-section-area .contact-header { text-align: center; } } .contact4-section-area .contact-header h5 { color: var(--ztc-text-text-1); background: rgba(255, 255, 255, 0.1); margin-bottom: 0; } .contact4-section-area .contact-header p { color: var(--ztc-text-text-1); opacity: 0.8; } .contact4-section-area .contact-header a { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: 96px; font-style: italic; font-weight: var(--ztc-weight-semibold); line-height: 96px; margin-top: 16px; display: block; margin-bottom: 16px; } @media (max-width: 767px) { .contact4-section-area .contact-header a { font-size: var(--ztc-font-size-font-s32); line-height: var(--ztc-font-size-font-s32); } } .contact-main-inner-area .contact-header { padding: 0 80px 0 0; } @media (max-width: 767px) { .contact-main-inner-area .contact-header { padding: 0; margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact-main-inner-area .contact-header { padding: 0; margin-bottom: 30px; } } .contact-main-inner-area .contact-header .number-address-area { display: flex; align-items: center; justify-content: space-between; border-radius: 4px; } @media (max-width: 767px) { .contact-main-inner-area .contact-header .number-address-area { display: block; text-align: center; } } .contact-main-inner-area .contact-header .number-address-area .phone-number { position: relative; } .contact-main-inner-area .contact-header .number-address-area .phone-number:hover .img1 { background: var(--ztc-bg-bg-2); transition: all 0.4s; } .contact-main-inner-area .contact-header .number-address-area .phone-number:hover .img1 img { filter: brightness(0) invert(1); transition: all 0.4s; } .contact-main-inner-area .contact-header .number-address-area .phone-number .img1 { height: 60px; width: 60px; text-align: center; border-radius: 50%; display: inline-block; transition: all 0.4s; background: #D9E7EE; line-height: 60px; position: absolute; } @media (max-width: 767px) { .contact-main-inner-area .contact-header .number-address-area .phone-number .img1 { position: relative; margin-bottom: 20px; } } .contact-main-inner-area .contact-header .number-address-area .phone-number .img1 img { transition: all 0.4s; } .contact-main-inner-area .contact-header .number-address-area .phone-number a.map { color: var(--ztc-text-text-2); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 20px; text-decoration-line: underline; display: inline-block; } .contact-main-inner-area .contact-header .number-address-area .phone-number .content { padding-left: 70px; margin-top: 8px; } @media (max-width: 767px) { .contact-main-inner-area .contact-header .number-address-area .phone-number .content { padding-left: 0; } } .contact-main-inner-area .contact-header .number-address-area .phone-number .content p { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 18px; display: inline-block; margin-bottom: 8px; } .contact-main-inner-area .contact-header .number-address-area .phone-number .content a { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; display: block; margin-bottom: 8px; transition: all 0.4s; } .contact-main-inner-area .contact-header .number-address-area .phone-number .content a:hover { color: var(--ztc-text-text-2); transition: all 0.4s; } .contact-main-inner-area .contact-form-area { position: relative; background: var(--ztc-bg-bg-6); border-radius: 4px; padding: 32px; } .contact-main-inner-area .contact-form-area .input-area { margin-top: 20px; } .contact-main-inner-area .contact-form-area .input-area input { width: 100%; background: var(--ztc-bg-bg-1); border-radius: 4px; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-semibold); transition: all 0.4s; padding: 16px; height: 52px; } .contact-main-inner-area .contact-form-area .input-area input::-moz-placeholder { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .contact-main-inner-area .contact-form-area .input-area input::placeholder { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .contact-main-inner-area .contact-form-area .input-area textarea { width: 100%; background: var(--ztc-bg-bg-1); border-radius: 4px; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-semibold); transition: all 0.4s; padding: 16px; height: 140px; } .contact-main-inner-area .contact-form-area .input-area textarea::-moz-placeholder { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .contact-main-inner-area .contact-form-area .input-area textarea::placeholder { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .contact-main-inner-area .contact-form-area .btn-area button { border: none; outline: none; } .mapouter .gmap_canvas iframe { width: 100%; height: 565px; } .location-area { position: relative; z-index: 1; } .location-area .location-header { margin-bottom: 44px; } @media (max-width: 767px) { .location-area .location-header { margin-bottom: 16px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .location-area .location-header { margin-bottom: 16px; } } .location-area .location-boxes { background: var(--ztc-bg-bg-6); position: relative; padding: 32px; border-radius: 8px; margin-bottom: 30px; transition: all 0.4s; } .location-area .location-boxes:hover { transform: translateY(-5px); transition: all 0.4s; } .location-area .location-boxes:hover .img1 { transform: rotateY(-180deg); } .location-area .location-boxes .img1 { height: 60px; width: 60px; text-align: center; line-height: 60px; border-radius: 50%; transition: all 0.4s; background: #D9E7EE; } @media (max-width: 767px) { .location-area .location-boxes .img1 { margin-bottom: 20px; } } .location-area .location-boxes p { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-medium); line-height: 16px; margin-bottom: 8px; display: inline-block; } .location-area .location-boxes a { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 26px; display: block; transition: all 0.4s; } .location-area .location-boxes a:hover { color: var(--ztc-text-text-2); transition: all 0.4s; } /*============= CONTACT CSS AREA ENDS===============*/ /*============= CTA CSS AREA ===============*/ .cta1-section-area { position: relative; height: 180px; } @media (max-width: 767px) { .cta1-section-area { height: 350px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta1-section-area { height: 430px; } } .cta1-section-area .cta-author-area { position: relative; background: var(--ztc-text-text-2); border-radius: 4px; transition: all 0.4s; padding: 60px 80px 0 80px; overflow: hidden; top: 0; z-index: 1; height: 312px; } @media (max-width: 767px) { .cta1-section-area .cta-author-area { padding: 20px 20px 0 20px; height: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta1-section-area .cta-author-area { height: 100%; } } .cta1-section-area .cta-author-area .elements1 { position: absolute; top: 0; right: 0; } .cta1-section-area .cta-author-area .elements2 { position: absolute; top: 0; left: 0; } .cta1-section-area .cta-author-area .elements3 { position: absolute; top: 0; left: 0; } .cta1-section-area .cta-author-area .elements4 { position: absolute; top: 0; right: 0; } .cta1-section-area .cta-author-area .elements5 { position: absolute; bottom: -200px; right: -100px; } .cta1-section-area .cta-author-area .elements6 { position: absolute; top: -80px; right: -80px; } @media (max-width: 767px) { .cta1-section-area .cta-author-area .heading2 { margin-bottom: 30px; text-align: center !important; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta1-section-area .cta-author-area .heading2 { margin-bottom: 30px; } } .cta1-section-area .cta-author-area .heading2 h2 { color: var(--ztc-text-text-1); } @media (max-width: 767px) { .cta1-section-area .cta-author-area .heading2 h2 { text-align: center; } } .cta1-section-area .cta-author-area .heading2 form { position: relative; background: var(--ztc-text-text-1); border-radius: 4px; transition: all 0.4s; padding: 20px; height: 56px; line-height: 18px; width: 382px; } @media (max-width: 767px) { .cta1-section-area .cta-author-area .heading2 form { width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta1-section-area .cta-author-area .heading2 form { width: 100%; } } .cta1-section-area .cta-author-area .heading2 form input { outline: none; background: none; width: 100%; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); color: var(--ztc-text-text-3); line-height: 19px; } .cta1-section-area .cta-author-area .heading2 form button { font-family: var(--ztc-family-font1); color: var(--ztc-text-text-1); text-align: center; font-size: var(--ztc-font-size-font-s16); font-style: normal; font-weight: var(--ztc-weight-bold); line-height: 16px; border: none; outline: none; background: var(--ztc-text-text-2); padding: 16px 20px; border-radius: 4px; transition: all 0.4s; position: absolute; top: 4px; right: 4px; } .cta1-section-area .cta-author-area .heading2 form button:hover { background: var(--ztc-text-text-3); transition: all 0.4s; } .cta1-section-area .cta-author-area .heading2 form button i { margin-left: 4px; transform: rotate(-45deg); } .cta1-section-area .cta-author-area .cta-images { position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta1-section-area .cta-author-area .cta-images { text-align: center; } } .cta1-section-area .cta-author-area .cta-images .img1 { position: relative; z-index: 1; text-align: center; top: -52px; overflow: hidden; } @media (max-width: 767px) { .cta1-section-area .cta-author-area .cta-images .img1 { left: 0; top: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta1-section-area .cta-author-area .cta-images .img1 { left: 0; top: 20px; } } .cta1-section-area .cta-author-area .cta-images .img1 img { height: 325px; width: 288.94px; -o-object-fit: contain; object-fit: contain; } .cta1-section-area .cta-author-area .cta-images .img2 { position: absolute; bottom: 74px; text-align: center; } @media (max-width: 767px) { .cta1-section-area .cta-author-area .cta-images .img2 { bottom: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta1-section-area .cta-author-area .cta-images .img2 { bottom: 0; left: 50px; } } .cta2-section-area { padding: 0 0 50px 0; border-bottom: 1px solid #27293C; } .cta2-section-area h2 { margin-bottom: 0; } @media (max-width: 767px) { .cta2-section-area .cta-form-area { margin-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta2-section-area .cta-form-area { margin-top: 30px; } } .cta2-section-area .cta-form-area form { position: relative; background: var(--ztc-text-text-1); border-radius: 4px; transition: all 0.4s; padding: 20px; height: 56px; line-height: 18px; width: 100%; } @media (max-width: 767px) { .cta2-section-area .cta-form-area form { width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta2-section-area .cta-form-area form { width: 100%; } } .cta2-section-area .cta-form-area form input { outline: none; background: none; width: 100%; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); color: var(--ztc-text-text-3); line-height: 19px; } .cta2-section-area .cta-form-area form button { font-family: var(--ztc-family-font1); color: var(--ztc-text-text-1); text-align: center; font-size: var(--ztc-font-size-font-s16); font-style: normal; font-weight: var(--ztc-weight-bold); line-height: 16px; border: none; outline: none; background: var(--ztc-bg-bg-7); padding: 16px 20px; border-radius: 4px; transition: all 0.4s; position: absolute; top: 4px; right: 4px; } .cta2-section-area .cta-form-area form button:hover { background: var(--ztc-text-text-7); transition: all 0.4s; } .cta2-section-area .cta-form-area form button i { margin-left: 4px; transform: rotate(-45deg); } .cta3-section-area { position: relative; background: var(--ztc-text-text-9); height: 325px; border-radius: 70px 0 0 0; } @media (max-width: 767px) { .cta3-section-area { height: auto; padding: 40px 0 0 0; border-radius: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta3-section-area { height: auto; padding: 40px 0 0 0; border-radius: 0; } } .cta3-section-area .elements23 { position: absolute; bottom: 0; left: 0; } .cta3-section-area .elements24 { position: absolute; right: -30px; top: 0; transform: rotate(-100deg); } @media (max-width: 767px) { .cta3-section-area .cta-author-area .heading2 { margin-bottom: 30px; text-align: center !important; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta3-section-area .cta-author-area .heading2 { margin-bottom: 30px; text-align: center; } } .cta3-section-area .cta-author-area .heading2 h2 { color: var(--ztc-text-text-1); } @media (max-width: 767px) { .cta3-section-area .cta-author-area .heading2 h2 { text-align: center; } } .cta3-section-area .cta-author-area .heading2 form { position: relative; background: var(--ztc-text-text-1); border-radius: 4px; transition: all 0.4s; padding: 20px; height: 56px; line-height: 18px; width: 382px; } @media (max-width: 767px) { .cta3-section-area .cta-author-area .heading2 form { width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta3-section-area .cta-author-area .heading2 form { width: 100%; } } .cta3-section-area .cta-author-area .heading2 form input { outline: none; background: none; width: 100%; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); color: var(--ztc-text-text-3); line-height: 19px; } .cta3-section-area .cta-author-area .heading2 form button { font-family: var(--ztc-family-font1); color: var(--ztc-text-text-1); text-align: center; font-size: var(--ztc-font-size-font-s16); font-style: normal; font-weight: var(--ztc-weight-bold); line-height: 16px; border: none; outline: none; background: var(--ztc-text-text-9); padding: 16px 20px; border-radius: 4px; transition: all 0.4s; position: absolute; top: 4px; right: 4px; } .cta3-section-area .cta-author-area .heading2 form button:hover { background: var(--ztc-text-text-3); transition: all 0.4s; } .cta3-section-area .cta-author-area .heading2 form button i { margin-left: 4px; transform: rotate(-45deg); } .cta3-section-area .cta-author-area .cta-images { position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta3-section-area .cta-author-area .cta-images { text-align: center; } } .cta3-section-area .cta-author-area .cta-images .img1 { position: relative; z-index: 1; text-align: center; top: 20px; overflow: hidden; } @media (max-width: 767px) { .cta3-section-area .cta-author-area .cta-images .img1 { left: 0; top: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta3-section-area .cta-author-area .cta-images .img1 { left: 0; top: 20px; } } .cta3-section-area .cta-author-area .cta-images .img1 img { height: 325px; width: 288.94px; -o-object-fit: contain; object-fit: contain; } .cta3-section-area .cta-author-area .cta-images .img2 { position: absolute; bottom: 0; text-align: end; left: 40px; } @media (max-width: 767px) { .cta3-section-area .cta-author-area .cta-images .img2 { bottom: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta3-section-area .cta-author-area .cta-images .img2 { bottom: 0; left: 130px; } } .cta4-section-area { position: relative; background: var(--ztc-bg-bg-15); } .cta4-section-area .elements23 { position: absolute; bottom: 0; right: 0; } @media (max-width: 767px) { .cta4-section-area .cta-author-area .heading8 { margin-bottom: 30px; text-align: center !important; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta4-section-area .cta-author-area .heading8 { margin-bottom: 30px; text-align: center; } } .cta4-section-area .cta-author-area .heading8 h2 { color: var(--ztc-text-text-11); margin-bottom: 0; } @media (max-width: 767px) { .cta4-section-area .cta-author-area .heading8 h2 { text-align: center; } } .cta4-section-area .form-area form { position: relative; background: var(--ztc-text-text-1); border-radius: 50px; transition: all 0.4s; padding: 20px; height: 56px; line-height: 18px; width: 100%; } @media (max-width: 767px) { .cta4-section-area .form-area form { width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta4-section-area .form-area form { width: 100%; } } .cta4-section-area .form-area form input { outline: none; background: none; width: 100%; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); color: var(--ztc-text-text-3); line-height: 19px; } .cta4-section-area .form-area form button { font-family: var(--ztc-family-font1); color: var(--ztc-text-text-1); text-align: center; font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-bold); line-height: 16px; border: none; outline: none; background: var(--ztc-text-text-13); padding: 16px 20px; border-radius: 50px; transition: all 0.4s; position: absolute; top: 3px; right: 4px; } .cta4-section-area .form-area form button:hover { background: var(--ztc-text-text-11); transition: all 0.4s; } .cta4-section-area .form-area form button:hover i { transform: rotate(0); transition: all 0.4s; } .cta4-section-area .form-area form button i { margin-left: 4px; transform: rotate(-45deg); transition: all 0.4s; } /*============= CTA CSS AREA ENDS===============*/ /*============= TESTIMONIAL CSS AREA ===============*/ .testimonial1-section-area { position: relative; background: var(--ztc-text-text-3); } .testimonial1-section-area .video-section-area { position: relative; z-index: 1; height: 508px; } .testimonial1-section-area .video-section-area::after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; transition: all 0.4s; background: var(--ztc-text-text-3); opacity: 0.4; z-index: -1; } .testimonial1-section-area .video-section-area a { color: var(--ztc-text-text-1); text-align: center; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; display: inline-block; position: absolute; top: 57%; left: 40%; } @media (max-width: 767px) { .testimonial1-section-area .video-section-area a { left: 18%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial1-section-area .video-section-area a { left: 35%; } } .testimonial1-section-area .video-section-area .video-btn1 a { height: 80px; width: 80px; text-align: center; line-height: 75px; transition: all 0.4s; display: inline-block; background: var(--ztc-text-text-1); border-radius: 50%; color: var(--ztc-text-text-2); position: absolute; top: 37%; left: 47%; right: 50%; bottom: 50%; transition: all 0.4s; } @media (max-width: 767px) { .testimonial1-section-area .video-section-area .video-btn1 a { left: 42%; } } .testimonial1-section-area .video-section-area .video-btn1 a::after { content: ""; position: absolute; z-index: -1; left: 40px; top: 40px; transform: translateX(-50%) translateY(-50%); display: block; width: 100%; height: 100%; background: var(--ztc-text-text-1); border-radius: 50%; animation: video-btn 1500ms ease-out infinite; } .testimonial1-section-area .testimonial-header { margin-bottom: 60px; } @media (max-width: 767px) { .testimonial1-section-area .testimonial-header { margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial1-section-area .testimonial-header { margin-bottom: 30px; } } .testimonial1-section-area .testimonial-header h4 { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; position: relative; z-index: 1; } .testimonial1-section-area .testimonial-header h4::after { position: absolute; content: ""; height: 1px; width: 350px; background: var(--ztc-text-text-1); transition: all 0.4s; left: 60px; top: 15px; opacity: 0.1; } @media (max-width: 767px) { .testimonial1-section-area .testimonial-header h4::after { display: none; } } .testimonial1-section-area .testimonial-header h4::before { position: absolute; content: ""; height: 1px; width: 350px; background: var(--ztc-text-text-1); transition: all 0.4s; right: 60px; top: 15px; opacity: 0.1; } @media (max-width: 767px) { .testimonial1-section-area .testimonial-header h4::before { display: none; } } .testimonial1-section-area .testimonial-slider .img1 { width: 160px; height: 40px; display: inline-block; } .testimonial2-section-area .testimonial-img img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .testimonial2-section-area .testimonial-content-area { padding: 0 0 0 90px; } @media (max-width: 767px) { .testimonial2-section-area .testimonial-content-area { padding: 0; margin-top: 30px; text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial2-section-area .testimonial-content-area { padding: 0; margin-top: 30px; text-align: center; } } .testimonial2-section-area .testimonial-content-area h5 { border-radius: 4px; background: #2D39AD; color: var(--ztc-text-text-1); } .testimonial2-section-area .testimonial-content-area h2 { color: var(--ztc-text-text-1); } @media (max-width: 767px) { .testimonial2-section-area .testimonial-content-area .testimonial-slider-area { text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial2-section-area .testimonial-content-area .testimonial-slider-area { text-align: center; } } .testimonial2-section-area .testimonial-content-area .testimonial-slider-area .testimonial-boxarea img { height: 45px; width: 45px; -o-object-fit: cover; object-fit: cover; } @media (max-width: 767px) { .testimonial2-section-area .testimonial-content-area .testimonial-slider-area .testimonial-boxarea img { margin: 0 auto; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial2-section-area .testimonial-content-area .testimonial-slider-area .testimonial-boxarea img { margin: 0 auto; } } .testimonial2-section-area .testimonial-content-area .testimonial-slider-area .testimonial-boxarea p { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-medium); line-height: 26px; display: inline-block; opacity: 0.9; } .testimonial2-section-area .testimonial-content-area .testimonial-slider-area .testimonial-boxarea .testimonial-auhtor-area { display: flex; align-items: center; } @media (max-width: 767px) { .testimonial2-section-area .testimonial-content-area .testimonial-slider-area .testimonial-boxarea .testimonial-auhtor-area { justify-content: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial2-section-area .testimonial-content-area .testimonial-slider-area .testimonial-boxarea .testimonial-auhtor-area { justify-content: center; } } .testimonial2-section-area .testimonial-content-area .testimonial-slider-area .testimonial-boxarea .testimonial-auhtor-area .img1 img { height: 70px; width: 70px; -o-object-fit: cover; object-fit: cover; } .testimonial2-section-area .testimonial-content-area .testimonial-slider-area .testimonial-boxarea .testimonial-auhtor-area .content { margin-left: 16px; } .testimonial2-section-area .testimonial-content-area .testimonial-slider-area .testimonial-boxarea .testimonial-auhtor-area .content a { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 26px; display: block; transition: all 0.4s; margin-bottom: 12px; } .testimonial2-section-area .testimonial-content-area .testimonial-slider-area .testimonial-boxarea .testimonial-auhtor-area .content p { color: var(--ztc-text-text-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; } .testimonial2-section-area .testimonial-content-area .testimonial-slider-area .owl-dots { margin-top: 48px; } .testimonial2-section-area .testimonial-content-area .testimonial-slider-area .owl-dots button { height: 8px; width: 8px; text-align: center; display: inline-block; background: var(--ztc-text-text-1); border-radius: 50%; margin: 0 16px 0 0; position: relative; z-index: 1; } .testimonial2-section-area .testimonial-content-area .testimonial-slider-area .owl-dots button::after { position: absolute; content: ""; height: 22px; width: 22px; text-align: center; border: 1px solid var(--ztc-text-text-1); border-radius: 50%; top: -7px; left: -7px; visibility: hidden; opacity: 1; } .testimonial2-section-area .testimonial-content-area .testimonial-slider-area .owl-dots button.active::after { visibility: visible; opacity: 1; transition: all 0.4s; } .testimonial3-section-area { position: relative; z-index: 1; background: var(--ztc-text-text-10); border-radius: 0 0 0 150px; height: 772px; } @media (max-width: 767px) { .testimonial3-section-area { border-radius: 0; height: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial3-section-area { border-radius: 0; height: 100%; } } .testimonial3-section-area .testimonial-header { margin-bottom: 60px; } @media (max-width: 767px) { .testimonial3-section-area .testimonial-header { margin-bottom: 30px; text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial3-section-area .testimonial-header { margin-bottom: 30px; text-align: center; } } .testimonial3-section-area .testimonial-author-slider.owl-carousel .owl-stage-outer { position: absolute !important; } @media (max-width: 767px) { .testimonial3-section-area .testimonial-author-slider.owl-carousel .owl-stage-outer { position: relative !important; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial3-section-area .testimonial-author-slider.owl-carousel .owl-stage-outer { position: relative !important; } } .testimonial3-section-area .testimonial-author-slider { position: relative; } .testimonial3-section-area .testimonial-author-slider .owl-nav { position: absolute; top: -150px; right: 0; } @media (max-width: 767px) { .testimonial3-section-area .testimonial-author-slider .owl-nav { position: relative; top: 0; margin-top: 30px; left: 0; text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial3-section-area .testimonial-author-slider .owl-nav { position: relative; top: 0; margin-top: 30px; left: 0; text-align: center; } } .testimonial3-section-area .testimonial-author-slider .owl-nav button { height: 48px; width: 48px; text-align: center; line-height: 48px; display: inline-block; color: var(--ztc-text-text-1); background: #321A03; border-radius: 4px; transition: all 0.4s; margin: 0 16px 0 0; } .testimonial3-section-area .testimonial-author-slider .owl-nav button:hover { background: var(--ztc-text-text-9); transition: all 0.4s; color: var(--ztc-text-text-1); } .testimonial3-section-area .testimonial-author-slider .testimonial-author-box { position: relative; background: var(--ztc-text-text-1); border-radius: 4px; padding: 32px; } .testimonial3-section-area .testimonial-author-slider .testimonial-author-box .images { display: flex; align-items: center; justify-content: space-between; } .testimonial3-section-area .testimonial-author-slider .testimonial-author-box .images .content img { height: 60px; width: 60px; border-radius: 50%; transition: all 0.4s; -o-object-fit: cover; object-fit: cover; margin-bottom: 16px; } .testimonial3-section-area .testimonial-author-slider .testimonial-author-box .images .content a { color: var(--ztc-text-text-10); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); display: block; transition: all 0.4s; line-height: 26px; margin-bottom: 12px; } .testimonial3-section-area .testimonial-author-slider .testimonial-author-box .images .content p { color: var(--ztc-text-text-6); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; transition: all 0.4s; } .testimonial3-section-area .testimonial-author-slider .testimonial-author-box ul { margin-top: 32px; } .testimonial3-section-area .testimonial-author-slider .testimonial-author-box ul li { display: inline-block; } .testimonial3-section-area .testimonial-author-slider .testimonial-author-box ul li a { border-radius: 4px; background: rgba(250, 129, 0, 0.1); height: 32px; width: 32px; text-align: center; line-height: 32px; display: inline-block; border-radius: 4px; transition: all 0.4s; margin: 0 4px 0 0; color: var(--ztc-text-text-9); } .testimonial3-section-area .testimonial-author-slider .testimonial-author-box p { color: var(--ztc-text-text-6); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; display: inline-block; } .testimonial-inner-section-area .testimonial-boxarea { position: relative; padding: 32px 24px; border-radius: 4px; transition: all 0.4s; background: var(--ztc-bg-bg-6); border: 1px solid var(--ztc-bg-bg-6); margin-bottom: 30px; } .testimonial-inner-section-area .testimonial-boxarea:hover { transform: translateY(-5px); transition: all 0.4s; border: 1px solid var(--ztc-bg-bg-2); } .testimonial-inner-section-area .testimonial-boxarea .testimonial-auhtor { display: flex; align-items: center; justify-content: space-between; } .testimonial-inner-section-area .testimonial-boxarea .testimonial-auhtor .img-content img { height: 60px; width: 60px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; } .testimonial-inner-section-area .testimonial-boxarea .testimonial-auhtor .img-content a { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 26px; display: block; transition: all 0.4s; margin-bottom: 10px; } .testimonial-inner-section-area .testimonial-boxarea .testimonial-auhtor .img-content p { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; transition: all 0.4s; } .testimonial-inner-section-area .testimonial-boxarea ul li { height: 32px; width: 32px; text-align: center; line-height: 32px; transition: all 0.4s; border-radius: 4px; background: rgba(24, 136, 205, 0.1); color: var(--ztc-text-text-2); display: inline-block; margin: 0 4px 0 0; } .testimonial-inner-section-area .testimonial-boxarea p { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; transition: all 0.4s; } /*============= TESTIMONIAL CSS AREA ENDS ===============*/ /*============= CASE STUDY CSS AREA ENDS ===============*/ /*============= CASE STUDY CSS AREA ENDS ===============*/ /*============= FEATURES CSS AREA STARTS ===============*/ .project1-section-area { position: relative; } .project1-section-area .project-header { margin-bottom: 60px; } @media (max-width: 767px) { .project1-section-area .project-header { margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .project1-section-area .project-header { margin-bottom: 30px; } } .project1-section-area .project-slider-area .project-boxarea.active .content-area { text-align: center; border-radius: 4px; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(1); visibility: visible; opacity: 1; transition: all 0.6s; } .project1-section-area .project-slider-area .project-boxarea.active .content-area::after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; transition: all 0.6s; transform: scale(0.9); opacity: 0.8; z-index: 1; background: var(--ztc-text-text-3); border-radius: 4px; } .project1-section-area .project-slider-area .project-boxarea.active .content-area .all-content { position: relative; top: 30%; bottom: 30%; z-index: 2; } .project1-section-area .project-slider-area .project-boxarea.active .content-area .all-content .icons a { height: 48px; width: 48px; text-align: center; line-height: 48px; border-radius: 50%; display: inline-block; transition: all 0.4s; transform: rotate(-45deg); color: var(--ztc-bg-bg-1); background: var(--ztc-bg-bg-2); margin-bottom: 32px; } .project1-section-area .project-slider-area .project-boxarea.active .content-area .all-content a { color: var(--ztc-bg-bg-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; display: inline-block; margin-bottom: 16px; } .project1-section-area .project-slider-area .project-boxarea.active .content-area .all-content p { color: var(--White-Colors, #FFF); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; opacity: 0.9; } .project1-section-area .project-slider-area .project-boxarea { position: relative; z-index: 1; overflow: hidden; } .project1-section-area .project-slider-area .project-boxarea:hover .content-area { visibility: visible; opacity: 1; transition: all 0.6s; } .project1-section-area .project-slider-area .project-boxarea:hover .content-area::after { transform: scale(0.9); transition: all 0.6s; } .project1-section-area .project-slider-area .project-boxarea .img1 img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px; } .project1-section-area .project-slider-area .project-boxarea .content-area { text-align: center; border-radius: 4px; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(1); visibility: hidden; opacity: 0; transition: all 0.6s; } .project1-section-area .project-slider-area .project-boxarea .content-area::after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; transition: all 0.6s; transform: scale(1.2); opacity: 0.8; z-index: 1; background: var(--ztc-text-text-3); border-radius: 4px; } .project1-section-area .project-slider-area .project-boxarea .content-area .all-content { position: relative; top: 30%; bottom: 30%; z-index: 2; } .project1-section-area .project-slider-area .project-boxarea .content-area .all-content .icons a { height: 48px; width: 48px; text-align: center; line-height: 48px; border-radius: 50%; display: inline-block; transition: all 0.4s; transform: rotate(-45deg); color: var(--ztc-bg-bg-1); background: var(--ztc-bg-bg-2); margin-bottom: 32px; } .project1-section-area .project-slider-area .project-boxarea .content-area .all-content a { color: var(--ztc-bg-bg-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; display: inline-block; margin-bottom: 16px; } .project1-section-area .project-slider-area .project-boxarea .content-area .all-content p { color: var(--White-Colors, #FFF); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; opacity: 0.9; } .project1-section-area .project-slider-area .owl-dots { text-align: center; margin-top: 32px; } .project1-section-area .project-slider-area .owl-dots button { height: 12px; width: 12px; background: #E6E9E9; border-radius: 50%; display: inline-block; margin: 0 12px 0 0; position: relative; z-index: 1; } .project1-section-area .project-slider-area .owl-dots button::after { position: absolute; content: ""; height: 24px; width: 24px; text-align: center; border: 2px solid var(--ztc-bg-bg-2); border-radius: 50%; top: -6px; left: -6px; transition: all 0.4s; visibility: hidden; opacity: 0; } .project1-section-area .project-slider-area .owl-dots button.active { background: var(--ztc-bg-bg-2); transition: all 0.4s; } .project1-section-area .project-slider-area .owl-dots button.active::after { visibility: visible; opacity: 1; transition: all 0.4s; } .project2-section-area .project-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 60px; } @media (max-width: 767px) { .project2-section-area .project-header { margin-bottom: 30px; display: block; text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .project2-section-area .project-header { margin-bottom: 30px; display: block; text-align: center; } } @media (max-width: 767px) { .project2-section-area .project-header .header { text-align: center; margin-bottom: 32px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .project2-section-area .project-header .header { text-align: center; margin-bottom: 32px; } } .project2-section-area .project-boxes-area.box2 { position: relative; overflow: hidden; border-radius: 4px; transition: all 0.4s; margin-bottom: 30px; } .project2-section-area .project-boxes-area.box2:hover .img1::after { visibility: visible; opacity: 0.6; transition: all 0.4s; transform: scale(1); height: 100%; } @media (max-width: 767px) { .project2-section-area .project-boxes-area.box2:hover .img1::after { height: 100%; } } .project2-section-area .project-boxes-area.box2:hover .img1 img { transform: scale(1.1); transition: all 0.4s; } .project2-section-area .project-boxes-area.box2:hover .content-area { visibility: visible; opacity: 1; transition: all 0.6s; bottom: 0; } .project2-section-area .project-boxes-area.box2 .img1 { overflow: hidden; position: relative; border-radius: 4px; } .project2-section-area .project-boxes-area.box2 .img1::after { position: absolute; content: ""; height: 60%; width: 100%; left: 0; bottom: 0; transition: all 0.4s; background: var(--ztc-text-text-7); border-radius: 4px; opacity: 0; visibility: hidden; } .project2-section-area .project-boxes-area.box2 .img1 img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; transition: all 0.4s; } @media (max-width: 767px) { .project2-section-area .project-boxes-area.box2 .img1 img { height: 300px !important; } } .project2-section-area .project-boxes-area.box2 .content-area { padding: 32px; position: absolute; bottom: -200px; transition: all 0.6s; visibility: hidden; opacity: 1; } @media (max-width: 767px) { .project2-section-area .project-boxes-area.box2 .content-area { bottom: -250px; } } .project2-section-area .project-boxes-area.box2 .content-area a { color: var(--ztc-bg-bg-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; display: inline-block; transition: all 0.4s; margin-bottom: 16px; } .project2-section-area .project-boxes-area.box2 .content-area p { color: var(--ztc-bg-bg-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; display: inline-block; transition: all 0.4s; opacity: 0.9; } .project2-section-area .project-boxes-area.box2 .content-area a.readmore { color: var(--ztc-bg-bg-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-bold); line-height: 16px; display: inline-block; transition: all 0.4s; margin-bottom: 0; margin-top: 24px; } .project2-section-area .project-boxes-area.box2 .content-area a.readmore i { margin-left: 4px; transform: rotate(-45deg); } .project2-section-area .project-boxes-area { position: relative; overflow: hidden; border-radius: 4px; transition: all 0.4s; margin-bottom: 30px; } .project2-section-area .project-boxes-area:hover .img1::after { visibility: visible; opacity: 0.6; transition: all 0.4s; transform: scale(1); height: 32%; } @media (max-width: 767px) { .project2-section-area .project-boxes-area:hover .img1::after { height: 100%; } } .project2-section-area .project-boxes-area:hover .img1 img { transform: scale(1.1); transition: all 0.4s; } .project2-section-area .project-boxes-area:hover .content-area { visibility: visible; opacity: 1; transition: all 0.6s; bottom: 0; } .project2-section-area .project-boxes-area .img1 { overflow: hidden; position: relative; border-radius: 4px; } .project2-section-area .project-boxes-area .img1::after { position: absolute; content: ""; height: 0; width: 100%; left: 0; bottom: 0; transition: all 0.4s; background: var(--ztc-text-text-7); border-radius: 4px; opacity: 0.6; } .project2-section-area .project-boxes-area .img1 img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; transition: all 0.4s; } .project2-section-area .project-boxes-area .content-area { padding: 32px; position: absolute; bottom: 0; transition: all 0.6s; } .project2-section-area .project-boxes-area .content-area a { color: var(--ztc-bg-bg-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; display: inline-block; transition: all 0.4s; margin-bottom: 16px; } .project2-section-area .project-boxes-area .content-area p { color: var(--ztc-bg-bg-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; display: inline-block; transition: all 0.4s; opacity: 0.9; } .project2-section-area .project-boxes-area .content-area a.readmore { color: var(--ztc-bg-bg-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-bold); line-height: 16px; display: inline-block; transition: all 0.4s; margin-bottom: 0; margin-top: 24px; } .project2-section-area .project-boxes-area .content-area a.readmore i { margin-left: 4px; transform: rotate(-45deg); } .project-main-inner-area { position: relative; z-index: 1; } .project-main-inner-area .project-boxarea-inner.active .content-area { text-align: center; border-radius: 4px; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(1); visibility: visible; opacity: 1; transition: all 0.6s; } .project-main-inner-area .project-boxarea-inner.active .content-area::after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; transition: all 0.6s; transform: scale(0.9); opacity: 0.8; z-index: 1; background: var(--ztc-text-text-3); border-radius: 4px; } .project-main-inner-area .project-boxarea-inner.active .content-area .all-content { position: relative; top: 30%; bottom: 30%; z-index: 2; } .project-main-inner-area .project-boxarea-inner.active .content-area .all-content .icons a { height: 48px; width: 48px; text-align: center; line-height: 48px; border-radius: 50%; display: inline-block; transition: all 0.4s; transform: rotate(-45deg); color: var(--ztc-bg-bg-1); background: var(--ztc-bg-bg-2); margin-bottom: 32px; } .project-main-inner-area .project-boxarea-inner.active .content-area .all-content a { color: var(--ztc-bg-bg-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; display: inline-block; margin-bottom: 16px; } .project-main-inner-area .project-boxarea-inner.active .content-area .all-content p { color: var(--White-Colors, #FFF); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; opacity: 0.9; } .project-main-inner-area .project-boxarea-inner { position: relative; z-index: 1; overflow: hidden; margin-bottom: 30px; } .project-main-inner-area .project-boxarea-inner:hover .content-area { visibility: visible; opacity: 1; transition: all 0.6s; transform: translateY(0); } .project-main-inner-area .project-boxarea-inner:hover .content-area::after { transform: scale(0.9); transition: all 0.6s; } .project-main-inner-area .project-boxarea-inner .img1 { overflow: hidden; position: relative; border-radius: 4px; transition: all 0.4s; } .project-main-inner-area .project-boxarea-inner .img1 img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px; transition: all 0.4s; } .project-main-inner-area .project-boxarea-inner .content-area { text-align: center; border-radius: 4px; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(1); visibility: hidden; opacity: 0; transition: all 0.6s; transform: translateY(-100px); } .project-main-inner-area .project-boxarea-inner .content-area::after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; transition: all 0.6s; transform: scale(1.2); opacity: 0.8; z-index: 1; background: var(--ztc-text-text-3); border-radius: 4px; } .project-main-inner-area .project-boxarea-inner .content-area .all-content { position: relative; top: 30%; bottom: 30%; z-index: 2; } .project-main-inner-area .project-boxarea-inner .content-area .all-content .icons a { height: 48px; width: 48px; text-align: center; line-height: 48px; border-radius: 50%; display: inline-block; transition: all 0.4s; transform: rotate(-45deg); color: var(--ztc-bg-bg-1); background: var(--ztc-bg-bg-2); margin-bottom: 32px; } .project-main-inner-area .project-boxarea-inner .content-area .all-content a { color: var(--ztc-bg-bg-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; display: inline-block; margin-bottom: 16px; } .project-main-inner-area .project-boxarea-inner .content-area .all-content p { color: var(--White-Colors, #FFF); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; opacity: 0.9; } /*============= FEATURES CSS AREA ENDS ===============*/ /*============= PRICING-PLAN CSS AREA ===============*/ .pricing-section-area { position: relative; z-index: 1; } .pricing-section-area .pricing-header { margin-bottom: 60px; } @media (max-width: 767px) { .pricing-section-area .pricing-header { margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pricing-section-area .pricing-header { margin-bottom: 30px; } } .pricing-section-area .pricing-boxarea.active { background: var(--ztc-text-text-10); transition: all 0.4s; } .pricing-section-area .pricing-boxarea.active h3 { color: var(--ztc-bg-bg-1); transition: all 0.4s; } .pricing-section-area .pricing-boxarea.active p { color: var(--ztc-text-text-1); transition: all 0.4s; } .pricing-section-area .pricing-boxarea.active h2 { color: var(--ztc-text-text-1); transition: all 0.4s; border-bottom: 1px solid var(--ztc-text-text-1); } .pricing-section-area .pricing-boxarea.active h2 span { color: var(--ztc-text-text-1); transition: all 0.4s; } .pricing-section-area .pricing-boxarea.active .btn-area a { color: var(--ztc-text-text-10); transition: all 0.4s; background: var(--ztc-text-text-1); } .pricing-section-area .pricing-boxarea.active .btn-area a::after { border: 1px solid var(--ztc-text-text-1); transition: all 0.4s; } .pricing-section-area .pricing-boxarea.active .list-area { background: var(--ztc-bg-bg-11); transition: all 0.4s; border: 1px solid var(--ztc-bg-bg-11); } .pricing-section-area .pricing-boxarea.active .list-area ul li { color: var(--ztc-bg-bg-1); transition: all 0.4s; } .pricing-section-area .pricing-boxarea { border-radius: 4px; border: 1px solid rgba(15, 10, 0, 0.1); background: var(--ztc-bg-bg-14); padding: 32px; height: 480px; margin-bottom: 80px; transition: all 0.4s; position: relative; } @media (max-width: 767px) { .pricing-section-area .pricing-boxarea { height: 100%; margin-bottom: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pricing-section-area .pricing-boxarea { height: 100%; margin-bottom: 0; } } .pricing-section-area .pricing-boxarea:hover { transition: all 0.4s; } .pricing-section-area .pricing-boxarea h3 { color: var(--ztc-text-text-10); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s32); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 32px; display: inline-block; transition: all 0.4s; margin-bottom: 16px; } .pricing-section-area .pricing-boxarea p { color: var(--ztc-text-text-6); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; display: inline-block; transition: all 0.4s; } .pricing-section-area .pricing-boxarea h2 { color: var(--ztc-text-text-10); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s44); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 44px; margin-top: 32px; padding-bottom: 24px; transition: all 0.4s; border-bottom: 1px solid rgba(15, 10, 0, 0.1); } .pricing-section-area .pricing-boxarea h2 span { color: var(--ztc-text-text-6); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; transition: all 0.4s; } .pricing-section-area .pricing-boxarea .btn-area { text-align: center; margin-top: 32px; position: relative; z-index: 2; } .pricing-section-area .pricing-boxarea .btn-area a { width: 234px; position: relative; z-index: 2; } .pricing-section-area .pricing-boxarea .btn-area a::after { z-index: 2; } .pricing-section-area .pricing-boxarea .list-area { background: var(--ztc-bg-bg-1); position: relative; padding: 36px 32px 32px 32px; border: 1px solid rgba(15, 10, 0, 0.1); border-radius: 4px; margin: -30px 30px 0 30px; transition: all 0.4s; } @media (max-width: 767px) { .pricing-section-area .pricing-boxarea .list-area { margin: 30px 0 0 0; padding: 8px 32px 32px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pricing-section-area .pricing-boxarea .list-area { margin: 30px 0 0 0; padding: 8px 32px 32px; } } .pricing-section-area .pricing-boxarea .list-area ul li { color: var(--ztc-text-text-6); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; transition: all 0.4s; margin-top: 24px; } .pricing-section-area .pricing-boxarea .list-area ul li img { margin: 0 6px 0 0; } .pricing-inner-section-area { position: relative; z-index: 1; } .pricing-inner-section-area .pricing-boxarea.active { background: var(--ztc-text-text-3); transition: all 0.4s; } .pricing-inner-section-area .pricing-boxarea.active h3 { color: var(--ztc-bg-bg-1); transition: all 0.4s; } .pricing-inner-section-area .pricing-boxarea.active p { color: var(--ztc-text-text-1); transition: all 0.4s; } .pricing-inner-section-area .pricing-boxarea.active h2 { color: var(--ztc-text-text-1); transition: all 0.4s; border-bottom: 1px solid var(--ztc-text-text-1); } .pricing-inner-section-area .pricing-boxarea.active h2 span { color: var(--ztc-text-text-1); transition: all 0.4s; } .pricing-inner-section-area .pricing-boxarea.active .btn-area a { color: var(--ztc-text-text-10); transition: all 0.4s; background: var(--ztc-text-text-1); } .pricing-inner-section-area .pricing-boxarea.active .btn-area a::after { border: 1px solid var(--ztc-text-text-1); transition: all 0.4s; } .pricing-inner-section-area .pricing-boxarea.active .list-area { background: var(--ztc-bg-bg-2); transition: all 0.4s; border: 1px solid var(--ztc-bg-bg-2); } .pricing-inner-section-area .pricing-boxarea.active .list-area ul li { color: var(--ztc-bg-bg-1); transition: all 0.4s; } .pricing-inner-section-area .pricing-boxarea { border-radius: 4px; border: 1px solid rgba(15, 10, 0, 0.1); background: var(--ztc-bg-bg-6); padding: 32px; height: 480px; margin-bottom: 80px; transition: all 0.4s; position: relative; } @media (max-width: 767px) { .pricing-inner-section-area .pricing-boxarea { height: 100%; margin-bottom: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pricing-inner-section-area .pricing-boxarea { height: 100%; margin-bottom: 0; } } .pricing-inner-section-area .pricing-boxarea h3 { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s32); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 32px; display: inline-block; transition: all 0.4s; margin-bottom: 16px; } .pricing-inner-section-area .pricing-boxarea p { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; display: inline-block; transition: all 0.4s; } .pricing-inner-section-area .pricing-boxarea h2 { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s44); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 44px; margin-top: 32px; padding-bottom: 24px; transition: all 0.4s; border-bottom: 1px solid rgba(15, 10, 0, 0.1); } .pricing-inner-section-area .pricing-boxarea h2 span { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; transition: all 0.4s; } .pricing-inner-section-area .pricing-boxarea .btn-area { text-align: center; margin-top: 32px; position: relative; z-index: 2; } .pricing-inner-section-area .pricing-boxarea .btn-area a { width: 234px; position: relative; z-index: 2; } .pricing-inner-section-area .pricing-boxarea .btn-area a::after { z-index: 2; } .pricing-inner-section-area .pricing-boxarea .list-area { background: var(--ztc-bg-bg-1); position: relative; padding: 36px 32px 32px 32px; border: 1px solid rgba(15, 10, 0, 0.1); border-radius: 4px; margin: -30px 30px 0 30px; transition: all 0.4s; } @media (max-width: 767px) { .pricing-inner-section-area .pricing-boxarea .list-area { margin: 30px 0 0 0; padding: 8px 32px 32px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pricing-inner-section-area .pricing-boxarea .list-area { margin: 30px 0 0 0; padding: 8px 32px 32px; } } .pricing-inner-section-area .pricing-boxarea .list-area ul li { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 18px; transition: all 0.4s; margin-top: 24px; } .pricing-inner-section-area .pricing-boxarea .list-area ul li img { margin: 0 6px 0 0; } .compareplan-section-area { position: relative; z-index: 1; background: var(--ztc-bg-bg-6); } @media only screen and (min-width: 768px) and (max-width: 991px) { .compareplan-section-area { overflow-y: scroll; } } @media (max-width: 767px) { .compareplan-section-area { overflow-y: scroll; } } .compareplan-section-area .toggle-inner input { position: absolute; left: 0; width: 100%; height: 100%; margin: 0; border-radius: 25px; right: 0; z-index: 1; opacity: 0; cursor: pointer; } .compareplan-section-area .custom-toggle { position: absolute; height: 20px; width: 20px; background-color: var(--ztc-text-text-1); top: 5px; left: 35px; border-radius: 50%; transition: 300ms all; } .compareplan-section-area .toggle-inner .t-month, .compareplan-section-area .toggle-inner .t-year { position: absolute; left: -75px; top: 2px; transition: 300ms all; } .compareplan-section-area .toggle-inner .t-year { left: unset; left: 73px; opacity: 0.5; } .compareplan-section-area .active > .toggle-inner .t-month { opacity: 0.5; } .compareplan-section-area .active > .toggle-inner .t-year { opacity: 1; } .compareplan-section-area .toggle-inner input:checked + span { left: 5px; } .compareplan-section-area .toggle-inner { width: 60px; margin: 0 auto; height: 30px; border-radius: 25px; position: relative; background: var(--ztc-text-text-3); left: -20px; } .compareplan-section-area .t-year h4 { min-width: 200px; } .compareplan-section-area .t-year { text-align: left; } .compareplan-section-area .plan-toggle-wrap { margin-top: 50px; margin-bottom: 32px; } .compareplan-section-area .plan-toggle-wrap { position: absolute; z-index: 1; left: 25%; top: 30%; right: 71%; } @media (max-width: 767px) { .compareplan-section-area .plan-toggle-wrap { position: relative; left: 0; top: 0; text-align: center; right: 0; margin-bottom: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .compareplan-section-area .plan-toggle-wrap { left: -48%; top: 20%; right: 0; } } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .compareplan-section-area .plan-toggle-wrap { display: none !important; } } .compareplan-section-area .plan-toggle-wrap h4 { font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); margin-bottom: 0; } .compareplan-section-area .single-pricing-area { background: var(--ztc-text-text-1); padding: 32px 40px !important; position: relative; margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .compareplan-section-area .single-pricing-area { padding: 20px !important; width: 1000px; overflow-y: scroll !important; } } @media (max-width: 767px) { .compareplan-section-area .single-pricing-area { padding: 20px !important; width: 550px; overflow-y: scroll !important; } } .compareplan-section-area .comparison table { width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; } .compareplan-section-area .comparison td, .compareplan-section-area .comparison th { text-align: center; } .compareplan-section-area .comparison tbody tr:nth-child(odd) { display: none; } .compareplan-section-area .comparison .compare-row td { padding: 25px 0; border-top: 1px solid var(--ztc-bg-bg-6); } .compareplan-section-area .comparison tr td:first-child { text-align: left; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); line-height: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-3); padding: 25px 0; border-top: 1px solid var(--ztc-bg-bg-6); } .compareplan-section-area .comparison .tl2 { font-family: var(--ztc-family-font1); line-height: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-3); font-size: var(--ztc-font-size-font-s24); } .compareplan-section-area .comparison .tl2 span { display: inline-block; font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); margin-top: 32px; position: absolute; left: 6%; top: 55px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .compareplan-section-area .comparison .tl2 span { display: none; } } .compareplan-section-area .comparison .qbo { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-3); line-height: var(--ztc-font-size-font-s20); padding: 0 !important; } .compareplan-section-area th.price-info.hide-mobile { padding-bottom: 40px; } .compareplan-section-area .comparison .price-now span { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s44); line-height: var(--ztc-font-size-font-s44); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-3); transition: all 0.4s; display: inline-block; margin-top: 20px; margin-bottom: 24px; } @media (max-width: 767px) { .compareplan-section-area .comparison { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-3); transition: all 0.4s; padding: 20px !important; background: var(--ztc-text-text-1); } .compareplan-section-area th.price-info.hide-mobile { padding-bottom: 20px; } .compareplan-section-area .comparison .qbo { background: none; padding: 10px !important; } .compareplan-section-area .comparison td:first-child, .compareplan-section-area .comparison th:first-child { display: none; } .compareplan-section-area .comparison tbody tr:nth-child(odd) { display: table-row; } .compareplan-section-area .comparison .row { background: var(--ztc-bg-bg-1); } .compareplan-section-area .comparison td, .compareplan-section-area .comparison th { border: 1px solid var(--ztc-bg-bg-6); padding: 20px 0; } } /*============= PRICING-PLAN CSS AREA ===============*/ /*============= SHOP CSS AREA STARTS ===============*/ .shop-inner-section-area .shop-auhtor-area { position: relative; overflow: hidden; transition: all 0.4s; border-radius: 4px; margin-bottom: 30px; } .shop-inner-section-area .shop-auhtor-area:hover .img1::after { visibility: visible; opacity: 0.7; transition: all 0.4s; transform: scale(1); } .shop-inner-section-area .shop-auhtor-area:hover .img1 img { transform: scale(1.1) rotate(4deg); transition: all 0.4s; } .shop-inner-section-area .shop-auhtor-area:hover .content-area { visibility: visible; opacity: 1; top: 40%; transition: all 0.6s; } .shop-inner-section-area .shop-auhtor-area .img1 { position: relative; z-index: 1; overflow: hidden; border-radius: 4px; transition: all 0.4s; } .shop-inner-section-area .shop-auhtor-area .img1::after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; border-radius: 4px; transition: all 0.4s; background: var(--ztc-text-text-3); transform: scale(0.8); visibility: hidden; opacity: 0; } .shop-inner-section-area .shop-auhtor-area .img1 img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 4px; transition: all 0.4s; } .shop-inner-section-area .shop-auhtor-area .content-area { text-align: center; position: absolute; top: 30%; z-index: 2; margin: 0 auto; transition: all 0.6s; left: 25%; right: 25%; visibility: hidden; opacity: 0; } .shop-inner-section-area .shop-auhtor-area .content-area ul li { display: inline-block; } .shop-inner-section-area .shop-auhtor-area .content-area ul li a { height: 50px; width: 50px; text-align: center; line-height: 50px; display: inline-block; border-radius: 50%; background: var(--ztc-bg-bg-1); transition: all 0.4s; } .shop-inner-section-area .shop-auhtor-area .content-area ul li a img { transition: all 0.4s; } .shop-inner-section-area .shop-auhtor-area .content-area ul li a:hover { background: var(--ztc-text-text-2); transition: all 0.4s; } .shop-inner-section-area .shop-auhtor-area .content-area ul li a:hover img { filter: brightness(0) invert(1); transition: all 0.4s; } .shop-inner-section-area .shop-auhtor-area .bottom-content ul { margin-bottom: 10px; } .shop-inner-section-area .shop-auhtor-area .bottom-content ul li { display: inline-block; color: var(--ztc-text-text-2); } .shop-inner-section-area .shop-auhtor-area .bottom-content ul li:nth-last-child(1) { color: #CDD3D4; } .shop-inner-section-area .shop-auhtor-area .bottom-content a { color: var(--ztc-text-text-3); text-transform: uppercase; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 20px; display: inline-block; margin-bottom: 8px; transition: all 0.4s; } .shop-inner-section-area .shop-auhtor-area .bottom-content p { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 20px; } .shop-inner-section-area .shop-auhtor-area .bottom-content p s { color: var(--ztc-text-text-4); text-align: center; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 18px; margin: 0 6px 0 0; } .shop-tabs-area { position: relative; z-index: 1; background: var(--ztc-bg-bg-6); } .shop-tabs-area .nav.nav-pills button { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 18px; display: block; width: 100%; text-align: start; padding: 16px 20px; border-radius: 4px; transition: all 0.4s; background: var(--ztc-bg-bg-1); margin-bottom: 30px; } .shop-tabs-area .nav.nav-pills button i { margin-left: 4px; transform: rotate(-45deg); } .shop-tabs-area .nav.nav-pills button.active { background-color: var(--ztc-bg-bg-2); transition: all 0.4s; color: var(--ztc-bg-bg-1); } .shop-tabs-area .tab-content { padding: 0 0 0 50px; } @media (max-width: 767px) { .shop-tabs-area .tab-content { padding: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .shop-tabs-area .tab-content { padding: 0; } } .shop-details-area .img1 img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .shop-details-area .shop-header-area { padding: 0 0 0 50px; } @media (max-width: 767px) { .shop-details-area .shop-header-area { padding: 0; margin-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .shop-details-area .shop-header-area { padding: 0; margin-top: 30px; } } .shop-details-area .shop-header-area ul li { display: inline-block; color: var(--ztc-bg-bg-2); } .shop-details-area .shop-header-area ul li:nth-last-child(2) { color: #CDD3D4; } .shop-details-area .shop-header-area ul li:nth-last-child(1) { color: var(--ztc-text-text-3); font-size: var(--ztc-font-size-font-s18); font-family: var(--ztc-family-font1); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-regular); margin-left: 8px; } .shop-details-area .shop-header-area h3 { color: var(--ztc-text-text-2); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s32); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 32px; display: inline-block; } .shop-details-area .shop-header-area h3 s { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 18px; display: inline-block; margin: 0 8px 0 0; } .shop-details-area .shop-header-area .qty-container { display: flex; align-items: center; text-align: center; border: 1px solid #E1E3E8; padding: 14px; border-radius: 4px; background: #E6E9E9; } .shop-details-area .shop-header-area .qty-container button { background: none; border: none; font-size: 16px; color: var(--ztc-text-text-3); } .shop-details-area .shop-header-area .qty-container input { text-align: center; width: 60px; border: none; font-size: 16px; color: var(--ztc-text-text-3); outline: none; font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-semibold); } .shop-details-area .shop-header-area .qty-quianttity { display: flex; align-items: center; } .shop-details-area .shop-header-area .btn-area { margin-left: 16px; } .shop-inner-section-area .shop-left-area { position: sticky; top: 100px; border-radius: 4px; padding: 32px 20px; background: var(--ztc-bg-bg-6); } .shop-inner-section-area .shop-left-area h3 { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; display: inline-block; } .shop-inner-section-area .shop-left-area .search-area form { background: var(--ztc-bg-bg-1); border-radius: 4px; position: relative; height: 54px; } .shop-inner-section-area .shop-left-area .search-area form input { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: 17px; font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-3); padding: 16px; width: 100%; outline: none; border: none; } .shop-inner-section-area .shop-left-area .search-area form input::-moz-placeholder { color: var(--ztc-text-text-4); font-weight: var(--ztc-weight-regular); } .shop-inner-section-area .shop-left-area .search-area form input::placeholder { color: var(--ztc-text-text-4); font-weight: var(--ztc-weight-regular); } .shop-inner-section-area .shop-left-area .search-area form button { background: none; border: none; position: absolute; right: 16px; top: 10px; } .shop-inner-section-area .shop-left-area .search-area form button img { filter: brightness(0); transition: all 0.4s; } .shop-inner-section-area .shop-left-area .filter-area .header-btn7 { width: 120px; text-align: center; } .shop-inner-section-area .shop-left-area .filter-area .filter-options { display: flex; align-items: center; justify-content: space-between; } .shop-inner-section-area .shop-left-area .filter-area .range-slider-output { display: flex; align-items: center; } .shop-inner-section-area .shop-left-area .filter-area .range-slider-output .number-group { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 16px; } .shop-inner-section-area .shop-left-area .filter-area .range-slider-output p { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 16px; } .shop-inner-section-area .shop-left-area .filter-area .range-slider-output input { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 16px; } .shop-inner-section-area .shop-left-area .filter-area .filter-options { display: flex; align-items: center; justify-content: space-between; } .shop-inner-section-area .shop-left-area .filter-area .range-slider-output { display: flex; align-items: center; } .shop-inner-section-area .shop-left-area .filter-area .range-slider .number-group .number-input::-webkit-outer-spin-button, .shop-inner-section-area .shop-left-area .filter-area .range-slider .number-group .number-input::-webkit-inner-spin-button { -webkit-appearance: none; } .shop-inner-section-area .shop-left-area .filter-area .range-slider .range-group { position: relative; flex: 0 0 100%; height: 0; } .shop-inner-section-area .shop-left-area .filter-area .range-slider .range-group .range-input { position: absolute; left: 0; bottom: 0; margin-bottom: 0; width: 100%; border-bottom: 0; accent-color: var(--ztc-text-text-2); } .shop-inner-section-area .shop-left-area .filter-area .range-slider .range-group .range-input:focus { outline: 0; } .shop-inner-section-area .shop-left-area .filter-area .range-slider .range-group .range-input::-webkit-slider-runnable-track { width: 100%; height: 5px; cursor: pointer; animation: 0.2s; background: var(--ztc-bg-bg-1); border-radius: 1px; box-shadow: none; border: 0; } .shop-inner-section-area .shop-left-area .filter-area .range-slider .range-group .range-input::-webkit-slider-thumb { z-index: 2; position: relative; height: 15px; width: 15px; border-radius: 50%; background: var(--ztc-bg-bg-2); cursor: pointer; margin-top: -5px; background: var(--ztc-bg-bg-2); } .shop-inner-section-area .shop-left-area .filter-area .range-slider .range-group .range-input::-moz-range-track { width: 100%; height: 2px; cursor: pointer; animation: 0.2s; background: var(--ztc-bg-bg-2); border-radius: 1px; box-shadow: none; border: 0; } .shop-inner-section-area .shop-left-area .products-area { padding: 20px 0; position: relative; border-bottom: 1px solid #BFC9C9; display: flex; align-items: center; justify-content: space-between; } .shop-inner-section-area .shop-left-area .products-area .bottom-content ul { margin-bottom: 10px; } .shop-inner-section-area .shop-left-area .products-area .bottom-content ul li { display: inline-block; color: var(--ztc-text-text-2); } .shop-inner-section-area .shop-left-area .products-area .bottom-content ul li:nth-last-child(1) { color: #CDD3D4; } .shop-inner-section-area .shop-left-area .products-area .bottom-content a { color: var(--ztc-text-text-3); text-transform: uppercase; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 20px; display: inline-block; margin-bottom: 8px; transition: all 0.4s; } .shop-inner-section-area .shop-left-area .products-area .bottom-content p { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 20px; } .shop-inner-section-area .shop-left-area .products-area .bottom-content p span { color: var(--ztc-text-text-4); text-align: center; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 18px; margin: 0 6px 0 0; opacity: 0.6; } .shop-inner-section-area .shop-left-area .products-area .img1 img { height: 120px; width: 120px; -o-object-fit: cover; object-fit: cover; } .shop-inner-section-area .shop-left-area .tags-area ul li { display: inline-block; } .shop-inner-section-area .shop-left-area .tags-area ul li a { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 18px; display: inline-block; border-radius: 4px; transition: all 0.4s; padding: 12px 16px; background: var(--ztc-bg-bg-1); margin: 16px 10px 0 0; } .shop-inner-section-area .shop-left-area .tags-area ul li a:hover { background: var(--ztc-bg-bg-2); transition: all 0.4s; color: var(--ztc-bg-bg-1); } @media (max-width: 767px) { .cart-items { overflow-x: scroll; width: 800px; } } @media (max-width: 767px) { .cart-items { overflow-x: scroll; width: 800px; } } @media (max-width: 767px) { .cart-table-area { overflow-x: scroll; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cart-table-area { overflow-x: scroll; } } .cart-table-area p.pera1 { color: #F4524F; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 20px; text-align: center; padding-bottom: 48px; padding-top: 24px; } @media (max-width: 767px) { .cart-table-area .table.table-borderless { width: 800px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cart-table-area .table.table-borderless { width: 800px; } } .cart-table-area .table.table-borderless tr.cart-head { background: #E6E9E9; overflow: hidden; border: none; color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); border-radius: 5px; font-weight: var(--ztc-weight-semibold); padding: 16px; } .cart-table-area .table.table-borderless tr.cart-product-list td { vertical-align: middle; } .cart-table-area .table.table-borderless .cart-prodct img { -o-object-fit: contain; object-fit: contain; border-radius: 8px; margin-right: 120px; height: 120px; width: 120px; } .cart-table-area .table.table-borderless .cart-prodct .cart-product-details ul li { display: inline-block; color: var(--ztc-bg-bg-2); } .cart-table-area .table.table-borderless .cart-prodct .cart-product-details ul li:nth-last-child(1) { color: #CDD3D4; } .cart-table-area .table.table-borderless .cart-prodct .cart-product-details p.pera { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 20px; display: inline-block; padding-top: 10px; padding-bottom: 10px; } .cart-table-area .table.table-borderless .cart-prodct .cart-product-details a { color: #F23936; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 16px; display: block; transition: all 0.4s; } .cart-table-area .table.table-borderless .cart-price { color: var(--ztc-bg-bg-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 20px; border-radius: 4px; background: var(--ztc-bg-bg-2); padding: 12px 14px; display: inline-block; margin-top: 52px; } @media (max-width: 767px) { .cart-table-area .table.table-borderless .cart-price { margin-top: 45px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cart-table-area .table.table-borderless .cart-price { margin-top: 45px; } } .cart-table-area .table.table-borderless .qty-container { display: inline-block; align-items: center; text-align: center; border: 1px solid #E1E3E8; padding: 14px; border-radius: 4px; background: #E6E9E9; } .cart-table-area .table.table-borderless .qty-container button { background: none; border: none; font-size: 16px; color: var(--ztc-text-text-3); } .cart-table-area .table.table-borderless .qty-container input { text-align: center; width: 60px; border: none; font-size: 16px; color: var(--ztc-text-text-3); outline: none; font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-semibold); } .cart-table-area .table.table-borderless .qty-quianttity { display: flex; align-items: center; } .cart-table-area .table.table-borderless th.table-product { width: 40%; } .cart-table-area .table.table-borderless th.table-price { width: 20%; } .cart-table-area .table.table-borderless th.table-quantity { width: 20%; } .cart-table-area .table.table-borderless th.table-subtotal { width: 20%; } .specing { padding-top: 48px; border-top: 1px solid var(--ztc-bg-bg-6); } .cart-bottom-area { padding: 24px; border-radius: 4px; position: relative; background: var(--ztc-bg-bg-6); } .cart-bottom-area ul li { display: flex; align-items: center; justify-content: space-between; } .cart-bottom-area ul li span { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 16px; display: inline-block; transition: all 0.4s; } .checkout-section-area { position: relative; z-index: 1; } .checkout-section-area .checkout-boxarea { background: var(--ztc-bg-bg-6); border-radius: 4px; padding: 32px; } .checkout-section-area .checkout-boxarea h3 { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s32); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 32px; display: inline-block; margin-bottom: 16px; } .checkout-section-area .checkout-boxarea p { color: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-regular); line-height: 24px; } .checkout-section-area .input-area { margin-top: 24px; } .checkout-section-area .input-area p { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 16px; margin-bottom: 16px; } .checkout-section-area .input-area input { width: 100%; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-3); padding: 16px; border-radius: 4px; border: 1px solid #D7DDDE; height: 48px; } .checkout-section-area .input-area input::-moz-placeholder { font-weight: var(--ztc-weight-regular); } .checkout-section-area .input-area input::placeholder { font-weight: var(--ztc-weight-regular); } .checkout-section-area .input-area .nice-select { width: 100%; outline: none; border: 1px solid #D7DDDE; background: none; height: 48px; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-regular); color: #7F8788; } .checkout-section-area .input-area .nice-select ul { width: 100%; } .checkout-section-area .input-area .nice-select ul li:hover { background: var(--ztc-bg-bg-2); transition: all 0.4s; color: var(--ztc-bg-bg-1); } .checkout-section-area .input-area textarea { width: 100%; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-3); padding: 16px; border-radius: 4px; border: 1px solid #D7DDDE; height: 140px; } .checkout-section-area .input-area textarea::-moz-placeholder { font-weight: var(--ztc-weight-regular); } .checkout-section-area .input-area textarea::placeholder { font-weight: var(--ztc-weight-regular); } .checkout-section-area .input-area button { border: none; } .checkout-section-area .checkout-right-area { padding: 0 0 0 50px; } @media (max-width: 767px) { .checkout-section-area .checkout-right-area { padding: 0; margin-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .checkout-section-area .checkout-right-area { padding: 0; margin-top: 30px; } } .checkout-section-area .checkout-right-area .coupon-area { position: relative; } .checkout-section-area .checkout-right-area .coupon-area h3 { color: var(--ztc-text-text-3); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 16px; margin-bottom: 20px; } .checkout-section-area .checkout-right-area .coupon-area form { position: relative; padding: 16px; border: 1px solid #D7DDDE; border-radius: 4px; height: 52px; } .checkout-section-area .checkout-right-area .coupon-area form input { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-3); width: 100%; line-height: 17px; } .checkout-section-area .checkout-right-area .coupon-area form input::-moz-placeholder { font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-4); line-height: 17px; } .checkout-section-area .checkout-right-area .coupon-area form input::placeholder { font-weight: var(--ztc-weight-regular); color: var(--ztc-text-text-4); line-height: 17px; } .checkout-section-area .checkout-right-area .coupon-area form button { border: none; outline: none; position: absolute; right: 0; top: 0; } .checkout-section-area .checkout-right-area .coupon-area form button::after { display: none; } .checkout-section-area .checkout-right-area .cart-checkout-area { position: relative; z-index: 1; background: var(--ztc-text-text-3); border-radius: 4px; padding: 32px; } .checkout-section-area .checkout-right-area .cart-checkout-area h3 { color: var(--ztc-bg-bg-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); font-style: normal; font-weight: var(--ztc-weight-semibold); line-height: 24px; padding-bottom: 24px; border-bottom: 1px solid #374F52; } .checkout-section-area .checkout-right-area .cart-checkout-area ul li { display: flex; align-items: center; justify-content: space-between; } .checkout-section-area .checkout-right-area .cart-checkout-area ul li span { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-semibold); color: var(--ztc-bg-bg-1); transition: all 0.4s; display: inline-block; } .checkout-section-area .checkout-right-area .cart-checkout-area ul li:nth-last-child(1) { padding: 20px 0 32px 0; border-top: 1px solid #374F52; border-bottom: 1px solid #374F52; } .checkout-section-area .checkout-right-area .cart-checkout-area .input-area { display: flex; align-items: center; padding: 0 0 24px 0; border-bottom: 1px solid #374F52; } .checkout-section-area .checkout-right-area .cart-checkout-area .input-area input { height: 16px; width: 16px; border-radius: 50%; accent-color: var(--ztc-bg-bg-2); background: none; } .checkout-section-area .checkout-right-area .cart-checkout-area .input-area label { color: var(--ztc-bg-bg-1); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); line-height: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-semibold); padding-left: 10px; margin: 0 24px 0 0; } .checkout-section-area .checkout-right-area .cart-checkout-area .input-area img { margin: 0 8px 0 0; } .service-images{ height: 350px!important; } .gallery-images{ height: 350px!important; } /*============= SHOP CSS AREA ENDS ===============*//*# sourceMappingURL=main.css.map */