@use '../utils' as *; /* :::::::::::::::::::::::::: SERVICE AREA CSS :::::::::::::::::::::::::: */ // ==== service style 1 ==== .service1 { background-color: var(--vtc-text-heading-text-1); } .service1-box { margin-top: 30px; overflow: hidden; border-radius: 4px; position: relative; transition: all .4s; .image { img { width: 100%; transition: all .4s; } } .hover-area { position: absolute; bottom: 0; margin: 24px; transform: translateY(60px); opacity: 0; transition: all .4s; z-index: 2; p { color: #ffffffc9; } } &::after { content: ""; position: absolute; bottom: -500px; right: -30px; height: 600px; width: 600px; background-color: var(--vtc-bg-main-bg-1); border-radius: 50%; opacity: 0; transition: all .4s; } &:hover { &::after { opacity: 1; transition: all .4s; bottom: -350px; } .image { img { transition: all .4s; transform: scale(1.1) rotate(2deg); } } .hover-area { opacity: 1; transform: translateY(0); transition: all .4s; } } } .service1-box.active { .hover-area { position: absolute; bottom: 0; margin: 24px; transform: translateY(0); opacity: 1; transition: all .4s; z-index: 2; p { color: #ffffffc9; } } &::after { content: ""; position: absolute; bottom: -350px; right: -30px; height: 600px; width: 600px; background-color: var(--vtc-bg-main-bg-1); border-radius: 50%; opacity: 1; transition: all .4s; } } // ==== service style 1 ==== // ==== service style 2 ==== .service2-box { margin-top: 60px; padding: 70px 32px 32px 32px; border-radius: 4px; background-color: #ffffff1a; position: relative; transition: all .4s; &::after { content: ""; position: absolute; height: 100%; width: 100%; border-radius: 4px; top: 0; left: 0; transform: rotateY(95deg); transition: all .6s linear; background-color: var(--vtc-bg-main-bg-2); z-index: -1; opacity: 0; } .icon { height: 70px; width: 70px; line-height: 70px; text-align: center; border-radius: 50%; background-color: #46466B; position: absolute; top: -35px; left: 30px; transition: all .4s; img { transition: all .4s; filter: brightness(0) invert(1); } } .learn { display: inline-block; position: relative; display: inline-block; vertical-align: middle; -webkit-appearance: none; appearance: none; border: none; outline: none !important; font-weight: var(--f-fw-bold); font-size: var(--f-fs-font-fs16); line-height: var(--f-fs-font-fs16); color: var(--vtc-text-text-white-text-1); text-transform: capitalize; padding: 16px 22px 16px 22px; background-color: var(--vtc-bg-main-bg-2); overflow: hidden; z-index: 1; border-radius: 4px; position: relative; margin-top: 24px; transition: all .4s; span { position: relative; margin-left: 4px; font-size: 16px; transition: all .4s linear; transform: rotate(-45deg); display: inline-block; } } &:hover { transform: translateY(-10px); transition: all .4s; &::after { transform: rotateY(0deg); transition: all .4s linear; background-color: var(--vtc-bg-main-bg-2); z-index: -1; opacity: 1; } .icon { background-color: var(--vtc-text-text-white-text-1); transition: all .4s; img { transition: all .4s; filter: none; } } .learn { color: var(--vtc-bg-main-bg-2); background-color: var(--vtc-text-text-white-text-1); transition: all .4s; } } } // ==== service style 2 ==== // ==== service style 2 benefits ==== .service-benefits { .benefits-box { padding: 32px; border-radius: 4px; margin-top: 30px; transition: all .4s; position: relative; &::after { content: ""; position: absolute; height: 100%; width: 100%; border-radius: 4px; top: 0; left: 0; transform: rotateY(95deg); transition: all .6s linear; background-color: var(--vtc-bg-main-bg-2); z-index: -1; opacity: 0; } &::before { content: ""; position: absolute; height: 100%; width: 100%; border-radius: 4px; top: 0; left: 0; transition: all .6s linear; background-color: #282A5E; z-index: -3; } h4 { a { line-height: var(--f-fs-font-fs32); } } .icon { height: 70px; width: 70px; line-height: 70px; text-align: center; border-radius: 50%; background-color: #46466B; transition: all .4s; margin-bottom: 30px; img { transition: all .4s; filter: brightness(0) invert(1); } } a.learn { display: inline-block; color: var(--vtc-bg-common-bg1); font-size: var(--f-fs-font-fs16); line-height: var(--f-fs-font-fs16); font-weight: var(--f-fw-medium); span { display: inline-block; transform: rotate(-45deg); margin-left: 3px; } } &:hover { transform: translateY(-10px); transition: all .4s; &::after { opacity: 1; transform: rotateY(0deg); transition: all .4s; } .icon { background-color: var(--vtc-text-text-white-text-1); transition: all .4s; img { filter: none; transition: all .4s; } } } } } // ==== service style 2 benefits ==== // ==== service style 3 ==== .service3 { background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; .service3-box { background-color: var(--vtc-text-text-white-text-1); border-radius: 4px; padding: 32px; margin-top: 30px; transition: all .4s; .icon { height: 70px; width: 70px; line-height: 70px; text-align: center; border-radius: 5px; background-color: var(--vtc-bg-common-bg5); margin-bottom: 30px; transition: all .4s; img { transition: all .4s linear; } } .learn { display: inline-block; font-size: var(--f-fs-font-fs16); line-height: var(--f-fs-font-fs16); color: var(--vtc-text-heading-text-1); font-weight: var(--f-fw-bold); transition: all .4s; &:hover { color: var(--vtc-bg-main-bg-3); transition: all .4s; } span { display: inline-block; transform: rotate(-45deg); } } &:hover { transition: all .4s; transform: translateY(-10px); .icon { height: 70px; width: 70px; line-height: 70px; text-align: center; border-radius: 5px; background-color: var(--vtc-bg-main-bg-3); margin-bottom: 30px; transition: all .4s; img { transition: all .4s linear; filter: brightness(0) invert(1); transform: rotateY(180deg); } } } } .shape1 { position: absolute; top: 0; right: 0; } } // ==== service style 3 ==== // ==== service style 4 ==== .service4 { background-color: var(--vtc-bg-main-bg-5); } .service4-box { position: relative; margin-top: 34px; transition: all .4s; .image { overflow: hidden; border-radius: 4px; img { width: 100%; transition: all .4s; } } .icon { display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; font-size: 22px; color: var(--vtc-bg-main-bg-6); background-color: var(--vtc-text-text-white-text-1); border-radius: 50%; position: absolute; top: 24px; right: 24px; transform: rotate(-45deg) scale(1.4); transition: all .4s; opacity: 0; } .heading4-w { margin: 0px 30px; position: absolute; bottom: 30px; } &:hover { transition: all .4s; transform: translateY(-10px); .image { img { transform: rotate(2deg) scale(1.1); transition: all .4s; } } .icon { opacity: 1; transition: all .4s; transform: rotate(-45deg) scale(1); } } } // ==== service style 4 ==== // ==== service style 5 ==== .service5 { background-color: var(--vtc-bg-common-bg9); } .service5-box { margin-top: 60px; padding: 70px 32px 32px 32px; border-radius: 4px; background-color: var(--vtc-bg-bg-white); position: relative; transition: all .4s; &::after { content: ""; position: absolute; height: 100%; width: 100%; border-radius: 4px; top: 0; left: 0; transform: rotateY(95deg); transition: all .6s linear; background-color: var(--vtc-bg-main-bg-2); z-index: -1; opacity: 0; } .icon { height: 70px; width: 70px; line-height: 70px; text-align: center; border-radius: 50%; background-color: #F3DFE5; position: absolute; top: -35px; left: 30px; transition: all .4s; img { transition: all .4s; } } .learn { display: inline-block; position: relative; display: inline-block; vertical-align: middle; -webkit-appearance: none; appearance: none; border: none; outline: none !important; font-weight: var(--f-fw-bold); font-size: var(--f-fs-font-fs16); line-height: var(--f-fs-font-fs16); color: var(--vtc-text-text-white-text-1); text-transform: capitalize; padding: 16px 22px 16px 22px; background-color: var(--vtc-bg-main-bg-2); overflow: hidden; z-index: 1; border-radius: 4px; position: relative; margin-top: 24px; transition: all .4s; span { position: relative; margin-left: 4px; font-size: 16px; transition: all .4s linear; transform: rotate(-45deg); display: inline-block; } } &:hover { transform: translateY(-10px); transition: all .4s; .heading5 { h4 { a { color: var(--vtc-text-text-white-text-1); transition: all .4s; } } p { color: #ffffffc7; transition: all .4s; } } &::after { transform: rotateY(0deg); transition: all .4s linear; background-color: var(--vtc-bg-main-bg-2); z-index: -1; opacity: 1; } .icon { background-color: var(--vtc-text-text-white-text-1); transition: all .4s; img { transition: all .4s; filter: none; } } .learn { color: var(--vtc-bg-main-bg-2); background-color: var(--vtc-text-text-white-text-1); transition: all .4s; } } } // ==== service style 5 ==== // ==== service style 5 benefits ==== .service-benefits5 { .benefits-box { padding: 32px; border-radius: 4px; margin-top: 30px; transition: all .4s; position: relative; &::after { content: ""; position: absolute; height: 100%; width: 100%; border-radius: 4px; top: 0; left: 0; transform: rotateY(95deg); transition: all .6s linear; background-color: var(--vtc-bg-main-bg-2); z-index: -1; opacity: 0; } &::before { content: ""; position: absolute; height: 100%; width: 100%; border-radius: 4px; top: 0; left: 0; transition: all .6s linear; background-color: #F2F4F7; z-index: -3; } h4 { a { line-height: var(--f-fs-font-fs32); color: var(--vtc-text-heading-text-3); } } p { color: #001431d7; } .icon { height: 70px; width: 70px; line-height: 70px; text-align: center; border-radius: 50%; background-color: #F3DFE5; transition: all .4s; margin-bottom: 30px; img { transition: all .4s; } } a.learn { display: inline-block; color: var(--vtc-text-heading-text-3); font-size: var(--f-fs-font-fs16); line-height: var(--f-fs-font-fs16); font-weight: var(--f-fw-medium); transition: all .4s; span { display: inline-block; transform: rotate(-45deg); margin-left: 3px; } } &:hover { transform: translateY(-10px); transition: all .4s; &::after { opacity: 1; transform: rotateY(0deg); transition: all .4s; } h4 { a { line-height: var(--f-fs-font-fs32); color: #fff; transition: all .4s; } } p { color: #ffffffd7; transition: all .4s; } a.learn { display: inline-block; color: var(--vtc-text-text-white-text-1); font-size: var(--f-fs-font-fs16); line-height: var(--f-fs-font-fs16); font-weight: var(--f-fw-medium); transition: all .4s; span { display: inline-block; transform: rotate(-45deg); margin-left: 3px; } } .icon { background-color: var(--vtc-text-text-white-text-1); transition: all .4s; img { filter: none; transition: all .4s; } } } } } // ==== service style 5 benefits ==== .service1.service-page-service { background-color: #fff; } // ==== service style 6 ==== .service6 { background-position: center center; background-size: cover; background-repeat: no-repeat; .service-box { margin-top: 30px; background-color: #fff; border-radius: 8px; padding: 24px; position: relative; text-align: center; transition: all .4s; .icon { height: 90px; width: 90px; text-align: center; line-height: 90px; background-color: #F3F5F2; position: relative; left: 50%; margin-left: -45px; border-radius: 50%; margin-top: -45px; z-index: 9; img { transition: all .4s; } } .heading6 { h5 { a { display: inline-block; color: #081120; font-size: 20px; font-style: normal; font-weight: 700; line-height: 20px; /* 100% */ text-transform: uppercase; padding-top: 24px; padding-bottom: 12px; transition: all .4s; &:hover { color: #F1C832; } } } } .image { border-radius: 8px; position: relative; overflow: hidden; img { width: 100%; transition: all .4s; } .arrow { position: absolute; top: 50%; left: 50%; background-color: #F1C832; height: 48px; width: 48px; text-align: center; line-height: 48px; border-radius: 50%; font-size: 20px; margin-top: -24px; margin-left: -24px; color: #081120; transform: rotate(-45deg) scale(1.5); z-index: 3; opacity: 0; transition: all .4s; } &::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #081120; opacity: 0; border-radius: 8px; z-index: 1; transition: all .4s; transform: scale(0.6); } } &:hover { transform: translateY(-10px); transition: all .4s; .icon { img { transition: all .4s; transform: rotateY(180deg); } } .image { img { transition: all .4s; transform: scale(1.1) rotate(2deg); } &::after { opacity: 0.4; transform: scale(1); } .arrow { transition: all .4s; transform: rotate(-45deg) scale(1); opacity: 1; } } } } } // ==== service style 6 ==== // ==== service style 7 ==== .service7 { .service7-slider { margin-top: 60px; .single-slider { margin: 0px 15px; position: relative; .image { border-radius: 8px; overflow: hidden; position: relative; img { width: 100%; transition: all .4s; } &::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; border-radius: 8px; background-color: #081120; opacity: 0; transition: all .4s; transform: scale(0.6); } .hover-icon { display: inline-block; font-size: 20px; color: #fff; height: 48px; width: 48px; text-align: center; line-height: 48px; background-color: #5957E5; border-radius: 50%; transform: rotate(-45deg) scale(1.5); position: absolute; top: 120px; left: 50%; margin-left: -24px; z-index: 2; opacity: 0; transition: all .4s; } } .hover-area { background-color: #fff; padding: 24px; border-radius: 8px; position: absolute; bottom: 24px; margin: 0px 20px 0px 30px; left: 0; width: 85%; display: flex; align-items: center; h3 { a { display: inline-block; color: #081120; font-size: 20px; font-style: normal; font-weight: 700; line-height: 20px; /* 100% */ text-transform: uppercase; padding-left: 20px; transition: all .4s; &:hover { color: #5957E5; transition: all .4s; } } } } &:hover { transition: all .4s; .image { img { transition: all .4s; transform: scale(1.1) rotate(2deg); } .hover-icon { opacity: 1; transform: rotate(-45deg); transition: all .4s; } &::after { transition: all .4s; opacity: 0.4; transform: scale(1); } } } &.slick-current.slick-active { transition: all .4s; .image { img { transition: all .4s; transform: scale(1.1) rotate(2deg); } .hover-icon { opacity: 1; transform: rotate(-45deg); transition: all .4s; } &::after { transition: all .4s; opacity: 0.4; transform: scale(1); } } } } } .arrows-button { text-align: end; @media #{$md} { text-align: center; margin-top: 20px; } @media #{$xs} { text-align: center; margin-top: 20px; } button { font-size: 20px; background-color: #fff; height: 56px; width: 56px; text-align: center; line-height: 56px; border: none; border-radius: 50%; margin-left: 10px; color: #081120; transition: all .4s; &:hover { background-color: #5957E5; color: #fff; transition: all .4s; } } } } // ==== service style 7 ==== // ==== service style 8 ==== .service8 { .service-box { margin-top: 70px; background-color: #fff; border-radius: 8px; padding: 64px 28px 32px 28px; position: relative; transition: all .4s; .icon { background-color: #FFF; box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.09); height: 80px; width: 80px; text-align: center; line-height: 80px; border-radius: 50%; position: absolute; top: -40px; img { transition: all .4s; } } .heading { h4 { a { display: inline-block; color: #081120; font-size: 20px; font-style: normal; font-weight: 700; line-height: 20px; /* 100% */ text-transform: uppercase; transition: all .4s; &:hover { transition: all .4s; color: #F6AA32; } } } p { color: #555; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; /* 150% */ padding: 16px 0px 20px 0px; } .learn { display: inline-block; color: #081120; font-size: 16px; font-style: normal; font-weight: 700; line-height: 16px; /* 100% */ text-transform: uppercase; transition: all .4s; &:hover { transition: all .4s; color: #F6AA32; } } } &:hover { background-color: #081120; transform: translateY(-10px); transition: all .4s; .icon { img { transform: rotateY(180deg); transition: all .4s; } } .heading { h4 { a { transition: all .4s; color: #fff; } } p { transition: all .4s; color: #ffffffc2; } .learn { transition: all .4s; color: #fff; } } } } } // ==== service style 8 ==== // ==== service style 9 ==== .service9 { position: relative; &::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #F3F5F2; border-radius: 8px; z-index: -4; } .service-box { text-align: center; padding: 32px 28px; position: relative; z-index: 4; margin-top: 6px; transition: all .4s; &:hover { transform: translateY(-10px); transition: all .4s; } &::after { content: ""; position: absolute; left: 0; bottom: 0; height: 70%; width: 100%; background-color: #fff; border-radius: 8px; z-index: -1; } span.text { display: inline-block; color: #2A9134; font-size: 18px; font-style: normal; font-weight: 600; line-height: 18px; /* 100% */ text-transform: uppercase; padding: 28px 0px 24px 0px; } h4 { a { display: inline-block; color: #081120; font-size: 20px; font-style: normal; font-weight: 700; line-height: 20px; /* 100% */ text-transform: uppercase; transition: all .4s; &:hover { color: #2A9134; transition: all .4s; } } } p { color: #555; font-size: 18px; font-style: normal; font-weight: 500; line-height: 26px; /* 144.444% */ padding: 14px 0px 20px 0px; } .learn { display: inline-block; color: #081120; font-size: 16px; font-style: normal; font-weight: 700; line-height: 16px; /* 100% */ text-transform: uppercase; transition: all .4s; &:hover { color: #2A9134; transition: all .4s; } } } } // ==== service style 9 ==== // ==== service style 10 ==== .service10 { .service-box { margin-top: 30px; background-color: #fff; border-radius: 8px; padding: 28px 36px; text-align: center; transition: all .4s; .icon { background-color: #F7F5FB; height: 80px; width: 80px; text-align: center; line-height: 80px; border-radius: 50%; margin: auto; } .heading { h4 { a { display: inline-block; color: #081120; font-size: 20px; font-style: normal; font-weight: 700; line-height: 20px; /* 100% */ text-transform: uppercase; transition: all .4s; padding-top: 24px; } } p { color: #555; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; /* 150% */ padding: 16px 0px 22px 0px; transition: all .4s; } .learn { display: inline-block; color: #081120; font-size: 16px; font-style: normal; font-weight: 700; line-height: 16px; /* 100% */ text-transform: uppercase; transition: all .4s; } } &:hover { transition: all .4s; transform: translateY(-10px); background-color: #FA6444; h4 { a { color: #fff; transition: all .4s; } } p { color: #ffffffc7; transition: all .4s; } a.learn { color: #fff; transition: all .4s; } } } } // ==== service style 10 ==== /* :::::::::::::::::::::::::: SERVICE AREA CSS :::::::::::::::::::::::::: */