Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
firepot
/
wp-content
/
themes
/
cyarb
/
assets
/
css
:
style.css
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
/* @File: Cyarb Theme Styles Theme Name: Cyarb Theme URI: http://themes.envytheme.com/cyarb/ Author: Envytheme Author URI: http://envytheme.com Description: Cyarb - Cyber Security Company WordPress Theme Requires at least: 5.0 Tested up to: 5.4 Requires PHP: 7.0 Version: 1.0 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: cyarb Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready * This file contains the styling for the actual theme, this is the file you need to edit to change the look of the theme. This files table contents are outlined below>>>>> ******************************************* ******************************************* ** - Default CSS */ /*================================================ Default CSS =================================================*/ :root { --fontFamily: 'Roboto', sans-serif; --headingFontFamily: 'Jost', sans-serif; --mainColor: #ED1D61; --secondaryColor: #666666; --whiteColor: #ffffff; --blackColor: #000000; --transition: .5s; --fontSize: 14px; --gradOne: #ed1e79; --gradTwo: #f10d66; --gradThree: #f30251; --gradFour: #f10a3c; --gradFive: #ed1c24; --pgradOne: #ED1D78; --pgradTwo: #ED1B25; --primaryGradientColor: linear-gradient(90deg, var(--pgradOne) 0%, var(--pgradTwo) 100%); --primaryGradientColorTwo: linear-gradient(135.5deg, #ED407E 1.15%, #8E42C9 50.99%, #5D7CE5 99.15%); --primaryGradientColorThree: linear-gradient(135deg, #6C42E4 0%, #00B0EA 100%); } body { margin: 0; padding: 0; color: var(--blackColor); font-size: var(--fontSize); font-family: var(--fontFamily); } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { color: var(--blackColor); font-weight: 700; font-family: var(--headingFontFamily); } a { -webkit-transition: var(--transition); transition: var(--transition); color: var(--blackColor); text-decoration: none; outline: 0 !important; } a:hover { color: var(--mainColor); text-decoration: none; } :focus { outline: 0 !important; } .d-table { width: 100%; height: 100%; } .d-table-cell { vertical-align: middle; } img { max-width: 100%; height: auto; } p { color: var(--secondaryColor); size: var(--fontSize); margin-bottom: 15px; line-height: 1.9; } p:last-child { margin-bottom: 0; } .ptb-100 { padding-top: 100px; padding-bottom: 100px; } .pt-100 { padding-top: 100px; } .pb-100 { padding-bottom: 100px; } .ptb-75 { padding-top: 75px; padding-bottom: 75px; } .pt-75 { padding-top: 75px; } .pb-75 { padding-bottom: 75px; } .bg-f5f8ff { background-color: #f5f8ff; } .bg-F9F9F9 { background: #F9F9F9; } /*section-title*/ .section-title { text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 55px; } .section-title h1 { font-size: 48px; margin-bottom: 0; } .section-title h2 { font-size: 44px; margin-bottom: 0; margin-top: -4px; } .section-title h3 { font-size: 40px; margin-bottom: 0; } .section-title h4 { font-size: 35px; margin-bottom: 0; } .section-title h5 { font-size: 30px; margin-bottom: 0; } .section-title h6 { font-size: 25px; margin-bottom: 0; } .section-title p { max-width: 640px; margin-top: 15px; margin-left: auto; margin-right: auto; } /*default-btn*/ .default-btn { border: 0; z-index: 1; overflow: hidden; position: relative; padding: 11px 30px; border-radius: 30px; display: inline-block; color: var(--whiteColor); -webkit-transition: var(--transition); transition: var(--transition); -webkit-box-shadow: 0 8px 35px #ed277540; box-shadow: 0 8px 35px #ed277540; background: -webkit-gradient(linear, left top, left bottom, from(var(--gradOne)), color-stop(var(--gradTwo)), color-stop(var(--gradThree)), color-stop(var(--gradFour)), to(var(--gradFive))); background: linear-gradient(to bottom, var(--gradOne), var(--gradTwo), var(--gradThree), var(--gradFour), var(--gradFive)); font-size: 16px; font-weight: 500; font-family: var(--headingFontFamily); } .default-btn::before { top: 0; left: 0; height: 0; content: ""; z-index: -1; width: 25.25%; position: absolute; -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; background-color: var(--blackColor); } .default-btn::after { top: 0; left: 50%; height: 0; content: ""; z-index: -1; width: 25.25%; position: absolute; -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; background-color: var(--blackColor); } .default-btn span { display: block; } .default-btn span::before { bottom: 0; height: 0; left: 25%; content: ""; z-index: -1; width: 25.25%; position: absolute; -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; background-color: var(--blackColor); } .default-btn span::after { bottom: 0; left: 75%; height: 0; content: ""; z-index: -1; width: 25.25%; position: absolute; -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; background-color: var(--blackColor); } .default-btn:hover { color: var(--whiteColor); background-color: var(--mainColor); } .default-btn:hover::before, .default-btn:hover::after { height: 100%; } .default-btn:hover span::before, .default-btn:hover span::after { height: 100%; } /*form-control*/ .form-control { height: 48px; border-radius: 5px; color: var(--blackColor); font-size: var(--fontSize); border: 1px solid #eeeeee; -webkit-box-shadow: unset !important; box-shadow: unset !important; padding-left: 15px; padding-right: 15px; } .form-control:focus { border-color: #d5cccc; } textarea.form-control { padding-top: 15px; min-height: auto; height: auto; } /*================================================ Header Area CSS =================================================*/ /*================================================ Main Banner Area CSS =================================================*/ .main-banner-area { z-index: 1; padding-top: 50px; position: relative; } .main-banner-area .container-fluid { padding-left: 30px; padding-right: 30px; } .main-banner-content h1 { font-size: 55px; margin-bottom: 18px; } .main-banner-content h2 { font-size: 50px; margin-bottom: 18px; } .main-banner-content h3 { font-size: 45px; margin-bottom: 18px; } .main-banner-content h4 { font-size: 40px; margin-bottom: 18px; } .main-banner-content h5 { font-size: 35px; margin-bottom: 18px; } .main-banner-content h6 { font-size: 30px; margin-bottom: 18px; } .main-banner-content p { font-size: 15px; } .main-banner-content .btn-box { margin-top: 30px; } .main-banner-content .btn-box .link-btn { color: var(--secondaryColor); text-decoration: underline; display: inline-block; padding-right: 13px; position: relative; margin-left: 20px; font-size: 16px; font-weight: 500; font-family: var(--headingFontFamily); } .main-banner-content .btn-box .link-btn:hover { color: var(--mainColor); } .main-banner-content .btn-box .link-btn i { top: 50%; right: -2px; font-size: 13px; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .main-banner-image { text-align: center; } .banner-area { z-index: 1; position: relative; background-color: #f9f9f9; padding-top: 60px; padding-bottom: 60px; } .banner-area .container-fluid { padding-left: 30px; padding-right: 30px; } .banner-area .newsletter-form p { color: #000; margin-bottom: 0; margin-top: 5px; text-align: center; } .banner-content h1 { font-size: 60px; margin-bottom: 18px; } .banner-content h2 { font-size: 35px; margin-bottom: 18px; } .banner-content h3 { font-size: 32px; margin-bottom: 18px; } .banner-content h4 { font-size: 27px; margin-bottom: 18px; } .banner-content h5 { font-size: 22px; margin-bottom: 18px; } .banner-content h6 { font-size: 18px; margin-bottom: 18px; } .banner-content p { font-size: 14px; max-width: 720px; } .banner-content form { max-width: 700px; margin-top: 30px; position: relative; } .banner-content form .input-newsletter { width: 100%; height: 62px; display: block; padding-left: 25px; border-radius: 30px; border: 1px solid #C1C1C1; -webkit-transition: var(--transition); transition: var(--transition); background-color: var(--whiteColor); -webkit-box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; font-size: 16px; font-family: var(--headingFontFamily); } .banner-content form .input-newsletter::-webkit-input-placeholder { -webkit-transition: var(--transition); transition: var(--transition); color: var(--secondaryColor); } .banner-content form .input-newsletter:-ms-input-placeholder { -webkit-transition: var(--transition); transition: var(--transition); color: var(--secondaryColor); } .banner-content form .input-newsletter::-ms-input-placeholder { -webkit-transition: var(--transition); transition: var(--transition); color: var(--secondaryColor); } .banner-content form .input-newsletter::placeholder { -webkit-transition: var(--transition); transition: var(--transition); color: var(--secondaryColor); } .banner-content form .input-newsletter:focus { border-color: var(--mainColor); } .banner-content form .input-newsletter:focus::-webkit-input-placeholder { color: transparent; } .banner-content form .input-newsletter:focus:-ms-input-placeholder { color: transparent; } .banner-content form .input-newsletter:focus::-ms-input-placeholder { color: transparent; } .banner-content form .input-newsletter:focus::placeholder { color: transparent; } .banner-content form .default-btn { position: absolute; right: 10px; top: 8px; } .banner-content .btn-box { margin-top: 25px; } .banner-content .btn-box .default-btn { -webkit-box-shadow: unset; box-shadow: unset; } .banner-content .btn-box .link-btn { color: var(--secondaryColor); text-decoration: underline; display: inline-block; padding-right: 13px; position: relative; margin-left: 20px; font-size: 16px; font-weight: 500; font-family: var(--headingFontFamily); } .banner-content .btn-box .link-btn:hover { color: var(--mainColor); } .banner-content .btn-box .link-btn i { top: 50%; right: -2px; font-size: 13px; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .banner-image { text-align: center; border-radius: 50%; } .banner-image img { border: 1px solid #eeeeee; border-radius: 50% !important; padding: 20px; } .home-slides .banner-image { padding-left: 50px; } .home-slides .banner-image img { -webkit-animation: border-transform 10s linear infinite alternate forwards; animation: border-transform 10s linear infinite alternate forwards; } .home-slides.owl-theme .owl-nav { top: 50%; right: 0; margin-top: 0; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .home-slides.owl-theme .owl-nav [class*=owl-] { padding: 0; width: 60px; height: 60px; margin: 5px 0; display: block; font-size: 25px; border-radius: 0; background: var(--whiteColor); -webkit-transition: var(--transition); transition: var(--transition); } .home-slides.owl-theme .owl-nav [class*=owl-]:hover { background-color: var(--mainColor); color: var(--whiteColor); } .owl-item.active .banner-item h1 { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .owl-item.active .banner-item p { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .owl-item.active .banner-item .btn-box { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } @-webkit-keyframes border-transform { 0%, 100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } } @keyframes border-transform { 0%, 100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } } .banner-wrapper-area { z-index: 1; position: relative; background-color: var(--blackColor); background-position: center center; background-repeat: no-repeat; background-size: cover; padding-top: 270px; padding-bottom: 75px; } .banner-wrapper-area::before { top: 0; left: 0; right: 0; bottom: 0; z-index: -1; content: ''; opacity: 0.3; position: absolute; background-color: #000000; } .banner-wrapper-area .shape1 { left: 6%; top: 17%; } .banner-wrapper-area .shape5 { right: 5%; top: 13%; } .banner-wrapper-area .shape4 { bottom: 35%; left: 40%; } .banner-wrapper-content h1 { font-size: 55px; margin-bottom: 18px; color: var(--whiteColor); } .banner-wrapper-content p { font-size: 15px; color: var(--whiteColor); } .banner-wrapper-content .btn-box { margin-top: 30px; } .banner-wrapper-content .btn-box .default-btn::before, .banner-wrapper-content .btn-box .default-btn::after { background-color: var(--whiteColor); } .banner-wrapper-content .btn-box .default-btn span::before, .banner-wrapper-content .btn-box .default-btn span::after { background-color: var(--whiteColor); } .banner-wrapper-content .btn-box .default-btn:hover { color: var(--mainColor); } .banner-wrapper-content .btn-box .link-btn { text-decoration: underline; color: var(--whiteColor); display: inline-block; padding-right: 13px; position: relative; margin-left: 20px; font-size: 16px; font-weight: 500; font-family: var(--headingFontFamily); } .banner-wrapper-content .btn-box .link-btn:hover { color: var(--mainColor); } .banner-wrapper-content .btn-box .link-btn i { top: 50%; right: -2px; font-size: 13px; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .banner-wrapper-video { margin-left: 150px; } .banner-wrapper-video .video-btn { z-index: 1; width: 100px; height: 100px; font-size: 40px; position: relative; text-align: center; border-radius: 50%; display: inline-block; color: var(--whiteColor); background-color: var(--mainColor); } .banner-wrapper-video .video-btn i { left: 0; right: 0; top: 50%; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .banner-wrapper-video .video-btn::after, .banner-wrapper-video .video-btn::before { content: ''; display: block; position: absolute; top: 0; right: 0; z-index: -1; bottom: 0; left: 0; border-radius: 50%; border: 1px solid var(--whiteColor); } .banner-wrapper-video .video-btn::before { -webkit-animation: ripple 2s linear infinite; animation: ripple 2s linear infinite; } .banner-wrapper-video .video-btn::after { -webkit-animation: ripple 2s linear 1s infinite; animation: ripple 2s linear 1s infinite; } .banner-boxes-area { margin-top: 140px; } .banner-boxes-area .single-features-box { background-color: rgba(0, 0, 0, 0.5); } .banner-boxes-area .single-features-box .icon { background: -webkit-gradient(linear, left top, left bottom, from(var(--gradOne)), color-stop(var(--gradTwo)), color-stop(var(--gradThree)), color-stop(var(--gradFour)), to(var(--gradFive))); background: linear-gradient(to bottom, var(--gradOne), var(--gradTwo), var(--gradThree), var(--gradFour), var(--gradFive)); } .banner-boxes-area .single-features-box h3 { color: var(--whiteColor); } .banner-boxes-area .single-features-box h3 a { color: var(--whiteColor); } .banner-boxes-area .single-features-box p { color: var(--whiteColor); opacity: .9; } .banner-boxes-area .single-features-box:hover .icon { background-color: var(--whiteColor); } .shape1 { position: absolute; z-index: -1; left: 2%; top: 12%; } .shape1 img { -webkit-animation: movebounce 5s linear infinite; animation: movebounce 5s linear infinite; } .shape2 { position: absolute; z-index: -1; left: 30%; top: 9%; } .shape2 img { -webkit-animation: moveleftbounce 5s linear infinite; animation: moveleftbounce 5s linear infinite; } .shape3 { position: absolute; z-index: -1; bottom: 7%; left: 2%; } .shape3 img { -webkit-animation: movescale 3s linear infinite; animation: movescale 3s linear infinite; } .shape4 { position: absolute; z-index: -1; bottom: 12%; left: 29%; } .shape4 img { -webkit-animation: moveleftbounce 5s linear infinite; animation: moveleftbounce 5s linear infinite; } .shape5 { position: absolute; z-index: -1; right: 2%; top: 15%; } .shape5 img { -webkit-animation: movebounce 5s linear infinite; animation: movebounce 5s linear infinite; } .shape12 { right: 0; z-index: -1; bottom: 45px; position: absolute; } .shape12 img { -webkit-animation: movebounce 5s linear infinite; animation: movebounce 5s linear infinite; } @-webkit-keyframes movebounce { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes movebounce { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } @-webkit-keyframes moveleftbounce { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } } @keyframes moveleftbounce { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } } @-webkit-keyframes rotate3d { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @keyframes rotate3d { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @-webkit-keyframes movescale { 0% { -webkit-transform: scale(0.8); transform: scale(0.8); } 50% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes movescale { 0% { -webkit-transform: scale(0.8); transform: scale(0.8); } 50% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.8); transform: scale(0.8); } } @-webkit-keyframes ripple { 0% { -webkit-transform: scale(1); transform: scale(1); } 75% { -webkit-transform: scale(1.75); transform: scale(1.75); opacity: 1; } 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } @keyframes ripple { 0% { -webkit-transform: scale(1); transform: scale(1); } 75% { -webkit-transform: scale(1.75); transform: scale(1.75); opacity: 1; } 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } /*================================================ Features Area CSS =================================================*/ .single-features-box { position: relative; border-radius: 7px; padding: 30px 30px 30px 70px; -webkit-transition: var(--transition); transition: var(--transition); background-color: var(--whiteColor); -webkit-box-shadow: 5px 10px 70px #b7bac31f; box-shadow: 5px 10px 70px #b7bac31f; margin-left: 42.5px; margin-bottom: 25px; } .single-features-box .icon { top: 50%; width: 85px; height: 85px; left: -42.5px; border-radius: 50%; text-align: center; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: var(--transition); transition: var(--transition); background-color: var(--mainColor); -webkit-box-shadow: 5px 10px 30px #262a371f; box-shadow: 5px 10px 30px #262a371f; } .single-features-box .icon img { left: 0; right: 0; top: 50%; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-left: auto; margin-right: auto; } .single-features-box h3 { -webkit-transition: var(--transition); transition: var(--transition); margin-bottom: 15px; font-size: 22px; } .single-features-box p { -webkit-transition: var(--transition); transition: var(--transition); } .single-features-box:hover { background-color: var(--mainColor); } .single-features-box:hover h3 { color: var(--whiteColor); } .single-features-box:hover h3 a { color: var(--whiteColor); } .single-features-box:hover p { color: var(--whiteColor); } /*================================================ About Area CSS =================================================*/ .about-area { z-index: 1; position: relative; } .about-area .shape3 { bottom: 15%; left: 4%; } .about-area .shape4 { bottom: auto; left: auto; right: 3%; top: 36%; } .about-area .shape2 { bottom: 8%; left: auto; top: auto; right: 5%; } .about-area .container-fluid { max-width: 1900px; padding-left: 100px; padding-right: 100px; } .about-image { text-align: center; position: relative; } .about-image::before { -webkit-animation: movebounce 5s linear infinite; animation: movebounce 5s linear infinite; position: absolute; width: 121px; height: 67px; content: ''; right: 75px; top: 60px; background-image: url(../img/shape/shape2.png); background-position: center center; background-repeat: no-repeat; background-size: cover; } .about-image::after { -webkit-animation: movebounce 5s linear infinite; animation: movebounce 5s linear infinite; position: absolute; width: 100px; height: 40px; bottom: 60px; content: ''; left: 125px; background-image: url(../img/shape/shape3.png); background-position: center center; background-repeat: no-repeat; background-size: cover; } .about-content { max-width: 635px; } .about-content h1 { margin-bottom: 15px; font-size: 50px; } .about-content h2 { margin-bottom: 15px; font-size: 44px; } .about-content h3 { margin-bottom: 15px; font-size: 40px; } .about-content h4 { margin-bottom: 15px; font-size: 36px; } .about-content h5 { margin-bottom: 15px; font-size: 32px; } .about-content h6 { margin-bottom: 15px; font-size: 28px; } .about-content .features-list { padding-left: 0; list-style-type: none; margin-top: 30px; margin-bottom: 0; } .about-content .features-list li { z-index: 1; position: relative; margin-bottom: 20px; border-radius: 20px; padding: 30px 30px 30px 135px; -webkit-transition: var(--transition); transition: var(--transition); background-color: var(--whiteColor); -webkit-box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px; box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px; } .about-content .features-list li .icon { background-color: var(--whiteColor); -webkit-transition: var(--transition); transition: var(--transition); -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; text-align: center; border-radius: 50%; height: 85px; width: 85px; left: 30px; z-index: 1; top: 50%; } .about-content .features-list li .icon img { left: 0; right: 0; top: 50%; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: var(--transition); transition: var(--transition); margin-left: auto; margin-right: auto; } .about-content .features-list li .icon::before { top: 0; left: 0; right: 0; bottom: 0; content: ''; z-index: -1; border-radius: 50%; position: absolute; -webkit-transition: var(--transition); transition: var(--transition); background: -webkit-gradient(linear, right top, left top, from(var(--gradOne)), color-stop(var(--gradTwo)), color-stop(var(--gradThree)), color-stop(var(--gradFour)), to(var(--gradFive))); background: linear-gradient(to left, var(--gradOne), var(--gradTwo), var(--gradThree), var(--gradFour), var(--gradFive)); } .about-content .features-list li h3 { -webkit-transition: var(--transition); transition: var(--transition); margin-bottom: 12px; font-size: 22px; } .about-content .features-list li p { -webkit-transition: var(--transition); transition: var(--transition); } .about-content .features-list li:last-child { margin-bottom: 0; } .about-content .features-list li::before { top: 0; left: 0; right: 0; bottom: 0; opacity: 0; z-index: -1; content: ''; visibility: hidden; position: absolute; border-radius: 20px; -webkit-transition: var(--transition); transition: var(--transition); background: -webkit-gradient(linear, right top, left top, from(var(--gradOne)), color-stop(var(--gradTwo)), color-stop(var(--gradThree)), color-stop(var(--gradFour)), to(var(--gradFive))); background: linear-gradient(to left, var(--gradOne), var(--gradTwo), var(--gradThree), var(--gradFour), var(--gradFive)); } .about-content .features-list li:hover .icon { background-color: var(--blackColor); } .about-content .features-list li:hover .icon::before { opacity: 0; visibility: hidden; } .about-content .features-list li:hover h3 { color: var(--whiteColor); } .about-content .features-list li:hover p { color: var(--whiteColor); } .about-content .features-list li:hover::before { opacity: 1; visibility: visible; } /*================================================ Team Area CSS =================================================*/ .team-area { position: relative; z-index: 1; } .team-area .shape3 { bottom: auto; left: 13%; top: 24%; } .team-area .shape2 { top: 48%; right: 10%; left: auto; } .team-area .shape4 { bottom: auto; left: auto; right: 5%; top: -5%; } .single-team-member { margin-bottom: 25px; text-align: center; } .single-team-member .image { border-radius: 7px; overflow: hidden; } .single-team-member .image img { border-radius: 7px; -webkit-transition: var(--transition); transition: var(--transition); } .single-team-member .content { padding: 30px; margin-top: -30px; position: relative; border-radius: 30px; background-color: var(--whiteColor); } .single-team-member .content h3 { font-size: 22px; margin-bottom: 12px; } .single-team-member .content h3 span { display: block; margin-top: 12px; color: var(--mainColor); font-size: 16px; font-weight: normal; } .single-team-member .content .social-links { padding-left: 0; list-style-type: none; margin-top: 18px; margin-bottom: 0; } .single-team-member .content .social-links li { display: inline-block; margin-right: 2px; } .single-team-member .content .social-links li a { width: 34px; height: 34px; display: block; border-radius: 50%; text-align: center; position: relative; color: var(--whiteColor); background-color: #7E7E7E; } .single-team-member .content .social-links li a i { left: 0; right: 0; top: 50%; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .single-team-member .content .social-links li a:hover { background-color: var(--mainColor); color: var(--whiteColor); } .single-team-member:hover .image img { -webkit-transform: scale(1.08); transform: scale(1.08); } /*================================================ Operation Center Area CSS =================================================*/ .operation-center-area { z-index: 1; position: relative; } .operation-center-area .shape3 { bottom: 20%; z-index: 1; left: 13%; } .operation-center-area .shape4 { bottom: auto; left: auto; right: 5%; top: 25%; } .operation-center-area .shape2 { bottom: 15%; right: 10%; left: auto; top: auto; } .operation-center-area .shape6 { top: 0; left: 4%; } .operation-center-image { border-radius: 20px; margin-right: 10px; height: 100%; background-image: url(../img/operation-center.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; } .operation-center-image img { display: none; border-radius: 20px; } .operation-center-content { padding-left: 10px; padding-top: 100px; padding-bottom: 100px; } .operation-center-content h2 { margin-bottom: 15px; font-size: 35px; } .operation-center-content .features-list { display: -webkit-box; display: -ms-flexbox; display: flex; padding-left: 0; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style-type: none; margin-bottom: 0; margin-left: calc(var(--bs-gutter-x) * -.5); margin-right: calc(var(--bs-gutter-x) * -.5); } .operation-center-content .features-list li { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 50%; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: calc(var(--bs-gutter-x) * .5); } .operation-center-content .features-list li span { display: block; position: relative; padding-left: 40px; margin-top: 20px; font-size: 18px; font-weight: 600; font-family: var(--headingFontFamily); } .operation-center-content .features-list li span i { left: 0; top: 50%; width: 30px; height: 30px; font-size: 15px; line-height: 30px; border-radius: 50%; text-align: center; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: var(--mainColor); background-color: #F5F8FF; -webkit-transition: var(--transition); transition: var(--transition); } .operation-center-content .features-list li span:hover i { background-color: var(--mainColor); color: var(--whiteColor); } /*================================================ Partner Area CSS =================================================*/ .partner-title h4 { margin-bottom: 0; font-size: 20px; font-weight: 500; } .partners-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: calc(var(--bs-gutter-y) * -1); margin-right: calc(var(--bs-gutter-x)/ -2); margin-left: calc(var(--bs-gutter-x)/ -2); } .partners-list .partner-item { margin-top: var(--bs-gutter-y); -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; padding-right: calc(var(--bs-gutter-x)/ 2); padding-left: calc(var(--bs-gutter-x)/ 2); } .partner-item { text-align: center; overflow: hidden; } .partner-item img { -webkit-transition: var(--transition); transition: var(--transition); } .partner-item:hover img { -webkit-transform: scale(0.9); transform: scale(0.9); } /*================================================ Services Area CSS =================================================*/ .services-area { position: relative; z-index: 2; } .services-area .shape3 { bottom: auto; left: auto; right: 2%; top: 25%; } .services-area .shape1 { bottom: 8%; left: auto; top: auto; right: 5%; } .services-area.bg-image { background-image: url(../img/services/services-bg.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; } .services-area.bg-image .section-title h2 { color: var(--whiteColor); } .services-area.bg-image .section-title p { color: var(--whiteColor); } .services-area.bg-image .view-more-box .default-btn::before, .services-area.bg-image .view-more-box .default-btn::after { background-color: var(--whiteColor); } .services-area.bg-image .view-more-box .default-btn span::before, .services-area.bg-image .view-more-box .default-btn span::after { background-color: var(--whiteColor); } .services-area.bg-image .view-more-box .default-btn:hover { color: var(--blackColor); } .services-area.bg-image .shape6 { left: 5%; top: auto; bottom: -8%; } .services-area .pagination-area { margin-top: 20px; } .single-services-box { padding: 40px; position: relative; margin-bottom: 25px; border-radius: 5px; -webkit-transition: var(--transition); transition: var(--transition); background-color: var(--whiteColor); } .single-services-box::before { left: 0; width: 0; bottom: 0; height: 3px; content: ''; position: absolute; -webkit-transition: var(--transition); transition: var(--transition); background-color: var(--mainColor); } .single-services-box .icon { width: 85px; height: 85px; border-radius: 50%; text-align: center; position: relative; margin-bottom: 25px; background-color: var(--mainColor); -webkit-transition: var(--transition); transition: var(--transition); -webkit-box-shadow: 5px 10px 30px #262a371f; box-shadow: 5px 10px 30px #262a371f; } .single-services-box .icon img { left: 0; right: 0; top: 50%; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-left: auto; margin-right: auto; } .single-services-box h3 { margin-bottom: 16px; font-size: 22px; } .single-services-box .link-btn { color: var(--secondaryColor); text-decoration: underline; display: inline-block; padding-right: 13px; position: relative; font-size: 16px; font-weight: 500; font-family: var(--headingFontFamily); } .single-services-box .link-btn:hover { color: var(--mainColor); } .single-services-box .link-btn i { top: 50%; right: -2px; font-size: 13px; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .single-services-box:hover { -webkit-transform: translateY(-10px); transform: translateY(-10px); } .single-services-box:hover::before { width: 100%; } .single-services-box:hover .icon { background-color: var(--mainColor); border-radius: 70% 30% 30% 70%/60% 40% 60% 40%; } .single-services-box.style-two .icon { background: -webkit-gradient(linear, left top, left bottom, from(var(--gradOne)), color-stop(var(--gradTwo)), color-stop(var(--gradThree)), color-stop(var(--gradFour)), to(var(--gradFive))); background: linear-gradient(to bottom, var(--gradOne), var(--gradTwo), var(--gradThree), var(--gradFour), var(--gradFive)); } .services-box { position: relative; border-radius: 7px; margin-bottom: 25px; background-color: var(--whiteColor); } .services-box .image { border-radius: 7px 7px 0 0; overflow: hidden; } .services-box .image img { border-radius: 7px 7px 0 0; -webkit-transition: .3s; transition: .3s; } .services-box .content { z-index: 1; margin-top: -42px; position: relative; padding: 0 35px 35px; } .services-box .content .icon { width: 85px; height: 85px; -webkit-transition: .3s; transition: .3s; border-radius: 50%; text-align: center; position: relative; margin-bottom: 25px; background: -webkit-gradient(linear, left top, left bottom, from(var(--gradOne)), color-stop(var(--gradTwo)), color-stop(var(--gradThree)), color-stop(var(--gradFour)), to(var(--gradFive))); background: linear-gradient(to bottom, var(--gradOne), var(--gradTwo), var(--gradThree), var(--gradFour), var(--gradFive)); } .services-box .content .icon img { left: 0; right: 0; top: 50%; margin-top: -1px; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-left: auto; margin-right: auto; } .services-box .content h3 { -webkit-transition: .3s; transition: .3s; margin-bottom: 18px; font-size: 22px; } .services-box .content p { margin-bottom: 0; -webkit-transition: .3s; transition: .3s; } .services-box .content .link-btn { color: var(--mainColor); text-decoration: underline; display: inline-block; padding-right: 13px; position: absolute; visibility: hidden; -webkit-transition: .3s; transition: .3s; bottom: 5px; left: 35px; opacity: 0; font-size: 16px; font-weight: 500; font-family: var(--headingFontFamily); } .services-box .content .link-btn:hover { color: var(--mainColor); } .services-box .content .link-btn i { top: 50%; right: -2px; font-size: 13px; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .services-box:hover .image img { -webkit-transform: translateY(-28px); transform: translateY(-28px); } .services-box:hover .content .icon { -webkit-box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; -webkit-transform: translateY(-28px); transform: translateY(-28px); } .services-box:hover .content h3, .services-box:hover .content p { -webkit-transform: translateY(-28px); transform: translateY(-28px); } .services-box:hover .content .link-btn { opacity: 1; bottom: 25px; visibility: visible; } .view-more-box { text-align: center; margin-top: 20px; } .services-slides.owl-theme .single-services-box .icon { -webkit-box-shadow: unset; box-shadow: unset; } .services-slides.owl-theme .single-services-box .icon img { display: inline-block !important; width: auto !important; } .services-slides.owl-theme .single-services-box:hover { -webkit-transform: unset; transform: unset; } .services-slides.owl-theme .single-services-box:hover .icon { -webkit-box-shadow: 5px 10px 30px #262a371f; box-shadow: 5px 10px 30px #262a371f; } .services-slides.owl-theme .owl-dots { margin-bottom: 35px; margin-top: 20px !important; } .services-slides.owl-theme .owl-dots .owl-dot span { width: 16px; height: 16px; margin: 0 4px; border-radius: 50%; -webkit-transition: var(--transition); transition: var(--transition); background-color: var(--whiteColor); } .services-slides.owl-theme .owl-dots .owl-dot:hover span, .services-slides.owl-theme .owl-dots .owl-dot.active span { background-color: var(--mainColor); border-color: var(--mainColor); } .shape6 { position: absolute; z-index: -1; top: 36%; left: 2%; } .shape6 img { -webkit-animation: movebounce 5s linear infinite; animation: movebounce 5s linear infinite; } .shape11 { position: absolute; z-index: -1; bottom: -3%; left: 10%; } .shape11 img { -webkit-animation: moveleftbounce 5s linear infinite; animation: moveleftbounce 5s linear infinite; } /*================================================ Services Details Area CSS =================================================*/ .services-details-content h1 { word-wrap: break-word; line-height: 1.1; font-size: 95px; margin-bottom: 0; margin-top: -5px; } .services-details-content h2 { word-wrap: break-word; line-height: 1.1; font-size: 90px; margin-bottom: 0; margin-top: -5px; } .services-details-content h3 { word-wrap: break-word; line-height: 1.1; font-size: 85px; margin-bottom: 0; margin-top: -5px; } .services-details-content h4 { word-wrap: break-word; line-height: 1.1; font-size: 80px; margin-bottom: 0; margin-top: -5px; } .services-details-content h5 { word-wrap: break-word; line-height: 1.1; font-size: 75px; margin-bottom: 0; margin-top: -5px; } .services-details-content h6 { word-wrap: break-word; line-height: 1.1; font-size: 70px; margin-bottom: 0; margin-top: -5px; } .services-details-text p:last-child { margin-bottom: -7px; } .services-details-text p strong { color: var(--blackColor); } .services-details-image { margin-bottom: 40px; } /*================================================ Approach Area CSS =================================================*/ .single-approach-box { padding: 35px; border-radius: 7px; margin-bottom: 25px; border: 1px solid #EBF1FF; -webkit-transition: var(--transition); transition: var(--transition); background-color: var(--whiteColor); } .single-approach-box .icon { margin-bottom: 25px; } .single-approach-box h3 { font-size: 22px; margin-bottom: 15px; } .single-approach-box:hover { border-color: var(--mainColor); } /*================================================ Funfacts Area CSS =================================================*/ .funfacts-area.bg-color { position: relative; z-index: 1; padding-top: 60px; padding-bottom: 35px; } .funfacts-area.bg-color::before { top: 0; left: 0; bottom: 0; width: 90%; z-index: -1; content: ''; position: absolute; border-radius: 0 20px 20px 0; background: -webkit-gradient(linear, left top, left bottom, from(var(--gradOne)), color-stop(var(--gradTwo)), color-stop(var(--gradThree)), color-stop(var(--gradFour)), to(var(--gradFive))); background: linear-gradient(to bottom, var(--gradOne), var(--gradTwo), var(--gradThree), var(--gradFour), var(--gradFive)); } .funfacts-area.bg-color::after { top: 0; left: 0; right: 0; height: 50%; content: ''; z-index: -2; position: absolute; background-color: #f9f9f9; } .funfacts-area .container-fluid { max-width: 1290px; padding-left: 30px; margin-left: 0; margin-right: 0; } .single-funfacts-item { position: relative; margin-bottom: 25px; padding-left: 115px; } .single-funfacts-item .icon { left: 0; top: 50%; width: 95px; height: 95px; border-radius: 50%; position: absolute; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: #FF346A; } .single-funfacts-item .icon img { left: 0; right: 0; top: 50%; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-left: auto; margin-right: auto; } .single-funfacts-item h3 { line-height: 1; font-size: 48px; margin-bottom: 0; color: var(--whiteColor); } .single-funfacts-item .sign { position: relative; top: 1px; } .single-funfacts-item p { color: var(--whiteColor); font-size: 15px; font-weight: 500; font-family: var(--headingFontFamily); } .single-funfacts-box { margin-bottom: 25px; position: relative; padding-left: 105px; } .single-funfacts-box .icon { left: 0; top: 50%; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .single-funfacts-box h3 { line-height: 1; font-size: 55px; margin-bottom: 0; } .single-funfacts-box .sign { position: relative; top: 2px; } .single-funfacts-box p { font-size: 15px; font-weight: 500; font-family: var(--headingFontFamily); } .single-funfacts-box.fbox2 h3 { color: var(--mainColor); } /*================================================ Web Security Area CSS =================================================*/ .web-security-area { z-index: 1; position: relative; background-color: var(--blackColor); background-position: center center; background-repeat: no-repeat; background-size: cover; } .web-security-area.bg-image1 { background-image: url(../img/web-bg1.jpg); } .web-security-area.bg-image2 { background-image: url(../img/web-bg2.jpg); } .web-security-area::before { top: 0; left: 0; right: 0; bottom: 0; content: ''; z-index: -1; opacity: .20; position: absolute; background-color: #000000; } .web-security-area .shape4 { bottom: 5%; left: 12%; } .web-security-content { z-index: 1; padding: 90px; max-width: 645px; margin-left: auto; position: relative; border-radius: 7px; background-color: rgba(255, 255, 255, 0.9); } .web-security-content h1 { margin-bottom: 12px; font-size: 40px; } .web-security-content h2 { margin-bottom: 12px; font-size: 36px; } .web-security-content h3 { margin-bottom: 12px; font-size: 32px; } .web-security-content h4 { margin-bottom: 12px; font-size: 28px; } .web-security-content h5 { margin-bottom: 12px; font-size: 24px; } .web-security-content h6 { margin-bottom: 12px; font-size: 20px; } .web-security-content .features-list { padding-left: 0; list-style-type: none; margin-top: 20px; margin-bottom: 0; } .web-security-content .features-list li { margin-bottom: 12px; position: relative; padding-left: 27px; font-size: 18px; font-weight: 500; font-family: var(--headingFontFamily); } .web-security-content .features-list li i { color: var(--mainColor); position: absolute; font-size: 20px; top: 3px; left: 0; } .web-security-content .features-list li:last-child { margin-bottom: 0; } .web-security-content .shape4 { bottom: 25%; left: auto; right: 15%; } .web-content { padding-right: 15px; } .web-content h1 { color: var(--whiteColor); margin-bottom: 18px; font-size: 50px; } .web-content h2 { color: var(--whiteColor); margin-bottom: 18px; font-size: 44px; } .web-content h3 { color: var(--whiteColor); margin-bottom: 18px; font-size: 40px; } .web-content h4 { color: var(--whiteColor); margin-bottom: 18px; font-size: 36px; } .web-content h5 { color: var(--whiteColor); margin-bottom: 18px; font-size: 32px; } .web-content h6 { color: var(--whiteColor); margin-bottom: 18px; font-size: 28px; } .web-content p { color: var(--whiteColor); max-width: 600px; } .web-content .features-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 0; list-style-type: none; color: var(--whiteColor); margin-bottom: 0; margin-top: -5px; margin-left: calc(var(--bs-gutter-x) * -.5); margin-right: calc(var(--bs-gutter-x) * -.5); } .web-content .features-list li { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 50%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); } .web-content .features-list li span { background-color: rgba(255, 255, 255, 0.2); border-radius: 5px; position: relative; margin-top: 20px; display: block; z-index: 1; padding-top: 12px; padding-left: 55px; padding-right: 15px; padding-bottom: 12px; font-size: 18px; font-weight: 500; font-family: var(--headingFontFamily); } .web-content .features-list li span i { width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--whiteColor); color: var(--mainColor); position: absolute; margin-top: -2px; left: 15px; top: 50%; } .web-content .features-list li span::before { top: 0; left: 0; right: 0; bottom: 0; opacity: 0; z-index: -1; content: ''; visibility: hidden; position: absolute; border-radius: 5px; -webkit-transition: var(--transition); transition: var(--transition); background: -webkit-gradient(linear, right top, left top, from(var(--gradOne)), color-stop(var(--gradTwo)), color-stop(var(--gradThree)), color-stop(var(--gradFour)), to(var(--gradFive))); background: linear-gradient(to left, var(--gradOne), var(--gradTwo), var(--gradThree), var(--gradFour), var(--gradFive)); } .web-content .features-list li span:hover::before { opacity: 1; visibility: visible; } .web-image { position: relative; padding-left: 15px; text-align: center; } .web-image::before { -webkit-animation: moveleftbounce 5s linear infinite; animation: moveleftbounce 5s linear infinite; position: absolute; width: 121px; height: 67px; content: ''; right: 65px; top: 50px; background-image: url(../img/shape/shape2.png); background-position: center center; background-repeat: no-repeat; background-size: cover; } .web-image::after { -webkit-animation: moveleftbounce 5s linear infinite; animation: moveleftbounce 5s linear infinite; position: absolute; width: 160px; height: 63px; bottom: 45px; content: ''; left: 55px; background-image: url(../img/shape/shape7.png); background-position: center center; background-repeat: no-repeat; background-size: cover; } /*================================================ Resources Area CSS =================================================*/ .resources-area { position: relative; z-index: 1; } .resources-area .shape4 { bottom: 7%; left: auto; right: 7%; } .resources-area.bg-color::before { left: 0; right: 0; bottom: 0; z-index: -1; content: ''; height: 50%; position: absolute; background-color: #F5F8FF; } .resources-area .pagination-area { margin-top: 20px; } .single-resources-box { margin-bottom: 25px; } .single-resources-box .image { border-radius: 7px; overflow: hidden; } .single-resources-box .image img { border-radius: 7px; -webkit-transition: var(--transition); transition: var(--transition); } .single-resources-box .content { margin-top: 20px; } .single-resources-box .content .category { margin-bottom: 17px; display: inline-block; } .single-resources-box .content .category a { background-color: rgba(237, 29, 97, 0.12); color: var(--mainColor); border-radius: 30px; padding: 4px 25px; } .single-resources-box .content .category a:hover { background-color: var(--mainColor); color: var(--whiteColor); } .single-resources-box .content h3 { font-size: 22px; margin-bottom: 15px; } .single-resources-box .content .link-btn { color: var(--mainColor); text-decoration: underline; display: inline-block; padding-right: 13px; position: relative; font-size: 16px; font-weight: 500; font-family: var(--headingFontFamily); } .single-resources-box .content .link-btn:hover { color: var(--blackColor); } .single-resources-box .content .link-btn i { top: 50%; right: -2px; font-size: 13px; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .single-resources-box:hover .image img { -webkit-transform: scale(1.05); transform: scale(1.05); } .single-resources-item { border-radius: 7px; margin-bottom: 25px; background-color: #f8f8f8; -webkit-transition: var(--transition); transition: var(--transition); } .single-resources-item .image { border-radius: 7px; overflow: hidden; } .single-resources-item .image img { border-radius: 7px; -webkit-transition: var(--transition); transition: var(--transition); } .single-resources-item .content { padding: 30px; } .single-resources-item .content .category { margin-bottom: 17px; display: inline-block; } .single-resources-item .content .category a { color: var(--mainColor); background-color: rgba(237, 29, 97, 0.12); border-radius: 30px; padding: 4px 25px; } .single-resources-item .content .category a:hover { background-color: var(--mainColor); color: var(--whiteColor); } .single-resources-item .content h3 { font-size: 22px; margin-bottom: 15px; } .single-resources-item .content .link-btn { color: var(--mainColor); text-decoration: underline; display: inline-block; padding-right: 13px; position: relative; font-size: 16px; font-weight: 500; font-family: var(--headingFontFamily); } .single-resources-item .content .link-btn:hover { color: var(--blackColor); } .single-resources-item .content .link-btn i { top: 50%; right: -2px; font-size: 13px; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .single-resources-item:hover .image img { -webkit-transform: scale(1.05); transform: scale(1.05); } .resources-box { margin-bottom: 25px; } .resources-box .image { border-radius: 7px; overflow: hidden; } .resources-box .image img { border-radius: 7px; -webkit-transition: var(--transition); transition: var(--transition); } .resources-box .content { padding: 30px; position: relative; border-radius: 7px; background-color: var(--whiteColor); -webkit-box-shadow: 0 25px 50px 5px #0000001a; box-shadow: 0 25px 50px 5px #0000001a; margin-top: -50px; margin-left: 20px; margin-right: 20px; } .resources-box .content .category { margin-bottom: 17px; display: inline-block; } .resources-box .content .category a { background-color: #f4f4f4; color: var(--mainColor); border-radius: 30px; padding: 4px 25px; } .resources-box .content .category a:hover { background-color: var(--mainColor); color: var(--whiteColor); } .resources-box .content h3 { font-size: 22px; margin-bottom: 15px; } .resources-box .content .link-btn { color: var(--secondaryColor); text-decoration: underline; display: inline-block; padding-right: 13px; position: relative; font-size: 16px; font-weight: 500; font-family: var(--headingFontFamily); } .resources-box .content .link-btn:hover { color: var(--mainColor); } .resources-box .content .link-btn i { top: 50%; right: -2px; font-size: 13px; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .resources-box:hover .image img { -webkit-transform: scale(1.05); transform: scale(1.05); } .shape7 { position: absolute; z-index: -1; right: 4%; top: 25%; } .shape7 img { -webkit-animation: movescale 3s linear infinite; animation: movescale 3s linear infinite; } .resources-slides.owl-theme .owl-item .single-resources-item { background-color: transparent; -webkit-transform: scale(0.95); transform: scale(0.95); } .resources-slides.owl-theme .owl-item.active.center .single-resources-item { background-color: var(--whiteColor); -webkit-transform: scale(1); transform: scale(1); } .resources-slides.owl-theme .owl-nav.disabled + .owl-dots { margin-top: 10px; margin-bottom: -5px; } .resources-slides.owl-theme .owl-dots .owl-dot span { width: 17px; height: 17px; margin: 0 3px; border-radius: 50%; border: 1px solid #AAAAAA; background: var(--whiteColor); -webkit-transition: var(--transition); transition: var(--transition); } .resources-slides.owl-theme .owl-dots .owl-dot:hover span, .resources-slides.owl-theme .owl-dots .owl-dot.active span { border-color: var(--mainColor); background-color: var(--mainColor); } /*================================================ Expert Support Area CSS =================================================*/ .expert-suuport-area { position: relative; z-index: 1; } .expert-suuport-area .shape6 { top: 30%; left: 4%; } .expert-suuport-area .shape8 { right: 6%; top: 70%; } .expert-support-tabs { position: relative; z-index: 1; } .expert-support-tabs .nav-tabs { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-bottom: none; } .expert-support-tabs .nav-tabs .nav-item { margin-left: 4px; margin-right: 4px; } .expert-support-tabs .nav-tabs .nav-item .nav-link { margin-bottom: 0; color: #808292; position: relative; border: 0 !important; background-color: #F5F5F5; border-radius: 5px !important; -webkit-transition: var(--transition); transition: var(--transition); font-size: 16px; font-weight: 500; font-family: var(--headingFontFamily); padding-top: 10px; padding-left: 25px; padding-right: 60px; padding-bottom: 10px; } .expert-support-tabs .nav-tabs .nav-item .nav-link i { top: 50%; right: 25px; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: var(--transition); transition: var(--transition); } .expert-support-tabs .nav-tabs .nav-item .nav-link:hover, .expert-support-tabs .nav-tabs .nav-item .nav-link.active { background-color: var(--mainColor); color: var(--whiteColor); } .expert-support-tabs .nav-tabs .nav-item .nav-link:hover i, .expert-support-tabs .nav-tabs .nav-item .nav-link.active i { color: var(--whiteColor); } .expert-support-tabs .nav-tabs .nav-item .nav-link.active i { -webkit-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); color: var(--whiteColor); } .expert-support-tabs::before { top: 0; left: 0; right: 0; bottom: 0; z-index: -1; content: ''; margin-top: 23px; position: absolute; border-radius: 7px; border: 1px dashed var(--mainColor); } .expert-support-tabs .tab-content { position: relative; padding-top: 50px; padding-left: 100px; padding-right: 100px; padding-bottom: 50px; } .expert-support-tabs .tab-content .shape { bottom: 18%; right: 41.5%; position: absolute; } .expert-support-tabs .tab-content .shape img { -webkit-animation: movebounce 5s linear infinite; animation: movebounce 5s linear infinite; } .expert-support-tabs .content { padding-top: 30px; padding-right: 30px; padding-bottom: 30px; } .expert-support-tabs .content h3 { font-size: 22px; margin-bottom: 18px; } .expert-support-tabs .content .default-btn { margin-top: 10px; } .expert-support-tabs .content .features-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 0; list-style-type: none; color: var(--blackColor); margin-top: -8px; margin-bottom: 20px; margin-left: calc(var(--bs-gutter-x) * -.5); margin-right: calc(var(--bs-gutter-x) * -.5); } .expert-support-tabs .content .features-list li { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 50%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); } .expert-support-tabs .content .features-list li span { position: relative; padding-left: 37px; margin-top: 15px; display: block; font-size: 16px; font-weight: 500; font-family: var(--headingFontFamily); } .expert-support-tabs .content .features-list li span i { left: 0; top: 50%; width: 25px; height: 25px; font-size: 15px; line-height: 25px; text-align: center; border-radius: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: rgba(237, 29, 91, 0.12); color: var(--mainColor); position: absolute; margin-top: -1px; } .expert-support-tabs .image { margin: 8px; height: 100%; margin-left: 30px; border-radius: 7px; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; } .expert-support-tabs .image img { border-radius: 7px; display: none; } .expert-support-tabs .image.bg1 { background-image: url(../img/tabs/tabs1.jpg); } .expert-support-tabs .image.bg2 { background-image: url(../img/tabs/tabs2.jpg); } .expert-support-tabs .image.bg3 { background-image: url(../img/tabs/tabs3.jpg); } .expert-support-tabs .image.bg4 { background-image: url(../img/tabs/tabs4.jpg); } .expert-support-tabs .image.bg5 { background-image: url(../img/tabs/tabs5.jpg); } .expert-support-tabs .image::before { top: 0; left: 0; right: 0; bottom: 0; content: ''; margin: -8px; border-radius: 7px; position: absolute; border: 1px solid #eeeeee; } /*================================================ Feedback Area CSS =================================================*/ .feedback-area { position: relative; z-index: 1; } .feedback-area .shape3 { bottom: 0; } .feedback-area.bg-image { background-image: url(../img/feedback-bg.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; } .feedback-area.bg-image .section-title h2 { color: var(--whiteColor); } .feedback-area.bg-image .section-title p { color: var(--whiteColor); } .feedback-area.bg-image::before { top: 0; left: 0; right: 0; bottom: 0; z-index: -1; content: ''; opacity: .70; position: absolute; background-color: #000000; } .single-feedback-box { z-index: 1; padding: 40px; position: relative; border-radius: 5px; margin-bottom: 25px; border: 1px solid #f5f5f5; -webkit-transition: var(--transition); transition: var(--transition); background-color: var(--whiteColor); } .single-feedback-box p { font-size: 15px; } .single-feedback-box .client-info { margin-top: 25px; } .single-feedback-box .client-info img { width: 65px; height: 65px; border-radius: 50%; } .single-feedback-box .client-info .title { margin-left: 20px; } .single-feedback-box .client-info .title h3 { margin-bottom: 10px; font-size: 18px; } .single-feedback-box .client-info .title h3 span { color: var(--secondaryColor); font-size: 16px; font-weight: normal; } .single-feedback-box .client-info .title .rating { font-size: 16px; color: #eba400; } .single-feedback-box:hover { border-color: var(--mainColor); } .single-feedback-box.bg-color { border: 0; background-color: rgba(255, 255, 255, 0.5); } .single-feedback-box.bg-f9f9f9 { background-color: #f9f9f9; } .single-feedback-box .quote { right: 35px; bottom: 30px; position: absolute; width: auto !important; display: inline-block !important; } .single-feedback-item { z-index: 1; padding: 50px; position: relative; border-radius: 7px; margin-bottom: 25px; -webkit-transition: var(--transition); transition: var(--transition); background-color: var(--whiteColor); } .single-feedback-item p { font-size: 19px; line-height: 1.7; } .single-feedback-item .client-info { margin-top: 20px; } .single-feedback-item .client-info img { width: 65px; height: 65px; border-radius: 50%; } .single-feedback-item .client-info .title { margin-left: 20px; } .single-feedback-item .client-info .title h3 { margin-bottom: 10px; font-size: 18px; } .single-feedback-item .client-info .title h3 span { color: var(--secondaryColor); font-size: 16px; font-weight: normal; } .single-feedback-item .client-info .title .rating { font-size: 16px; color: #eba400; } .single-feedback-item .quote { z-index: -1; right: 50px; bottom: 50px; position: absolute; width: auto !important; } .feedback-slides.owl-theme .owl-dots .owl-dot span { width: 16px; height: 16px; margin: 0 4px; border-radius: 50%; border: 1px solid #aaaaaa; -webkit-transition: var(--transition); transition: var(--transition); background-color: var(--whiteColor); } .feedback-slides.owl-theme .owl-dots .owl-dot:hover span, .feedback-slides.owl-theme .owl-dots .owl-dot.active span { background-color: var(--mainColor); border-color: var(--mainColor); } .feedback-slides-two.owl-theme .owl-dots { margin-top: 20px !important; } .feedback-slides-two.owl-theme .owl-dots .owl-dot span { width: 16px; height: 16px; margin: 0 4px; border-radius: 50%; -webkit-transition: var(--transition); transition: var(--transition); background-color: var(--whiteColor); } .feedback-slides-two.owl-theme .owl-dots .owl-dot:hover span, .feedback-slides-two.owl-theme .owl-dots .owl-dot.active span { background-color: var(--mainColor); border-color: var(--mainColor); } .shape8 { position: absolute; z-index: -1; right: 2%; top: 25%; } .shape8 img { -webkit-animation: movescale 3s linear infinite; animation: movescale 3s linear infinite; } /*================================================ Security Area CSS =================================================*/ .security-area .container-fluid { padding-left: 0; padding-right: 0; } .security-area .container-fluid .row { margin-left: 0; margin-right: 0; } .security-area .container-fluid .row .col-lg-8, .security-area .container-fluid .row .col-lg-4 { padding-left: 0; padding-right: 0; } .security-image { height: 100%; background-image: url(../img/security-bg.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; } .security-image img { display: none; } .security-content { margin-left: -280px; padding-top: 100px; padding-bottom: 100px; } .security-content .content { z-index: 1; padding: 80px; border-radius: 7px; position: relative; background-color: rgba(255, 255, 255, 0.93); } .security-content .content h2 { margin-bottom: 12px; font-size: 36px; } .security-content .content p { max-width: 540px; } .security-content .content .features-list { padding-left: 0; list-style-type: none; margin-top: 20px; margin-bottom: 0; } .security-content .content .features-list li { margin-bottom: 12px; position: relative; padding-left: 27px; font-size: 18px; font-weight: 500; font-family: var(--headingFontFamily); } .security-content .content .features-list li i { color: var(--mainColor); position: absolute; font-size: 20px; top: 3px; left: 0; } .security-content .content .features-list li:last-child { margin-bottom: 0; } .security-content .content .shape4 { bottom: 12%; left: auto; right: 30%; } .security-content .content .shape2 { top: 29%; left: auto; right: 10%; } /*================================================ Blog Area CSS =================================================*/ .blog-area { position: relative; z-index: 1; } .blog-area .shape2 { left: 1%; top: auto; bottom: 2%; } .blog-area .shape6 { top: 35%; right: 1%; left: auto; max-width: 70px; } .single-blog-post { margin-bottom: 25px; background-color: var(--whiteColor); -webkit-box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; } .single-blog-post .image { position: relative; overflow: hidden; } .single-blog-post .image img { -webkit-transition: var(--transition); transition: var(--transition); } .single-blog-post .image::before { width: 0; top: 50%; left: 50%; height: 0; opacity: 0; z-index: 2; content: ''; display: block; position: absolute; border-radius: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.2); } .single-blog-post .image::after { top: 0; left: -75%; z-index: 2; width: 50%; content: ''; height: 100%; display: block; position: absolute; -webkit-transform: skewX(-25deg); transform: skewX(-25deg); background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); } .single-blog-post .content { padding: 25px; position: relative; } .single-blog-post .content .meta { padding-left: 0; margin-bottom: 12px; list-style-type: none; } .single-blog-post .content .meta li { color: var(--secondaryColor); display: inline-block; position: relative; margin-right: 20px; padding-left: 20px; } .single-blog-post .content .meta li a { display: block; color: var(--secondaryColor); } .single-blog-post .content .meta li a:hover { color: var(--mainColor); } .single-blog-post .content .meta li i { left: 0; top: 2px; position: absolute; color: var(--mainColor); } .single-blog-post .content .meta li:last-child { margin-right: 0; } .single-blog-post .content h3 { font-size: 22px; line-height: 1.4; margin-bottom: 14px; } .single-blog-post .content .link-btn { right: 0; opacity: 0; top: -25px; width: 50px; height: 50px; font-size: 20px; visibility: hidden; text-align: center; border-radius: 50%; position: absolute; display: inline-block; color: var(--whiteColor); background: -webkit-gradient(linear, left top, left bottom, from(var(--gradOne)), color-stop(var(--gradTwo)), color-stop(var(--gradThree)), color-stop(var(--gradFour)), to(var(--gradFive))); background: linear-gradient(to bottom, var(--gradOne), var(--gradTwo), var(--gradThree), var(--gradFour), var(--gradFive)); } .single-blog-post .content .link-btn i { left: 0; right: 0; top: 50%; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .single-blog-post:hover .image img { -webkit-transform: scale(1.1); transform: scale(1.1); } .single-blog-post:hover .image::before { -webkit-animation: circle .75s; animation: circle .75s; } .single-blog-post:hover .image::after { -webkit-animation: shine .75s; animation: shine .75s; } .single-blog-post:hover .content .link-btn { visibility: visible; right: 25px; opacity: 1; } @-webkit-keyframes circle { 0% { opacity: 1; } 40% { opacity: 1; } 100% { opacity: 0; width: 200%; height: 200%; visibility: hidden; } } @keyframes circle { 0% { opacity: 1; } 40% { opacity: 1; } 100% { opacity: 0; width: 200%; height: 200%; visibility: hidden; } } @-webkit-keyframes shine { 100% { left: 125%; } } @keyframes shine { 100% { left: 125%; } } /*================================================ Blog Details Area CSS =================================================*/ .blog-details-area { border-top: 1px solid #eeeeee; } .blog-details-area #comments .comment-list .comment-body .reply { margin-top: 0; } .blog-details-desc .post-thumb { margin-bottom: 25px; } .blog-details-desc h6 { margin-bottom: 18px; } .blog-details-desc h6:not(:first-child) { margin-top: 25px; } .blog-details-desc h5 { margin-bottom: 18px; } .blog-details-desc h5:not(:first-child) { margin-top: 25px; } .blog-details-desc h4 { margin-bottom: 18px; } .blog-details-desc h4:not(:first-child) { margin-top: 25px; } .blog-details-desc h3 { margin-bottom: 18px; } .blog-details-desc h3:not(:first-child) { margin-top: 25px; } .blog-details-desc h2 { margin-bottom: 18px; } .blog-details-desc h2:not(:first-child) { margin-top: 25px; } .blog-details-desc h1 { margin-bottom: 18px; } .blog-details-desc h1:not(:first-child) { margin-top: 25px; } .blog-details-desc .post-meta { margin-bottom: -10px; } .blog-details-desc .post-meta ul { padding-left: 0; list-style-type: none; margin-bottom: 0; margin-top: 0; } .blog-details-desc .post-meta ul li { color: var(--secondaryColor); display: inline-block; position: relative; margin-right: 20px; padding-left: 20px; margin-right: 20px; margin-bottom: 0; } .blog-details-desc .post-meta ul li a { display: block; color: var(--secondaryColor); } .blog-details-desc .post-meta ul li a:hover { color: var(--mainColor); } .blog-details-desc .post-meta ul li i { left: 0; top: 2px; position: absolute; color: var(--mainColor); } .blog-details-desc .post-meta ul li:last-child { margin-right: 0; } .blog-details-desc p a { color: var(--mainColor); } .blog-details-desc p a:hover { text-decoration: underline; } .blog-details-desc p strong { color: var(--blackColor); } .blog-details-desc ul, .blog-details-desc ol { margin-top: 20px; margin-bottom: 20px; } .blog-details-desc ul li, .blog-details-desc ol li { color: var(--secondaryColor); margin-bottom: 15px; } .blog-details-desc ul li:last-child, .blog-details-desc ol li:last-child { margin-bottom: 0; } .blog-details-desc .wp-block-gallery.columns-3 { list-style-type: none; padding-left: 0; margin-top: 20px; margin-bottom: 20px; } .blog-details-desc .wp-block-gallery.columns-3 li { margin-bottom: 20px; } .blog-details-desc .wp-block-gallery.columns-3 li:last-child { margin-bottom: 0; } .blog-details-desc .wp-block-gallery.columns-3 li figure { margin-bottom: 0; } .blog-details-desc .post-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 30px; padding-top: 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top: 1px solid #eeeeee; } .blog-details-desc .post-footer .post-tags { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .blog-details-desc .post-footer .post-tags .sub { text-transform: uppercase; display: inline-block; font-weight: 500; } .blog-details-desc .post-footer .post-tags ul { display: inline-block; list-style-type: none; padding-left: 0; margin-top: 0; margin-bottom: 0; } .blog-details-desc .post-footer .post-tags ul li { display: inline-block; margin-bottom: 0; margin-right: 1px; } .blog-details-desc .post-footer .post-tags ul li a { color: var(--secondaryColor); } .blog-details-desc .post-footer .post-tags ul li a:hover { color: var(--mainColor); } .blog-details-desc .post-footer .post-tags ul li:not(:last-child)::after { content: ','; } .blog-details-desc .post-footer .article-share { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; text-align: end; } .blog-details-desc .post-footer .article-share .social { padding-left: 0; list-style-type: none; margin-bottom: 0; margin-top: 0; } .blog-details-desc .post-footer .article-share .social li { margin-bottom: 0; display: inline-block; color: var(--blackColor); } .blog-details-desc .post-footer .article-share .social li span { display: inline-block; position: relative; margin-right: 3px; font-weight: 500; } .blog-details-desc .post-footer .article-share .social li a { width: 35px; height: 35px; display: block; line-height: 35px; border-radius: 50%; color: var(--whiteColor); background-color: var(--mainColor); border: 1px solid var(--mainColor); text-align: center; margin-left: 2px; } .blog-details-desc .post-footer .article-share .social li a:hover { color: var(--mainColor); background-color: transparent; } .blog-details-desc .post-footer .article-share .social li a.facebook { background-color: #3b5998; color: var(--whiteColor); border-color: #3b5998; } .blog-details-desc .post-footer .article-share .social li a.facebook:hover { color: #3b5998; background-color: transparent; } .blog-details-desc .post-footer .article-share .social li a.twitter { background-color: #1da1f2; color: var(--whiteColor); border-color: #1da1f2; } .blog-details-desc .post-footer .article-share .social li a.twitter:hover { color: #1da1f2; background-color: transparent; } .blog-details-desc .post-footer .article-share .social li a.linkedin { background-color: #007bb5; color: var(--whiteColor); border-color: #007bb5; } .blog-details-desc .post-footer .article-share .social li a.linkedin:hover { color: #007bb5; background-color: transparent; } .blog-details-desc .post-footer .article-share .social li a.instagram { background-color: #c13584; color: var(--whiteColor); border-color: #c13584; } .blog-details-desc .post-footer .article-share .social li a.instagram:hover { color: #c13584; background-color: transparent; } blockquote, .blockquote { background-color: #f9f9f9; padding: 25px !important; margin-bottom: 20px; margin-top: 20px; } blockquote p, .blockquote p { line-height: 1.7; margin-bottom: 0; color: var(--blackColor); font-weight: 600; font-style: italic; font-size: 16px !important; } blockquote cite, .blockquote cite { display: block; font-weight: 600; margin-top: 10px; color: var(--mainColor); } .comments-area { margin-top: 30px; padding-top: 30px; } .comments-area .comments-title { font-size: 22px; margin-bottom: 30px; line-height: initial; } .comments-area ol, .comments-area ul { margin: 0; padding: 0; list-style-type: none; } .comments-area .comment-list { margin: 0; padding: 0; list-style-type: none; } .comments-area .children { margin-left: 20px; } .comments-area .comment-body { border-bottom: 1px dashed #eeeeee; color: var(--blackColor); padding-bottom: 20px; margin-bottom: 20px; position: relative; } .comments-area .comment-body .reply { position: absolute; z-index: 3; right: 0; top: 0; } .comments-area .comment-body .reply a { border: 1px dashed #ded9d9; color: var(--secondaryColor); display: inline-block; border-radius: 30px; padding: 4px 15px; font-size: 13px; font-weight: 500; } .comments-area .comment-body .reply a:hover { color: var(--whiteColor); border-color: var(--mainColor); background-color: var(--mainColor); } .comments-area .comment-author { z-index: 2; font-size: 16px; margin-bottom: 6px; position: relative; } .comments-area .comment-author .avatar { top: 4px; width: 80px; left: -98px; position: absolute; } .comments-area .comment-author .says { display: none; } .comments-area .comment-author .fn { font-weight: 500; } .comments-area .comment-metadata { font-size: 14px; margin-bottom: .7em; color: var(--secondaryColor); } .comments-area .comment-respond .comment-reply-title { margin-bottom: 0; font-size: 22px; margin-top: -3px; } .comments-area .comment-respond .comment-reply-title #cancel-comment-reply-link { display: inline-block; } .comments-area .comment-respond .comment-form { overflow: hidden; } .comments-area .comment-respond .comment-notes { font-style: italic; margin-top: 10px; } .comments-area .comment-respond .comment-notes .required { color: red; } .comments-area .comment-respond .comment-form-comment { float: left; width: 100%; } .comments-area .comment-respond input[type="date"], .comments-area .comment-respond input[type="time"], .comments-area .comment-respond input[type="datetime-local"], .comments-area .comment-respond input[type="week"], .comments-area .comment-respond input[type="month"], .comments-area .comment-respond input[type="text"], .comments-area .comment-respond input[type="email"], .comments-area .comment-respond input[type="url"], .comments-area .comment-respond input[type="password"], .comments-area .comment-respond input[type="search"], .comments-area .comment-respond input[type="tel"], .comments-area .comment-respond input[type="number"], .comments-area .comment-respond textarea { outline: 0; width: 100%; border: none; height: 50px; display: block; border-radius: 3px; padding: 0 15px 0 15px; color: var(--blackColor); font-size: var(--fontSize); background-color: #f9f9f9; } .comments-area .comment-respond input[type="date"]::-webkit-input-placeholder, .comments-area .comment-respond input[type="time"]::-webkit-input-placeholder, .comments-area .comment-respond input[type="datetime-local"]::-webkit-input-placeholder, .comments-area .comment-respond input[type="week"]::-webkit-input-placeholder, .comments-area .comment-respond input[type="month"]::-webkit-input-placeholder, .comments-area .comment-respond input[type="text"]::-webkit-input-placeholder, .comments-area .comment-respond input[type="email"]::-webkit-input-placeholder, .comments-area .comment-respond input[type="url"]::-webkit-input-placeholder, .comments-area .comment-respond input[type="password"]::-webkit-input-placeholder, .comments-area .comment-respond input[type="search"]::-webkit-input-placeholder, .comments-area .comment-respond input[type="tel"]::-webkit-input-placeholder, .comments-area .comment-respond input[type="number"]::-webkit-input-placeholder, .comments-area .comment-respond textarea::-webkit-input-placeholder { color: var(--secondaryColor); -webkit-transition: var(--transition); transition: var(--transition); } .comments-area .comment-respond input[type="date"]:-ms-input-placeholder, .comments-area .comment-respond input[type="time"]:-ms-input-placeholder, .comments-area .comment-respond input[type="datetime-local"]:-ms-input-placeholder, .comments-area .comment-respond input[type="week"]:-ms-input-placeholder, .comments-area .comment-respond input[type="month"]:-ms-input-placeholder, .comments-area .comment-respond input[type="text"]:-ms-input-placeholder, .comments-area .comment-respond input[type="email"]:-ms-input-placeholder, .comments-area .comment-respond input[type="url"]:-ms-input-placeholder, .comments-area .comment-respond input[type="password"]:-ms-input-placeholder, .comments-area .comment-respond input[type="search"]:-ms-input-placeholder, .comments-area .comment-respond input[type="tel"]:-ms-input-placeholder, .comments-area .comment-respond input[type="number"]:-ms-input-placeholder, .comments-area .comment-respond textarea:-ms-input-placeholder { color: var(--secondaryColor); -webkit-transition: var(--transition); transition: var(--transition); } .comments-area .comment-respond input[type="date"]::-ms-input-placeholder, .comments-area .comment-respond input[type="time"]::-ms-input-placeholder, .comments-area .comment-respond input[type="datetime-local"]::-ms-input-placeholder, .comments-area .comment-respond input[type="week"]::-ms-input-placeholder, .comments-area .comment-respond input[type="month"]::-ms-input-placeholder, .comments-area .comment-respond input[type="text"]::-ms-input-placeholder, .comments-area .comment-respond input[type="email"]::-ms-input-placeholder, .comments-area .comment-respond input[type="url"]::-ms-input-placeholder, .comments-area .comment-respond input[type="password"]::-ms-input-placeholder, .comments-area .comment-respond input[type="search"]::-ms-input-placeholder, .comments-area .comment-respond input[type="tel"]::-ms-input-placeholder, .comments-area .comment-respond input[type="number"]::-ms-input-placeholder, .comments-area .comment-respond textarea::-ms-input-placeholder { color: var(--secondaryColor); -webkit-transition: var(--transition); transition: var(--transition); } .comments-area .comment-respond input[type="date"]::placeholder, .comments-area .comment-respond input[type="time"]::placeholder, .comments-area .comment-respond input[type="datetime-local"]::placeholder, .comments-area .comment-respond input[type="week"]::placeholder, .comments-area .comment-respond input[type="month"]::placeholder, .comments-area .comment-respond input[type="text"]::placeholder, .comments-area .comment-respond input[type="email"]::placeholder, .comments-area .comment-respond input[type="url"]::placeholder, .comments-area .comment-respond input[type="password"]::placeholder, .comments-area .comment-respond input[type="search"]::placeholder, .comments-area .comment-respond input[type="tel"]::placeholder, .comments-area .comment-respond input[type="number"]::placeholder, .comments-area .comment-respond textarea::placeholder { color: var(--secondaryColor); -webkit-transition: var(--transition); transition: var(--transition); } .comments-area .comment-respond input[type="date"]:focus::-webkit-input-placeholder, .comments-area .comment-respond input[type="time"]:focus::-webkit-input-placeholder, .comments-area .comment-respond input[type="datetime-local"]:focus::-webkit-input-placeholder, .comments-area .comment-respond input[type="week"]:focus::-webkit-input-placeholder, .comments-area .comment-respond input[type="month"]:focus::-webkit-input-placeholder, .comments-area .comment-respond input[type="text"]:focus::-webkit-input-placeholder, .comments-area .comment-respond input[type="email"]:focus::-webkit-input-placeholder, .comments-area .comment-respond input[type="url"]:focus::-webkit-input-placeholder, .comments-area .comment-respond input[type="password"]:focus::-webkit-input-placeholder, .comments-area .comment-respond input[type="search"]:focus::-webkit-input-placeholder, .comments-area .comment-respond input[type="tel"]:focus::-webkit-input-placeholder, .comments-area .comment-respond input[type="number"]:focus::-webkit-input-placeholder, .comments-area .comment-respond textarea:focus::-webkit-input-placeholder { color: transparent; } .comments-area .comment-respond input[type="date"]:focus:-ms-input-placeholder, .comments-area .comment-respond input[type="time"]:focus:-ms-input-placeholder, .comments-area .comment-respond input[type="datetime-local"]:focus:-ms-input-placeholder, .comments-area .comment-respond input[type="week"]:focus:-ms-input-placeholder, .comments-area .comment-respond input[type="month"]:focus:-ms-input-placeholder, .comments-area .comment-respond input[type="text"]:focus:-ms-input-placeholder, .comments-area .comment-respond input[type="email"]:focus:-ms-input-placeholder, .comments-area .comment-respond input[type="url"]:focus:-ms-input-placeholder, .comments-area .comment-respond input[type="password"]:focus:-ms-input-placeholder, .comments-area .comment-respond input[type="search"]:focus:-ms-input-placeholder, .comments-area .comment-respond input[type="tel"]:focus:-ms-input-placeholder, .comments-area .comment-respond input[type="number"]:focus:-ms-input-placeholder, .comments-area .comment-respond textarea:focus:-ms-input-placeholder { color: transparent; } .comments-area .comment-respond input[type="date"]:focus::-ms-input-placeholder, .comments-area .comment-respond input[type="time"]:focus::-ms-input-placeholder, .comments-area .comment-respond input[type="datetime-local"]:focus::-ms-input-placeholder, .comments-area .comment-respond input[type="week"]:focus::-ms-input-placeholder, .comments-area .comment-respond input[type="month"]:focus::-ms-input-placeholder, .comments-area .comment-respond input[type="text"]:focus::-ms-input-placeholder, .comments-area .comment-respond input[type="email"]:focus::-ms-input-placeholder, .comments-area .comment-respond input[type="url"]:focus::-ms-input-placeholder, .comments-area .comment-respond input[type="password"]:focus::-ms-input-placeholder, .comments-area .comment-respond input[type="search"]:focus::-ms-input-placeholder, .comments-area .comment-respond input[type="tel"]:focus::-ms-input-placeholder, .comments-area .comment-respond input[type="number"]:focus::-ms-input-placeholder, .comments-area .comment-respond textarea:focus::-ms-input-placeholder { color: transparent; } .comments-area .comment-respond input[type="date"]:focus::placeholder, .comments-area .comment-respond input[type="time"]:focus::placeholder, .comments-area .comment-respond input[type="datetime-local"]:focus::placeholder, .comments-area .comment-respond input[type="week"]:focus::placeholder, .comments-area .comment-respond input[type="month"]:focus::placeholder, .comments-area .comment-respond input[type="text"]:focus::placeholder, .comments-area .comment-respond input[type="email"]:focus::placeholder, .comments-area .comment-respond input[type="url"]:focus::placeholder, .comments-area .comment-respond input[type="password"]:focus::placeholder, .comments-area .comment-respond input[type="search"]:focus::placeholder, .comments-area .comment-respond input[type="tel"]:focus::placeholder, .comments-area .comment-respond input[type="number"]:focus::placeholder, .comments-area .comment-respond textarea:focus::placeholder { color: transparent; } .comments-area .comment-respond textarea { height: auto !important; padding-top: 15px; } .comments-area .comment-respond .comment-form-author { float: left; width: 50%; padding-right: 10px; } .comments-area .comment-respond .comment-form-email { width: 50%; float: left; padding-left: 12px; } .comments-area .comment-respond .comment-form-url { float: left; width: 100%; } .comments-area .comment-respond .comment-form-cookies-consent { width: 100%; float: left; position: relative; padding-left: 20px; margin-top: 15px; } .comments-area .comment-respond .comment-form-cookies-consent input { position: absolute; top: 5px; left: 0; } .comments-area .comment-respond .comment-form-cookies-consent label { margin: 0; display: inline-block; color: var(--secondaryColor); font-weight: normal; font-size: var(--fontSize); } .comments-area .comment-respond .form-submit { float: left; width: 100%; margin-top: 20px; } .comments-area .comment-respond .form-submit input { border: none; cursor: pointer; padding: 10px 30px; display: inline-block; color: var(--whiteColor); -webkit-transition: var(--transition); transition: var(--transition); background: var(--mainColor); font-size: 16px; font-weight: 600; font-family: var(--headingFontFamily); } .comments-area .comment-respond .form-submit input:hover { color: var(--whiteColor); background-color: var(--blackColor); } /*================================================ CTA Area CSS =================================================*/ .cta-inner { z-index: 1; padding: 100px; text-align: center; border-radius: 7px; position: relative; background-color: var(--mainColor); background-image: url(../img/cta-bg.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; } .cta-inner h1 { font-size: 40px; max-width: 600px; color: var(--whiteColor); margin-left: auto; margin-right: auto; margin-bottom: 30px; } .cta-inner h2 { font-size: 36px; max-width: 600px; color: var(--whiteColor); margin-left: auto; margin-right: auto; margin-bottom: 30px; } .cta-inner h3 { font-size: 32px; max-width: 600px; color: var(--whiteColor); margin-left: auto; margin-right: auto; margin-bottom: 30px; } .cta-inner h4 { font-size: 28px; max-width: 600px; color: var(--whiteColor); margin-left: auto; margin-right: auto; margin-bottom: 30px; } .cta-inner h5 { font-size: 24px; max-width: 600px; color: var(--whiteColor); margin-left: auto; margin-right: auto; margin-bottom: 30px; } .cta-inner h6 { font-size: 20px; max-width: 600px; color: var(--whiteColor); margin-left: auto; margin-right: auto; margin-bottom: 30px; } .cta-inner .default-btn { background: var(--whiteColor); color: var(--mainColor); } .cta-inner .default-btn:hover { background-color: var(--whiteColor); color: var(--whiteColor); } .shape9 { position: absolute; z-index: -1; left: 7%; top: 25%; } .shape9 img { -webkit-animation: movescale 8s linear infinite; animation: movescale 8s linear infinite; } .shape10 { position: absolute; z-index: -1; right: 10px; bottom: 10px; } .shape10 img { -webkit-animation: movescale 8s linear infinite; animation: movescale 8s linear infinite; } /*================================================ Page Title Area CSS =================================================*/ .page-title-area { background-color: #f9f9f9; position: relative; z-index: 1; padding-top: 100px; padding-bottom: 100px; } .page-title-area .shape4 { bottom: 12%; left: 10%; } .page-title-area .shape1 { top: 62%; left: auto; right: 30%; } .page-title-area .shape2 { left: 25%; top: 12%; } .page-title-content { text-align: center; text-transform: capitalize; } .page-title-content h1 { font-size: 45px; margin-bottom: 0; } .page-title-content ul { padding-left: 0; list-style-type: none; margin-bottom: 0; margin-top: 15px; } .page-title-content ul li { position: relative; display: inline-block; color: var(--secondaryColor); margin-left: 12px; margin-right: 12px; font-size: 17px; font-weight: 400; font-family: var(--headingFontFamily); } .page-title-content ul li a { color: var(--secondaryColor); } .page-title-content ul li a:hover { color: var(--mainColor); } .page-title-content ul li::before { top: 6px; width: 1px; content: ''; height: 9px; right: -14px; position: absolute; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: var(--transition); transition: var(--transition); background-color: var(--secondaryColor); } .page-title-content ul li::after { top: 12px; margin: 0; border: 0; width: 1px; content: ''; height: 9px; right: -14px; position: absolute; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: var(--transition); transition: var(--transition); background-color: var(--secondaryColor); } .page-title-content ul li:last-child::after, .page-title-content ul li:last-child::before { display: none; } .page-title-content .sub-title { background-color: #ffeaf1; color: var(--mainColor); display: inline-block; margin-bottom: 20px; border-radius: 5px; padding: 4px 25px; } .page-title-content .contact-form { padding: 40px; max-width: 1000px; margin-top: 40px; margin-left: auto; margin-right: auto; } .page-title-content .contact-form .form-group { margin-bottom: 30px; position: relative; padding-top: 12px; } .page-title-content .contact-form .form-group label { margin-bottom: 0; color: var(--blackColor); left: 10px; border-radius: 5px; top: 0; background-color: var(--whiteColor); position: absolute; padding-left: 10px; padding-right: 10px; font-size: 15px; font-weight: 600; } .page-title-content .contact-form .form-group .form-control { height: 55px; border-radius: 5px; padding: 20px 20px 15px; background-color: var(--whiteColor) !important; border: 1px solid rgba(107, 124, 147, 0.15) !important; -webkit-box-shadow: 0 2px 4px rgba(107, 124, 147, 0.06) !important; box-shadow: 0 2px 4px rgba(107, 124, 147, 0.06) !important; } .page-title-content .contact-form .form-group .form-control::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.4); -webkit-transition: var(--transition); transition: var(--transition); } .page-title-content .contact-form .form-group .form-control:-ms-input-placeholder { color: rgba(0, 0, 0, 0.4); -webkit-transition: var(--transition); transition: var(--transition); } .page-title-content .contact-form .form-group .form-control::-ms-input-placeholder { color: rgba(0, 0, 0, 0.4); -webkit-transition: var(--transition); transition: var(--transition); } .page-title-content .contact-form .form-group .form-control::placeholder { color: rgba(0, 0, 0, 0.4); -webkit-transition: var(--transition); transition: var(--transition); } .page-title-content .contact-form .form-group .form-control:focus { border-color: var(--blackColor) !important; } .page-title-content .contact-form .form-group .form-control:focus::-webkit-input-placeholder { color: transparent; } .page-title-content .contact-form .form-group .form-control:focus:-ms-input-placeholder { color: transparent; } .page-title-content .contact-form .form-group .form-control:focus::-ms-input-placeholder { color: transparent; } .page-title-content .contact-form .form-group .form-control:focus::placeholder { color: transparent; } .page-title-content .contact-form .form-group .form-control:hover { border-color: var(--mainColor) !important; } .page-title-content .contact-form .form-group .form-select { height: 55px; cursor: pointer; border-radius: 5px; padding: 18px 20px 15px; color: var(--secondaryColor); -webkit-transition: var(--transition); transition: var(--transition); background-color: var(--whiteColor); border: 1px solid rgba(107, 124, 147, 0.15); -webkit-box-shadow: 0 2px 4px rgba(107, 124, 147, 0.06); box-shadow: 0 2px 4px rgba(107, 124, 147, 0.06); font-family: var(--headingFontFamily); font-weight: 500; font-size: 15px; } .page-title-content .contact-form .form-group .form-select:focus { border-color: var(--blackColor) !important; } .page-title-content .contact-form .form-group .form-select:hover { border-color: var(--mainColor) !important; } .page-title-content .contact-form .default-btn { margin-top: 0; } /*================================================ FAQ Area CSS =================================================*/ .faq-sidebar { z-index: 1; position: relative; border-radius: 5px; background-color: var(--whiteColor); -webkit-box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; } .faq-sidebar ul { padding: 30px; margin-bottom: 0; list-style-type: none; font-family: var(--headingFontFamily); } .faq-sidebar ul li { margin-bottom: 18px; padding-bottom: 18px; color: var(--whiteColor); border-bottom: 1px solid #eeeeee; } .faq-sidebar ul li a { display: inline-block; font-size: 17px; font-weight: 600; } .faq-sidebar ul li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .faq-accordion { background-color: var(--whiteColor); border: 1px solid #eeeeee; border-bottom: none; } .faq-accordion .accordion-item { background-color: transparent; border-radius: 0; border: none; } .faq-accordion .accordion-item .accordion-button { display: block; text-align: start; -webkit-box-shadow: unset; box-shadow: unset; padding: 20px 25px; position: relative; color: var(--blackColor); background-color: transparent; border-bottom: 1px solid #eeeeee; font-size: 20px; font-weight: 700; font-family: var(--headingFontFamily); } .faq-accordion .accordion-item .accordion-button i { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); -webkit-transition: var(--transition); transition: var(--transition); position: absolute; right: 25px; top: 50%; } .faq-accordion .accordion-item .accordion-button.collapsed i { -webkit-transform: translateY(-50%) rotate(0); transform: translateY(-50%) rotate(0); } .faq-accordion .accordion-item .accordion-button::after { display: none; } .faq-accordion .accordion-item .accordion-body { padding: 20px 25px; border-bottom: 1px solid #eeeeee; } .faq-accordion .accordion-item .accordion-body p strong { color: var(--blackColor); } .faq-accordion .accordion-item .accordion-body p a { color: var(--mainColor); } .faq-accordion .accordion-item .accordion-body p a:hover { text-decoration: underline; } .faq-accordion .accordion-item .accordion-body ul { margin-bottom: 15px; } .faq-accordion .accordion-item .accordion-body ul li { margin-bottom: 12px; color: var(--secondaryColor); } .faq-accordion .accordion-item .accordion-body ul li strong { color: var(--blackColor); } .faq-accordion .accordion-item .accordion-body ul li a { color: var(--mainColor); } .faq-accordion .accordion-item .accordion-body ul li a:hover { text-decoration: underline; } .faq-accordion .accordion-item .accordion-body ul li:last-child { margin-bottom: 0; } .faq-accordion .accordion-item .accordion-body ul:last-child { margin-bottom: 0; } /*================================================ Case Studies Details Area CSS =================================================*/ .case-studies-details-area { border-top: 1px solid #eeeeee; background-position: center center; background-repeat: no-repeat; background-size: cover; background: -webkit-gradient(linear, left top, left bottom, from(#fbffff), color-stop(#f2f5f5), color-stop(#f6f9f9), color-stop(#d1f8fb), to(#c6f7fc)) !important; background: linear-gradient(to bottom, #fbffff, #f2f5f5, #f6f9f9, #d1f8fb, #c6f7fc) !important; } .case-studies-details-header .content { padding-left: 15px; } .case-studies-details-header .content h1 { margin-bottom: 15px; line-height: 1.4; font-size: 36px; } .case-studies-details-header .content h2 { margin-bottom: 15px; line-height: 1.4; font-size: 32px; } .case-studies-details-header .content h3 { margin-bottom: 15px; line-height: 1.4; font-size: 28px; } .case-studies-details-header .content h4 { margin-bottom: 15px; line-height: 1.4; font-size: 24px; } .case-studies-details-header .content h5 { margin-bottom: 15px; line-height: 1.4; font-size: 20px; } .case-studies-details-header .content h6 { margin-bottom: 15px; line-height: 1.4; font-size: 16px; } .case-studies-details-header .content p { max-width: 530px; } .case-studies-details-header .content .meta { border-radius: 10px; list-style-type: none; background-color: var(--whiteColor); -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05); padding-left: 30px; padding-right: 30px; margin-bottom: 0; margin-top: 25px; } .case-studies-details-header .content .meta li { border-right: 1px solid #eeeeee; color: var(--secondaryColor); display: inline-block; margin-right: 25px; position: relative; padding-top: 20px; padding-left: 45px; padding-right: 30px; padding-bottom: 20px; } .case-studies-details-header .content .meta li span { display: block; font-weight: 600; margin-bottom: 2px; letter-spacing: 2px; color: var(--mainColor); } .case-studies-details-header .content .meta li a { color: var(--secondaryColor); } .case-studies-details-header .content .meta li a:hover { color: var(--mainColor); } .case-studies-details-header .content .meta li i { position: absolute; font-size: 30px; line-height: 1; top: 22px; left: 0; } .case-studies-details-header .content .meta li:last-child { margin-right: 0; padding-right: 0; border-right: none; } .case-studies-details-header .image { text-align: center; } .case-studies-details-desc { max-width: 1100px; margin-top: 50px; margin-left: auto; margin-right: auto; } .case-studies-details-desc .article-content { -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px 0px; box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px 0px; background-color: var(--whiteColor); border-radius: 10px; padding: 50px; } .case-studies-details-desc .article-content p { margin-bottom: 20px; } .case-studies-details-desc .article-content p a { text-decoration: underline; } .case-studies-details-desc .article-content p strong { font-weight: 600; color: var(--blackColor); } .case-studies-details-desc .article-content p:last-child { margin-bottom: 0; } .case-studies-details-desc .article-content h3 { font-size: 22px; margin-top: 40px; margin-bottom: 15px; } .case-studies-details-desc .article-content h3:first-child { margin-top: 0; } .case-studies-details-desc .article-content ul, .case-studies-details-desc .article-content ol { margin-bottom: 30px; } .case-studies-details-desc .article-content ul li, .case-studies-details-desc .article-content ol li { margin-bottom: 12px; color: var(--secondaryColor); } .case-studies-details-desc .article-content ul li a, .case-studies-details-desc .article-content ol li a { text-decoration: underline; } .case-studies-details-desc .article-content ul li strong, .case-studies-details-desc .article-content ol li strong { font-weight: 600; color: var(--blackColor); } .case-studies-details-desc .article-content ul li:last-child, .case-studies-details-desc .article-content ol li:last-child { margin-bottom: 0; } .case-studies-details-desc .article-content ul:last-child, .case-studies-details-desc .article-content ol:last-child { margin-bottom: 0; } .case-studies-details-desc .article-content .article-tags { margin-top: 30px; } .case-studies-details-desc .article-content .article-tags a { margin-right: 8px; border-radius: 30px; display: inline-block; padding: 5px 20px 6px; color: var(--blackColor); background-color: #f1f1f1; font-size: 14px; font-weight: 600; font-family: var(--headingFontFamily); } .case-studies-details-desc .article-content .article-tags a:hover { background-color: var(--mainColor); color: var(--whiteColor); border-radius: 5px; } .case-studies-details-desc .article-content .article-tags a:last-child { margin-right: 0; } .case-studies-details-desc .article-content .wp-block-gallery.columns-3 { list-style-type: none; padding-left: 0; -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 0; margin-top: 20px; margin-left: -10px; margin-right: -10px; } .case-studies-details-desc .article-content .wp-block-gallery.columns-3 li { margin-bottom: 20px; margin-right: 0; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 50%; padding-left: 10px; padding-right: 10px; } .case-studies-details-desc .article-content .wp-block-gallery.columns-3 li:last-child { margin-bottom: 0; } .case-studies-details-desc .article-content .wp-block-gallery.columns-3 li figure { margin-bottom: 0; } .case-studies-details-desc .article-content blockquote, .case-studies-details-desc .article-content .blockquote { margin-bottom: 0; } /*================================================ Pricing Area CSS =================================================*/ .single-pricing-box { -webkit-box-shadow: 0 30px 50px rgba(107, 124, 147, 0.15); box-shadow: 0 30px 50px rgba(107, 124, 147, 0.15); background-color: var(--whiteColor); margin-bottom: 25px; border-radius: 7px; position: relative; overflow: hidden; padding: 30px; } .single-pricing-box .pricing-header h3 { margin-bottom: 8px; font-size: 22px; } .single-pricing-box .price { margin-top: 30px; } .single-pricing-box .price h4 { margin-bottom: 10px; font-size: 36px; line-height: 1; } .single-pricing-box .price h4 span { color: var(--blackColor); font-size: 15px; font-weight: normal; } .single-pricing-box .link-btn { width: 100%; display: block; margin-top: 25px; border-radius: 5px; padding: 13px 30px; text-align: center; color: var(--whiteColor); background-color: var(--mainColor); -webkit-box-shadow: 0 7px 18px 0 rgba(107, 124, 147, 0.25); box-shadow: 0 7px 18px 0 rgba(107, 124, 147, 0.25); font-size: 16px; font-weight: 600; font-family: var(--headingFontFamily); } .single-pricing-box .link-btn:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 30px 50px rgba(107, 124, 147, 0.15); box-shadow: 0 30px 50px rgba(107, 124, 147, 0.15); } .single-pricing-box .features-list { margin-top: 35px; } .single-pricing-box .features-list h5 { font-size: var(--fontSize); letter-spacing: 1.5px; margin-bottom: 25px; } .single-pricing-box .features-list ul { padding-left: 0; margin-bottom: 0; list-style-type: none; } .single-pricing-box .features-list ul li { color: var(--secondaryColor); margin-bottom: 12px; padding-left: 22px; position: relative; } .single-pricing-box .features-list ul li i { position: absolute; color: #0568FD; font-size: 13px; top: 3.5px; left: 0; } .single-pricing-box .features-list ul li i.lni-close { color: red; } .single-pricing-box .features-list ul li:last-child { margin-bottom: 0; } .single-pricing-box .ribbon { top: -10px; right: -25px; width: 150px; height: 150px; overflow: hidden; position: absolute; } .single-pricing-box .ribbon span { text-transform: uppercase; color: var(--whiteColor); -webkit-transform: rotate(45deg); transform: rotate(45deg); background-color: red; text-align: center; position: absolute; font-size: 14px; display: block; width: 225px; left: -25px; top: 30px; padding-top: 6px; padding-bottom: 6px; } /*================================================ Terms & Condtions Area CSS =================================================*/ .terms-conditions-content h6 { margin-bottom: 15px; } .terms-conditions-content h6:not(:first-child) { margin-top: 25px; } .terms-conditions-content h5 { margin-bottom: 15px; } .terms-conditions-content h5:not(:first-child) { margin-top: 25px; } .terms-conditions-content h4 { margin-bottom: 15px; } .terms-conditions-content h4:not(:first-child) { margin-top: 25px; } .terms-conditions-content h3 { margin-bottom: 15px; } .terms-conditions-content h3:not(:first-child) { margin-top: 25px; } .terms-conditions-content h2 { margin-bottom: 15px; } .terms-conditions-content h2:not(:first-child) { margin-top: 25px; } .terms-conditions-content h1 { margin-bottom: 15px; } .terms-conditions-content h1:not(:first-child) { margin-top: 25px; } .terms-conditions-content strong { color: var(--blackColor) !important; } .terms-conditions-content p a { color: var(--mainColor); } .terms-conditions-content p a:hover { text-decoration: underline; } .terms-conditions-content ul li { color: var(--secondaryColor); margin-bottom: 12px; } .terms-conditions-content ul li a { color: var(--mainColor); } .terms-conditions-content ul li a:hover { text-decoration: underline; } .terms-conditions-content ul li:last-child { margin-bottom: 0; } .terms-conditions-content ol li { color: var(--secondaryColor); margin-bottom: 12px; } .terms-conditions-content ol li a { color: var(--mainColor); } .terms-conditions-content ol li a:hover { text-decoration: underline; } .terms-conditions-content ol li:last-child { margin-bottom: 0; } /*================================================ Privacy Policy Area CSS =================================================*/ .privacy-policy-content h6 { margin-bottom: 15px; } .privacy-policy-content h6:not(:first-child) { margin-top: 25px; } .privacy-policy-content h5 { margin-bottom: 15px; } .privacy-policy-content h5:not(:first-child) { margin-top: 25px; } .privacy-policy-content h4 { margin-bottom: 15px; } .privacy-policy-content h4:not(:first-child) { margin-top: 25px; } .privacy-policy-content h3 { margin-bottom: 15px; } .privacy-policy-content h3:not(:first-child) { margin-top: 25px; } .privacy-policy-content h2 { margin-bottom: 15px; } .privacy-policy-content h2:not(:first-child) { margin-top: 25px; } .privacy-policy-content h1 { margin-bottom: 15px; } .privacy-policy-content h1:not(:first-child) { margin-top: 25px; } .privacy-policy-content strong { color: var(--blackColor) !important; } .privacy-policy-content p a { color: var(--mainColor); } .privacy-policy-content p a:hover { text-decoration: underline; } .privacy-policy-content ul li { color: var(--secondaryColor); margin-bottom: 12px; } .privacy-policy-content ul li a { color: var(--mainColor); } .privacy-policy-content ul li a:hover { text-decoration: underline; } .privacy-policy-content ul li:last-child { margin-bottom: 0; } .privacy-policy-content ol li { color: var(--secondaryColor); margin-bottom: 12px; } .privacy-policy-content ol li a { color: var(--mainColor); } .privacy-policy-content ol li a:hover { text-decoration: underline; } .privacy-policy-content ol li:last-child { margin-bottom: 0; } /*================================================ Pagination Area CSS =================================================*/ .pagination-area { margin-top: 20px; padding-top: 30px; border-top: 1px solid #eeeeee; } .pagination-area .nav-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .pagination-area .page-numbers { width: 45px; height: 45px; border: none; display: block; line-height: 45px; position: relative; text-align: center; border-radius: 50%; color: var(--paragraphColor); -webkit-transition: var(--transition); transition: var(--transition); background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eaeef3)); background: linear-gradient(180deg, #ffffff 0%, #eaeef3 100%); -webkit-box-shadow: 0 5px 15px 0 rgba(107, 124, 147, 0.15), 0 2px 4px 0 rgba(107, 124, 147, 0.2), inset 0 -2px 0 0 #c2cfde; box-shadow: 0 5px 15px 0 rgba(107, 124, 147, 0.15), 0 2px 4px 0 rgba(107, 124, 147, 0.2), inset 0 -2px 0 0 #c2cfde; font-size: 15px; font-weight: 700; margin-left: 5px; margin-right: 5px; } .pagination-area .page-numbers.next { margin-left: auto; } .pagination-area .page-numbers.previous { margin-right: auto; } .pagination-area .page-numbers:hover { color: var(--mainColor); } .pagination-area .page-numbers.current { background: var(--whiteColor); color: var(--mainColor); } .pagination-area .page-numbers:first-child { margin-left: 0; } .pagination-area .page-numbers:last-child { margin-right: 0; } /*================================================ Widget Area CSS =================================================*/ .widget-area { padding-left: 15px; } .widget-area .widget { padding: 25px; margin-bottom: 25px; background-color: #f9f9f9; } .widget-area .widget .widget-title { margin-bottom: 25px; position: relative; font-size: 20px; z-index: 1; } .widget-area .widget .widget-title::before { left: 0; right: 0; top: 50%; content: ''; height: 1px; z-index: -1; margin-top: 1px; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: #eeeeee; } .widget-area .widget .widget-title span { background-color: #f9f9f9; padding-right: 15px; } .widget-area .widget:last-child { margin-bottom: 0; } .widget-area .widget_search form { position: relative; } .widget-area .widget_search form .search-field { width: 100%; height: 50px; display: block; border-radius: 0; padding: 0 15px 0 15px; font-size: var(--fontSize); border: 1px solid #eeeeee; -webkit-transition: var(--transition); transition: var(--transition); background-color: transparent; } .widget-area .widget_search form .search-field:focus { border-color: var(--mainColor); } .widget-area .widget_search form button { right: 0; bottom: 0; width: 50px; height: 50px; border: none; font-size: 18px; position: absolute; color: var(--whiteColor); -webkit-transition: var(--transition); transition: var(--transition); background-color: var(--mainColor); } .widget-area .widget_search form button:hover { color: var(--whiteColor); background-color: var(--blackColor); } .widget-area .widget_author { padding: 25px; border: 1px solid #eeeeee; } .widget-area .widget_author h3 { font-size: 20px; margin-bottom: 10px; margin-top: 20px; text-transform: capitalize; } .widget-area .widget_author span { display: block; margin-bottom: 4px; color: var(--secondaryColor); } .widget-area .widget_follow_us ul { padding-left: 0; margin-bottom: 0; list-style-type: none; } .widget-area .widget_follow_us ul li { margin-bottom: 14px; } .widget-area .widget_follow_us ul li a { position: relative; display: inline-block; color: var(--secondaryColor); } .widget-area .widget_follow_us ul li a:hover { color: var(--mainColor); } .widget-area .widget_follow_us ul li a:hover::before { width: 100%; } .widget-area .widget_follow_us ul li a::before { left: 0; width: 0; bottom: 0; content: ''; height: 1px; position: absolute; -webkit-transition: var(--transition); transition: var(--transition); background-color: var(--mainColor); } .widget-area .widget_follow_us ul li:last-child { margin-bottom: 0; } .widget-area .widget_cyard_posts_thumb .item { margin-bottom: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; } .widget-area .widget_cyard_posts_thumb .item .thumb { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 27%; } .widget-area .widget_cyard_posts_thumb .item .info { padding-left: 15px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 73%; } .widget-area .widget_cyard_posts_thumb .item .info .title { line-height: 1.5; margin-bottom: 7px; font-size: 16px; font-weight: 600; } .widget-area .widget_cyard_posts_thumb .item .info .title a { display: inline-block; } .widget-area .widget_cyard_posts_thumb .item .info .date { font-size: 15px; color: var(--secondaryColor); } .widget-area .widget_cyard_posts_thumb .item .info .star-rating { margin-top: 10px; font-size: 14px; } .widget-area .widget_cyard_posts_thumb .item .info .star-rating i { color: #f49f0b; } .widget-area .widget_cyard_posts_thumb .item .info .price { display: block; margin-top: 12px; font-weight: 500; color: var(--secondaryColor); } .widget-area .widget_cyard_posts_thumb .item:last-child { margin-bottom: 0; } .widget-area .widget_categories ul { padding-left: 0; margin-bottom: 0; list-style-type: none; } .widget-area .widget_categories ul li { margin-bottom: 14px; } .widget-area .widget_categories ul li a { position: relative; display: inline-block; color: var(--secondaryColor); } .widget-area .widget_categories ul li a:hover { color: var(--mainColor); } .widget-area .widget_categories ul li a:hover::before { width: 100%; } .widget-area .widget_categories ul li a::before { left: 0; width: 0; bottom: 0; content: ''; height: 1px; position: absolute; -webkit-transition: var(--transition); transition: var(--transition); background-color: var(--mainColor); } .widget-area .widget_categories ul li:last-child { margin-bottom: 0; } .widget-area .widget_tag_cloud .tagcloud { margin-bottom: -10px; } .widget-area .widget_tag_cloud .tagcloud a { font-size: 13px; padding: 5px 20px; border-radius: 30px; display: inline-block; color: var(--blackColor); border: 1px solid #ebeeee; margin-right: 8px; margin-bottom: 10px; } .widget-area .widget_tag_cloud .tagcloud a:hover { color: var(--mainColor); border-color: var(--mainColor); } .widget-area.right-sidebar { padding-left: 15px; padding-right: 0; } /*================================================ Contact Area CSS =================================================*/ .single-contact-info-box { -webkit-transition: var(--transition); transition: var(--transition); background-color: #f8f8f8; margin-bottom: 25px; padding: 30px 40px 25px; text-align: center; } .single-contact-info-box i { line-height: 1; margin-bottom: 20px; color: var(--mainColor); background-color: #f5e9e9; font-size: 30px; border-radius: 50px; height: 65px; width: 65px; line-height: 65px; } .single-contact-info-box h3 { font-size: 22px; margin-bottom: 15px; } .single-contact-info-box p { margin-bottom: 2px; } .single-contact-info-box p a { color: var(--secondaryColor); } .single-contact-info-box p a:hover { color: var(--mainColor); } .single-contact-info-box p:last-child { margin-bottom: 0; } .single-contact-info-box:hover { -webkit-box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; background-color: var(--whiteColor); -webkit-transform: translateY(-10px); transform: translateY(-10px); } .contact-form { padding: 50px; background-color: var(--whiteColor); -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.08); box-shadow: 0 0 30px rgba(0, 0, 0, 0.08); } .contact-form label { display: block; margin-bottom: 10px; margin-top: -5px; font-size: 16px; font-weight: 500; font-family: var(--headingFontFamily); } .contact-form .form-group { margin-bottom: 25px; } .contact-form .form-check { color: var(--secondaryColor); } .contact-form .form-check .form-check-input { margin-top: 0.29em; -webkit-box-shadow: unset !important; box-shadow: unset !important; } .contact-form .form-check .form-check-input[type=checkbox] { border-radius: 0; } .contact-form .form-check .form-check-input:checked { background-color: var(--mainColor); border-color: var(--mainColor); } .contact-form .form-check .form-check-input:focus { border-color: var(--mainColor); } .contact-form .default-btn { margin-top: 15px; } .contact-form .help-block.with-errors { color: red; margin-bottom: 0; margin-top: 12px; } .contact-form .wpcf7 form.invalid .wpcf7-response-output, .contact-form .wpcf7 form.unaccepted .wpcf7-response-output { line-height: 26px; border-radius: 5px; margin-left: 0 !important; margin-right: 0 !important; } .contact-form #msgSubmit { margin: 0; } .contact-form #msgSubmit.text-danger { margin-top: 12px; } .contact-form #msgSubmit.text-success { margin-top: 12px; } .contact-info { z-index: 1; height: 100%; padding: 40px; position: relative; background-color: var(--mainColor); background-image: url(../img/security-bg.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; } .contact-info h3 { font-size: 22px; margin-bottom: 35px; color: var(--whiteColor); } .contact-info .info { padding-left: 0; margin-bottom: 40px; list-style-type: none; } .contact-info .info li { color: var(--whiteColor); margin-bottom: 18px; padding-left: 25px; position: relative; font-weight: 500; opacity: .95; } .contact-info .info li i { position: absolute; top: 3px; left: 0; } .contact-info .info li a { color: var(--whiteColor); } .contact-info .info li:last-child { margin-bottom: 0; } .contact-info .social-links { padding-left: 0; list-style-type: none; margin-bottom: 0; margin-top: -10px; } .contact-info .social-links li { color: var(--whiteColor); margin-bottom: 18px; position: relative; font-weight: 500; } .contact-info .social-links li a { color: var(--whiteColor); position: relative; opacity: .95; } .contact-info .social-links li a::before { width: 0; bottom: 1px; content: ''; height: 1px; position: absolute; -webkit-transition: var(--transition); transition: var(--transition); background-color: var(--whiteColor); } .contact-info .social-links li a:hover { opacity: 1; } .contact-info .social-links li a:hover::before { width: 100%; } .contact-info .social-links li:last-child { margin-bottom: 0; } .contact-info::before { top: 0; left: 0; right: 0; bottom: 0; z-index: -1; content: ''; opacity: .80; position: absolute; background: #000000; } /*================================================ Profile Authentication Area CSS =================================================*/ .login-form { padding-right: 15px; } .login-form h2 { margin-bottom: 30px; font-size: 36px; } .login-form form .form-group { margin-bottom: 25px; } .login-form form .form-group label { display: block; font-weight: 500; margin-bottom: 12px; } .login-form form .remember-me-wrap { margin-bottom: 0; } .login-form form .remember-me-wrap .form-check { margin-bottom: 0; color: var(--blackColor); } .login-form form .remember-me-wrap .form-check .form-check-input { margin-top: .15em; -webkit-box-shadow: unset !important; box-shadow: unset !important; } .login-form form .remember-me-wrap .form-check .form-check-input[type=checkbox] { border-radius: 0; } .login-form form .remember-me-wrap .form-check .form-check-input:checked { background-color: var(--mainColor); border-color: var(--mainColor); } .login-form form .remember-me-wrap .form-check .form-check-input:focus { border-color: var(--mainColor); } .login-form form .lost-your-password-wrap { text-align: end; } .login-form form .lost-your-password-wrap a { display: inline-block; position: relative; line-height: 1.5; } .login-form form .lost-your-password-wrap a::before { left: 0; bottom: 0; width: 100%; height: 1px; content: ''; position: absolute; -webkit-transition: var(--transition); transition: var(--transition); background-color: #eeeeee; } .login-form form .lost-your-password-wrap a::after { left: 0; width: 0; bottom: 0; height: 1px; content: ''; position: absolute; -webkit-transition: var(--transition); transition: var(--transition); background-color: var(--mainColor); } .login-form form .lost-your-password-wrap a:hover::before { width: 0; } .login-form form .lost-your-password-wrap a:hover::after { width: 100%; } .login-form form button { border: none; display: block; margin-top: 20px; text-align: center; color: var(--whiteColor); background-color: var(--mainColor); -webkit-transition: var(--transition); transition: var(--transition); border-radius: 5px; padding: 14px 30px; width: 100%; font-size: 16px; font-weight: 700; font-family: var(--headingFontFamily); } .login-form form button:hover { background-color: var(--blackColor); color: var(--whiteColor); } .register-form { padding-left: 15px; } .register-form h2 { margin-bottom: 30px; font-size: 36px; } .register-form form .form-group { margin-bottom: 25px; } .register-form form .form-group label { display: block; font-weight: 500; margin-bottom: 12px; } .register-form form .description { font-style: italic; font-size: 14.5px; margin-top: -10px; margin-bottom: 0; } .register-form form button { border: none; display: block; margin-top: 20px; text-align: center; color: var(--whiteColor); background-color: var(--mainColor); -webkit-transition: var(--transition); transition: var(--transition); border-radius: 5px; padding: 14px 30px; width: 100%; font-size: 16px; font-weight: 700; font-family: var(--headingFontFamily); } .register-form form button:hover { background-color: var(--blackColor); color: var(--whiteColor); } /*================================================ Not Found Area CSS =================================================*/ .not-found-area { border-top: 1px solid #eeeeee; } .not-found-content { text-align: center; } .not-found-content h3 { font-size: 24px; margin-bottom: 20px; } .not-found-content p { max-width: 500px; font-size: 18px; font-family: var(--headingFontFamily); margin-right: auto; margin-left: auto; } .not-found-content .default-btn { margin-top: 10px; } /*================================================ Footer Area CSS =================================================*/ /*================================================ Go Top CSS =================================================*/ .go-top { z-index: 4; opacity: 0; right: 20px; bottom: 20px; line-height: 1; position: fixed; cursor: pointer; font-size: 38px; -webkit-transition: .2s; transition: .2s; visibility: hidden; color: var(--mainColor); } .go-top:hover { bottom: 25px; } .go-top.active { opacity: 1; -webkit-transform: scale(1); transform: scale(1); visibility: visible; } .our-team .ptb-100 { padding-bottom: 70px; } .casi-single-partner .pb-100 { padding-bottom: 0; } .navbar-area.hide-wp-nav.is-sticky { margin-top: 32px; } .header-area.background-transparent-header.hide-wp-nav { margin-top: 32px; } .header-area.background-transparent-header.hide-wp-nav .is-sticky { margin-top: 32px; } .mobile-brand h2 { margin-bottom: 0; } .page-title-area { word-break: break-all; word-break: break-word; } .single-blog-post .content h3 { word-wrap: break-word; } /* WP Monster CSS */ .footer-area table { background: transparent; } .footer-area .single-footer-widget { margin-bottom: 25px; } .footer-area .single-footer-widget ul li ul { margin-top: 10px; padding-left: 20px; } .footer-area .single-footer-widget .wp-block-group__inner-container { padding: 0; } .footer-area .single-footer-widget .recentcomments .comment-author-link { font-weight: 600; font-size: 14px; text-transform: capitalize; } .footer-area .single-footer-widget .recentcomments a { font-weight: 600; } .footer-area .widget_rss ul li { margin-bottom: 20px; } .footer-area .widget_rss ul li::before { top: 10px; } .footer-area .widget_rss ul li:last-child { margin-bottom: 0; } .footer-area .widget_rss ul li .rsswidget { display: block; font-weight: 600; font-size: 15px; } .footer-area .widget_rss ul li .rss-date { font-size: 13px; margin: 10px 0 10px; display: block; text-transform: uppercase; } .footer-area .widget_rss ul li .rssSummary { line-height: 25px; font-size: 14px; } .footer-area .widget_rss ul li cite { font-weight: 500; display: block; margin-top: 10px; font-style: normal; font-size: 14px; } .footer-area .widget_text p img { margin: 10px 0; } .footer-area .widget_text .wp-caption-text { border: none; text-align: center; font-size: 14px; } .footer-area select { border: 1px solid #eee; width: 100%; height: 45px; padding: 5px 15px; color: #141414; font-weight: 600; } .footer-area .widget_tag_cloud .tagcloud a { display: inline-block; font-size: 14px !important; padding: 5px 10px; border: 1px solid #2c2929; margin-top: 8px; margin-right: 4px; text-transform: capitalize; color: v; } .footer-area ul li { margin-bottom: 8px; line-height: 1.5; } .footer-area ul li:last-child { margin-bottom: 0; } .footer-area table td, .footer-area table th { padding: 6px 5px; font-size: 13px; text-align: center; color: var(--blackColor); } .footer-area table caption { caption-side: top; font-weight: bold; padding-top: 0; color: var(--blackColor); } .footer-area .select { color: #333; margin-bottom: 0; } .footer-area span.post-count { float: right; font-size: 14px; } .footer-area .rsswidget { display: inline-block; color: var(--blackColor); } .footer-area .nice-select ul.list li { color: #555; } /*================================================ Fooetr Area CSS =================================================*/ .single-footer-widget { margin-bottom: 25px; } .single-footer-widget table { background: transparent; } .single-footer-widget .logo p { margin-top: 18px; margin-bottom: 0; } .single-footer-widget .logo h2 { font-weight: bold; margin: 0; size: 24px; margin-top: -4px; } .single-footer-widget .logo img { max-width: 150px; } .single-footer-widget.widget_cyarb_logo_info p { margin-top: 0; } .single-footer-widget p { font-size: 14px; margin-top: 17px; } .single-footer-widget h3 { margin-bottom: 25px; font-size: 22px; font-weight: 700; } .single-footer-widget ul { padding-left: 0; margin-bottom: 0; } .single-footer-widget ul li { color: var(--secondaryColor); list-style-type: none; margin-bottom: 12px; font-size: 15px; font-weight: 500; font-family: var(--headingFontFamily); } .single-footer-widget ul li a { color: var(--secondaryColor); } .single-footer-widget ul li:last-child { margin-bottom: 0; } /* Blog Unit test all */ /*================================================ Sidebar Area CSS =================================================*/ /* Widget sidebar */ .blog-sidebar { padding-left: 15px; } .blog-sidebar .widget { margin-top: 30px; } .blog-sidebar .widget:first-child { margin-top: 0; } .blog-sidebar .widget .wp-block-group__inner-container { padding: 0; } .blog-sidebar .widget { background-color: #f9f9f9; } .blog-sidebar .widget .widget-title { margin-bottom: 20px; position: relative; z-index: 1; text-transform: capitalize; margin-top: -5px; font-weight: 700; font-size: 22px; font-family: var(--headingFontFamily); color: var(--blackColor); } .blog-sidebar .widget .widget-title::before { padding-left: 15px; left: 0; right: 0; top: 50%; content: ''; height: 1px; z-index: -1; margin-top: 1px; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: #eeeeee; } .blog-sidebar .widget.widget_tag_cloud .widget-title { margin-bottom: 25px; } .blog-sidebar .widget ul { padding: 0; list-style-type: none; margin: 0; } .blog-sidebar .widget ul li { position: relative; margin-bottom: 14px; font-size: 14px; font-weight: 400; } .blog-sidebar .widget ul li:last-child { margin-bottom: -5px; } .blog-sidebar .widget ul li ul li { padding-left: 14px; } .blog-sidebar .widget ul li span { display: inline-block; } .blog-sidebar .widget ul li a { display: inline-block; color: var(--blackColor); } .blog-sidebar .widget ul li a:hover .post_count { border: 1px solid; } .blog-sidebar .widget ul li a .post_count { position: absolute; right: 0; border: 1px solid #eee; width: 25px; text-align: center; height: 25px; line-height: 25px; font-size: 13px; color: var(--secondaryColor); } .blog-sidebar .widget_search form { position: relative; } .blog-sidebar .widget_search form label { display: block; margin-bottom: 0; } .blog-sidebar .widget_search form .screen-reader-text { display: none; } .blog-sidebar .widget_search form .search-field { background-color: #ffffff; height: 50px; padding: 6px 15px; border: 1px solid #eeeeee; width: 100%; display: block; outline: 0; -webkit-transition: var(--transition); transition: var(--transition); } .blog-sidebar .widget_search form button { position: absolute; right: 0; outline: 0; bottom: 0; height: 50px; width: 50px; z-index: 1; border: none; color: #ffffff; background-color: transparent; } .blog-sidebar .widget_search form button::before { content: ''; position: absolute; left: 0; width: 100%; height: 100%; z-index: -1; top: 0; -webkit-transition: var(--transition); transition: var(--transition); } .blog-sidebar .widget_search form button::after { content: ''; position: absolute; left: 0; width: 100%; height: 100%; z-index: -1; top: 0; -webkit-transition: var(--transition); transition: var(--transition); opacity: 0; visibility: hidden; } .blog-sidebar .widget_search form button:hover::before { opacity: 0; visibility: hidden; } .blog-sidebar .widget_search form button:hover::after { opacity: 1; visibility: visible; } .blog-sidebar select { height: 45px; border: 1px solid #eee; width: 100%; color: #555; font-size: 13.5px; padding: 8px 15px; } .blog-sidebar .widget_categories ul li a { text-transform: capitalize; } .blog-sidebar .widget_categories ul li .children { margin-top: 10px; } .blog-sidebar .widget_pages ul li.page_item_has_children > a { margin-bottom: 10px; display: inline-block; } .blog-sidebar .widget_pages ul li a { text-transform: capitalize; } .blog-sidebar .widget_rss ul li { margin-bottom: 20px; } .blog-sidebar .widget_rss ul li::before { top: 10px; } .blog-sidebar .widget_rss ul li:last-child { margin-bottom: 0; } .blog-sidebar .widget_rss ul li .rsswidget { display: block; color: #222222; font-weight: bold; font-size: 15px; } .blog-sidebar .widget_rss ul li .rss-date { font-size: 13px; margin: 3px 0 10px; display: block; } .blog-sidebar .widget_rss ul li .rssSummary { color: #555; line-height: 25px; font-size: 14px; } .blog-sidebar .widget_rss ul li cite { font-weight: bold; display: block; margin-top: 10px; font-style: normal; color: #222; font-size: 13.5px; } .blog-sidebar .widget_rss .widget-title .rsswidget { display: inline-block; } .blog-sidebar .tagcloud a { display: inline-block; font-weight: 400; font-size: 13px !important; padding: 5px 20px; border-radius: 30px; display: inline-block; color: var(--secondaryColor); border: 1px solid #ebeeee; margin-right: 8px; margin-bottom: 10px; position: relative; } .blog-sidebar .tagcloud a:hover, .blog-sidebar .tagcloud a:focus { color: var(--mainColor); border-color: var(--mainColor); } .blog-sidebar .widget_text p img { margin: 10px 0; } .blog-sidebar .widget_text .wp-caption-text { border: none; text-align: center; font-size: 14px; } .blog-sidebar .calendar_wrap table { text-align: center; margin-bottom: 0; } .blog-sidebar .calendar_wrap table #prev a, .blog-sidebar .calendar_wrap table #next a { text-decoration: underline; } .blog-sidebar .calendar_wrap table #prev a:hover, .blog-sidebar .calendar_wrap table #next a:hover { text-decoration: none; } .blog-sidebar .calendar_wrap table td, .blog-sidebar .calendar_wrap table th { padding: 8px 5px; } .blog-sidebar .calendar_wrap caption { padding-top: 0; caption-side: top; font-weight: 600; } .blog-sidebar .widget_nav_menu .sub-menu { margin-top: 8px; } .blog-sidebar .widget_recent_comments .recentcomments { color: #484848; } .blog-sidebar .widget_recent_comments .recentcomments .comment-author-link { font-weight: bold; font-size: 14px; } .blog-sidebar .widget_recent_comments .recentcomments a { font-weight: 600; } .blog-sidebar .widget_media_gallery .gallery { margin: 0; } .blog-sidebar .widget_media_gallery .gallery .gallery-item { margin: 0; } .blog-sidebar .widget_recent_entries ul li .post-date { display: block; font-size: 12px; color: #767676; } .blog-sidebar p { font-size: 15px; } .blog-sidebar span.post-count { float: right; font-size: 15px; color: var(--secondaryColor); } .nice-select { height: 45px; border: 1px solid #eee; width: 100%; color: #555; font-size: 13.5px; float: none; white-space: normal; } .nice-select span.current { display: block; margin-top: 3px; font-size: 15px; } .nice-select ul.list { padding: 0 !important; margin: 0 !important; list-style-type: none !important; border-radius: 0; width: 100%; overflow-y: auto; } .nice-select ul.list li { list-style-type: none !important; font-size: 14px; padding: 8px 15px !important; line-height: 1 !important; margin: 0 !important; min-height: auto; text-transform: capitalize; } .nice-select ul.list li::before { display: none; } .widget_text form br { display: none; } /* End Widget sidebar */ /* WP core style */ .alignnone { display: block; margin-bottom: 15px; } .aligncenter, div.aligncenter { display: block; margin: 15px auto 15px auto; } .alignright { float: right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { max-width: 100%; } .wp-caption.alignnone { margin: 15px auto 10px; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 100%; padding: 0; width: auto; } .wp-caption p.wp-caption-text { font-size: 14px; line-height: 17px; margin: 0; padding: 0 4px 5px; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #eee; clip: auto !important; -webkit-clip-path: none; clip-path: none; color: #444; display: block; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } .screen-reader-text { display: none; } .gallery-caption { z-index: 100000; } .bypostauthor { z-index: 100000; } /* End WP core style */ .blog-area { position: relative; z-index: 1; } .single-blog-post { margin-bottom: 25px; } .single-blog-post .image { position: relative; overflow: hidden; } .single-blog-post .image img { -webkit-transition: var(--transition); transition: var(--transition); } .single-blog-post .image::before { width: 0; top: 50%; left: 50%; height: 0; opacity: 0; z-index: 2; content: ''; display: block; position: absolute; border-radius: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.2); } .single-blog-post .image::after { top: 0; left: -75%; z-index: 2; width: 50%; content: ''; height: 100%; display: block; position: absolute; -webkit-transform: skewX(-25deg); transform: skewX(-25deg); background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); } .single-blog-post .content { margin-bottom: 20px; } .single-blog-post .content .meta { padding-left: 0; margin-bottom: 12px; list-style-type: none; } .single-blog-post .content .meta li { color: var(--secondaryColor); display: inline-block; position: relative; margin-right: 20px; } .single-blog-post .content .meta li a { display: block; color: var(--secondaryColor); } .single-blog-post .content .meta li a:hover { color: var(--mainColor); } .single-blog-post .content .meta li:last-child { margin-right: 0; } .single-blog-post .content .meta li:last-child::before { display: none; } .single-blog-post .content h3 { font-size: 22px; line-height: 1.4; margin-bottom: 12px; } .single-blog-post:hover .image img { -webkit-transform: scale(1.1); transform: scale(1.1); } .single-blog-post:hover .image::before { -webkit-animation: circle .75s; animation: circle .75s; } .single-blog-post:hover .image::after { -webkit-animation: shine .75s; animation: shine .75s; } /*================================================ Blog Details Area CSS =================================================*/ .blog-details-area { position: relative; z-index: 1; } .blog-details .post-thumb { margin-bottom: 25px; } .blog-details h4 { margin-bottom: 18px; word-wrap: break-word; } .blog-details .blog-details-content { background-color: #ffffff; border-top: none; overflow: hidden; } .blog-details .blog-details-content .entry-meta li span a { font-weight: 400; } .blog-details .blog-details-content .entry-meta li i { font-style: normal; } .blog-details .blog-details-content .entry-meta li a { text-decoration: none; } .blog-details .blog-details-content h3 { margin-bottom: 15px; font-size: 23px; font-weight: 700; } .blog-details .blog-details-content .category { padding: 0; margin: 20px 0 0; border-top: 1px solid #eee; list-style-type: none; clear: both; } .blog-details .blog-details-content .category li { display: inline-block; margin-bottom: 0; margin-top: 10px; } .blog-details .blog-details-content .category li span.icon-book { font-weight: 600; color: #323232; font-size: 20px; margin-right: 5px; position: relative; top: 2px; } .blog-details .blog-details-content .category li span.icon-book i { font-style: normal; font-size: 16px; } .blog-details .blog-details-content .category li:last-child span { display: none; } .blog-details .blog-details-content .category li a { font-size: 13px; font-weight: 600; text-decoration: none; text-transform: capitalize; color: var(--secondaryColor); } .blog-details .post-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 25px; padding-top: 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; padding-bottom: 30px; } .blog-details .post-footer .post-tags { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .blog-details .post-footer .post-tags .sub { text-transform: uppercase; display: inline-block; font-weight: 600; margin-right: 3px; } .blog-details .post-footer .post-tags ul { display: inline-block; list-style-type: none; padding-left: 0; margin-top: 0; margin-bottom: 0; } .blog-details .post-footer .post-tags ul li { display: inline-block; margin-bottom: 0; margin-right: 1px; } .blog-details .post-footer .post-tags ul li a { color: var(--secondaryColor); } .blog-details .post-footer .post-tags ul li a:hover { color: var(--mainColor); } .blog-details .post-footer .post-tags ul li:not(:last-child)::after { content: ','; } .blog-details .post-footer .post-tags.post-tags-space { max-width: 100%; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .blog-details .post-footer .article-share { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; text-align: end; } .blog-details .post-footer .article-share .social { padding-left: 0; list-style-type: none; margin-bottom: 0; margin-top: 0; } .blog-details .post-footer .article-share .social li { margin-bottom: 0; display: inline-block; color: var(--blackColor); } .blog-details .post-footer .article-share .social li span { display: inline-block; position: relative; margin-right: 3px; font-weight: 600; text-transform: uppercase; } .blog-details .post-footer .article-share .social li a { width: 35px; height: 35px; display: block; line-height: 35px; border-radius: 50%; color: var(--whiteColor); background-color: var(--mainColor); border: 1px solid var(--mainColor); text-align: center; margin-left: 2px; } .blog-details .post-footer .article-share .social li a:hover { color: var(--mainColor); background-color: transparent; } .blog-details .post-footer .article-share .social li a.facebook { background-color: #3b5998; color: var(--whiteColor); border-color: #3b5998; } .blog-details .post-footer .article-share .social li a.facebook:hover { color: #3b5998; background-color: transparent; } .blog-details .post-footer .article-share .social li a.twitter { background-color: #1da1f2; color: var(--whiteColor); border-color: #1da1f2; } .blog-details .post-footer .article-share .social li a.twitter:hover { color: #1da1f2; background-color: transparent; } .blog-details .post-footer .article-share .social li a.linkedin { background-color: #007bb5; color: var(--whiteColor); border-color: #007bb5; } .blog-details .post-footer .article-share .social li a.linkedin:hover { color: #007bb5; background-color: transparent; } .blog-details .post-footer .article-share .social li a.instagram { background-color: #c13584; color: var(--whiteColor); border-color: #c13584; } .blog-details .post-footer .article-share .social li a.instagram:hover { color: #c13584; background-color: transparent; } .entry-meta { padding-left: 0; margin-bottom: 17px; list-style-type: none; text-transform: capitalize; } .entry-meta li { position: relative; display: inline-block; margin-right: 21px; color: var(--secondaryColor); } .entry-meta li a { display: inline-block; color: var(--secondaryColor); } .entry-meta li i { margin-right: 10px; } .entry-meta li:last-child { margin-right: 0; } .entry-meta li:last-child::before { display: none; } blockquote, .blockquote { background-color: #f9f9f9; padding: 25px !important; position: relative; margin-bottom: 20px; margin-top: 20px; } blockquote p, .blockquote p { line-height: 1.7; margin-bottom: 0; color: var(--blackColor); font-weight: 600; font-style: italic; font-size: 16px !important; } blockquote cite, .blockquote cite { display: block; margin-top: 10px; font-weight: 600; color: var(--mainColor); } /*================================================ Pagination Area CSS =================================================*/ .pages-links { margin: 15px 0; } .pages-links .page-links-title { padding-right: 5px; font-weight: 500; } .pages-links .post-page-numbers { width: 45px; height: 45px; margin: 0 3px; display: inline-block; background-color: #ffffff; line-height: 48px; -webkit-box-shadow: 0 2px 10px 0 #d8dde6; box-shadow: 0 2px 10px 0 #d8dde6; font-size: 18px; font-weight: 700; } .pages-links .post-page-numbers.current, .pages-links .post-page-numbers:hover, .pages-links .post-page-numbers:focus { color: #ffffff; -webkit-box-shadow: 0 2px 10px 0 #d8dde6; box-shadow: 0 2px 10px 0 #d8dde6; } /*================================================ Pagination Area CSS =================================================*/ .pagination-area { text-align: center; margin-top: 50px; padding-top: 30px; border-top: 1px solid #eeeeee; } .pagination-area .nav-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .pagination-area .page-numbers { width: 45px; height: 45px; border: none; display: inline-block; line-height: 45px; position: relative; text-align: center; border-radius: 50%; color: var(--paragraphColor); -webkit-transition: var(--transition); transition: var(--transition); background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eaeef3)); background: linear-gradient(180deg, #ffffff 0%, #eaeef3 100%); -webkit-box-shadow: 0 5px 15px 0 rgba(107, 124, 147, 0.15), 0 2px 4px 0 rgba(107, 124, 147, 0.2), inset 0 -2px 0 0 #c2cfde; box-shadow: 0 5px 15px 0 rgba(107, 124, 147, 0.15), 0 2px 4px 0 rgba(107, 124, 147, 0.2), inset 0 -2px 0 0 #c2cfde; font-size: 15px; font-weight: 700; margin-left: 5px; margin-right: 5px; } .pagination-area .page-numbers.next { margin-left: auto; } .pagination-area .page-numbers.previous { margin-right: auto; } .pagination-area .page-numbers:hover { color: var(--mainColor); } .pagination-area .page-numbers.current { background: var(--whiteColor); color: var(--mainColor); } .pagination-area .page-numbers:first-child { margin-left: 0; } .pagination-area .page-numbers:last-child { margin-right: 0; } /* Unit test pages style ====================================================================*/ /* Sticky Post */ .sticky .post-content-two { padding-left: 60px; background: #343a40; margin-top: 0; } .sticky .post-content-two h3::before { font-family: "Font Awesome 5 Free"; content: "\f08d"; position: absolute; left: -30px; top: 2px; font-size: 25px; font-weight: 600; color: #ffffff; } .sticky .post-content-two .meta li { color: #ffffff !important; } .sticky .post-content-two .meta li a { color: #ffffff !important; } .sticky .post-content-two .meta li::before { background: #fff !important; } .sticky .post-content-two h3 { position: relative; } .sticky .post-content-two h3 a { color: #ffffff; } .sticky .post-content-two p { color: #ffffff; } /* End Sticky Post */ /* Page Markup And Formatting */ .page-main-content { padding-top: 100px; padding-bottom: 100px; overflow: hidden; } .page-main-content h1 { font-size: 35px; margin-bottom: 15px; font-weight: 800; } .page-main-content h2 { font-size: 30px; margin-bottom: 15px; font-weight: 800; } .page-main-content h3 { font-size: 25px; margin-bottom: 15px; font-weight: 800; } .page-main-content h4 { font-size: 20px; margin-bottom: 15px; font-weight: 800; } .page-main-content h5 { font-size: 18px; margin-bottom: 15px; font-weight: 800; } .page-main-content h6 { font-size: 15px; margin-bottom: 15px; font-weight: 800; } .page-main-content p { margin-top: 18px; margin-bottom: 18px; } .page-main-content p:first-child { margin-top: -4px; } .page-main-content p:last-child { margin-bottom: 0; } .page-main-content .entry-content a { text-decoration: underline; display: inline-block; } .page-main-content .entry-content a:hover { text-decoration: none; } .page-main-content footer.entry-footer { clear: both; } .page-main-content footer.entry-footer .edit-link { margin-top: 10px; margin-bottom: 10px; display: block; } .page-main-content dl, .page-main-content ol, .page-main-content ul { margin-top: 20px; margin-bottom: 20px; } .page-main-content dt { margin-bottom: 5px; color: #0d1028; } .page-main-content dd { margin: 0 1rem 1rem; line-height: 1.8; } .page-main-content ul { list-style: disc; padding-left: 20px; } .page-main-content ul li { list-style: disc; line-height: 1.8; margin-bottom: 5px; } .page-main-content ul li ul { margin: 5px 0 0; list-style-type: circle; } .page-main-content ul li ul li { list-style-type: circle; } .page-main-content ol { padding-left: 20px; } .page-main-content ol li { line-height: 1.8; margin-bottom: 5px; } .page-main-content ol li ol { margin: 5px 0 0; } .page-main-content b, .page-main-content strong { color: #212529; } .page-main-content dfn, .page-main-content cite, .page-main-content em, .page-main-content i { font-style: italic; } .page-main-content code, .page-main-content kbd, .page-main-content tt, .page-main-content var { font-size: .88889em; font-family: Menlo,monaco,Consolas,Lucida Console,monospace; } .page-main-content kbd { background-color: #f1f0f0; } .page-main-content mark, .page-main-content ins { background: #fff9c0; text-decoration: none; } .page-main-content pre { font-size: .88889em; font-family: "Courier 10 Pitch",Courier,monospace; line-height: 1.8; overflow: auto; } .page-main-content abbr, .page-main-content acronym { border-bottom: 1px dotted #484848; cursor: help; } address { margin: 20px 0; font-style: italic; line-height: 30px; } table { margin: 0 0 2rem; border-collapse: collapse; width: 100%; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif; background: #ffffff; } table td, table th { padding: 10px 15px; border: 1px solid #d3dbe2; font-size: 13px; } table td a { font-weight: 600; } table th a { text-decoration: underline; } table th a:hover { text-decoration: none; } /* End Page Markup And Formatting */ /* cyarb posts thumb */ .widget_cyarb_posts_thumbs { position: relative; overflow: hidden; } .widget_cyarb_posts_thumbs .item { overflow: hidden; margin-bottom: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #DFEDEE; padding-bottom: 15px; } .widget_cyarb_posts_thumbs .item:last-child { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; } .widget_cyarb_posts_thumbs .item .thumb { float: left; height: 80px; overflow: hidden; position: relative; width: 80px; margin-right: 15px; } .widget_cyarb_posts_thumbs .item .thumb .fullimage { width: 80px; height: 80px; display: inline-block; background-size: cover !important; background-repeat: no-repeat; background-position: center center !important; border-radius: 5px; } .widget_cyarb_posts_thumbs .item .info { overflow: hidden; } .widget_cyarb_posts_thumbs .item .info time { display: block; text-transform: capitalize; color: var(--secondaryColor); font-size: 14px; } .widget_cyarb_posts_thumbs .item .info .title { font-size: 16px; line-height: 1.5; margin-bottom: 7px; font-weight: 700; font-family: var(--headingFontFamily); } .widget_cyarb_posts_thumbs .item .info .title a { color: var(--blackColor); } /* End cyarb posts thumb */ /* HTML Tags and Formatting */ .blog-details .blog-details-content .entry-meta { margin-top: 10px; } .blog-details .blog-details-content h1 { font-size: 40px; margin-bottom: 18px; } .blog-details .blog-details-content h2 { font-size: 35px; margin-bottom: 15px; } .blog-details .blog-details-content h3 { font-size: 30px; margin-bottom: 15px; } .blog-details .blog-details-content h4 { font-size: 1.5rem; margin-bottom: 15px; } .blog-details .blog-details-content h5 { font-size: 16px; margin-bottom: 15px; } .blog-details .blog-details-content h6 { font-size: 14px; margin-bottom: 15px; } .blog-details .blog-details-content p { line-height: 1.8; } .blog-details .blog-details-content p a { text-decoration: underline; display: inline-block; } .blog-details .blog-details-content p a:hover { text-decoration: none; } .blog-details .blog-details-content .entry-content a { text-decoration: underline; } .blog-details .blog-details-content .entry-content a:hover { text-decoration: none; } .blog-details .blog-details-content dl, .blog-details .blog-details-content ol, .blog-details .blog-details-content ul { margin-top: 20px; margin-bottom: 20px; } .blog-details .blog-details-content dl a, .blog-details .blog-details-content ol a, .blog-details .blog-details-content ul a { text-decoration: underline; display: inline-block; } .blog-details .blog-details-content dl a:hover, .blog-details .blog-details-content ol a:hover, .blog-details .blog-details-content ul a:hover { text-decoration: none; } .blog-details .blog-details-content dt { margin-bottom: 5px; color: var(--blackColor); } .blog-details .blog-details-content dd { margin: 0 1rem 1rem; font-size: 15px; line-height: 26px; } .blog-details .blog-details-content dd a { text-decoration: underline; display: inline-block; } .blog-details .blog-details-content dd a:hover { text-decoration: none; } .blog-details .blog-details-content ul { list-style: disc; padding-left: 20px; } .blog-details .blog-details-content ul li { list-style: disc; line-height: 1.8; margin-bottom: 10px; color: var(--secondaryColor); } .blog-details .blog-details-content ul li ul { margin: 10px 0 0; list-style-type: circle; } .blog-details .blog-details-content ul li ul li { list-style-type: circle; } .blog-details .blog-details-content ul li ol { margin: 10px 0 0; list-style-type: circle; } .blog-details .blog-details-content ul li ol li { list-style-type: decimal; } .blog-details .blog-details-content ul li ol li ul li { list-style-type: circle; } .blog-details .blog-details-content ul li:last-child { margin-bottom: 0; } .blog-details .blog-details-content ol { padding-left: 20px; } .blog-details .blog-details-content ol li { line-height: 1.8; margin-bottom: 10px; color: var(--secondaryColor); } .blog-details .blog-details-content ol li ol, .blog-details .blog-details-content ol li ul { margin: 10px 0 0; } .blog-details .blog-details-content b, .blog-details .blog-details-content strong { font-weight: 600; color: #212529; } .blog-details .blog-details-content dfn, .blog-details .blog-details-content cite, .blog-details .blog-details-content em, .blog-details .blog-details-content i { font-style: italic; } .blog-details .blog-details-content code, .blog-details .blog-details-content kbd, .blog-details .blog-details-content tt, .blog-details .blog-details-content var { font-size: .88889em; font-family: Menlo,monaco,Consolas,Lucida Console,monospace; } .blog-details .blog-details-content kbd { background-color: #eee; } .blog-details .blog-details-content mark, .blog-details .blog-details-content ins { background: #fff9c0; text-decoration: none; color: #000; padding: 0 5px; } .blog-details .blog-details-content pre { font-size: .88889em; font-family: "Courier 10 Pitch",Courier,monospace; line-height: 1.8; overflow: auto; } .blog-details .blog-details-content abbr, .blog-details .blog-details-content acronym { border-bottom: 1px dotted #484848; cursor: help; } .blog-details .blog-details-content i.fa { font-style: normal; } .blog-details .blog-details-content ul.entry-meta { margin: 0 0 18px; padding: 0; } .blog-details .blog-details-content ul.entry-meta li { margin-bottom: 0; } .blog-details .blog-details-content ul.entry-meta li a { text-transform: capitalize; color: var(--secondaryColor); } .blog-details .blog-details-content ul.entry-meta li span a { text-decoration: none; } .blog-details .blog-details-content iframe, .blog-details .blog-details-content video { width: 100%; } /* End HTML Tags and Formatting */ /* main page: Comments */ .comments-area .comment-content h1 { font-size: 30px; margin-bottom: 15px; } .comments-area .comment-content h2 { font-size: 25px; margin-bottom: 15px; } .comments-area .comment-content h3 { font-size: 20px; margin-bottom: 15px; } .comments-area .comment-content h4 { font-size: 18px; margin-bottom: 15px; } .comments-area .comment-content h5 { font-size: 16px; margin-bottom: 15px; } .comments-area .comment-content h6 { font-size: 14px; margin-bottom: 15px; } .comments-area .comment-content p { margin-bottom: 20px; line-height: 1.8; font-size: 14px; } .comments-area .comment-content p:last-child { margin-bottom: 0; } .comments-area .comment-content .entry-content a { text-decoration: underline; } .comments-area .comment-content .entry-content a:hover { text-decoration: none; } .comments-area .comment-content dl, .comments-area .comment-content ol, .comments-area .comment-content ul { margin-top: 20px; margin-bottom: 20px; } .comments-area .comment-content dt { margin-bottom: 5px; } .comments-area .comment-content dd { margin: 0 1rem 1rem; font-size: 15px; line-height: 26px; } .comments-area .comment-content ul { list-style: disc; padding-left: 20px; } .comments-area .comment-content ul li { list-style: disc; line-height: 1.8; margin-bottom: 10px; } .comments-area .comment-content ul li ul { margin: 10px 0 0; list-style-type: circle; } .comments-area .comment-content ul li ul li { list-style-type: circle; } .comments-area .comment-content ol { padding-left: 20px; } .comments-area .comment-content ol li { line-height: 1.8; margin-bottom: 10px; list-style-type: decimal; } .comments-area .comment-content ol li ol { margin: 10px 0 0; } .comments-area .comment-content b, .comments-area .comment-content strong { font-weight: 600; color: #212529; } .comments-area .comment-content dfn, .comments-area .comment-content cite, .comments-area .comment-content em, .comments-area .comment-content i { font-style: italic; } .comments-area .comment-content code, .comments-area .comment-content kbd, .comments-area .comment-content tt, .comments-area .comment-content var { font-size: .88889em; font-family: Menlo,monaco,Consolas,Lucida Console,monospace; } .comments-area .comment-content kbd { background-color: #fafafa; } .comments-area .comment-content mark, .comments-area .comment-content ins { background: #fff9c0; text-decoration: none; color: #000; padding: 0 6px; } .comments-area .comment-content pre { font-size: .88889em; font-family: "Courier 10 Pitch",Courier,monospace; line-height: 1.8; overflow: auto; background: #fafafa; color: var(--blackColor); } .comments-area .comment-content abbr, .comments-area .comment-content acronym { border-bottom: 1px dotted #484848; cursor: help; } /* End main page: Comments */ /* Comments list style */ #comments { clear: both; overflow: hidden; list-style: none; padding: 30px; background-color: #ffffff; -webkit-box-shadow: 0 0 40px 3px rgba(0, 0, 0, 0.05); box-shadow: 0 0 40px 3px rgba(0, 0, 0, 0.05); margin-top: 30px; } #comments .comment-list { margin: 0; padding: 0; list-style-type: none; } #comments .comment-list .children { margin: 0; padding: 0; list-style-type: none; } #comments .comment-list:before { display: none; } #comments .comment-list .comment-body { border-bottom: 1px dashed #eeeeee; color: var(--blackColor); padding-bottom: 20px; margin-bottom: 20px; position: relative; margin-left: 65px; } #comments .comment-list .comment-body a { text-decoration: underline; display: inline-block; } #comments .comment-list .comment-body a:hover { text-decoration: none; } #comments .comment-list .comment-body .comment-content img { margin: 5px 0; } #comments .comment-list .comment-body .reply { margin-top: 20px; } #comments .comment-list .comment-body .reply a { border: 1px dashed #ded9d9; color: var(--secondaryColor); background: #ffffff; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding: 10px 20px; line-height: 1; border-radius: 30px; text-transform: uppercase; font-size: 10px; font-weight: 700; text-decoration: none; } #comments .comment-list .comment-body .reply a:hover { color: #ffffff; } #comments .comment-author { font-size: 15px; margin-bottom: 10px; position: relative; z-index: 2; clear: both; } #comments .comment-author .avatar { height: 50px; left: -65px; position: absolute; width: 50px; } #comments .comment-author .says { display: none; } #comments .comment-author b.fn { font-weight: 600; color: var(--blackColor); } #comments .comment-author b.fn a { color: var(--blackColor); text-decoration: none; text-transform: capitalize; } #comments .comment-meta { margin-bottom: 1em; } #comments .comment-metadata { font-size: 10px; font-weight: 600; letter-spacing: 0.1818em; text-transform: uppercase; } #comments .comment-metadata a { text-decoration: none !important; display: inline-block; } #comments .comment-metadata a.comment-edit-link { color: #222; margin-left: 1em; } #comments .comment-reply-link { font-weight: 600; position: relative; } #comments .comment-reply-link .icon { color: #222; left: -2em; height: 1em; position: absolute; top: 0; width: 1em; } #comments .children { padding-left: 10px !important; } #comments .children .comment-author .avatar { height: 30px; left: -45px; width: 30px; } #comments .bypostauthor > .comment-body > .comment-meta > .comment-author .avatar { border: 1px solid #575757; padding: 2px; } #comments .no-comments, #comments .comment-awaiting-moderation { color: #767676; font-size: 14px; font-size: 0.875rem; font-style: italic; } #comments .comments-pagination { margin: 2em 0 3em; } .comments-area .comment-list .comment .comment-respond { margin-bottom: 30px; } .comments-title { position: relative; margin-bottom: 25px !important; font-size: 22px !important; line-height: 1.5; font-weight: 700; border-bottom: 1px solid #eeeeee; padding-bottom: 10px; margin-top: -8px; } .comments-title::before { content: ''; position: absolute; left: -30px; top: 13px; height: 25px; width: 3px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } /* End Comments list style */ /* Comment form */ .comment-respond { background: #ffffff; padding: 0; clear: both; } .comment-respond .comment-reply-title { font-size: 22px; font-weight: 700; text-transform: capitalize; line-height: 25px; border-bottom: 1px solid #eeeeee; padding-bottom: 10px; margin-bottom: 15px; position: relative; } .comment-respond .comment-reply-title::before { content: ''; height: 25px; width: 3px; left: -30px; position: absolute; top: 13px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .comment-respond .comment-reply-title #cancel-comment-reply-link { font-size: 14px; color: red; display: inline-block; margin-left: 10px; } .comment-respond label { display: block; margin-bottom: 10px; color: var(--blackColor); font-weight: 600; } .comment-respond input[type="date"], .comment-respond input[type="time"], .comment-respond input[type="datetime-local"], .comment-respond input[type="week"], .comment-respond input[type="month"], .comment-respond input[type="text"], .comment-respond input[type="email"], .comment-respond input[type="url"], .comment-respond input[type="password"], .comment-respond input[type="search"], .comment-respond input[type="tel"], .comment-respond input[type="number"], .comment-respond textarea { background-image: none; border: 1px solid #f9f9f9; border-radius: 3px; color: var(--blackColor); font-size: var(--fontSize); background-color: #f9f9f9; padding: 0.625em 15px; width: 100%; height: 45px; font-size: 14px; } .comment-respond textarea { height: auto !important; } .comment-respond .form-submit { text-align: left; } .comment-respond .form-submit input { border: none; color: #ffffff; padding: 20px 30px; display: inline-block; cursor: pointer; outline: 0; border-radius: 0; text-transform: capitalize; -webkit-transition: 0.5s; transition: 0.5s; font-weight: 600; font-size: 16px; font-family: var(--headingFontFamily); } .comment-respond .form-submit input:hover, .comment-respond .form-submit input:focus { color: var(--whiteColor); background-color: var(--blackColor); } .comment-respond input:focus, .comment-respond textarea:focus { outline: 0; } .comment-respond p { line-height: 1; margin-bottom: 0; margin-top: 25px; } .comment-respond .comment-form-cookies-consent label { display: inline-block; margin: 0; line-height: 20px; font-weight: normal; font-size: 13.4px; } .comment-respond p.comment-notes { line-height: 26px; font-size: 14px; margin-top: 5px; } .comment-respond p.comment-form-comment { float: left; width: 100%; } .comment-respond p.comment-form-author { width: 50%; float: left; padding-right: 12px; } .comment-respond p.comment-form-email { width: 50%; float: left; padding-left: 12px; } .comment-respond p.comment-form-url { float: left; width: 100%; } .comment-respond p.comment-form-cookies-consent { width: 100%; float: left; position: relative; padding-left: 20px; } .comment-respond p.comment-form-cookies-consent input { position: absolute; left: 0; top: 3px; } .comment-respond p.form-submit { float: left; width: 100%; } .comment-respond p.logged-in-as { line-height: 26px; font-size: 15px; margin-top: 5px; } .comment-respond p.logged-in-as a { display: inline-block; text-decoration: underline; font-size: 13.5px; } .comment-respond p.logged-in-as a:hover { text-decoration: none; } .parent .comment-respond p.form-submit, .depth-1 .comment-respond p.form-submit { margin-bottom: 30px; } /* End Comment form */ /* Unit test all post style */ .wp-block-image { margin-bottom: 20px; } .wp-block-image figcaption { font-size: 14px; margin-top: 12px; text-align: center; } .wp-block-image figcaption a { text-decoration: underline; display: inline-block; } .wp-block-image figcaption a:hover { text-decoration: none; } .wp-block-button { margin-bottom: 1.5em; } .wp-block-button .wp-block-button__link { font-size: 16px; border-radius: 5px; } .wp-block-button .wp-block-button__link br { display: none; } .wp-block-button .wp-block-button__link:hover { background-color: #222; color: #fff; } .wp-block-cover .wp-block-cover-text { color: #fff !important; } .is-style-outline .wp-block-button__link { background-color: transparent !important; font-size: 16px; border-radius: 5px; } .is-style-outline .wp-block-button__link:hover { background-color: transparent; color: #222 !important; border-color: #222; } pre.wp-block-code { border: 1px solid #eee; padding: 10px 15px; } pre.wp-block-preformatted { background-color: #fafafa; padding: 20px; margin: 20px 0; } .wp-block-pullquote { border-top: 4px solid #555d66; border-bottom: 4px solid #555d66; color: #40464d; border-color: transparent; border-width: 2px; padding: 0; } .wp-block-pullquote blockquote { color: #111; border: none; margin-right: 0; padding-left: 0; } .wp-block-pullquote blockquote p { font-size: 2.25em; font-style: italic; } .wp-block-pullquote blockquote cite { display: inline-block; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif; line-height: 1.6; text-transform: none; color: #767676; font-size: 15px; font-style: normal; } .wp-block-table.is-style-stripes td { border-color: #767676; } .wp-block-verse { font-family: "Poppins", sans-serif !important; font-size: 16px !important; } .wp-block-columns { margin-top: 20px; margin-bottom: 20px; } .wp-block-media-text { margin-top: 30px; margin-bottom: 30px; } .wp-block-media-text .has-large-font-size { font-size: 25px; margin-top: 0 !important; } .page-links { margin-top: 20px; margin-bottom: 20px; clear: both; } .page-links span.page-links-title { font-weight: 500; font-size: 20px; padding-right: 10px; } .page-links .post-page-numbers { width: 35px; height: 35px; border-radius: 25px; background-color: #ffffff; border: 1px solid #eee; font-size: 15px; line-height: 35px; color: #0a0c19; text-align: center; display: inline-block; margin-left: 5px; text-decoration: none !important; } .page-links .post-page-numbers:hover { color: #ffffff; } .page-links .current { color: #ffffff; } .wp-block-archives-list { padding: 0 !important; } .wp-block-archives-list li { list-style: none !important; } .wp-block-archives-list li a:hover { text-decoration: underline; } .wp-block-categories-list { padding: 0 !important; } .wp-block-categories-list li { list-style: none !important; } .wp-block-categories-list li a { text-transform: capitalize; } .wp-block-categories-list li a:hover { text-decoration: underline; } .wp-block-categories-list li span.post-count { padding-left: 8px; float: right; } .wp-block-categories-list li .children li a { position: relative; } .wp-block-categories-list li .children li a::before { content: '-'; position: absolute; left: -13px; top: -2px; } .wp-block-archives-dropdown { margin-bottom: 20px; } .wp-block-archives-dropdown select { height: 45px; border: 1px solid #eee; width: 100%; font-size: 14px; padding: 8px 15px; color: #555; } .wp-block-latest-comments { padding: 0 !important; } .wp-block-latest-comments .wp-block-latest-comments__comment-meta a { font-weight: 600; text-decoration: underline; } .wp-block-latest-comments .wp-block-latest-comments__comment-meta a:hover { text-decoration: none; } .wp-block-latest-posts li a { font-weight: 400; } .wp-block-gallery { padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } .wp-block-gallery .blocks-gallery-item { margin-bottom: 15px !important; } .wp-block-gallery .blocks-gallery-grid { padding: 0 !important; margin-top: 6px !important; margin-bottom: 5px !important; } .wp-block-cover { margin-top: 30px; margin-bottom: 30px; } .wp-block-cover p.wp-block-cover-text { font-weight: bold; margin-bottom: 20px !important; font-size: 30px !important; line-height: 1.5; } .wp-block-cover p.wp-block-cover-text strong { color: #fff; } .wp-block-cover.has-background-dim.alignleft { margin-top: 0; } .wp-block-cover.has-background-dim-60.has-background-dim .wp-block-cover-text a { color: #fff; } .wp-block-file a { text-decoration: underline; font-size: 15px; } .wp-block-file a:hover { text-decoration: none; } .wp-block-file .wp-block-file__button { border-radius: 4px !important; font-size: 14px !important; font-weight: 500; display: table; margin: 10px 0 0; } .wp-block-file .wp-block-file__button:hover { background-color: #000 !important; color: #fff; } .wp-block-quote.is-style-large { border: none; padding-left: 0; margin: 20px 0; } .has-cyan-bluish-gray-background-color.has-cyan-bluish-gray-background-color p { color: #ffffff; } .has-cyan-bluish-gray-background-color.has-cyan-bluish-gray-background-color cite { display: none; } .has-cyan-bluish-gray-background-color.has-cyan-bluish-gray-background-color blockquote { max-width: 80%; background: transparent; } .wp-block-gallery.alignwide { width: 100%; } .wp-caption .wp-caption-text { font-size: 15px; line-height: 20px; margin: 0; text-align: center; padding: 12px 0 0; } .wp-caption .wp-caption-text a { text-decoration: underline; display: inline-block; } .wp-caption .wp-caption-text a:hover { text-decoration: none; } .has-very-light-gray-color.has-very-light-gray-color { color: #fff; } .is-style-squared .wp-block-button__link { border-radius: 0 !important; } /* End Unit test all post style */ /* Post Format: Gallery */ .gallery { margin: 30px -1.1666667% 0; } .gallery-item { display: inline-block; max-width: 33.33%; padding: 0 1.1400652% 2.2801304%; text-align: center; vertical-align: top; width: 100%; } .gallery-columns-1 .gallery-item { max-width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-icon img { margin: 0 auto; } .gallery-caption { display: block; font-size: 14px; font-style: italic; line-height: 1.6153846154; padding-top: 0.5384615385em; } .gallery-columns-6 .gallery-caption, .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption { display: none; } /* End Post Format: Gallery */ /* Post password form style */ .post-password-form label { font-weight: 600; } .post-password-form label input { border: 1px solid #ccc; height: 45px; margin: 0 10px; padding: 5px 15px; } .post-password-form input[type="submit"] { border: 1px solid; color: #fff; height: 45px; padding: 5px 20px; font-weight: 600; cursor: pointer; } .post-password-form input[type="submit"]:hover { background-color: #000; border: 1px solid #000; color: #fff; } /* End Post password form style */ /* Pingback style */ .comments-area .comment-list .trackback .comment-body { margin-left: 0 !important; } .comments-area .comment-list .trackback .comment-body a { text-decoration: underline; } .comments-area .comment-list .trackback .comment-body a:hover { text-decoration: none; } .comments-area .comment-list .pingback .comment-body { margin-left: 0 !important; } /* End Pingback style */ /* Comment navigation */ .comment-navigation .nav-links { overflow: hidden; margin-bottom: 25px; } .comment-navigation .nav-links .nav-previous { float: left; } .comment-navigation .nav-links .nav-previous a { border: 1px solid #eee; padding: 7px 18px; font-size: 14px; text-transform: capitalize; background: #fff; display: block; } .comment-navigation .nav-links .nav-previous a:hover { color: #fff; } .comment-navigation .nav-links .nav-next { float: right; } .comment-navigation .nav-links .nav-next a { border: 1px solid #eee; background: #fff; padding: 7px 18px; font-size: 14px; text-transform: capitalize; display: block; } .comment-navigation .nav-links .nav-next a:hover { color: #fff; } /* End Comment navigation */ /* Post search not found form */ .no-results .alert .page-title { margin: 0; font-size: 20px; } .no-results h1.page-title { font-size: 22px; font-weight: 600; margin-top: -3px; } .search-form { position: relative; } .search-form .search-field { background-color: #ffffff; height: 50px; padding: 6px 15px; border: 1px solid #eeeeee; width: 100%; display: block; outline: 0; -webkit-transition: var(--transition); transition: var(--transition); } .search-form .search-submit { position: absolute; cursor: pointer; top: 0; right: 0; outline: 0; border: none; color: #ffffff; height: 50px; padding: 0 20px; -webkit-transition: var(--transition); transition: var(--transition); text-transform: capitalize; font-weight: 600; font-size: 15px; } .search-form .search-submit:hover { color: #ffffff; background: var(--blackColor); } .search-form label { display: block; } /* End Post search not found form */ /*learn-more-btn*/ .learn-more-btn { display: inline-block; position: relative; color: var(--secondaryColor); font-size: 15px; font-weight: 600; } .learn-more-btn i { margin-left: 2px; position: relative; top: -0.6px; } .learn-more-btn i::before { font-size: 11px; } .learn-more-btn::before { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; opacity: 0; visibility: hidden; -webkit-transition: var(--transition); transition: var(--transition); } .learn-more-btn:hover::before { width: 100%; opacity: 1; visibility: visible; } .archive-description p { color: #ffffff; } .blocks-gallery-caption { margin-bottom: 8px; } .wp-block-group__inner-container { padding: 30px; } .wp-block-archives-list li span.post-count { padding-left: 8px; float: right; } .wp-block-categories-dropdown { margin-bottom: 20px; } .wp-block-categories-dropdown select { height: 45px; border: 1px solid #eee; width: 100%; font-size: 14px; padding: 8px 15px; color: #555; } .wp-block-tag-cloud a { display: inline-block; font-weight: 600; font-size: 12.5px !important; padding: 6px 13px; border: 1px dashed #eeeeee; position: relative; color: #393953 !important; text-decoration: none !important; margin-top: 8px; margin-right: 4px; } .wp-block-tag-cloud a:hover, .wp-block-tag-cloud a:focus { color: #ffffff !important; } .wp-block-search { margin-bottom: 30px; position: relative; } .wp-block-search label { display: block; margin-bottom: 10px; } .wp-block-search .screen-reader-text { display: none; } .wp-block-search .wp-block-search__button { color: #ffffff; } .wp-block-search .wp-block-search__input { background-color: #ffffff; height: 50px; padding: 6px 15px; border: 1px solid #eeeeee; max-width: 100%; display: block; outline: 0; -webkit-transition: var(--transition); transition: var(--transition); } .wp-block-search button { position: absolute; right: 0; outline: 0; bottom: 0; height: 50px; width: 80px; z-index: 1; border: none; border-radius: 30px; color: #ffffff; font-size: 16px; font-weight: 500; font-family: var(--headingFontFamily); } .wp-block-search button:hover { color: #ffffff; } table td, table th { text-align: center; } .single-blog-post .content.post-content-two h3 { margin-bottom: 0; } .single-blog-post .content.post-content-two p { margin-top: 12px; } .post-content-two { padding: 20px; -webkit-box-shadow: 0 0 40px 3px rgba(0, 0, 0, 0.05); box-shadow: 0 0 40px 3px rgba(0, 0, 0, 0.05); } .wp-calendar-nav-prev { position: relative; top: 5px; } .cyard-responsive-nav .cyard-responsive-menu.mean-container .mean-nav ul li a { text-transform: capitalize; } .wpcf7-not-valid-tip { margin-top: 5px; } .wpcf7-list-item { margin: 0 0 0 0; } .blog-details .blog-details-content pre { margin-bottom: 0; } .widget_block .wp-block-group__inner-container { padding: 0; } .widget_block .wp-block-group__inner-container h2 { margin-bottom: 20px; position: relative; font-size: 22px; } .blog-sidebar .wp-block-latest-comments { margin-bottom: 0; } .blog-sidebar .wp-block-latest-comments .wp-block-latest-comments__comment-author { color: #000000; font-weight: 400; font-size: 14px; text-decoration: none; } .blog-sidebar .wp-block-latest-comments .wp-block-latest-comments__comment-link { color: #222222; font-weight: 400; font-size: 14px; text-decoration: none; display: inline !important; line-height: 22px; } .blog-sidebar .wp-block-latest-comments .wp-block-latest-comments__comment:last-child { margin-bottom: 0; } .blog-sidebar .widget_search .wp-block-search__button { width: 100px; font-weight: 400; border-radius: 0; } .blog-sidebar .wp-block-search__label { display: none !important; } .single-footer-widget .social-links { margin-top: 17px; } .single-footer-widget .social-links li { margin-bottom: 0; } .cyard-nav .navbar .navbar-nav .nav-item a { text-transform: capitalize; } .blog-details-content .wp-calendar-nav { margin-bottom: 10px; } .blog-details-content .wp-calendar-table { margin-bottom: 0; } .page-area .comments-area .comment-respond { margin-top: 0; } .blog-details .post-footer .post-tags ul li a { text-transform: capitalize; } .expert-bg .bg-f5f8ff { border-top: 1px solid #e6e6e6; } .blog-sidebar .widget.widget_cyarb_author_info { padding: 0; } .wp-block-search__button-outside.wp-block-search__text-button.wp-block-search { margin-bottom: 0; } .wp-block-search button { border-radius: 0; } .wp-block-search button:hover { background-color: var(--blackColor) !important; -webkit-transition: var(--transition); transition: var(--transition); } .wp-block-search__inside-wrapper { margin-bottom: 15px; } .contact-form .form-control { background-color: #f9f9f9; } .border-bg .bg-f5f8ff { border-top: none; } .footer-area.pd-0 { padding-top: 0; } .copyright-area.pd-0 { margin-top: 0; } .widget_cyarb_logo_info h3 { font-size: 34px; margin-top: -4px; } .footer-area.footer-top-padding { padding-top: 0; } .copyright-area.footer-top-padding { margin-top: 0; } .et-demo-options-toolbar { position: fixed; top: 50%; width: 40px; right: 0; line-height: 60px; border: 1px solid #eee; border-right: 0; border-radius: 5px 0 0 5px; z-index: 99999; background: #fff; text-align: center; -webkit-box-shadow: -3px 0 10px -2px rgba(0, 0, 0, 0.1); box-shadow: -3px 0 10px -2px rgba(0, 0, 0, 0.1); } .et-demo-options-toolbar a { display: block; width: 40px; height: 40px; line-height: 40px; color: #111; } .et-demo-options-toolbar a:focus, .et-demo-options-toolbar a:hover { color: #111 !important; } [class*=hint--] { position: relative; display: inline-block; } [class*=hint--]:before, [class*=hint--]:after { position: absolute; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: hidden; opacity: 0; z-index: 1000000; pointer-events: none; -webkit-transition: .3s ease; transition: .3s ease; -webkit-transition-delay: 0ms; transition-delay: 0ms; } [class*=hint--]:hover:before, [class*=hint--]:hover:after { visibility: visible; opacity: 1; } [class*=hint--]:hover:before, [class*=hint--]:hover:after { -webkit-transition-delay: .1s; transition-delay: .1s; } [class*=hint--]:before { content: ''; position: absolute; background: 0 0; border: 7px solid transparent; z-index: 1000001; } [class*=hint--]:after { background: #000; color: #fff; padding: 8px 10px; font-size: 14px; line-height: 15px; white-space: nowrap; border-radius: 5px; } [class*=hint--][aria-label]:after { content: attr(aria-label); } [class*=hint--][data-hint]:after { content: attr(data-hint); } [aria-label='']:before, [aria-label='']:after, [data-hint='']:before, [data-hint='']:after { display: none !important; } .hint--top-left:before { border-top-color: #000; } .hint--top-right:before { border-top-color: #000; } .hint--top:before { border-top-color: #000; } .hint--bottom-left:before { border-bottom-color: #000; } .hint--bottom-right:before { border-bottom-color: #000; } .hint--bottom:before { border-bottom-color: #000; } .hint--left:before { border-left-color: #000; } .hint--right:before { border-right-color: #000; } .hint--top:before { margin-bottom: -13px; } .hint--top:before, .hint--top:after { bottom: 100%; left: 50%; } .hint--top:before { left: calc(50% - 7px); } .hint--top:after { -webkit-transform: translateX(-50%); transform: translateX(-50%); } .hint--top:hover:before { -webkit-transform: translateY(-8px); transform: translateY(-8px); } .hint--top:hover:after { -webkit-transform: translateX(-50%) translateY(-8px); transform: translateX(-50%) translateY(-8px); } .hint--bottom:before { margin-top: -13px; } .hint--bottom:before, .hint--bottom:after { top: 100%; left: 50%; } .hint--bottom:before { left: calc(50% - 7px); } .hint--bottom:after { -webkit-transform: translateX(-50%); transform: translateX(-50%); } .hint--bottom:hover:before { -webkit-transform: translateY(8px); transform: translateY(8px); } .hint--bottom:hover:after { -webkit-transform: translateX(-50%) translateY(8px); transform: translateX(-50%) translateY(8px); } .hint--right:before { margin-left: -13px; margin-bottom: -7px; } .hint--right:after { margin-bottom: -15px; } .hint--right:before, .hint--right:after { left: 100%; bottom: 50%; } .hint--right:hover:before { -webkit-transform: translateX(8px); transform: translateX(8px); } .hint--right:hover:after { -webkit-transform: translateX(8px); transform: translateX(8px); } .hint--left:before { margin-right: -13px; margin-bottom: -7px; } .hint--left:after { margin-bottom: -15px; } .hint--left:before, .hint--left:after { right: 100%; bottom: 50%; } .hint--left:hover:before { -webkit-transform: translateX(-8px); transform: translateX(-8px); } .hint--left:hover:after { -webkit-transform: translateX(-8px); transform: translateX(-8px); } .hint--top-left:before { margin-bottom: -13px; } .hint--top-left:before, .hint--top-left:after { bottom: 100%; left: 50%; } .hint--top-left:before { left: calc(50% - 7px); } .hint--top-left:after { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .hint--top-left:after { margin-left: 14px; } .hint--top-left:hover:before { -webkit-transform: translateY(-8px); transform: translateY(-8px); } .hint--top-left:hover:after { -webkit-transform: translateX(-100%) translateY(-8px); transform: translateX(-100%) translateY(-8px); } .hint--top-right:before { margin-bottom: -13px; } .hint--top-right:before, .hint--top-right:after { bottom: 100%; left: 50%; } .hint--top-right:before { left: calc(50% - 7px); } .hint--top-right:after { -webkit-transform: translateX(0); transform: translateX(0); } .hint--top-right:after { margin-left: -14px; } .hint--top-right:hover:before { -webkit-transform: translateY(-8px); transform: translateY(-8px); } .hint--top-right:hover:after { -webkit-transform: translateY(-8px); transform: translateY(-8px); } .hint--bottom-left:before { margin-top: -13px; } .hint--bottom-left:before, .hint--bottom-left:after { top: 100%; left: 50%; } .hint--bottom-left:before { left: calc(50% - 7px); } .hint--bottom-left:after { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .hint--bottom-left:after { margin-left: 14px; } .hint--bottom-left:hover:before { -webkit-transform: translateY(8px); transform: translateY(8px); } .hint--bottom-left:hover:after { -webkit-transform: translateX(-100%) translateY(8px); transform: translateX(-100%) translateY(8px); } .hint--bottom-right:before { margin-top: -13px; } .hint--bottom-right:before, .hint--bottom-right:after { top: 100%; left: 50%; } .hint--bottom-right:before { left: calc(50% - 7px); } .hint--bottom-right:after { -webkit-transform: translateX(0); transform: translateX(0); } .hint--bottom-right:after { margin-left: -14px; } .hint--bottom-right:hover:before { -webkit-transform: translateY(8px); transform: translateY(8px); } .hint--bottom-right:hover:after { -webkit-transform: translateY(8px); transform: translateY(8px); } [class*=hint--]:after { -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); } .hint--white:after { color: #111; background-color: #fff; text-shadow: 0 -1px 0px #bfbfbf; } .hint--white.hint--top-left:before { border-top-color: #fff; } .hint--white.hint--top-right:before { border-top-color: #fff; } .hint--white.hint--top:before { border-top-color: #fff; } .hint--white.hint--bottom-left:before { border-bottom-color: #fff; } .hint--white.hint--bottom-right:before { border-bottom-color: #fff; } .hint--white.hint--bottom:before { border-bottom-color: #fff; } .hint--white.hint--left:before { border-left-color: #fff; } .hint--white.hint--right:before { border-right-color: #fff; } .hint--rounded:after { border-radius: 4px; } .hint--no-animate:before, .hint--no-animate:after { -webkit-transition-duration: 0ms; transition-duration: 0ms; } .hint--bounce:before, .hint--bounce:after { -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24), -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); } /*================================================ About Area CSS =================================================*/ .about-area2 { z-index: 1; position: relative; } .about-area2 .shape3 { bottom: 15%; left: 4%; } .about-area2 .shape4 { bottom: auto; left: auto; right: 3%; top: 36%; } .about-area2 .shape2 { bottom: 8%; left: auto; top: auto; right: 5%; } .about-image2 { border-radius: 20px; margin-right: 10px; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; } .about-image2 img { display: none; border-radius: 20px; } .about-content2 { padding-left: 10px; padding-top: 100px; padding-bottom: 100px; } .about-content2 h2 { margin-bottom: 15px; font-size: 36px; } .about-content2 .features-list { padding-left: 0; list-style-type: none; margin-top: 30px; margin-bottom: 0; } .about-content2 .features-list li { position: relative; margin-bottom: 20px; border-radius: 20px; padding: 30px 30px 30px 140px; background-color: var(--whiteColor); -webkit-box-shadow: 5px 10px 30px #f6f4f4; box-shadow: 5px 10px 30px #f6f4f4; } .about-content2 .features-list li img { -webkit-transition: var(--transition); transition: var(--transition); -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; left: 30px; top: 50%; } .about-content2 .features-list li h3 { margin-bottom: 10px; font-size: 22px; } .about-content2 .features-list li:last-child { margin-bottom: 0; } .white-header.hide-wp-nav { margin-top: 32px; } .white-header.hide-wp-nav .is-sticky { margin-top: 32px; } .white-header .navbar-brand h2 { color: #fff; } .hide-wp-nav .navbar-area.cyard-new-navbar-area.is-sticky { margin-top: 32px; } /*body-with-black-color*/ .body-with-black-color { background-color: #1C0531; } .body-with-black-color .section-title h2 { color: var(--whiteColor); } .body-with-black-color .section-title p { color: #ABA8AE; } .body-with-black-color .section-title-wrap .wrap-title h2 { color: var(--whiteColor); } .body-with-black-color .safer-world-card { border: 1px solid #241036; } .body-with-black-color .safer-world-card .safer-world-content h3 a { color: var(--whiteColor); } .body-with-black-color .safer-world-card .safer-world-content p { color: #ABA8AE; } .body-with-black-color .safer-world-card:hover { background: #241036; } .body-with-black-color .safer-world-slides .owl-item.active.center .safer-world-card { background: #241036; } .body-with-black-color .approach-style-list-tabs .nav .nav-item .nav-link { padding: 30px 45px; } .body-with-black-color .approach-style-list-tabs .nav .nav-item .nav-link h3 { color: var(--whiteColor); } .body-with-black-color .approach-style-list-tabs .nav .nav-item .nav-link p { color: #ABA8AE; } .body-with-black-color .approach-style-list-tabs .nav .nav-item .nav-link:hover, .body-with-black-color .approach-style-list-tabs .nav .nav-item .nav-link.active { background-color: #241036; } .body-with-black-color .cyber-defenses-list-tabs .nav .nav-item .nav-link { background: transparent; border: 1px solid #603364; color: var(--whiteColor); } .body-with-black-color .cyber-defenses-content h3 { color: var(--whiteColor); } .body-with-black-color .cyber-defenses-content p { color: #ABA8AE; } .body-with-black-color .cyber-defenses-content .cyber-list li { color: var(--whiteColor); } .body-with-black-color .get-privacy-card { background-color: transparent; border: 1px solid #241036; padding: 30px; } .body-with-black-color .get-privacy-card .get-privacy-content h3 a { color: var(--whiteColor); } .body-with-black-color .get-privacy-card .get-privacy-content p { color: #ABA8AE; } .body-with-black-color .get-privacy-card:hover { background-color: #241036; } .body-with-black-color .keep-world-area { background-color: #1C0531; } /*default-btn-two*/ .default-btn-two { border: 1px solid var(--mainColor); z-index: 1; overflow: hidden; position: relative; padding: 15px 30px; border-radius: 5px; display: inline-block; color: var(--whiteColor); -webkit-transition: var(--transition); transition: var(--transition); background: var(--primaryGradientColor); font-size: 16px; font-weight: 500; font-family: var(--headingFontFamily); } .default-btn-two::before { top: 0; left: 0; height: 0; content: ""; z-index: -1; width: 100%; position: absolute; -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; background: var(--primaryGradientColorTwo); border-radius: 5px; } .default-btn-two:hover { color: var(--whiteColor); background: var(--primaryGradientColor); } .default-btn-two:hover::before { height: 100%; } /*optional-btn*/ .optional-btn { z-index: 1; overflow: hidden; position: relative; padding: 15px 30px; border-radius: 5px; display: inline-block; color: var(--whiteColor); -webkit-transition: var(--transition); transition: var(--transition); border: 1px solid #603364; font-size: 16px; font-weight: 500; font-family: var(--headingFontFamily); } .optional-btn::before { top: 0; left: 0; height: 0; content: ""; z-index: -1; width: 100%; position: absolute; -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; background: var(--primaryGradientColorTwo); border-radius: 5px; } .optional-btn:hover { color: var(--whiteColor); } .optional-btn:hover::before { height: 100%; } /*================================================ Section Title Wrap CSS =================================================*/ .section-title-wrap { margin-bottom: 55px; } .section-title-wrap .wrap-title h2 { font-size: 50px; margin-bottom: 0; line-height: 1.4; } .section-title-wrap .wrap-btn { text-align: end; } /*================================================ New Main Banner Slides Area CSS =================================================*/ .new-main-banner-slides-item { background-position: center center; background-size: cover; background-repeat: no-repeat; position: relative; z-index: 1; padding-top: 250px; padding-bottom: 250px; } .new-main-banner-slides-item .container-fluid { padding-left: 30px; padding-right: 30px; } .new-main-banner-slides-item::before { position: absolute; content: ""; height: 100%; width: 100%; background: #1C0531; left: 0; right: 0; top: 0; opacity: .77; z-index: -1; } .new-main-banner-slides-content { max-width: 830px; } .new-main-banner-slides-content .sub-title { font-weight: bold; background: var(--primaryGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; margin-bottom: 18px; } .new-main-banner-slides-content h1 { font-size: 95px; color: var(--whiteColor); margin-bottom: 12px; } .new-main-banner-slides-content p { color: #C5C3C8; margin-bottom: 0; } .new-main-banner-slides-content .banner-btn-box { padding: 0; margin-top: 35px; margin-bottom: 0; } .new-main-banner-slides-content .banner-btn-box li { list-style-type: none; display: inline-block; margin-right: 25px; } .new-main-banner-slides-content .banner-btn-box li:last-child { margin-right: 0; } .thumbs-wrap { position: relative; z-index: 1; } .thumbs-wrap .owl-thumbs { position: absolute; bottom: 400px; right: 50px; } .thumbs-wrap .owl-thumbs .owl-thumb-item { -webkit-transition: var(--transition); transition: var(--transition); margin-bottom: 30px; } .thumbs-wrap .owl-thumbs .owl-thumb-item:last-child { margin-bottom: 0; } .thumbs-wrap .owl-thumbs .owl-thumb-item span { font-weight: 500; font-size: 18px; color: var(--whiteColor); -webkit-transition: var(--transition); transition: var(--transition); cursor: pointer; position: relative; display: inline-block; font-family: var(--headingFontFamily); padding-bottom: 10px; position: relative; } .thumbs-wrap .owl-thumbs .owl-thumb-item span::before { position: absolute; content: ""; width: 0%; height: 2px; background: var(--primaryGradientColor); bottom: 0; left: 0; opacity: 0; -webkit-transition: var(--transition); transition: var(--transition); } .thumbs-wrap .owl-thumbs .owl-thumb-item.active span, .thumbs-wrap .owl-thumbs .owl-thumb-item:hover span { color: var(--mainColor); } .thumbs-wrap .owl-thumbs .owl-thumb-item.active span::before, .thumbs-wrap .owl-thumbs .owl-thumb-item:hover span::before { width: 100%; opacity: 1; } /*================================================ Safer World Area CSS =================================================*/ .safer-world-area { overflow: hidden; position: relative; z-index: 1; } .safer-world-area .container-fluid { padding-left: 0; padding-right: 0; } .safer-world-card { margin-bottom: 25px; padding: 30px; border-radius: 10px; -webkit-transition: var(--transition); transition: var(--transition); border: 1px solid #FFF3F8; -webkit-transform: scale(0.9); transform: scale(0.9); } .safer-world-card .safer-world-image { overflow: hidden; border-radius: 10px; } .safer-world-card .safer-world-image a img { display: inline-block; border-radius: 10px; -webkit-transition: var(--transition); transition: var(--transition); } .safer-world-card .safer-world-content { margin-top: 30px; } .safer-world-card .safer-world-content h3 { font-size: 24px; margin-bottom: 15px; } .safer-world-card .safer-world-content h3 a { color: var(--blackColor); } .safer-world-card .safer-world-content p { margin-bottom: 18px; } .safer-world-card .safer-world-content .safer-world-btn { font-weight: bold; background: var(--mainColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-transition: var(--transition); transition: var(--transition); } .safer-world-card:hover { background: #FFF3F8; } .safer-world-card:hover .safer-world-image a img { -webkit-transform: scale(1.1); transform: scale(1.1); } .safer-world-card:hover .safer-world-content .safer-world-btn { letter-spacing: 1px; } .safer-world-slides.owl-theme .owl-nav { margin-top: 0; } .safer-world-slides.owl-theme .owl-nav [class*=owl-] { margin: 0 10px; padding: 0; background: linear-gradient(129.37deg, #603364 8.09%, #7F3668 100%); color: var(--whiteColor); border-radius: 50%; -webkit-transition: var(--transition); transition: var(--transition); display: inline-block; width: 55px; height: 55px; line-height: 55px; text-align: center; font-size: 20px; position: absolute; left: 50px; top: 45%; -webkit-transform: translateY(-45%); transform: translateY(-45%); } .safer-world-slides.owl-theme .owl-nav [class*=owl-].owl-next { right: 50px; left: auto; } .safer-world-slides.owl-theme .owl-nav [class*=owl-]:hover { color: var(--whiteColor); background: var(--primaryGradientColor); } .safer-world-slides .owl-item.active.center .safer-world-card { background: #FFF3F8; -webkit-transform: scale(1); transform: scale(1); } .safer-world-shape { position: absolute; left: -150px; top: -150px; z-index: -1; } .safer-world-shape-2 { position: absolute; right: -150px; top: -150px; z-index: -1; } /*================================================ Funfacts Style Two Area CSS =================================================*/ .funfacts-style-two-area { background: var(--primaryGradientColor); } .single-funfacts-card { margin-bottom: 25px; position: relative; padding-left: 105px; -webkit-transition: var(--transition); transition: var(--transition); } .single-funfacts-card .icon { left: 0; top: 50%; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .single-funfacts-card .icon i { display: inline-block; height: 80px; width: 80px; line-height: 80px; background: #ef6a77; color: var(--whiteColor); font-size: 40px; border-radius: 50px; text-align: center; } .single-funfacts-card h3 { line-height: 1; font-size: 55px; margin-bottom: 10px; color: var(--whiteColor); } .single-funfacts-card .sign { position: relative; top: 1.5px; left: 5px; } .single-funfacts-card p { color: var(--whiteColor); font-size: 15px; font-weight: 500; font-family: var(--headingFontFamily); } .single-funfacts-card:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); } .inner-funfacts-box-style { padding-top: 100px; padding-bottom: 75px; padding-left: 30px; padding-right: 30px; background: var(--primaryGradientColor); border-radius: 30px; } /*================================================ Approach Style Two Area CSS =================================================*/ .approach-style-two-area { position: relative; z-index: 1; overflow: hidden; } .approach-style-list-tabs .nav { padding: 0; list-style-type: none; display: block; border: none; margin-bottom: 0; } .approach-style-list-tabs .nav .nav-item { display: inline-block; margin-bottom: 20px; } .approach-style-list-tabs .nav .nav-item:last-child { margin-bottom: 0; } .approach-style-list-tabs .nav .nav-item .nav-link { border: none; padding: 25px; position: relative; border-radius: 5px; } .approach-style-list-tabs .nav .nav-item .nav-link::before { content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 0; background: var(--primaryGradientColor); -webkit-transition: var(--transition); transition: var(--transition); border-radius: 50px; } .approach-style-list-tabs .nav .nav-item .nav-link h3 { font-size: 24px; margin-bottom: 18px; } .approach-style-list-tabs .nav .nav-item .nav-link p { margin-bottom: 0; } .approach-style-list-tabs .nav .nav-item .nav-link:hover, .approach-style-list-tabs .nav .nav-item .nav-link.active { background-color: #FAF4FF; } .approach-style-list-tabs .nav .nav-item .nav-link:hover::before, .approach-style-list-tabs .nav .nav-item .nav-link.active::before { height: 100%; } .approach-style-tabs-image img { border-radius: 10px; } .approach-style-tabs-content { padding-left: 35px; } .approach-style-tabs-content .number { font-size: 100px; margin-bottom: 25px; font-weight: bold; background: -webkit-gradient(linear, left top, right top, from(#603364), color-stop(#683466), color-stop(#703567), color-stop(#773568), to(#7f3668)); background: linear-gradient(to right, #603364, #683466, #703567, #773568, #7f3668); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-transition: var(--transition); transition: var(--transition); line-height: 1; opacity: 0.5; font-family: var(--headingFontFamily); font-style: italic; } .approach-style-tabs-content h4 { font-size: 35px; margin-bottom: 18px; background: var(--primaryGradientColorTwo); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .approach-style-tabs-content p { margin-bottom: 20px; } .approach-style-tabs-content .approach-btn { font-weight: bold; background: var(--primaryGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-transition: var(--transition); transition: var(--transition); } .approach-style-tabs-content .approach-btn:hover { letter-spacing: 1px; } .approach-style-shape { position: absolute; right: 0; top: 0; z-index: -1; } /*================================================ Keep World Area CSS =================================================*/ .keep-world-area { background-color: #221638; position: relative; overflow: hidden; z-index: 1; } .keep-world-area .section-title { text-align: center; max-width: 750px; margin-left: auto; margin-right: auto; margin-bottom: 55px; } .keep-world-area .section-title h2 { color: var(--whiteColor); } .keep-world-area.with-transparent { background-color: transparent; } .keep-world-card { margin-bottom: 25px; text-align: center; position: relative; } .keep-world-card h3 { line-height: 1; font-size: 50px; margin-bottom: 5px; color: var(--whiteColor); } .keep-world-card .sign { position: relative; top: 2px; left: 5px; font-size: 45px; } .keep-world-card p { color: var(--whiteColor); font-size: 15px; font-weight: 500; font-family: var(--headingFontFamily); } .keep-world-card .keep-world-shape { position: absolute; right: -40px; top: -140px; } .keep-world-card .keep-world-shape-2 { position: absolute; left: -40px; bottom: -140px; } .keep-world-rectangle-shape { position: absolute; left: 0; right: 0; bottom: -100px; z-index: -1; opacity: 50%; } .keep-world-rectangle-shape img { width: 100%; } .keep-world-circle-dot { position: absolute; top: 25%; left: 20%; -webkit-transform: translateY(-25%) translateX(-20%); transform: translateY(-25%) translateX(-20%); -webkit-animation: animationFramesOne 10s infinite linear; animation: animationFramesOne 10s infinite linear; } .keep-world-circle-dot-2 { position: absolute; top: 25%; right: 20%; -webkit-transform: translateY(-25%) translateX(-20%); transform: translateY(-25%) translateX(-20%); -webkit-animation: animationFramesOne 20s infinite linear; animation: animationFramesOne 20s infinite linear; } /*================================================ Testimonials Area CSS =================================================*/ .single-testimonials-card { padding: 65px 100px; background: linear-gradient(129.37deg, #603364 8.09%, #7F3668 100%); border-radius: 30px; position: relative; } .single-testimonials-card p { font-size: 25px; color: var(--whiteColor); } .single-testimonials-card .client-info { margin-top: 30px; } .single-testimonials-card .client-info img { width: 65px; height: 65px; border-radius: 50%; } .single-testimonials-card .client-info .title { margin-left: 20px; } .single-testimonials-card .client-info .title h3 { margin-bottom: 15px; font-size: 18px; color: var(--mainColor); font-weight: 600; } .single-testimonials-card .client-info .title h3 span { color: var(--whiteColor); font-size: 15px; font-weight: normal; } .single-testimonials-card .client-info .title .rating { font-size: 16px; color: #eba400; } .single-testimonials-card .quote-shape { position: absolute; right: 65px; bottom: 65px; } .testimonials-slides.owl-theme .owl-dots { margin-top: 0 !important; position: absolute; left: 0; right: 0; bottom: 55px; } .testimonials-slides.owl-theme .owl-dots .owl-dot span { width: 15px; height: 15px; margin: 0 8px; border-radius: 50%; border: 1px solid #aaaaaa; -webkit-transition: var(--transition); transition: var(--transition); background-color: var(--whiteColor); } .testimonials-slides.owl-theme .owl-dots .owl-dot:hover span, .testimonials-slides.owl-theme .owl-dots .owl-dot.active span { background-color: var(--mainColor); border-color: var(--mainColor); } /*================================================ Team Style Two Area CSS =================================================*/ .single-team-card { margin-bottom: 25px; -webkit-transition: var(--transition); transition: var(--transition); } .single-team-card .team-image { position: relative; text-align: center; } .single-team-card .team-image img { border-radius: 15px; } .single-team-card .team-image .social-links { position: absolute; left: 0; right: 0; bottom: 0; padding-left: 0; list-style-type: none; opacity: 0; -webkit-transition: var(--transition); transition: var(--transition); margin-top: 0; margin-bottom: 0; } .single-team-card .team-image .social-links li { display: inline-block; margin-right: 2px; } .single-team-card .team-image .social-links li a { width: 34px; height: 34px; display: block; border-radius: 50%; text-align: center; position: relative; color: var(--whiteColor); background-color: #7E7E7E; } .single-team-card .team-image .social-links li a i { left: 0; right: 0; top: 50%; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .single-team-card .team-image .social-links li a:hover { background-color: var(--mainColor); color: var(--whiteColor); } .single-team-card .content { margin-top: 25px; position: relative; padding-right: 70px; } .single-team-card .content h3 { font-size: 22px; margin-bottom: 0; } .single-team-card .content span { color: #6F6B73; display: inline-block; margin-top: 15px; } .single-team-card .content .icon { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .single-team-card .content .icon i { display: inline-block; height: 55px; width: 55px; line-height: 55px; background: #E6DFE7; color: var(--blackColor); text-align: center; border-radius: 50px; font-size: 20px; font-weight: bold; -webkit-transition: var(--transition); transition: var(--transition); } .single-team-card:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); } .single-team-card:hover .team-image { position: relative; text-align: center; } .single-team-card:hover .team-image img { border-radius: 15px; } .single-team-card:hover .team-image .social-links { bottom: 30px; opacity: 1; } .single-team-card:hover .content .icon i { background: var(--mainColor); color: var(--whiteColor); } /*================================================ How We Work Area CSS =================================================*/ .how-we-work-inner-box { background: var(--primaryGradientColorTwo); padding: 100px 50px 0; border-radius: 30px; overflow: hidden; } .how-we-work-inner-box .section-title h2 { color: var(--whiteColor); } .how-we-work-inner-box .how-we-work-video { text-align: center; position: relative; } .how-we-work-inner-box .how-we-work-video .video-btn { z-index: 1; width: 100px; height: 100px; font-size: 40px; position: absolute; left: 0; right: 0; margin: auto; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; border-radius: 50%; display: inline-block; color: var(--whiteColor); background-color: var(--mainColor); -webkit-transition: var(--transition); transition: var(--transition); } .how-we-work-inner-box .how-we-work-video .video-btn i { left: 0; right: 0; top: 50%; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin: auto; } .how-we-work-inner-box .how-we-work-video .video-btn::after, .how-we-work-inner-box .how-we-work-video .video-btn::before { content: ''; display: block; position: absolute; top: 0; right: 0; z-index: -1; bottom: 0; left: 0; border-radius: 50%; border: 1px solid var(--mainColor); } .how-we-work-inner-box .how-we-work-video .video-btn::before { -webkit-animation: ripple 2s linear infinite; animation: ripple 2s linear infinite; } .how-we-work-inner-box .how-we-work-video .video-btn::after { -webkit-animation: ripple 2s linear 1s infinite; animation: ripple 2s linear 1s infinite; } .how-we-work-inner-box .how-we-work-video .video-btn:hover { background-color: var(--mainColor); color: var(--whiteColor); } .how-we-work-inner-box .how-we-work-video video.background-video { max-width: 1050px; margin: auto; border-radius: 30px 30px; margin-bottom: -45px; } /*================================================ Pricing Style Two Area CSS =================================================*/ .single-pricing-card { -webkit-box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.05); box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.05); background-color: var(--whiteColor); margin-bottom: 25px; border-radius: 7px; position: relative; overflow: hidden; padding: 30px; -webkit-transition: var(--transition); transition: var(--transition); border: 1px solid var(--whiteColor); } .single-pricing-card .pricing-header h3 { margin-bottom: 8px; font-size: 22px; } .single-pricing-card .price { margin-top: 30px; } .single-pricing-card .price h4 { margin-bottom: 10px; font-size: 36px; line-height: 1; } .single-pricing-card .price h4 span { color: var(--blackColor); font-size: 15px; font-weight: normal; } .single-pricing-card .link-btn { width: 100%; display: block; margin-top: 25px; border-radius: 5px; padding: 15px 30px; text-align: center; color: var(--whiteColor); background: var(--primaryGradientColor); -webkit-box-shadow: 0 7px 18px 0 rgba(107, 124, 147, 0.25); box-shadow: 0 7px 18px 0 rgba(107, 124, 147, 0.25); font-size: 16px; font-weight: 600; font-family: var(--headingFontFamily); } .single-pricing-card .link-btn:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 30px 50px rgba(107, 124, 147, 0.15); box-shadow: 0 30px 50px rgba(107, 124, 147, 0.15); } .single-pricing-card .link-btn.blue-gradient { background: var(--primaryGradientColorThree); } .single-pricing-card .features-list { margin-top: 35px; } .single-pricing-card .features-list h5 { font-size: var(--fontSize); letter-spacing: 1.5px; margin-bottom: 25px; } .single-pricing-card .features-list ul { padding-left: 0; margin-bottom: 0; list-style-type: none; } .single-pricing-card .features-list ul li { color: var(--secondaryColor); margin-bottom: 14px; padding-left: 20px; position: relative; } .single-pricing-card .features-list ul li i { position: absolute; color: #0568FD; font-size: 12px; top: 3.5px; left: 0; } .single-pricing-card .features-list ul li i.lni-close { color: red; } .single-pricing-card .features-list ul li:last-child { margin-bottom: 0; } .single-pricing-card .ribbon { position: absolute; top: 20px; right: 20px; } .single-pricing-card .ribbon span { background: var(--primaryGradientColorTwo); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--headingFontFamily); font-weight: 600; } .single-pricing-card:hover { border: 1px solid var(--mainColor); -webkit-transform: translateY(-5px); transform: translateY(-5px); } /*================================================ CTA Style Two Area CSS =================================================*/ .cta-style-two-area { background: var(--primaryGradientColor); } .cta-inner-box-content { text-align: center; position: relative; z-index: 1; } .cta-inner-box-content h2 { font-size: 50px; max-width: 730px; color: var(--whiteColor); margin-left: auto; margin-right: auto; margin-bottom: 35px; line-height: 1.4; } .cta-inner-box-content .default-btn-two { background: -webkit-gradient(linear, left top, right top, from(#FC884E), to(#F34178)); background: linear-gradient(90deg, #FC884E 0%, #F34178 100%); } .cta-inner-box-content .shape9 { max-width: 100px; } .cta-inner-box-content .shape10 { max-width: 150px; } /*================================================ Get Privacy Area CSS =================================================*/ .get-privacy-area { overflow: hidden; } .get-privacy-area .container-fluid { overflow: hidden; left: calc((100% - 1320px)/2); position: relative; } .get-privacy-area .container-fluid .get-privacy-slides.owl-theme .owl-nav { margin-top: 0; } .get-privacy-area .container-fluid .get-privacy-slides.owl-theme .owl-nav [class*=owl-] { left: -20px; top: 40%; -webkit-transform: translateY(-40%); transform: translateY(-40%); } .get-privacy-area .container-fluid .get-privacy-slides.owl-theme .owl-nav [class*=owl-].owl-next { right: 22%; -webkit-transform: translateX(-22%); transform: translateX(-22%); left: auto; } .get-privacy-card { margin-bottom: 25px; padding: 25px; border-radius: 0 15px 15px 15px; -webkit-transition: var(--transition); transition: var(--transition); background-color: #F3F3F3; } .get-privacy-card .get-privacy-image { overflow: hidden; border-radius: 0 15px 15px 15px; } .get-privacy-card .get-privacy-image a img { display: inline-block; border-radius: 0 15px 15px 15px; -webkit-transition: var(--transition); transition: var(--transition); } .get-privacy-card .get-privacy-content { margin-top: 30px; } .get-privacy-card .get-privacy-content h3 { font-size: 20px; margin-bottom: 15px; line-height: 1.4; } .get-privacy-card .get-privacy-content h3 a { color: var(--blackColor); } .get-privacy-card:hover { background: #FFF3F8; } .get-privacy-card:hover .get-privacy-image a img { -webkit-transform: scale(1.1); transform: scale(1.1); } .get-privacy-card:hover .get-privacy-content h3 a { color: var(--mainColor); } .get-privacy-slides.owl-theme .owl-nav { margin-top: 0; } .get-privacy-slides.owl-theme .owl-nav [class*=owl-] { margin: 0 10px; padding: 0; background: linear-gradient(129.37deg, #603364 8.09%, #7F3668 100%); color: var(--whiteColor); border-radius: 50%; -webkit-transition: var(--transition); transition: var(--transition); display: inline-block; width: 45px; height: 45px; line-height: 45px; text-align: center; font-size: 16px; position: absolute; left: -50px; top: 40%; -webkit-transform: translateY(-40%); transform: translateY(-40%); } .get-privacy-slides.owl-theme .owl-nav [class*=owl-] i { position: relative; left: -2px; } .get-privacy-slides.owl-theme .owl-nav [class*=owl-].owl-next { right: -50px; left: auto; } .get-privacy-slides.owl-theme .owl-nav [class*=owl-].owl-next i { position: relative; right: -2px; left: auto; } .get-privacy-slides.owl-theme .owl-nav [class*=owl-]:hover { color: var(--whiteColor); background: var(--primaryGradientColor); } /*================================================ Partner Style Two Area CSS =================================================*/ .partner-slides .partner-item-card { text-align: center; overflow: hidden; } .partner-slides .partner-item-card img { -webkit-transition: var(--transition); transition: var(--transition); } .partner-slides .partner-item-card:hover img { -webkit-transform: scale(0.9); transform: scale(0.9); } /*================================================ New Main Banner Wrap Slides Area CSS =================================================*/ .new-main-banner-wrap-slides-item { background-image: url(../../assets/img/new-main-banner/new-banner-4.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; position: relative; z-index: 1; padding-top: 230px; padding-bottom: 290px; } .new-main-banner-wrap-slides-item::before { position: absolute; content: ""; height: 100%; width: 100%; background: #1C0531; left: 0; right: 0; top: 0; opacity: 0.5; z-index: -1; } .new-main-banner-wrap-slides-content { max-width: 855px; margin: auto; text-align: center; } .new-main-banner-wrap-slides-content h1 { font-size: 80px; color: var(--whiteColor); margin-bottom: 20px; } .new-main-banner-wrap-slides-content p { color: #C5C3C8; max-width: 665px; margin: auto; } .new-main-banner-wrap-slides-content .banner-btn-box { padding: 0; margin-top: 35px; margin-bottom: 0; } .new-main-banner-wrap-slides-content .banner-btn-box li { list-style-type: none; display: inline-block; margin-right: 25px; } .new-main-banner-wrap-slides-content .banner-btn-box li:last-child { margin-right: 0; } .new-main-banner-wrap-slides-content .banner-btn-box li .optional-btn { border: 1px solid #00B0EA; } .new-main-banner-wrap-slides-content .banner-btn-box li .optional-btn::before { background: var(--primaryGradientColorThree); } .new-main-home-wrap-slides.owl-theme .owl-nav { margin-top: 0; } .new-main-home-wrap-slides.owl-theme .owl-nav [class*=owl-] { margin: 0 10px; padding: 0; background: linear-gradient(129.37deg, #603364 8.09%, #7F3668 100%); color: var(--whiteColor); border-radius: 50%; -webkit-transition: var(--transition); transition: var(--transition); display: inline-block; width: 55px; height: 55px; line-height: 55px; text-align: center; font-size: 20px; position: absolute; left: 65px; top: 45%; -webkit-transform: translateY(-45%); transform: translateY(-45%); } .new-main-home-wrap-slides.owl-theme .owl-nav [class*=owl-].owl-next { right: 65px; left: auto; } .new-main-home-wrap-slides.owl-theme .owl-nav [class*=owl-]:hover { color: var(--whiteColor); background: var(--primaryGradientColor); } /*================================================ Cyard Features Area CSS =================================================*/ .cyard-features-area { position: relative; z-index: 1; margin-top: -100px; } .single-cyard-features-card { margin-bottom: 25px; background: var(--primaryGradientColorThree); border-radius: 20px; overflow: hidden; padding: 30px 30px 30px 135px; position: relative; z-index: 1; -webkit-transition: var(--transition); transition: var(--transition); } .single-cyard-features-card::before { content: ""; position: absolute; left: 0; top: 0; width: 0%; height: 0%; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; background: var(--primaryGradientColor); z-index: -1; opacity: 0; visibility: hidden; border-radius: 50%; -webkit-transform: scale(1.5); transform: scale(1.5); } .single-cyard-features-card .icon { position: absolute; top: 30px; left: 30px; } .single-cyard-features-card .icon i { display: inline-block; height: 80px; width: 80px; line-height: 80px; background: rgba(255, 255, 255, 0.3); color: var(--whiteColor); font-size: 40px; border-radius: 50px; text-align: center; -webkit-transition: var(--transition); transition: var(--transition); } .single-cyard-features-card h3 { margin-bottom: 15px; font-size: 24px; } .single-cyard-features-card h3 a { color: var(--whiteColor); } .single-cyard-features-card p { color: var(--whiteColor); } .single-cyard-features-card .features-btn { color: var(--whiteColor); font-weight: 500; font-size: 15px; font-family: var(--headingFontFamily); letter-spacing: 1px; } .single-cyard-features-card .features-btn i { position: relative; top: 1px; } .single-cyard-features-card:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); } .single-cyard-features-card:hover::before { width: 100%; height: 100%; opacity: 1; visibility: visible; } .single-cyard-features-card.icon-pad-none { padding: 30px 30px 30px 30px; } /*================================================ Cyber Defenses Area CSS =================================================*/ .cyber-defenses-area { position: relative; z-index: 1; overflow: hidden; } .cyber-defenses-list-tabs .nav { padding: 0; list-style-type: none; display: block; border: none; margin-bottom: 50px; text-align: center; } .cyber-defenses-list-tabs .nav .nav-item { display: inline-block; margin-right: 20px; } .cyber-defenses-list-tabs .nav .nav-item:last-child { margin-right: 0; } .cyber-defenses-list-tabs .nav .nav-item .nav-link { display: inline-block; background: var(--whiteColor); border: 1px solid #EEEEEE; padding: 15px 30px; border-radius: 5px; position: relative; z-index: 1; color: var(--secondaryColor); font-weight: 500; font-family: var(--headingFontFamily); font-size: 15px; } .cyber-defenses-list-tabs .nav .nav-item .nav-link::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 0; background: linear-gradient(129.37deg, #603364 8.09%, #7F3668 100%); -webkit-transition: var(--transition); transition: var(--transition); border-radius: 5px; z-index: -1; } .cyber-defenses-list-tabs .nav .nav-item .nav-link:hover, .cyber-defenses-list-tabs .nav .nav-item .nav-link.active { color: var(--whiteColor); } .cyber-defenses-list-tabs .nav .nav-item .nav-link:hover::before, .cyber-defenses-list-tabs .nav .nav-item .nav-link.active::before { height: 100%; } .cyber-defenses-content { max-width: 550px; } .cyber-defenses-content h3 { font-size: 24px; margin-bottom: 20px; } .cyber-defenses-content p { margin-bottom: 0; } .cyber-defenses-content .cyber-list { padding: 0; margin-top: 25px; margin-bottom: 25px; } .cyber-defenses-content .cyber-list li { color: var(--blackColor); font-weight: 500; font-family: var(--headingFontFamily); list-style-type: none; margin-bottom: 25px; position: relative; padding-left: 32px; font-size: 15px; } .cyber-defenses-content .cyber-list li:last-child { margin-bottom: 0; } .cyber-defenses-content .cyber-list li i { display: inline-block; height: 22px; width: 22px; line-height: 22px; background: var(--primaryGradientColor); color: var(--whiteColor); text-align: center; border-radius: 50px; font-size: 12px; position: absolute; top: 0; left: 0; } .cyber-defenses-content .cyber-btn { margin-top: 25px; } .cyber-defenses-image { text-align: end; } .cyber-defenses-shape { position: absolute; right: 0; top: 10%; -webkit-transform: translateY(-10%); transform: translateY(-10%); z-index: -1; } /*================================================ Infrastructure Area CSS =================================================*/ .infrastructure-area { background: #F9F9F9; position: relative; z-index: 1; overflow: hidden; } .single-infrastructure-card { background: var(--whiteColor); border-radius: 10px; padding: 30px 30px 30px 155px; position: relative; z-index: 1; overflow: hidden; -webkit-transition: var(--transition); transition: var(--transition); margin-bottom: 25px; } .single-infrastructure-card.icon-pad-none { padding: 30px 30px 30px 30px; } .single-infrastructure-card::before { content: ""; position: absolute; left: 0; top: 0; width: 0%; height: 0%; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; background: var(--primaryGradientColor); z-index: -1; opacity: 0; visibility: hidden; border-radius: 50%; -webkit-transform: scale(1.5); transform: scale(1.5); } .single-infrastructure-card .icon { position: absolute; top: 30px; left: 30px; } .single-infrastructure-card .icon i { display: inline-block; height: 95px; width: 95px; line-height: 95px; background: var(--primaryGradientColorTwo); color: var(--whiteColor); font-size: 40px; border-radius: 15px; text-align: center; -webkit-transition: var(--transition); transition: var(--transition); } .single-infrastructure-card h3 { margin-bottom: 15px; font-size: 24px; } .single-infrastructure-card h3 a { color: var(--blackColor); } .single-infrastructure-card p { -webkit-transition: var(--transition); transition: var(--transition); } .single-infrastructure-card:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); } .single-infrastructure-card:hover::before { width: 100%; height: 100%; opacity: 1; visibility: visible; } .single-infrastructure-card:hover h3 a { color: var(--whiteColor); } .single-infrastructure-card:hover p { color: var(--whiteColor); } .infrastructure-shape { position: absolute; left: -50px; bottom: -150px; z-index: -1; } /*================================================ Cyard Cybersecurity Area CSS =================================================*/ .cyard-cybersecurity-area { position: relative; z-index: 1; overflow: hidden; } .cyard-cybersecurity-image { overflow: hidden; border-radius: 20px; position: relative; } .cyard-cybersecurity-image img { border-radius: 20px; -webkit-transition: var(--transition); transition: var(--transition); } .cyard-cybersecurity-image:hover img { -webkit-transform: scale(1.2); transform: scale(1.2); } .cyard-cybersecurity-image .cybersecurity-shape { position: absolute; left: 25px; bottom: 35px; -webkit-animation: movescale 3s linear infinite; animation: movescale 3s linear infinite; } .cyard-cybersecurity-content { padding-left: 45px; } .cyard-cybersecurity-content h2 { margin-bottom: 20px; font-size: 50px; } .cyard-cybersecurity-content p { margin-bottom: 0; } .cyard-cybersecurity-content .features-list { padding: 0; margin-top: 30px; margin-bottom: 0; } .cyard-cybersecurity-content .features-list li { list-style-type: none; margin-bottom: 25px; } .cyard-cybersecurity-content .features-list li:last-child { margin-bottom: 0; } .cyard-cybersecurity-content .features-list li span { position: relative; padding-left: 40px; font-size: 18px; font-weight: 600; font-family: var(--headingFontFamily); } .cyard-cybersecurity-content .features-list li span i { left: 0; top: 50%; width: 30px; height: 30px; font-size: 15px; line-height: 30px; border-radius: 50%; text-align: center; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: var(--mainColor); background-color: #F2F2F2; -webkit-transition: var(--transition); transition: var(--transition); } .cyard-cybersecurity-content .features-list li span:hover i { background-color: var(--mainColor); color: var(--whiteColor); } .cybersecurity-shape-2 { position: absolute; right: 0; top: 0; z-index: -1; } /*================================================ Explore Area CSS =================================================*/ .single-explore-card { margin-bottom: 25px; -webkit-transition: var(--transition); transition: var(--transition); } .single-explore-card .explore-image { overflow: hidden; border-radius: 15px; } .single-explore-card .explore-image a img { display: inline-block; border-radius: 15px; -webkit-transition: var(--transition); transition: var(--transition); } .single-explore-card .explore-content { margin-top: 30px; } .single-explore-card .explore-content span { display: block; margin-bottom: 20px; } .single-explore-card .explore-content span a { display: inline-block; padding: 10px 15px; background-color: #FFEBEC; color: var(--mainColor); font-weight: 500; font-family: var(--headingFontFamily); border-radius: 10px; } .single-explore-card .explore-content span a:hover { background-color: var(--mainColor); color: var(--whiteColor); } .single-explore-card .explore-content h3 { font-size: 24px; line-height: 1.5; margin-bottom: 15px; } .single-explore-card .explore-content h3 a { color: var(--blackColor); } .single-explore-card .explore-content p { margin-bottom: 18px; } .single-explore-card .explore-content .explore-btn { font-weight: bold; background: var(--primaryGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-transition: var(--transition); transition: var(--transition); } .single-explore-card:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); } .single-explore-card:hover .explore-image a img { -webkit-transform: scale(1.2); transform: scale(1.2); } .single-explore-card:hover .explore-content .explore-btn { letter-spacing: 1px; } /*================================================ New Main Banner Black Area CSS =================================================*/ .new-main-banner-black-area { overflow: hidden; padding-top: 150px; padding-bottom: 150px; } .new-main-banner-black-area .container-fluid { overflow: hidden; padding-left: 30px; padding-right: 0; } .new-main-banner-black-content { max-width: 780px; z-index: 1; position: relative; } .new-main-banner-black-content .sub-title { font-weight: bold; background: var(--primaryGradientColor); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; margin-bottom: 20px; } .new-main-banner-black-content h1 { font-size: 75px; color: var(--whiteColor); margin-bottom: 25px; } .new-main-banner-black-content p { color: #C5C3C8; margin-bottom: 0; max-width: 700px; } .new-main-banner-black-content .banner-btn-box { padding: 0; margin-top: 35px; margin-bottom: 0; } .new-main-banner-black-content .banner-btn-box li { list-style-type: none; display: inline-block; margin-right: 25px; } .new-main-banner-black-content .banner-btn-box li:last-child { margin-right: 0; } .new-main-banner-black-image { position: absolute; right: 0; top: 100px; max-width: 875px; } .new-main-banner-line-shape { position: absolute; left: 0; right: 0; top: -100px; } .new-main-banner-line-shape img { width: 100%; }