/* ============================================================ [Master Stylesheet] Theme Name: Consu Hub Theme URL: http:// Description: Consu Hub - Multipurpose Agency & Business HTML Template Author URL: https://account.templatemonster.com/store Version: 1.0.0 ============================================================== */ /* ======================================== *********** TABLE OF CONTENTS ********** ***************** 01. Type CSS ***************** 01.01 Variables css 01.02 reset css 01.03 typography css 01.04 extend css 01.05 preload Css 01.06 Scroll to Top ***************** 02. Home One CSS ***************** 02.01 header css 01.02 navbar css 01.03 banner css 02.04 skilled css 02.05 who-we css 02.06 why-choose css 02.07 services css 02.08 team css 02.09 project css 02.10 pricing css 02.11 client-feedback css 02.12 blog css 02.13 contact-info css 02.14 company logo css 02.15 footer css ***************** 03. Home Two CSS ***************** 03.01 header-top css 03.02 navbar css 03.03 banner css 03.04 who-we css 03.05 services css 03.06 your-business css 03.07 project css 03.08 pricing css 03.09 consulting-services css 03.10 team css 03.11 client-feedback css 03.12 blog css 02.14 company logo css 03.15 footer css ***************** 04. Inner CSS ***************** Breadcrumb css Services Details css all project css blog details css contact-us css ======================================== */ /* ============================ 01.01 Variables css ================= ==============*/ /* google Font */ @import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); /* ======= Color Variables Start ========== */ :root { /* Font Family */ --heading-font: "Fraunces", sans-serif; --body-font: "Inter", sans-serif; /* ======= Theme Color Start ======== */ /* Base Color */ --primary-h: 219; --primary-s: 89%; --primary-l: 55%; --primary: var(--primary-h) var(--primary-s) var(--primary-l); --primary-d-100: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.1); --primary-d-200: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.2); --primary-d-300: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.3); --primary-d-400: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.4); --primary-d-500: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.5); --primary-d-600: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.6); --primary-d-700: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.7); --primary-d-800: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.8); --primary-d-900: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.9); --primary-d-1000: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 1); --primary-l-100: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.1); --primary-l-200: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.2); --primary-l-300: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.3); --primary-l-400: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.4); --primary-l-500: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5); --primary-l-600: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.6); --primary-l-700: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.7); --primary-l-800: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.8); --primary-l-900: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.9); --primary-l-1000: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 1); /* Base Two Color */ --secondary-h: 230; --secondary-s: 100%; --secondary-l: 18%; --secondary: var(--secondary-h) var(--secondary-s) var(--secondary-l); --secondary-d-100: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.1); --secondary-d-200: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.2); --secondary-d-300: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.3); --secondary-d-400: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.4); --secondary-d-500: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.5); --secondary-d-600: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.6); --secondary-d-700: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.7); --secondary-d-800: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.8); --secondary-d-900: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.9); --secondary-d-1000: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 1); --secondary-l-100: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.1); --secondary-l-200: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.2); --secondary-l-300: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.3); --secondary-l-400: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.4); --secondary-l-500: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.5); --secondary-l-600: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.6); --secondary-l-700: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.7); --secondary-l-800: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.8); --secondary-l-900: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.9); --secondary-l-1000: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 1); /* ======== Color Variables Start ========== */ --white: 0 0% 100%; --body-color: 0 0% 80%; --heading-color: 230 100% 18%; --black: 0 0% 0%; --border-color: 0 0% 88%; --section-bg: 208 100% 97%; --background-color: #F8F8F8; /* =========== Box Shadow Start ============ */ --header-box-shadow: 0px -1px 15px 3px hsl(var(--black) / 0.3); --mobile-box-shadow: 0px -1px 5px 0px hsl(var(--black) / 0.92); --box-shadow: 0px 2px 15px hsl(var(--black) / 0.05); /* =========== Bootstrap Modifier Start ============ */ /* Primary Color */ --primary-h: 219; --primary-s: 89%; --primary-l: 55%; --primary: var(--primary-h) var(--primary-s) var(--primary-l); --primary-d-100: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.1); --primary-d-200: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.2); --primary-d-300: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.3); --primary-d-400: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.4); --primary-d-500: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.5); --primary-l-100: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.1); --primary-l-200: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.2); --primary-l-300: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.3); --primary-l-400: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.4); --primary-l-500: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5); /* Secondary Color */ --secondary-h: 230; --secondary-s: 100%; --secondary-l: 18%; --secondary: var(--secondary-h) var(--secondary-s) var(--secondary-l); --secondary-d-100: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.1); --secondary-d-200: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.2); --secondary-d-300: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.3); --secondary-d-400: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.4); --secondary-d-500: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.5); --secondary-l-100: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.1); --secondary-l-200: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.2); --secondary-l-300: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.3); --secondary-l-400: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.4); --secondary-l-500: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.5); /* Success Color */ --success-h: 145; --success-s: 63%; --success-l: 42%; --success: var(--success-h) var(--success-s) var(--success-l); --success-d-100: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.1); --success-d-200: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.2); --success-d-300: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.3); --success-d-400: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.4); --success-d-500: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.5); --success-l-100: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.1); --success-l-200: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.2); --success-l-300: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.3); --success-l-400: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.4); --success-l-500: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.5); /* Danger Color */ --danger-h: 0; --danger-s: 96%; --danger-l: 63%; --danger: var(--danger-h) var(--danger-s) var(--danger-l); --danger-d-100: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.1); --danger-d-200: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.2); --danger-d-300: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.3); --danger-d-400: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.4); --danger-d-500: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.5); --danger-l-100: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.1); --danger-l-200: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.2); --danger-l-300: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.3); --danger-l-400: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.4); --danger-l-500: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.5); /* Warning Color */ --warning-h: 45; --warning-s: 74%; --warning-l: 56%; --warning: var(--warning-h) var(--warning-s) var(--warning-l); --warning-d-100: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.1); --warning-d-200: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.2); --warning-d-300: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.3); --warning-d-400: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.4); --warning-d-500: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.5); --warning-l-100: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.1); --warning-l-200: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.2); --warning-l-300: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.3); --warning-l-400: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.4); --warning-l-500: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.5); /* Info Color */ --info-h: 219; --info-s: 98%; --info-l: 43%; --info: var(--info-h) var(--info-s) var(--info-l); --info-d-100: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.1); --info-d-200: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.2); --info-d-300: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.3); --info-d-400: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.4); --info-d-500: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.5); --info-l-100: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.1); --info-l-200: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.2); --info-l-300: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.3); --info-l-400: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.4); --info-l-500: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.5); --error-h: 0; --error-s: 79%; --error-l: 63%; --error: var(--error-h) var(--error-s) var(--error-l); --error-d-100: var(--error-h) var(--error-s) calc(var(--error-l) - var(--error-l) * 0.1); --error-d-200: var(--error-h) var(--error-s) calc(var(--error-l) - var(--error-l) * 0.2); --error-d-300: var(--error-h) var(--error-s) calc(var(--error-l) - var(--error-l) * 0.3); --error-d-400: var(--error-h) var(--error-s) calc(var(--error-l) - var(--error-l) * 0.4); --error-d-500: var(--error-h) var(--error-s) calc(var(--error-l) - var(--error-l) * 0.5); --error-l-100: var(--error-h) calc(var(--error-s)) calc(var(--error-l) + (100% - var(--error-l)) * 0.1); --error-l-200: var(--error-h) calc(var(--error-s)) calc(var(--error-l) + (100% - var(--error-l)) * 0.2); --error-l-300: var(--error-h) calc(var(--error-s)) calc(var(--error-l) + (100% - var(--error-l)) * 0.3); --error-l-400: var(--error-h) calc(var(--error-s)) calc(var(--error-l) + (100% - var(--error-l)) * 0.4); --error-l-500: var(--error-h) calc(var(--error-s)) calc(var(--error-l) + (100% - var(--error-l)) * 0.5); --black2-h: 0; --black2-s: 0%; --black2-l: 11%; --black2: var(--black2-h) var(--black2-s) var(--black2-l); --black2-d-100: var(--black2-h) var(--black2-s) calc(var(--black2-l) - var(--black2-l) * 0.1); --black2-d-200: var(--black2-h) var(--black2-s) calc(var(--black2-l) - var(--black2-l) * 0.2); --black2-d-300: var(--black2-h) var(--black2-s) calc(var(--black2-l) - var(--black2-l) * 0.3); --black2-d-400: var(--black2-h) var(--black2-s) calc(var(--black2-l) - var(--black2-l) * 0.4); --black2-d-500: var(--black2-h) var(--black2-s) calc(var(--black2-l) - var(--black2-l) * 0.5); --black2-l-100: var(--black2-h) calc(var(--black2-s)) calc(var(--black2-l) + (100% - var(--black2-l)) * 0.1); --black2-l-200: var(--black2-h) calc(var(--black2-s)) calc(var(--black2-l) + (100% - var(--black2-l)) * 0.2); --black2-l-300: var(--black2-h) calc(var(--black2-s)) calc(var(--black2-l) + (100% - var(--black2-l)) * 0.3); --black2-l-400: var(--black2-h) calc(var(--black2-s)) calc(var(--black2-l) + (100% - var(--black2-l)) * 0.4); --black2-l-500: var(--black2-h) calc(var(--black2-s)) calc(var(--black2-l) + (100% - var(--black2-l)) * 0.5); --black3-h: 0; --black3-s: 0%; --black3-l: 16%; --black3: var(--black3-h) var(--black3-s) var(--black3-l); --black3-d-100: var(--black3-h) var(--black3-s) calc(var(--black3-l) - var(--black3-l) * 0.1); --black3-d-200: var(--black3-h) var(--black3-s) calc(var(--black3-l) - var(--black3-l) * 0.2); --black3-d-300: var(--black3-h) var(--black3-s) calc(var(--black3-l) - var(--black3-l) * 0.3); --black3-d-400: var(--black3-h) var(--black3-s) calc(var(--black3-l) - var(--black3-l) * 0.4); --black3-d-500: var(--black3-h) var(--black3-s) calc(var(--black3-l) - var(--black3-l) * 0.5); --black3-l-100: var(--black3-h) calc(var(--black3-s)) calc(var(--black3-l) + (100% - var(--black3-l)) * 0.1); --black3-l-200: var(--black3-h) calc(var(--black3-s)) calc(var(--black3-l) + (100% - var(--black3-l)) * 0.2); --black3-l-300: var(--black3-h) calc(var(--black3-s)) calc(var(--black3-l) + (100% - var(--black3-l)) * 0.3); --black3-l-400: var(--black3-h) calc(var(--black3-s)) calc(var(--black3-l) + (100% - var(--black3-l)) * 0.4); --black3-l-500: var(--black3-h) calc(var(--black3-s)) calc(var(--black3-l) + (100% - var(--black3-l)) * 0.5); --gray-h: 0; --gray-s: 0%; --gray-l: 20%; --gray: var(--gray-h) var(--gray-s) var(--gray-l); --gray-d-100: var(--gray-h) var(--gray-s) calc(var(--gray-l) - var(--gray-l) * 0.1); --gray-d-200: var(--gray-h) var(--gray-s) calc(var(--gray-l) - var(--gray-l) * 0.2); --gray-d-300: var(--gray-h) var(--gray-s) calc(var(--gray-l) - var(--gray-l) * 0.3); --gray-d-400: var(--gray-h) var(--gray-s) calc(var(--gray-l) - var(--gray-l) * 0.4); --gray-d-500: var(--gray-h) var(--gray-s) calc(var(--gray-l) - var(--gray-l) * 0.5); --gray-l-100: var(--gray-h) calc(var(--gray-s)) calc(var(--gray-l) + (100% - var(--gray-l)) * 0.1); --gray-l-200: var(--gray-h) calc(var(--gray-s)) calc(var(--gray-l) + (100% - var(--gray-l)) * 0.2); --gray-l-300: var(--gray-h) calc(var(--gray-s)) calc(var(--gray-l) + (100% - var(--gray-l)) * 0.3); --gray-l-400: var(--gray-h) calc(var(--gray-s)) calc(var(--gray-l) + (100% - var(--gray-l)) * 0.4); --gray-l-500: var(--gray-h) calc(var(--gray-s)) calc(var(--gray-l) + (100% - var(--gray-l)) * 0.5); --gray2-h: 0; --gray2-s: 0%; --gray2-l: 31%; --gray2: var(--gray2-h) var(--gray2-s) var(--gray2-l); --gray2-d-100: var(--gray2-h) var(--gray2-s) calc(var(--gray2-l) - var(--gray2-l) * 0.1); --gray2-d-200: var(--gray2-h) var(--gray2-s) calc(var(--gray2-l) - var(--gray2-l) * 0.2); --gray2-d-300: var(--gray2-h) var(--gray2-s) calc(var(--gray2-l) - var(--gray2-l) * 0.3); --gray2-d-400: var(--gray2-h) var(--gray2-s) calc(var(--gray2-l) - var(--gray2-l) * 0.4); --gray2-d-500: var(--gray2-h) var(--gray2-s) calc(var(--gray2-l) - var(--gray2-l) * 0.5); --gray2-l-100: var(--gray2-h) calc(var(--gray2-s)) calc(var(--gray2-l) + (100% - var(--gray2-l)) * 0.1); --gray2-l-200: var(--gray2-h) calc(var(--gray2-s)) calc(var(--gray2-l) + (100% - var(--gray2-l)) * 0.2); --gray2-l-300: var(--gray2-h) calc(var(--gray2-s)) calc(var(--gray2-l) + (100% - var(--gray2-l)) * 0.3); --gray2-l-400: var(--gray2-h) calc(var(--gray2-s)) calc(var(--gray2-l) + (100% - var(--gray2-l)) * 0.4); --gray2-l-500: var(--gray2-h) calc(var(--gray2-s)) calc(var(--gray2-l) + (100% - var(--gray2-l)) * 0.5); --gray3-h: 0; --gray3-s: 0%; --gray3-l: 51%; --gray3: var(--gray3-h) var(--gray3-s) var(--gray3-l); --gray3-d-100: var(--gray3-h) var(--gray3-s) calc(var(--gray3-l) - var(--gray3-l) * 0.1); --gray3-d-200: var(--gray3-h) var(--gray3-s) calc(var(--gray3-l) - var(--gray3-l) * 0.2); --gray3-d-300: var(--gray3-h) var(--gray3-s) calc(var(--gray3-l) - var(--gray3-l) * 0.3); --gray3-d-400: var(--gray3-h) var(--gray3-s) calc(var(--gray3-l) - var(--gray3-l) * 0.4); --gray3-d-500: var(--gray3-h) var(--gray3-s) calc(var(--gray3-l) - var(--gray3-l) * 0.5); --gray3-l-100: var(--gray3-h) calc(var(--gray3-s)) calc(var(--gray3-l) + (100% - var(--gray3-l)) * 0.1); --gray3-l-200: var(--gray3-h) calc(var(--gray3-s)) calc(var(--gray3-l) + (100% - var(--gray3-l)) * 0.2); --gray3-l-300: var(--gray3-h) calc(var(--gray3-s)) calc(var(--gray3-l) + (100% - var(--gray3-l)) * 0.3); --gray3-l-400: var(--gray3-h) calc(var(--gray3-s)) calc(var(--gray3-l) + (100% - var(--gray3-l)) * 0.4); --gray3-l-500: var(--gray3-h) calc(var(--gray3-s)) calc(var(--gray3-l) + (100% - var(--gray3-l)) * 0.5); --gray4-h: 0; --gray4-s: 0%; --gray4-l: 74%; --gray4: var(--gray4-h) var(--gray4-s) var(--gray4-l); --gray4-d-100: var(--gray4-h) var(--gray4-s) calc(var(--gray4-l) - var(--gray4-l) * 0.1); --gray4-d-200: var(--gray4-h) var(--gray4-s) calc(var(--gray4-l) - var(--gray4-l) * 0.2); --gray4-d-300: var(--gray4-h) var(--gray4-s) calc(var(--gray4-l) - var(--gray4-l) * 0.3); --gray4-d-400: var(--gray4-h) var(--gray4-s) calc(var(--gray4-l) - var(--gray4-l) * 0.4); --gray4-d-500: var(--gray4-h) var(--gray4-s) calc(var(--gray4-l) - var(--gray4-l) * 0.5); --gray4-l-100: var(--gray4-h) calc(var(--gray4-s)) calc(var(--gray4-l) + (100% - var(--gray4-l)) * 0.1); --gray4-l-200: var(--gray4-h) calc(var(--gray4-s)) calc(var(--gray4-l) + (100% - var(--gray4-l)) * 0.2); --gray4-l-300: var(--gray4-h) calc(var(--gray4-s)) calc(var(--gray4-l) + (100% - var(--gray4-l)) * 0.3); --gray4-l-400: var(--gray4-h) calc(var(--gray4-s)) calc(var(--gray4-l) + (100% - var(--gray4-l)) * 0.4); --gray4-l-500: var(--gray4-h) calc(var(--gray4-s)) calc(var(--gray4-l) + (100% - var(--gray4-l)) * 0.5); --gray5-h: 0; --gray5-s: 0%; --gray5-l: 88%; --gray5: var(--gray5-h) var(--gray5-s) var(--gray5-l); --gray5-d-100: var(--gray5-h) var(--gray5-s) calc(var(--gray5-l) - var(--gray5-l) * 0.1); --gray5-d-200: var(--gray5-h) var(--gray5-s) calc(var(--gray5-l) - var(--gray5-l) * 0.2); --gray5-d-300: var(--gray5-h) var(--gray5-s) calc(var(--gray5-l) - var(--gray5-l) * 0.3); --gray5-d-400: var(--gray5-h) var(--gray5-s) calc(var(--gray5-l) - var(--gray5-l) * 0.4); --gray5-d-500: var(--gray5-h) var(--gray5-s) calc(var(--gray5-l) - var(--gray5-l) * 0.5); --gray5-l-100: var(--gray5-h) calc(var(--gray5-s)) calc(var(--gray5-l) + (100% - var(--gray5-l)) * 0.1); --gray5-l-200: var(--gray5-h) calc(var(--gray5-s)) calc(var(--gray5-l) + (100% - var(--gray5-l)) * 0.2); --gray5-l-300: var(--gray5-h) calc(var(--gray5-s)) calc(var(--gray5-l) + (100% - var(--gray5-l)) * 0.3); --gray5-l-400: var(--gray5-h) calc(var(--gray5-s)) calc(var(--gray5-l) + (100% - var(--gray5-l)) * 0.4); --gray5-l-500: var(--gray5-h) calc(var(--gray5-s)) calc(var(--gray5-l) + (100% - var(--gray5-l)) * 0.5); --paragraph-h: 0; --paragraph-s: 0%; --paragraph-l: 51%; --paragraph: var(--paragraph-h) var(--paragraph-s) var(--paragraph-l); --paragraph-d-100: var(--paragraph-h) var(--paragraph-s) calc(var(--paragraph-l) - var(--paragraph-l) * 0.1); --paragraph-d-200: var(--paragraph-h) var(--paragraph-s) calc(var(--paragraph-l) - var(--paragraph-l) * 0.2); --paragraph-d-300: var(--paragraph-h) var(--paragraph-s) calc(var(--paragraph-l) - var(--paragraph-l) * 0.3); --paragraph-d-400: var(--paragraph-h) var(--paragraph-s) calc(var(--paragraph-l) - var(--paragraph-l) * 0.4); --paragraph-d-500: var(--paragraph-h) var(--paragraph-s) calc(var(--paragraph-l) - var(--paragraph-l) * 0.5); --paragraph-l-100: var(--paragraph-h) calc(var(--paragraph-s)) calc(var(--paragraph-l) + (100% - var(--paragraph-l)) * 0.1); --paragraph-l-200: var(--paragraph-h) calc(var(--paragraph-s)) calc(var(--paragraph-l) + (100% - var(--paragraph-l)) * 0.2); --paragraph-l-300: var(--paragraph-h) calc(var(--paragraph-s)) calc(var(--paragraph-l) + (100% - var(--paragraph-l)) * 0.3); --paragraph-l-400: var(--paragraph-h) calc(var(--paragraph-s)) calc(var(--paragraph-l) + (100% - var(--paragraph-l)) * 0.4); --paragraph-l-500: var(--paragraph-h) calc(var(--paragraph-s)) calc(var(--paragraph-l) + (100% - var(--paragraph-l)) * 0.5); --two-header-color-h: 203; --two-header-color-s: 51%; --two-header-color-l: 16%; --two-header-color: var(--two-header-color-h) var(--two-header-color-s) var(--two-header-color-l); --two-header-color-d-100: var(--two-header-color-h) var(--two-header-color-s) calc(var(--two-header-color-l) - var(--two-header-color-l) * 0.1); --two-header-color-d-200: var(--two-header-color-h) var(--two-header-color-s) calc(var(--two-header-color-l) - var(--two-header-color-l) * 0.2); --two-header-color-d-300: var(--two-header-color-h) var(--two-header-color-s) calc(var(--two-header-color-l) - var(--two-header-color-l) * 0.3); --two-header-color-d-400: var(--two-header-color-h) var(--two-header-color-s) calc(var(--two-header-color-l) - var(--two-header-color-l) * 0.4); --two-header-color-d-500: var(--two-header-color-h) var(--two-header-color-s) calc(var(--two-header-color-l) - var(--two-header-color-l) * 0.5); --two-header-color-l-100: var(--two-header-color-h) calc(var(--two-header-color-s)) calc(var(--two-header-color-l) + (100% - var(--two-header-color-l)) * 0.1); --two-header-color-l-200: var(--two-header-color-h) calc(var(--two-header-color-s)) calc(var(--two-header-color-l) + (100% - var(--two-header-color-l)) * 0.2); --two-header-color-l-300: var(--two-header-color-h) calc(var(--two-header-color-s)) calc(var(--two-header-color-l) + (100% - var(--two-header-color-l)) * 0.3); --two-header-color-l-400: var(--two-header-color-h) calc(var(--two-header-color-s)) calc(var(--two-header-color-l) + (100% - var(--two-header-color-l)) * 0.4); --two-header-color-l-500: var(--two-header-color-h) calc(var(--two-header-color-s)) calc(var(--two-header-color-l) + (100% - var(--two-header-color-l)) * 0.5); --two-section-h: 203; --two-section-s: 73%; --two-section-l: 12%; --two-section: var(--two-section-h) var(--two-section-s) var(--two-section-l); --two-section-d-100: var(--two-section-h) var(--two-section-s) calc(var(--two-section-l) - var(--two-section-l) * 0.1); --two-section-d-200: var(--two-section-h) var(--two-section-s) calc(var(--two-section-l) - var(--two-section-l) * 0.2); --two-section-d-300: var(--two-section-h) var(--two-section-s) calc(var(--two-section-l) - var(--two-section-l) * 0.3); --two-section-d-400: var(--two-section-h) var(--two-section-s) calc(var(--two-section-l) - var(--two-section-l) * 0.4); --two-section-d-500: var(--two-section-h) var(--two-section-s) calc(var(--two-section-l) - var(--two-section-l) * 0.5); --two-section-l-100: var(--two-section-h) calc(var(--two-section-s)) calc(var(--two-section-l) + (100% - var(--two-section-l)) * 0.1); --two-section-l-200: var(--two-section-h) calc(var(--two-section-s)) calc(var(--two-section-l) + (100% - var(--two-section-l)) * 0.2); --two-section-l-300: var(--two-section-h) calc(var(--two-section-s)) calc(var(--two-section-l) + (100% - var(--two-section-l)) * 0.3); --two-section-l-400: var(--two-section-h) calc(var(--two-section-s)) calc(var(--two-section-l) + (100% - var(--two-section-l)) * 0.4); --two-section-l-500: var(--two-section-h) calc(var(--two-section-s)) calc(var(--two-section-l) + (100% - var(--two-section-l)) * 0.5); } .primary-text { color: hsl(var(--primary)); } .secondary-text { color: hsl(var(--secondary)); } .info-text { color: hsl(var(--info)); } .warning-text { color: hsl(var(--warning)); } .error-text { color: hsl(var(--error)); } .black-text { color: hsl(var(--black)); } .white-text { color: hsl(var(--white)); } .gray-text { color: hsl(var(--gray)); } .gray3-text { color: hsl(var(--gray3)); } /* ============================ 01.02 reset css =============================== */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } * { margin: 0; padding: 0; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; } ul[role=list], ol[role=list] { list-style: none; } ul { list-style: none; margin: 0; padding: 0; } html:focus-within { scroll-behavior: smooth; } a:not([class]) { -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } button, a { text-decoration: none; outline: none; -webkit-box-shadow: none; box-shadow: none; border: 0; } img, picture, svg, video, canvas { max-width: 100%; height: auto; vertical-align: middle; font-style: italic; background-repeat: no-repeat; background-size: cover; } input, button, textarea, select { font: inherit; } @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { -webkit-animation-duration: 0.01ms !important; animation-duration: 0.01ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; -webkit-transition-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; -webkit-transition: none; transition: none; } } body, html { height: 100%; scroll-behavior: smooth; } body::-webkit-scrollbar-track, html::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: hsl(var(--white)); } body::-webkit-scrollbar, html::-webkit-scrollbar { width: 8px; background-color: hsl(var(--white)); } body::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb { background-color: hsl(var(--primary)); border-radius: 10px; } /* ============================ 01.03 typography css =============================== */ * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: var(--body-font); color: hsl(var(--body-color)); word-break: break-word; background-color: var(--background-color); min-height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow-x: hidden; } main.wraper{ overflow-x: hidden; } p { font-size: 1rem; font-weight: 200; margin: 0; color: hsl(var(--body-color)); font-weight: 400; } span { display: inline-block; } h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font); color: hsl(var(--heading-color)); line-height: 1.3; font-weight: 700; } @media screen and (max-width: 767px) { h1, h2, h3, h4, h5, h6 { margin: 0 0 15px 0; } } h1 { font-size: 3.75rem; } @media screen and (max-width: 1399px) { h1 { font-size: 3.125rem; } } @media screen and (max-width: 1199px) { h1 { font-size: 2.8125rem; } } @media screen and (max-width: 991px) { h1 { font-size: 2.5rem; } } @media screen and (max-width: 767px) { h1 { font-size: 2.1875rem; } } @media screen and (max-width: 575px) { h1 { font-size: 1.875rem; } } h2 { font-size: 2.5rem; } @media screen and (max-width: 1399px) { h2 { font-size: 2.8125rem; } } @media screen and (max-width: 1199px) { h2 { font-size: 2.5rem; } } @media screen and (max-width: 991px) { h2 { font-size: 2.1875rem; } } @media screen and (max-width: 767px) { h2 { font-size: 1.875rem; } } @media screen and (max-width: 575px) { h2 { font-size: 1.5625rem; } } h3 { font-size: 1.875rem; } @media screen and (max-width: 1399px) { h3 { font-size: 1.75rem; } } @media screen and (max-width: 1199px) { h3 { font-size: 1.5625rem; } } @media screen and (max-width: 991px) { h3 { font-size: 1.4375rem; } } @media screen and (max-width: 767px) { h3 { font-size: 1.375rem; } } @media screen and (max-width: 575px) { h3 { font-size: 1.25rem; } } h4 { font-size: 1.5rem; } @media screen and (max-width: 1399px) { h4 { font-size: 1.3125rem; } } @media screen and (max-width: 1199px) { h4 { font-size: 1.25rem; } } @media screen and (max-width: 991px) { h4 { font-size: 1.1875rem; } } @media screen and (max-width: 767px) { h4 { font-size: 1.125rem; } } @media screen and (max-width: 575px) { h4 { font-size: 1.0625rem; } } h5 { font-size: 1.25rem; } @media screen and (max-width: 1399px) { h5 { font-size: 1.1875rem; } } @media screen and (max-width: 1199px) { h5 { font-size: 1.125rem; } } @media screen and (max-width: 991px) { h5 { font-size: 1.0625rem; } } @media screen and (max-width: 767px) { h5 { font-size: 1rem; } } @media screen and (max-width: 575px) { h5 { font-size: 1rem; } } h6 { font-size: 1rem; } @media screen and (max-width: 1399px) { h6 { font-size: 1rem; } } @media screen and (max-width: 1199px) { h6 { font-size: 0.9375rem; } } @media screen and (max-width: 991px) { h6 { font-size: 0.875rem; } } @media screen and (max-width: 767px) { h6 { font-size: 0.875rem; } } @media screen and (max-width: 575px) { h6 { font-size: 0.875rem; } } p { color: hsl(var(--paragraph)); } h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a { font-weight: inherit; font-size: inherit; color: inherit; -webkit-transition: 0.2s linear; transition: 0.2s linear; line-height: inherit; } a { display: inline-block; -webkit-transition: 0.2s linear; transition: 0.2s linear; text-decoration: none; color: hsl(var(--info)); } a:hover { color: hsl(var(--base)); } img { max-width: 100%; height: auto; } select { cursor: pointer; } ul, ol { padding: 0; margin: 0; list-style: none; } button { border: 0; background-color: transparent; } button:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } .form-select:focus { outline: 0; -webkit-box-shadow: none; box-shadow: none; } /* ============================ 01.04 extend css =============================== */ /* ======== Font Size For responsive devices Start ======== */ .fs-10 { font-size: 0.625rem; } .fs-11 { font-size: 0.6875rem; } .fs-12 { font-size: 0.75rem; } .fs-13 { font-size: 0.8125rem; } .fs-14 { font-size: 0.875rem; } .fs-15 { font-size: 0.9375rem; } .fs-16 { font-size: 1rem; } @media screen and (max-width: 1199px) { .fs-16 { font-size: 0.9375rem; } } .fs-17 { font-size: 1.0625rem; } @media screen and (max-width: 1199px) { .fs-17 { font-size: 1rem; } } @media screen and (max-width: 767px) { .fs-17 { font-size: 0.9375rem; } } .fs-18 { font-size: 1.125rem; } @media screen and (max-width: 1399px) { .fs-18 { font-size: 1.0625rem; } } @media screen and (max-width: 767px) { .fs-18 { font-size: 1rem; } } .fs-20 { font-size: 1.25rem; } @media screen and (max-width: 1399px) { .fs-20 { font-size: 1.125rem; } } @media screen and (max-width: 767px) { .fs-20 { font-size: 1.0625rem; } } .section-title h2, .section-title .h2 { font-size: 3rem; line-height: 1.2; font-weight: 700; } @media screen and (max-width: 1199px) { .section-title h2, .section-title .h2 { font-size: 2.5rem; } } @media screen and (max-width: 991px) { .section-title h2, .section-title .h2 { font-size: 2.1875rem; } } @media screen and (max-width: 767px) { .section-title h2, .section-title .h2 { font-size: 1.875rem; } } @media screen and (max-width: 575px) { .section-title h2, .section-title .h2 { font-size: 1.5625rem; } } .section-title span { padding-bottom: 15px; } .section-title-two h2, .section-title-two .h2 { font-size: 3rem; font-weight: 700; line-height: 1.2; padding: 20px 0; } @media (max-width: 767.98px) { .section-title-two h2, .section-title-two .h2 { font-size: 1.875rem; } } .section-title-two p { max-width: 528px; } hr { color: var(--gray5); margin: 24px 0; } .circle-log-white { background: hsl(var(--white)); border-radius: 100%; padding: 10px; } .circle-log-primary { background: hsl(var(--primary)); border-radius: 100%; padding: 10px; } .circle-log-primary p { color: hsl(var(--white)); } .logo__subs__label { width: 11.875rem; height: 11.875rem; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: auto; margin-right: auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; } .logo__subs__label > div { width: 8.125rem; height: 8.125rem; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 2px solid hsl(var(--border-color)); } .logo__subs__label > div img { width: 4.375rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; } .logo__subs__label > div .logo__circle__text { position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: hsl(var(--heading-color)); font-size: 0.9375rem; font-weight: 400; -webkit-animation: textRotation 8s linear infinite; animation: textRotation 8s linear infinite; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; } .logo__subs__label > div .logo__circle__text div { position: absolute; left: 50%; font-size: 0.9375rem; -webkit-transform-origin: 0 5.9375rem; transform-origin: 0 5.9375rem; } @-webkit-keyframes textRotation { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes textRotation { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .logo__subs__title { margin-bottom: 4.375rem; text-align: center; } .logo__subs__title h2 { margin-bottom: 0; font-size: 6rem; text-align: center; text-transform: uppercase; font-weight: 600; line-height: 7.1875rem; } .logo__subs__title h2 span { display: block; font-weight: 300; } .logo__subs__form { position: relative; z-index: 1; width: 23.4375rem; height: 4.375rem; margin-left: auto; margin-right: auto; } .logo__subs__form input { width: 100%; height: 100%; border: none; outline: none; font-size: 1.9375rem; font-weight: 400; color: hsl(var(--heading-color)); border-bottom: 0.125rem solid hsl(var(--heading-color)); padding-right: 3.75rem; font-family: "ClashDisplay-Variable"; } .logo__subs__form input::-webkit-input-placeholder { color: hsl(var(--heading-color)/0.5); } .logo__subs__form input::-moz-placeholder { color: hsl(var(--heading-color)/0.5); } .logo__subs__form input:-ms-input-placeholder { color: hsl(var(--heading-color)/0.5); } .logo__subs__form input::-ms-input-placeholder { color: hsl(var(--heading-color)/0.5); } .logo__subs__form input::placeholder { color: hsl(var(--heading-color)/0.5); } .logo__subs__form button { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 2; background-color: transparent; border: none; outline: none; color: hsl(var(--heading-color)); font-size: 2.375rem; } .logo__subs__form button i { -webkit-transition: 0.3s; transition: 0.3s; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .logo__subs__form button:hover { color: hsl(var(--primary)); } .logo__subs__form button:hover i { -webkit-transform: rotate(-45deg) translate(0.375rem, 0.1875rem); transform: rotate(-45deg) translate(0.375rem, 0.1875rem); } .modal .btn-close { position: absolute; right: 40px; top: 20px; opacity: 1; color: hsl(var(--black)); background: hsl(var(--white)) var(--bs-btn-close-bg) center/1em auto no-repeat; padding: 15px; z-index: 1; } @media (max-width: 767.98px) { .modal .btn-close { right: 0; top: 0; } } @media (max-width: 575.98px) { .modal .btn-close { position: relative; } } .image-effect { position: relative; overflow: hidden; } .image-effect::after { content: ""; position: absolute; width: 200%; height: 0%; left: 50%; top: 50%; background-color: rgba(255, 255, 255, 0.3); -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); z-index: 1; } .image-effect:hover::after { height: 250%; -webkit-transition: all 600ms linear; transition: all 600ms linear; background-color: transparent; } .image-effect:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } .image-effect img { -webkit-transition: all 0.3s; transition: all 0.3s; } .booking-form label { font-size: 16px; font-weight: 600; color: hsl(var(--secondary)); } .booking-form input[type=time], .booking-form input[type=date] { padding: 10px 5px 10px 12px; } .booking-form input, .booking-form .nice-select, .booking-form textarea { width: 100%; padding: 0 20px; font-size: 1rem; height: 50px; line-height: 48px; color: hsl(var(--gray3)); font-size: 16px; } .booking-form input::-webkit-input-placeholder, .booking-form .nice-select::-webkit-input-placeholder, .booking-form textarea::-webkit-input-placeholder { color: hsl(var(--gray4)); } .booking-form input::-moz-placeholder, .booking-form .nice-select::-moz-placeholder, .booking-form textarea::-moz-placeholder { color: hsl(var(--gray4)); } .booking-form input:-ms-input-placeholder, .booking-form .nice-select:-ms-input-placeholder, .booking-form textarea:-ms-input-placeholder { color: hsl(var(--gray4)); } .booking-form input::-ms-input-placeholder, .booking-form .nice-select::-ms-input-placeholder, .booking-form textarea::-ms-input-placeholder { color: hsl(var(--gray4)); } .booking-form input::placeholder, .booking-form .nice-select::placeholder, .booking-form textarea::placeholder { color: hsl(var(--gray4)); } .booking-form input:focus, .booking-form .nice-select:focus, .booking-form textarea:focus { border-bottom-color: hsl(var(--primary)); } .booking-form textarea { padding: 20px; height: 110px; line-height: 1.3; } .booking-form .nice-select:after { height: 8px; width: 8px; } .booking-form button { position: relative; display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.1em; text-align: center; text-transform: capitalize; border-radius: 4px; padding: 18px 25px; border: none; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; overflow: hidden; z-index: 1; background: rgba(255, 255, 255, 0.1); color: hsl(var(--white)); background: hsl(var(--primary)); color: hsl(var(--white)); width: 100%; } .booking-form button:hover { background-color: transparent; color: hsl(var(--white)); } .booking-form button:hover::before { width: 100%; left: 0; right: auto; } .booking-form button::before { content: ""; display: block; position: absolute; top: 0; left: auto; right: 0; bottom: 0; width: 0; height: 100%; background: hsl(var(--secondary)); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: -1; } .modal-search-box .s__box { position: relative; } .modal-search-box input[type=text] { padding: 15px 20px; padding-right: 40px; font-size: 1rem; height: 50px; line-height: 48px; color: hsl(var(--gray3)); font-size: 16px; border-radius: 5px; } .modal-search-box input[type=text]:focus { border-bottom-color: hsl(var(--primary)); } .modal-search-box button { position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: hsl(var(--gray3)); } .search-quick-list { margin-top: 20px; } .search-quick-list ul { display: grid; margin: 5px 10px; } .search-quick-list ul li a { font-size: 16px; color: hsl(var(--gray2)); display: block; padding: 5px 10px; -webkit-transition: all 0.3s; transition: all 0.3s; } .search-quick-list ul li a:hover { color: hsl(var(--primary)); -webkit-transform: translateX(10px); transform: translateX(10px); } .modal-backdrop { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); background-color: rgba(0, 0, 0, 0.5); } .modal-backdrop.show { opacity: 1; } /* ========= Background Color Css ======== */ .bg--base { background-color: hsl(var(--base)) !important; } .bg--primary { background-color: hsl(var(--primary)) !important; } .bg--secondary { background-color: hsl(var(--secondary)) !important; } .bg--success { background-color: hsl(var(--success)) !important; } .bg--danger { background-color: hsl(var(--danger)) !important; } .bg--warning { background-color: hsl(var(--warning)) !important; } .bg--info { background-color: hsl(var(--info)) !important; } /* =========== Color Css Start =========== */ .text--base { color: hsl(var(--base)) !important; } .text--primary { color: hsl(var(--primary)) !important; } .text--secondary { color: hsl(var(--secondary)) !important; } .text--success { color: hsl(var(--success)) !important; } .text--danger { color: hsl(var(--danger)) !important; } .text--warning { color: hsl(var(--warning)) !important; } .text--info { color: hsl(var(--info)) !important; } /* =========== margin Css ======== */ .my-120 { margin-top: 60px; margin-bottom: 60px; } @media (min-width: 576px) { .my-120 { margin-top: 80px; margin-bottom: 80px; } } @media (min-width: 992px) { .my-120 { margin-top: 120px; margin-bottom: 120px; } } .mt-120 { margin-top: 60px; } @media (min-width: 576px) { .mt-120 { margin-top: 80px; } } @media (min-width: 992px) { .mt-120 { margin-top: 120px; } } .mb-120 { margin-bottom: 60px; } @media (min-width: 576px) { .mb-120 { margin-bottom: 80px; } } @media (min-width: 992px) { .mb-120 { margin-bottom: 120px; } } .my-60 { margin-top: 30px; margin-bottom: 30px; } @media (min-width: 576px) { .my-60 { margin-top: 40px; margin-bottom: 40px; } } @media (min-width: 992px) { .my-60 { margin-top: 60px; margin-bottom: 60px; } } .mt-60 { margin-top: 30px; } @media (min-width: 576px) { .mt-60 { margin-top: 40px; } } @media (min-width: 992px) { .mt-60 { margin-top: 60px; } } .mb-60 { margin-bottom: 30px; } @media (min-width: 576px) { .mb-60 { margin-bottom: 40px; } } @media (min-width: 992px) { .mb-60 { margin-bottom: 60px; } } /* ============= padding Css ========== */ .py-120 { padding-top: 60px; padding-bottom: 60px; } @media (min-width: 576px) { .py-120 { padding-top: 80px; padding-bottom: 80px; } } @media (min-width: 992px) { .py-120 { padding-top: 120px; padding-bottom: 120px; } } .pt-120 { padding-top: 60px; } @media (min-width: 576px) { .pt-120 { padding-top: 80px; } } @media (min-width: 992px) { .pt-120 { padding-top: 120px; } } .pb-120 { padding-bottom: 60px; } @media (min-width: 576px) { .pb-120 { padding-bottom: 80px; } } @media (min-width: 992px) { .pb-120 { padding-bottom: 120px; } } .py-60 { padding-top: 30px; padding-bottom: 30px; } @media (min-width: 576px) { .py-60 { padding-top: 40px; padding-bottom: 40px; } } @media (min-width: 992px) { .py-60 { padding-top: 60px; padding-bottom: 60px; } } .pt-60 { padding-top: 30px; } @media (min-width: 576px) { .pt-60 { padding-top: 40px; } } @media (min-width: 992px) { .pt-60 { padding-top: 60px; } } .pb-60 { padding-bottom: 30px; } @media (min-width: 576px) { .pb-60 { padding-bottom: 40px; } } @media (min-width: 992px) { .pb-60 { padding-bottom: 60px; } } /* ================================= padding Css End =========================== */ /* ========== Border Color Css ========== */ .border--base { border-color: hsl(var(--base)) !important; } .border--primary { border-color: hsl(var(--primary)) !important; } .border--secondary { border-color: hsl(var(--secondary)) !important; } .border--success { border-color: hsl(var(--success)) !important; } .border--danger { border-color: hsl(var(--danger)) !important; } .border--warning { border-color: hsl(var(--warning)) !important; } .border--info { border-color: hsl(var(--info)) !important; } /* Style the cursor elements */ .cursor, .cursor-trail { position: fixed; top: 0; left: 0; pointer-events: none; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1000; } .cursor { width: 4px; height: 4px; background-color: hsl(var(--secondary)); } .cursor-trail { width: 35px; height: 35px; background-color: rgba(0, 15, 92, 0.3); } /* ================================= preload Css End =========================== */ /* Preloader container styling */ #preloader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: hsl(var(--black)/0.9); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 9999; opacity: 1; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } /* Logo animation styling */ #preloader img { width: 100px; /* Adjust size as needed */ -webkit-animation: pulse 1.5s ease-in-out infinite, fade 1.5s ease-in-out infinite alternate; animation: pulse 1.5s ease-in-out infinite, fade 1.5s ease-in-out infinite alternate; } /* Scale (pulse) animation */ @-webkit-keyframes pulse { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); /* Adjust scale intensity */ } } @keyframes pulse { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); /* Adjust scale intensity */ } } /* Fade effect */ @-webkit-keyframes fade { 0% { opacity: 1; } 100% { opacity: 0.5; /* Adjust fade intensity */ } } @keyframes fade { 0% { opacity: 1; } 100% { opacity: 0.5; /* Adjust fade intensity */ } } /* ============================ 01.06 Scroll to Top =============================== */ .scroll-top { position: fixed; right: 30px; bottom: 30px; color: hsl(var(--white)); width: 48px; height: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 10px; z-index: 5; -webkit-transition: 0.5s; transition: 0.5s; cursor: pointer; -webkit-transform: scale(0); transform: scale(0); background-color: hsl(var(--primary)); } .scroll-top:hover { color: hsl(var(--white)); background-color: hsl(var(--secondary)); } .scroll-top.show { -webkit-transform: scale(1); transform: scale(1); } /* ============================ 02.01 header css =============================== */ .home-one-header { background: hsl(var(--black2)); z-index: 11; } @media (max-width: 991.98px) { .home-one-header { display: none; } } .home-one-header .nice-select:after { width: 7px; height: 7px; } .header-addres { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-addres .left-adders { position: relative; } .header-addres .left-adders::before, .header-addres .left-adders::after { content: ""; position: absolute; right: 0; bottom: 0; } .header-addres .left-adders::before { width: 93%; height: 24px; background: hsl(var(--primary)); bottom: -24px; left: 0; z-index: 111; -webkit-clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%); } .header-addres .left-adders::after { width: 38px; height: 24px; background: #0349C9; bottom: -24px; right: 18px; z-index: 22; -webkit-clip-path: polygon(0 0, 100% 0, 0 100%); clip-path: polygon(0 0, 100% 0, 0 100%); } .header-addres .left-adders .top-adders-contents { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: hsl(var(--primary)); padding: 24px 80px 0 30px; gap: 40px; position: relative; -webkit-clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%); } .header-addres .left-adders .adders-content { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; } .header-addres .left-adders .adders-content:hover i { background: hsl(var(--secondary)); } .header-addres .left-adders .adders-content i { background: hsl(var(--info)); width: 50px; height: 50px; border-radius: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: hsl(var(--white)); -webkit-transition: all 0.3s; transition: all 0.3s; } .header-addres .left-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 25px; } .header-addres .social-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .header-addres .social-icon a { background: hsl(var(--gray2)); width: 30px; height: 30px; border-radius: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--gray3); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; font-size: 12px; } .header-addres .social-icon a:hover { background: hsl(var(--primary)); color: hsl(var(--white)); font-size: 14px; } .header-addres .language-select-btn { background: none; border: 0; color: hsl(var(--gray4)); font-size: 16px; font-weight: 600; } .header-addres .language-select-btn .option { color: hsl(var(--secondary)); } /* ============================ 01.02 navbar css =============================== */ .navbar-home-one { background: none; width: 100%; position: absolute; top: 75px; z-index: 2; } .navbar-home-one.sticky { position: fixed; top: 0; width: 100%; z-index: 99; } .navbar-home-one.sticky .navbar-brand { margin-top: 0; } @media (max-width: 991.98px) { .navbar-home-one { top: 0; background: hsl(var(--white)); -webkit-box-shadow: 0px 3px 10px -4px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 10px -4px rgba(0, 0, 0, 0.2); } } .navbar-home-one .navbar-brand { margin-top: 25px; } @media (max-width: 991.98px) { .navbar-home-one .navbar-brand { margin-top: 0; padding-left: 10px; } } @media screen and (max-width: 424px) { .navbar-home-one .navbar-brand { margin-right: 0; width: 150px; } } .navbar-home-one .navbar { background: hsl(var(--white)); padding: 0; padding-left: 30px; -webkit-box-shadow: 0px 3px 10px -4px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 10px -4px rgba(0, 0, 0, 0.2); } @media (max-width: 991.98px) { .navbar-home-one .navbar { padding: 10px 0; -webkit-box-shadow: none; box-shadow: none; } } .navbar-home-one .navbar .btn-close, .navbar-home-one .navbar .navbar-toggler { border: 0; outline: none; -webkit-box-shadow: none; box-shadow: none; } .navbar-home-one .navbar .navbar-nav { gap: 25px; } @media (max-width: 991.98px) { .navbar-home-one .navbar .navbar-nav { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; gap: 0px; } } .navbar-home-one .navbar .navbar-nav li .nav-link { color: hsl(var(--gray3)); font-size: 16px; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; font-weight: 600; padding: 32px 0; } .navbar-home-one .navbar .navbar-nav li .nav-link.active, .navbar-home-one .navbar .navbar-nav li .nav-link:hover { color: hsl(var(--primary)); } @media (max-width: 991.98px) { .navbar-home-one .navbar .navbar-nav li .nav-link { padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .navbar-home-one .navbar .navbar-nav li .nav-link.show { border-bottom: none; } } .navbar-home-one .right-nav { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 30px; padding-left: 10px; } @media (max-width: 991.98px) { .navbar-home-one .right-nav { display: none; } } .navbar-home-one .btn-search { background: none; border: 0; color: hsl(var(--gray3)); font-size: 16px; } .navbar-home-one .btn-book { position: relative; display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.1em; text-align: center; text-transform: capitalize; border-radius: 4px; padding: 18px 25px; border: none; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; overflow: hidden; z-index: 1; background: rgba(255, 255, 255, 0.1); color: hsl(var(--white)); background: hsl(var(--primary)); color: hsl(var(--white)); font-size: 20px; font-weight: 700; padding: 35px 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; border-radius: 0; } .navbar-home-one .btn-book:hover { background-color: transparent; color: hsl(var(--white)); } .navbar-home-one .btn-book:hover::before { width: 100%; left: 0; right: auto; } .navbar-home-one .btn-book::before { content: ""; display: block; position: absolute; top: 0; left: auto; right: 0; bottom: 0; width: 0; height: 100%; background: hsl(var(--secondary)); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: -1; } @media (max-width: 1199.98px) { .navbar-home-one .btn-book { font-size: 16px; padding: 35px 15px; } } @media (max-width: 991.98px) { .navbar-home-one .btn-book { padding: 25px; } } /* ============================ 01.03 banner css =============================== */ .banner-area { position: relative; } @media (max-width: 991.98px) { .banner-area { padding-top: 65px; background-image: url("../images/banner-phone-bg.jpg"); } } .banner-area .slide-item { background-position: center top; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1; } .banner-area .slide-item::before, .banner-area .slide-item::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .banner-area .slide-item::before { background-image: url("../images/home-one/banner-bg.png"); background-position: center top; background-repeat: no-repeat; background-size: cover; z-index: -1; } .banner-area .slide-item::after { background: rgba(0, 0, 0, 0.6); z-index: -11; } .banner-content { padding: 285px 0 130px; } @media (max-width: 991.98px) { .banner-content { padding: 80px 0 90px; } } .banner-content h1 { font-size: 4.6875rem; font-weight: 700; line-height: 85px; max-width: 634px; } @media (max-width: 1399.98px) { .banner-content h1 { font-size: 4.0625rem; line-height: 76px; } } @media (max-width: 767.98px) { .banner-content h1 { font-size: 3.4375rem; line-height: 66px; } } @media (max-width: 575.98px) { .banner-content h1 { font-size: 2.5rem; line-height: 56px; } } @media screen and (max-width: 374px) { .banner-content h1 { font-size: 1.875rem; line-height: 40px; } } .banner-content p { max-width: 436px; color: #E8E8E9; padding-top: 30px; } @media screen and (max-width: 424px) { .banner-content p { padding-top: 10px; } } .banner-content .banner-btn { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 25px; padding: 40px 0; } @media screen and (max-width: 424px) { .banner-content .banner-btn { padding: 25px 0; } } @media screen and (max-width: 374px) { .banner-content .banner-btn { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; } .banner-content .banner-btn .btn-started, .banner-content .banner-btn .btn-service { width: 100%; } } .banner-content .btn-service { position: relative; display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.1em; text-align: center; text-transform: capitalize; border-radius: 4px; padding: 18px 25px; border: none; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; overflow: hidden; z-index: 1; background: rgba(255, 255, 255, 0.1); color: hsl(var(--white)); background: hsl(var(--primary)); } .banner-content .btn-service:hover { background-color: transparent; color: hsl(var(--white)); } .banner-content .btn-service:hover::before { width: 100%; left: 0; right: auto; } .banner-content .btn-service::before { content: ""; display: block; position: absolute; top: 0; left: auto; right: 0; bottom: 0; width: 0; height: 100%; background: hsl(var(--secondary)); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: -1; } .banner-content .btn-started { position: relative; display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.1em; text-align: center; text-transform: capitalize; border-radius: 4px; padding: 18px 25px; border: none; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; overflow: hidden; z-index: 1; background: rgba(255, 255, 255, 0.1); color: hsl(var(--white)); } .banner-content .btn-started:hover { background-color: transparent; color: hsl(var(--white)); } .banner-content .btn-started:hover::before { width: 100%; left: 0; right: auto; } .banner-content .btn-started::before { content: ""; display: block; position: absolute; top: 0; left: auto; right: 0; bottom: 0; width: 0; height: 100%; background: hsl(var(--secondary)); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: -1; } .banner-content .client-review { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; } .banner-content .client-review .client-img { padding-left: 10px; padding-right: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; } .banner-content .client-review .client-img button, .banner-content .client-review .client-img img { width: 50px; height: 50px; border-radius: 100px; border: 2px solid #2F3235; margin: 0 -10px; } .banner-content .client-review .client-img button { background: #373C3F; color: hsl(var(--white)); } /* ============================ 02.04 skilled css =============================== */ .skilled-area { overflow: hidden; /* Hover effect */ /* Pseudo-element for hover effect */ } .skilled-area .skilled-img { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .skilled-area .skilled-img figure { border-radius: 15px; } .skilled-area .skilled-img figure:last-child { grid-column: 1/-1; } .skilled-area .skilled-img img { width: 100%; height: auto; } .skilled-area .section-title p { padding-top: 25px; color: hsl(var(--gray3)); } @media (max-width: 991.98px) { .skilled-area .section-title p { padding-top: 10px; } } .skilled-area .progress-bar-content { display: grid; gap: 15px; width: 100%; margin-top: 30px; } .skilled-area .progress-bar-content .fs-18 { color: hsl(var(--secondary)); } .skilled-area .progress-bar-content .progress { height: 11px; margin-top: 3px; } .skilled-area .experiences-content { padding-top: 70px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 991.98px) { .skilled-area .experiences-content { padding-top: 40px; } } @media screen and (max-width: 524px) { .skilled-area .experiences-content { display: grid; gap: 20px; } } .skilled-area .experiences-content .exp-year { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .skilled-area .experiences-content .exp-year span { color: hsl(var(--secondary)); text-align: center; font-family: "Fraunces"; font-size: 75px; font-style: normal; font-weight: 700; line-height: 85px; border: 5px solid hsl(var(--primary)); width: 140px; height: 140px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 1399.98px) { .skilled-area .experiences-content .exp-year span { width: 100px; height: 100px; font-size: 50px; } } .skilled-area .experiences-content .exp-year .exp-title { color: hsl(var(--secondary)); font-size: 18px; font-weight: 700; line-height: 26px; width: 120px; background: var(--background-color); margin-left: -8px; padding: 15px 0; } @media (max-width: 1399.98px) { .skilled-area .experiences-content .exp-year .exp-title { font-size: 16px; } } .skilled-area .experiences-content .about-me-cto { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; position: relative; } .skilled-area .experiences-content .about-me-cto::before { content: ""; position: absolute; top: 50%; left: -13px; width: 1px; height: 40px; background: hsl(var(--gray5)); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .skilled-area .experiences-content .about-me-cto .fs-20 { color: hsl(var(--secondary)); font-size: 20px; font-weight: 700; line-height: 26px; } @media (max-width: 1399.98px) { .skilled-area .experiences-content .about-me-cto .fs-20 { font-size: 18px; } } .skilled-area .experiences-content .about-me-cto .fs-16 { color: hsl(var(--gray3)); } .skilled-area .experiences-content .about-me-cto img { border-radius: 100%; } .skilled-area .button { background-color: #007bff; /* Button color */ color: white; border: none; border-radius: 5px; padding: 15px 30px; font-size: 16px; cursor: pointer; position: relative; /* Position for the pseudo-element */ overflow: hidden; /* Ensure pseudo-element is contained */ -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } .skilled-area .button:hover { color: #007bff; /* Change text color on hover */ } .skilled-area .button::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.3); /* Light overlay */ -webkit-transform: scale(0); transform: scale(0); /* Start scaled down */ -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; /* Smooth transition */ z-index: 0; /* Behind the text */ } .skilled-area .button:hover::before { -webkit-transform: scale(1); transform: scale(1); /* Scale to full size on hover */ } .skilled-area .button span { position: relative; /* To bring text above the pseudo-element */ z-index: 1; /* Ensure text is above overlay */ } .progress-bar { -webkit-transition: width 1s ease-in-out; transition: width 1s ease-in-out; width: 0; } /* ============================ 02.05 who-we css =============================== */ .who-we-arae { background-image: url("../images/home-one/about-bg.jpg"); background-position: center top; background-repeat: no-repeat; background-size: cover; overflow: hidden; position: relative; z-index: 1; } .who-we-arae::before { content: url("../images/home-one/about-shape1.png"); position: absolute; right: 0; width: 160px; top: 30%; -webkit-animation: alltuchtopdown 3500ms ease-out infinite; animation: alltuchtopdown 3500ms ease-out infinite; z-index: -1; } @media screen and (max-width: 767px) { .who-we-arae::before { display: none; } } .who-we-arae .container { position: relative; } .who-we-arae .who-we-img { -webkit-mask-image: url("../images/home-one/about-img.png"); mask-image: url("../images/home-one/about-img.png"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 90%; mask-size: 90%; } @media screen and (max-width: 991px) { .who-we-arae .who-we-img { max-width: 90%; margin: 0 auto; } } @-webkit-keyframes maskMove { 0% { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; } 50% { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; } 100% { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; } } @keyframes maskMove { 0% { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; } 50% { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; } 100% { -webkit-mask-position: 0% 0%; mask-position: 0% 0%; } } .who-we-arae .who-tab-nav { margin-top: 40px; gap: 15px; } @media screen and (max-width: 424px) { .who-we-arae .who-tab-nav { gap: 5px; } } .who-we-arae .who-tab-nav button { position: relative; display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.1em; text-align: center; text-transform: capitalize; border-radius: 4px; padding: 18px 25px; border: none; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; overflow: hidden; z-index: 1; background: rgba(255, 255, 255, 0.1); color: hsl(var(--white)); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding: 8px 16px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.1); color: hsl(var(--gray5)); font-family: "Inter"; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; } .who-we-arae .who-tab-nav button:hover { background-color: transparent; color: hsl(var(--white)); } .who-we-arae .who-tab-nav button:hover::before { width: 100%; left: 0; right: auto; } .who-we-arae .who-tab-nav button::before { content: ""; display: block; position: absolute; top: 0; left: auto; right: 0; bottom: 0; width: 0; height: 100%; background: hsl(var(--secondary)); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: -1; } .who-we-arae .who-tab-nav button::before { background: hsl(var(--primary)); } .who-we-arae .who-tab-nav button.active { background: hsl(var(--primary)); color: hsl(var(--white)); } .who-we-arae .who-tab-content .tab-pane p { color: hsl(var(--gray5)); font-size: 18px; font-weight: 500; line-height: 30px; margin: 40px 0; max-width: 550px; } .who-we-arae .who-tab-content .tab-pane ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } @media (max-width: 575.98px) { .who-we-arae .who-tab-content .tab-pane ul { grid-template-columns: 1fr; } } .who-we-arae .who-tab-content .tab-pane ul li { color: hsl(var(--white)); font-size: 16px; font-weight: 500; line-height: 1.4; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .who-we-arae .who-tab-content .tab-pane ul li i { color: hsl(var(--primary)); } .who-we-arae .project-number { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.1); margin-top: 70px; } @media screen and (max-width: 991px) { .who-we-arae .project-number { margin-top: 40px; } } @media screen and (max-width: 424px) { .who-we-arae .project-number { padding: 10px; margin-top: 40px; text-align: center; } } @media screen and (max-width: 374px) { .who-we-arae .project-number { grid-template-columns: 1fr; gap: 10px; } } .who-we-arae .project-number .number-item { padding: 35px; position: relative; } @media screen and (max-width: 1199px) { .who-we-arae .project-number .number-item { padding: 25px; } } @media screen and (max-width: 424px) { .who-we-arae .project-number .number-item { padding: 5px; } } .who-we-arae .project-number .number-item::before { content: ""; position: absolute; top: 50%; right: 0; width: 1px; height: 65px; background: rgba(255, 255, 255, 0.1); -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media screen and (max-width: 424px) { .who-we-arae .project-number .number-item::before { display: none; } } .who-we-arae .project-number .number-item:last-child::before { display: none; } .who-we-arae .project-number .number-item .h4 { font-weight: 700; font-family: var(--heading-font); font-size: 2.25rem; } @media screen and (max-width: 1199px) { .who-we-arae .project-number .number-item .h4 { font-size: 1.875rem; margin-bottom: 0; } } @media screen and (max-width: 424px) { .who-we-arae .project-number .number-item .h4 { font-size: 1.25rem; } } .who-we-arae .project-number .number-item .fs-18 { color: hsl(var(--gray5)); font-weight: 400; } @media screen and (max-width: 1199px) { .who-we-arae .project-number .number-item .fs-18 { font-size: 0.9375rem; } } @media screen and (max-width: 767px) { .who-we-arae .project-number .number-item .fs-18 { font-size: 0.875rem; margin-top: 3px; } } .shadow__text { white-space: nowrap; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.0625rem; font-family: Arial, Helvetica, sans-serif; font-size: 9.0625rem; font-style: normal; font-weight: 800; text-transform: uppercase; position: absolute; top: 50%; left: -36%; -webkit-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); color: rgba(255, 255, 255, 0.1); } @media (max-width: 991.98px) { .shadow__text { -webkit-transform: translateY(0%) rotate(0deg); transform: translateY(0%) rotate(0deg); top: 0; left: 0; } } @media screen and (max-width: 424px) { .shadow__text { font-size: 5rem; } } /* ============================ 02.06 why-choose css =============================== */ .why-choose-area { background-image: url("../images/home-one/choose-shape.png"); background-position: center top; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .why-choose-area .why-choose-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; } @media (max-width: 767.98px) { .why-choose-area .why-choose-list { grid-template-columns: 1fr; } } .why-choose-area .why-choose-list .why-choose-item { border-radius: 10px; background: hsl(var(--white)); -webkit-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: start; padding: 24px; gap: 14px; -webkit-transition: all 0.2s; transition: all 0.2s; } .why-choose-area .why-choose-list .why-choose-item:hover { background: hsl(var(--primary)); -webkit-box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.2); -webkit-transform: translateY(-5px); transform: translateY(-5px); } .why-choose-area .why-choose-list .why-choose-item:hover .icon { background: hsl(var(--white)); } .why-choose-area .why-choose-list .why-choose-item:hover .content .fs-20, .why-choose-area .why-choose-list .why-choose-item:hover .content p { color: hsl(var(--white)); } .why-choose-area .why-choose-list .why-choose-item .icon { background: hsl(var(--secondary)/0.1); min-width: 60px; height: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 100px; -webkit-transition: all 0.3s; transition: all 0.3s; } .why-choose-area .why-choose-list .why-choose-item .content .fs-20 { color: hsl(var(--secondary)); -webkit-transition: all 0.2s; transition: all 0.2s; } .why-choose-area .why-choose-list .why-choose-item .content p { color: hsl(var(--gray3)); font-weight: 400; -webkit-transition: all 0.2s; transition: all 0.2s; } /* ============================ 02.07 services css =============================== */ .services-area { background-image: url("../images/home-one/services-bg.png"); background-position: center top; background-repeat: no-repeat; background-size: cover; overflow-x: hidden; } .services-area .services-item { border-radius: 15px; background: hsl(var(--white)); -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.05); padding: 50px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; z-index: 1; overflow: hidden; } @media (max-width: 1399.98px) { .services-area .services-item { padding: 50px 24px; } } .services-area .services-item::before, .services-area .services-item::after { content: ""; position: absolute; top: -100px; left: 30%; width: 0; height: 0; -webkit-transform: rotate(32.015deg); transform: rotate(32.015deg); background: rgba(0, 0, 0, 0.04); z-index: -1; -webkit-transition: all 0.4s; transition: all 0.4s; } .services-area .services-item::after { -webkit-transform: rotate(-32.015deg); transform: rotate(-32.015deg); } .services-area .services-item:hover { background: hsl(var(--primary)); -webkit-transform: translateY(-5px); transform: translateY(-5px); } .services-area .services-item:hover::before, .services-area .services-item:hover::after { width: 150px; height: 650px; } .services-area .services-item:hover .icon svg { -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(129deg) brightness(160%) contrast(103%); filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(129deg) brightness(160%) contrast(103%); } .services-area .services-item:hover a img, .services-area .services-item:hover button img { -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(129deg) brightness(160%) contrast(103%); filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(129deg) brightness(160%) contrast(103%); } .services-area .services-item:hover h5, .services-area .services-item:hover p { color: hsl(var(--white)) !important; } .services-area .services-item .icon { margin: 0 auto; text-align: center; } .services-area .services-item .icon svg { margin: 0 auto; } .services-area .services-item .content { text-align: center; } .services-area .services-item .content h5 { font-family: "Inter"; font-size: 1.625rem; padding: 20px 0 18px; color: hsl(var(--secondary)); margin-bottom: 0; } @media screen and (max-width: 1399px) { .services-area .services-item .content h5 { font-size: 1.4375rem; } } @media screen and (max-width: 767px) { .services-area .services-item .content h5 { font-size: 1.1875rem; } } .services-area .services-item .content p { color: hsl(var(--gray3)); font-weight: 400; } .services-area .services-item .content .btn-services { background: none; margin-top: 30px; display: inline-block; cursor: pointer; } /* ============================ 02.08 team css =============================== */ .team-area { background: #F8F8F8; } .team-area .team-item { border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.1); background: hsl(var(--white)); padding: 50px 30px; text-align: center; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .team-area .team-item:hover { background: hsl(var(--primary)); } .team-area .team-item:hover .image img { -webkit-transform: scale(1.1); transform: scale(1.1); } .team-area .team-item:hover .fs-20, .team-area .team-item:hover p { color: hsl(var(--white)) !important; } .team-area .team-item:hover .social-links a { background: hsl(var(--white)); } .team-area .team-item .image { width: 150px; height: 150px; margin: 0 auto; border-radius: 100px; overflow: hidden; } .team-area .team-item .image img { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .team-area .team-item .content { padding-top: 24px; } .team-area .team-item .content .fs-20 { color: hsl(var(--secondary)); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .team-area .team-item .content p { font-size: 16px; padding: 5px 0 10px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .team-area .team-item .social-links { margin-top: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .team-area .team-item .social-links a { font-size: 14px; color: hsl(var(--secondary)); -webkit-transition: all 0.3s linear; transition: all 0.3s linear; width: 35px; height: 35px; background: rgba(33, 38, 68, 0.06); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 100px; } .team-area .team-item .social-links a:hover { background: hsl(var(--white)); } .expert-team { position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; padding-left: 10px; overflow: hidden; } .expert-team__img { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; border-radius: 10px; -webkit-transition: all 0.3s; transition: all 0.3s; position: relative; z-index: 1; padding-left: 10px; padding-bottom: 10px; } .expert-team__img .image-effect { border-radius: 10px; overflow: hidden; } .expert-team__img::before, .expert-team__img::after { content: ""; position: absolute; z-index: -1; } .expert-team__img::before { width: 95%; height: 95%; border: 2px solid hsl(var(--gray5)); border-radius: 10px; left: -10px; bottom: -10px; -webkit-transition: border-color 0.3s; transition: border-color 0.3s; } @media screen and (max-width: 424px) { .expert-team__img::before { border-color: hsl(var(--primary)); } } .expert-team__img::after { width: 137px; height: 137px; border-radius: 30px 30px 30px 8px; background: hsl(var(--gray5)); left: -10px; bottom: -10px; -webkit-transition: background 0.3s; transition: background 0.3s; } @media screen and (max-width: 424px) { .expert-team__img::after { background: hsl(var(--primary)); } } .expert-team__img:hover::before { border-color: hsl(var(--primary)); } .expert-team__img:hover::after { background: hsl(var(--primary)); } .expert-team__img:hover .social-links a { -webkit-transform: translateX(0px); transform: translateX(0px); } .expert-team__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .expert-team__img .social-links { position: absolute; top: 0; right: 0; display: grid; gap: 10px; -webkit-transform: translate(-15px, 15px); transform: translate(-15px, 15px); z-index: 1; } .expert-team__img .social-links a { background: hsl(var(--primary)); color: hsl(var(--white)); font-size: 15px; width: 40px; height: 40px; border-radius: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; right: 0; -webkit-transform: translateX(60px); transform: translateX(60px); -webkit-transition: all 0.3s; transition: all 0.3s; } .expert-team__img .social-links a:hover { background: hsl(var(--white)); color: hsl(var(--primary)); } .expert-team__img .social-links a:nth-child(1) { -webkit-transition: all 0.1s; transition: all 0.1s; } .expert-team__img .social-links a:nth-child(2) { -webkit-transition: all 0.2s; transition: all 0.2s; } .expert-team__img .social-links a:nth-child(3) { -webkit-transition: all 0.3s; transition: all 0.3s; } .expert-team__img .social-links a:nth-child(4) { -webkit-transition: all 0.4s; transition: all 0.4s; } .expert-team__img .social-links a:nth-child(5) { -webkit-transition: all 0.5s; transition: all 0.5s; } @media screen and (max-width: 424px) { .expert-team__img .social-links a { -webkit-transform: translateX(0px); transform: translateX(0px); } } .expert-team__text { margin-top: 30px; } @media screen and (max-width: 424px) { .expert-team__text h4 { font-size: 1.25rem; margin-bottom: 0; } } .expert-team__text p { font-size: 16px; padding: 5px 0 0; } /* ============================ 02.09 project css =============================== */ .project-area { background: #082334; overflow: hidden; position: relative; } .project-area .container { position: relative; } .project-area::after { content: ""; position: absolute; bottom: -15px; left: 0; width: 100%; height: 130px; background: var(--background-color); } .project-area .shadow__text { top: 34%; } .project-area .section-title p { color: hsl(var(--gray4)); } .project-area .btn-project { position: relative; display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.1em; text-align: center; text-transform: capitalize; border-radius: 4px; padding: 18px 25px; border: none; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; overflow: hidden; z-index: 1; background: rgba(255, 255, 255, 0.1); color: hsl(var(--white)); background: hsl(var(--primary)); } .project-area .btn-project:hover { background-color: transparent; color: hsl(var(--white)); } .project-area .btn-project:hover::before { width: 100%; left: 0; right: auto; } .project-area .btn-project::before { content: ""; display: block; position: absolute; top: 0; left: auto; right: 0; bottom: 0; width: 0; height: 100%; background: hsl(var(--secondary)); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: -1; } .project-area .project-slide .owl-stage-outer { margin-right: -2000px !important; } .project-item { position: relative; -webkit-transition: all 0.4s; transition: all 0.4s; } .project-item:hover { -webkit-transform: translateY(-10px); transform: translateY(-10px); -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); } .project-item:hover .content { background: hsl(var(--primary)); } .project-item:hover .content::before { background: hsl(var(--white)); } .project-item:hover .content .fs-20, .project-item:hover .content p { color: hsl(var(--white)); } .project-item .image img { width: 100%; height: auto; } .project-item .content { position: absolute; bottom: 0; width: 90%; background: hsl(var(--white)); padding: 40px 40px 40px 55px; -webkit-transition: all 0.4s; transition: all 0.4s; } @media (max-width: 767.98px) { .project-item .content { padding: 24px; } } @media screen and (max-width: 424px) { .project-item .content { padding: 18px; } } .project-item .content::before { content: ""; position: absolute; top: 50%; left: 40px; width: 3px; height: 50px; background: hsl(var(--primary)); -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 767.98px) { .project-item .content::before { left: 0; } } .project-item .content .fs-20 { color: hsl(var(--secondary)); font-size: 24px; text-transform: capitalize; } @media (max-width: 575.98px) { .project-item .content .fs-20 { font-size: 18px; } } .project-item .content p { color: hsl(var(--gray3)); font-size: 18px; } @media (max-width: 575.98px) { .project-item .content p { font-size: 16px; } } /* ============================ 02.10 pricing css =============================== */ .pricing-area .project-nav { display: -webkit-box; display: -ms-flexbox; display: flex; border-radius: 30px; background: #F8FBFF; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 276px; margin: 50px auto; padding: 7px; } .pricing-area .project-nav button { font-size: 20px; color: hsl(var(--gray3)); font-weight: 500; border-radius: 32.912px; padding-left: 30px; padding-right: 30px; } .pricing-area .project-nav button.active { background: hsl(var(--white)); -webkit-box-shadow: 0px 6.582px 26.33px 0px rgba(18, 2, 47, 0.1); box-shadow: 0px 6.582px 26.33px 0px rgba(18, 2, 47, 0.1); color: hsl(var(--secondary)); } .pricing-area .pricing-item { border-radius: 12px; background: hsl(var(--white)); padding: 40px 30px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .pricing-area .pricing-item:hover { -webkit-transform: translateY(-8px); transform: translateY(-8px); } .pricing-area .pricing-item:hover .price, .pricing-area .pricing-item:hover .pricing-btn { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--white)); } .pricing-area .pricing-item .title { text-align: center; } .pricing-area .pricing-item .title .fs-20 { color: hsl(var(--secondary)); padding: 15px 0 5px; } .pricing-area .pricing-item .title p { color: hsl(var(--gray3)); } .pricing-area .pricing-item .price { border-radius: 12px; background: #D8E5FE; font-family: "Fraunces"; padding: 5px 30px; font-size: 30px; font-weight: 700; color: hsl(var(--primary)); text-align: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media (max-width: 1399.98px) { .pricing-area .pricing-item .price { font-size: 24px; padding: 5px 10px; } } .pricing-area .pricing-item .price .per-month { font-size: 25px; } .pricing-area .pricing-item .list-unstyled { display: grid; gap: 10px; margin: 30px 0; } .pricing-area .pricing-item .list-unstyled li { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: hsl(var(--gray3)); gap: 10px; } .pricing-area .pricing-item .list-unstyled li::before { content: "\f111"; font-weight: 900; font-family: "Font Awesome 6 free"; font-size: 5px; } .pricing-area .pricing-item .list-unstyled li::after { content: "\f00c"; font-weight: 900; font-family: "Font Awesome 6 free"; font-size: 15px; margin-left: auto; color: hsl(var(--success)); } .pricing-area .pricing-item .list-unstyled li.list-erro::after { content: "\f00d"; color: hsl(var(--error)); } .pricing-area .pricing-item .pricing-btn { border: 1px solid hsl(var(--gray4)); border-radius: 4px; padding: 12px 20px; text-transform: uppercase; font-size: 15px; font-weight: 500; color: hsl(var(--gray3)); width: 100%; text-align: center; } @media (max-width: 1399.98px) { .pricing-area .pricing-item .pricing-btn { padding: 12px 15px; } } .pricing-area .pricing-item .pricing-btn:hover { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--white)); } /* ============================ 02.11 client-feedback css =============================== */ .client-feedback-area { background-image: url("../images/home-one/feedback-bg.jpg"); background-position: center top; background-repeat: no-repeat; background-size: cover; overflow-x: hidden; } .client-feedback-area .container { position: relative; } .client-feedback-area .feedback-item { border-radius: 12px; background: #203644; padding: 50px; min-height: 600px; } @media screen and (max-width: 767px) { .client-feedback-area .feedback-item { min-height: 450px; padding: 40px 30px; } } .client-feedback-area .feedback-item p { color: hsl(var(--gray4)); font-family: "Fraunces"; font-size: 32px; font-weight: 400; line-height: 45px; margin: 30px 0; } @media (max-width: 1199.98px) { .client-feedback-area .feedback-item p { font-size: 28px; line-height: 1.3; } } @media screen and (max-width: 991px) { .client-feedback-area .feedback-item p { font-size: 20px; } } @media (max-width: 575.98px) { .client-feedback-area .feedback-item p { font-size: 18px; } } .client-feedback-area .feedback-item .feedback-admin { position: relative; padding-left: 45px; } .client-feedback-area .feedback-item .feedback-admin::before { content: ""; position: absolute; top: 15px; left: 0; width: 30px; height: 1px; background: hsl(var(--primary)); } .client-feedback-area .feedback-item .feedback-admin .feedback-name { font-size: 20px; font-weight: 600; color: hsl(var(--white)); } @media screen and (max-width: 991px) { .client-feedback-area .feedback-item .feedback-admin .feedback-name { font-size: 18px; } } .client-feedback-area .feedback-item .feedback-admin .feedback-company { font-size: 16px; color: hsl(var(--gray4)); padding-top: 5px; } .client-feedback-area .owl-stage-outer { margin-right: -2000px !important; } .client-feedback-area .arrow-btn-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; gap: 20px; } .client-feedback-area .arrow-btn-group button { width: 56px; height: 56px; color: hsl(var(--gray3)); background: #203644; border-radius: 5px; font-size: 25px; -webkit-transition: all 0.3s; transition: all 0.3s; } .client-feedback-area .arrow-btn-group button:hover { background: hsl(var(--primary)); color: hsl(var(--white)); } /* ============================ 02.13 contact-info css =============================== */ .contact-info-area { background-image: url("../images/home-one/contact-info-bg.jpg"); background-position: center top; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1; } .contact-info-area::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(19, 24, 57, 0.7); z-index: -1; } .contact-info-area .contact-box { display: grid; grid-template-columns: repeat(2, 1fr); background: hsl(var(--primary)); -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 767.98px) { .contact-info-area .contact-box { grid-template-columns: 1fr; } } .contact-info-area .contact-box .left-contact, .contact-info-area .contact-box .right-contact { padding: 70px 40px; } @media (max-width: 767.98px) { .contact-info-area .contact-box .left-contact, .contact-info-area .contact-box .right-contact { padding: 50px 30px; } } .contact-info-area .contact-box .right-contact { background: hsl(var(--white)); } .contact-info-area .contact-address { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 30px; margin-bottom: 24px; } .contact-info-area .contact-address .icon { margin-top: 10px; } .contact-info-area .contact-address .content .fs-20 { color: hsl(var(--white)); } .contact-info-area .contact-address .content p { font-size: 16px; color: hsl(var(--gray5)); max-width: 268px; margin-top: 10px; } .contact-info-area .contact-address .content a { color: hsl(var(--gray5)); } .contact-info-area .contact-address .content a:hover { color: hsl(var(--secondary)); } .contact-info-area .contact-from { display: grid; gap: 24px; } .contact-info-area .contact-from label { color: hsl(var(--gray3)); font-size: 16px; font-weight: 600; } .contact-info-area .contact-from textarea, .contact-info-area .contact-from input { border-radius: 4px; border: 1px solid rgba(19, 24, 57, 0.13); font-family: "Inter"; font-size: 16px; font-style: normal; font-weight: 400; outline: none; -webkit-box-shadow: none; box-shadow: none; width: 100%; padding: 12px 17px; } .contact-info-area .contact-from textarea::-webkit-input-placeholder, .contact-info-area .contact-from input::-webkit-input-placeholder { color: rgba(85, 85, 85, 0.62); } .contact-info-area .contact-from textarea::-moz-placeholder, .contact-info-area .contact-from input::-moz-placeholder { color: rgba(85, 85, 85, 0.62); } .contact-info-area .contact-from textarea:-ms-input-placeholder, .contact-info-area .contact-from input:-ms-input-placeholder { color: rgba(85, 85, 85, 0.62); } .contact-info-area .contact-from textarea::-ms-input-placeholder, .contact-info-area .contact-from input::-ms-input-placeholder { color: rgba(85, 85, 85, 0.62); } .contact-info-area .contact-from textarea::placeholder, .contact-info-area .contact-from input::placeholder { color: rgba(85, 85, 85, 0.62); } .contact-info-area .contact-from textarea { height: 100px; padding-top: 10px; } .contact-info-area .contact-from .btn-consultation { position: relative; display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.1em; text-align: center; text-transform: capitalize; border-radius: 4px; padding: 18px 25px; border: none; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; overflow: hidden; z-index: 1; background: rgba(255, 255, 255, 0.1); color: hsl(var(--white)); background: hsl(var(--primary)); width: 100%; } .contact-info-area .contact-from .btn-consultation:hover { background-color: transparent; color: hsl(var(--white)); } .contact-info-area .contact-from .btn-consultation:hover::before { width: 100%; left: 0; right: auto; } .contact-info-area .contact-from .btn-consultation::before { content: ""; display: block; position: absolute; top: 0; left: auto; right: 0; bottom: 0; width: 0; height: 100%; background: hsl(var(--secondary)); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: -1; } .contact-info-area.contact-info__two .left-contact { padding: 0; width: 100%; height: 100%; } @media (max-width: 767.98px) { .contact-info-area.contact-info__two .left-contact { height: 350px; } } .contact-info-area.contact-info__two .left-contact iframe { width: 100%; height: 100%; } /* ============================ 02.12 blog css =============================== */ .blog-area .blog-content { display: grid; } .blog-area .section-title { padding-bottom: 0px; } .blog-area .section-title p { color: hsl(var(--gray3)); padding: 10px 0 20px; } .blog-area .section-title .btn-blog-post { position: relative; display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.1em; text-align: center; text-transform: capitalize; border-radius: 4px; padding: 18px 25px; border: none; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; overflow: hidden; z-index: 1; background: rgba(255, 255, 255, 0.1); color: hsl(var(--white)); display: inline-block; background: hsl(var(--primary)); } .blog-area .section-title .btn-blog-post:hover { background-color: transparent; color: hsl(var(--white)); } .blog-area .section-title .btn-blog-post:hover::before { width: 100%; left: 0; right: auto; } .blog-area .section-title .btn-blog-post::before { content: ""; display: block; position: absolute; top: 0; left: auto; right: 0; bottom: 0; width: 0; height: 100%; background: hsl(var(--secondary)); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: -1; } .blog-area .blog-item { border-radius: 10px; position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; overflow: hidden; z-index: 2; } .blog-area .blog-item:hover .image-effect img { -webkit-transform: scale(1.05); transform: scale(1.05); } .blog-area .blog-item::before { content: ""; position: absolute; border-radius: 12px; background: linear-gradient(179deg, rgba(255, 255, 255, 0) 35.36%, rgba(0, 15, 92, 0.5) 72.28%); width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } .blog-area .blog-item .image-effect { height: 100%; } .blog-area .blog-item .image-effect img { border-radius: 10px; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: all 0.3s; transition: all 0.3s; } .blog-area .blog-item .blog-content { position: absolute; bottom: 0; padding: 20px; z-index: 1; } @media screen and (max-width: 424px) { .blog-area .blog-item .blog-content { padding: 10px; } } .blog-area .blog-item .blog-content .date { background: hsl(var(--primary)); padding: 5px 8px; display: inline-block; color: hsl(var(--white)); font-size: 12px; font-weight: 600; margin-bottom: 15px; width: 100px; text-align: center; } .blog-area .blog-item .blog-content h6 { font-size: 20px; font-weight: 700; color: hsl(var(--white)); font-family: "Inter"; } @media screen and (max-width: 424px) { .blog-area .blog-item .blog-content h6 { font-size: 16px; } } /* ============================ 02.14 company logo css =============================== */ .company-logo-area .container { overflow: hidden; } .company-logo-area .company-logo-content { overflow: hidden; white-space: nowrap; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .company-logo-area .company-logo-content .com-logo { width: auto; height: 100px; border-radius: 4px; border: 1px solid rgba(14, 0, 0, 0.1); background: var(--white); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 20px; } /* ============================ 02.15 footer css =============================== */ .footer-area { background-image: url("../images/home-one/footer-img.jpg"); background-position: center top; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1; } .footer-area::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(19, 24, 57, 0.7); z-index: -1; } .footer-area .footer-content { display: grid; grid-template-columns: 340px 1fr; } @media screen and (max-width: 991px) { .footer-area .footer-content { grid-template-columns: 1fr; } } .footer-area .footer-content .footer-addres { background: hsl(var(--primary)); display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 50px 30px; } .footer-area .footer-content .footer-addres .addres-text { display: block; } .footer-area .footer-content .footer-addres .addres-text p { color: hsl(var(--gray5)); font-size: 16px; padding: 30px 0 40px; } .footer-area .footer-content .footer-addres .social-list { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; } .footer-area .footer-content .footer-addres .social-list a { color: hsl(var(--gray5)); font-size: 14px; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; background: rgba(255, 255, 255, 0.1); width: 40px; height: 40px; border-radius: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .footer-area .footer-content .footer-addres .social-list a:hover { background: hsl(var(--secondary)); } .footer-area .footer-content .footer-wedget-area { background: rgba(19, 24, 57, 0.89); } .footer-area .footer-content .footer-wedget-area .wedget-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 80px 40px; } .footer-area .footer-content .footer-wedget-area .wedget-item .wedget-title { font-size: 20px; font-weight: 700; font-family: "inter"; color: var(--white); margin-bottom: 15px; } .footer-area .footer-content .footer-wedget-area .wedget-item .wedget-list { display: grid; gap: 15px; } .footer-area .footer-content .footer-wedget-area .wedget-item .wedget-list a { position: relative; font-size: 16px; font-family: "Inter"; color: hsl(var(--gray5)); padding-left: 20px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .footer-area .footer-content .footer-wedget-area .wedget-item .wedget-list a:hover { color: hsl(var(--primary)); } .footer-area .footer-content .footer-wedget-area .wedget-item .wedget-list a:hover:before { width: 15px; } .footer-area .footer-content .footer-wedget-area .wedget-item .wedget-list a::before { content: ""; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 5px; height: 5px; background: hsl(var(--primary)); border-radius: 50px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .footer-area .footer-content .footer-wedget-area .wedget-item .wedget-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .footer-area .footer-content .footer-wedget-area .wedget-item .wedget-gallery img { border-radius: 5px; } .footer-area .footer-content .footer-wedget-area .newsletter p { color: hsl(var(--gray4)); } .footer-area .footer-content .footer-wedget-area .newsletter p span { color: hsl(var(--primary)); } .footer-area .footer-content .footer-wedget-area .newsletter form { position: relative; margin-top: 20px; } .footer-area .footer-content .footer-wedget-area .newsletter form input { border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); background: none; -webkit-box-shadow: none; box-shadow: none; height: 50px; width: 100%; padding: 10px 50px 10px 15px; color: hsl(var(--white)); } .footer-area .footer-content .footer-wedget-area .newsletter form button { color: hsl(var(--white)); position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .footer-area .footer-content .copyright { border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 16px; text-align: center; padding: 24px 0; } .footer-area .footer-content .copyright p { color: hsl(var(--white)/0.7); } .error-area .error-404 { text-align: center; } .error-area .error-404 h2 { margin-top: 40px; } .error-area .error-404 p { margin: 20px auto 30px; max-width: 550px; } .error-area .error-404 .btn-back { position: relative; display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.1em; text-align: center; text-transform: capitalize; border-radius: 4px; padding: 18px 25px; border: none; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; overflow: hidden; z-index: 1; background: rgba(255, 255, 255, 0.1); color: hsl(var(--white)); background: hsl(var(--primary)); } .error-area .error-404 .btn-back:hover { background-color: transparent; color: hsl(var(--white)); } .error-area .error-404 .btn-back:hover::before { width: 100%; left: 0; right: auto; } .error-area .error-404 .btn-back::before { content: ""; display: block; position: absolute; top: 0; left: auto; right: 0; bottom: 0; width: 0; height: 100%; background: hsl(var(--secondary)); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: -1; } .text-slider { position: relative; z-index: 1; padding: 15px 0; margin: -15px 0; } .text-slider::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; background: hsl(var(--black)); -webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%); clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%); } .text-slider .text-item { background: hsl(var(--primary)); overflow: hidden; white-space: nowrap; width: 100%; color: rgba(255, 255, 255, 0.6); white-space: nowrap; -webkit-text-stroke-color: rgba(255, 255, 255, 0.6); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px; font-family: Arial, Helvetica, sans-serif; font-size: 145px; line-height: 1.3; font-weight: 700; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } @media (max-width: 991.98px) { .text-slider .text-item { font-size: 80px; } } .text-slider .text-item span { display: inline-block; padding-right: 20px; /* Adds gap at the end */ -webkit-animation: scrollText 15s linear infinite; animation: scrollText 15s linear infinite; } @-webkit-keyframes scrollText { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(calc(-100% - 20px)); transform: translateX(calc(-100% - 20px)); /* 20px for the gap */ } } @keyframes scrollText { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(calc(-100% - 20px)); transform: translateX(calc(-100% - 20px)); /* 20px for the gap */ } } /* ============================ 03.01 header-top css =============================== */ .header-top-area { background: hsl(var(--two-header-color)); padding: 30px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); z-index: 11; } @media (max-width: 991.98px) { .header-top-area { display: none; } } .header-top-area .header-top-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .header-top-area .header-top-right-address { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 40px; } .header-top-area .top-adders-contents { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 30px; position: relative; } .header-top-area .top-adders-contents .header-add-lien { width: 1px; height: 25px; background: rgba(255, 255, 255, 0.19); } .header-top-area .top-adders-contents .adders-content { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; } .header-top-area .top-adders-contents .adders-content:hover i { background: hsl(var(--primary)); } .header-top-area .top-adders-contents .adders-content i { background: rgba(255, 255, 255, 0.19); width: 50px; height: 50px; border-radius: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: hsl(var(--white)); -webkit-transition: all 0.3s; transition: all 0.3s; } .header-top-area .top-adders-contents .adders-content .fs-16 { color: hsl(var(--gray4)); } .header-top-area .social-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .header-top-area .social-icon a { background: rgba(255, 255, 255, 0.1); width: 40px; height: 40px; border-radius: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--gray3); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; font-size: 14px; } .header-top-area .social-icon a:hover { background: hsl(var(--primary)); color: hsl(var(--white)); font-size: 14px; } /* ============================ 03.02 navbar css =============================== */ .navbar-home-two { background: hsl(var(--two-header-color)); z-index: 2; } @media (max-width: 991.98px) { .navbar-home-two { padding: 15px 0; } } .navbar-home-two.sticky { position: fixed; top: 0; width: 100%; background: hsl(var(--two-header-color)); -webkit-box-shadow: 0px 3px 10px -4px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 10px -4px rgba(0, 0, 0, 0.2); z-index: 99; } @media screen and (max-width: 424px) { .navbar-home-two .navbar-brand { margin-right: 0; width: 190px; } } @media screen and (max-width: 374px) { .navbar-home-two .navbar-brand { margin-right: 0; width: 150px; } } .navbar-home-two .navbar { padding: 0; } .navbar-home-two .navbar .navbar-nav { gap: 25px; } @media (max-width: 991.98px) { .navbar-home-two .navbar .navbar-nav { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; gap: 5px; } } .navbar-home-two .navbar .navbar-nav li .nav-link { color: hsl(var(--white)); font-size: 16px; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; font-weight: 600; padding: 22px 0; } .navbar-home-two .navbar .navbar-nav li .nav-link.active, .navbar-home-two .navbar .navbar-nav li .nav-link:hover { color: hsl(var(--primary)); } @media (max-width: 991.98px) { .navbar-home-two .navbar .navbar-nav li .nav-link { padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } } .navbar-home-two .navbar .navbar-nav li .nav-link .nav-link.show { border-bottom: 0; } .navbar-home-two .navbar .btn-searc { color: hsl(var(--gray3)); } .navbar-home-two .btn-book { position: relative; display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.1em; text-align: center; text-transform: capitalize; border-radius: 4px; padding: 18px 25px; border: none; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; overflow: hidden; z-index: 1; background: rgba(255, 255, 255, 0.1); color: hsl(var(--white)); background: hsl(var(--primary)); color: hsl(var(--white)); font-size: 20px; font-weight: 700; padding: 23px 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; border-radius: 0; } .navbar-home-two .btn-book:hover { background-color: transparent; color: hsl(var(--white)); } .navbar-home-two .btn-book:hover::before { width: 100%; left: 0; right: auto; } .navbar-home-two .btn-book::before { content: ""; display: block; position: absolute; top: 0; left: auto; right: 0; bottom: 0; width: 0; height: 100%; background: hsl(var(--secondary)); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: -1; } @media (max-width: 1199.98px) { .navbar-home-two .btn-book { font-size: 16px; padding: 20px 15px; } } @media (max-width: 991.98px) { .navbar-home-two .btn-book { padding: 25px; } } @media (max-width: 991.98px) { .navbar-home-two .offcanvas { background: hsl(var(--secondary)); } } .navbar-home-two .btn-close { -webkit-filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(128deg) brightness(104%) contrast(103%); filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(128deg) brightness(104%) contrast(103%); } .navbar-respond .btn-booking { width: 43px; padding: 10px; } @media screen and (max-width: 424px) { .navbar-respond .btn-booking { padding: 7px; width: 35px; height: 40px; } } .navbar-respond .navbar-toggler, .navbar-respond .btn-close { outline: none; -webkit-box-shadow: none; box-shadow: none; border: 0; opacity: 1; } .navbar-respond .btn-booking, .navbar-respond .btn-searc, .navbar-respond .navbar-toggler { background: hsl(var(--white)) !important; border-radius: 10px; color: hsl(var(--gray2)); margin: 0 3px; } .navbar-respond .navbar-toggler { height: 45px; } .navbar-respond .btn-searc { width: 43px; padding: 10px; } @media screen and (max-width: 424px) { .navbar-respond .btn-searc { width: 35px; padding: 9px; } } @media (max-width: 991.98px) { .navbar-respond .offcanvas-body { padding-left: 30px; padding-right: 30px; } } .navbar-respond .dropdown-menu-end { right: 0; left: auto; } .navbar-respond .nav-item:hover .nav-link { color: hsl(var(--primary)); } .navbar-respond .nav-item:hover .dropdown-menu { -webkit-transition: 0.5s; transition: 0.5s; opacity: 1; } @media all and (min-width: 991.98px) { .navbar-respond .nav-item:hover .dropdown-menu { visibility: visible; top: 100%; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } } @media (max-width: 991.98px) { .navbar-respond .nav-item.dropdown .nav-link { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .navbar-respond .nav-item.dropdown .nav-link::after { content: "\f107"; font-weight: 900; font-family: "Font Awesome 6 free"; } } .navbar-respond .nav-item .dropdown-menu { -webkit-transition: 0.5s; transition: 0.5s; margin-top: 0; padding: 15px 20px; min-width: 200px; border: 1px solid hsl(var(--border-color)); } @media all and (min-width: 991.98px) { .navbar-respond .nav-item .dropdown-menu { display: block; opacity: 0; visibility: hidden; } } .navbar-respond .nav-item .dropdown-menu.fade-down { top: 80%; -webkit-transform: rotateX(-75deg); transform: rotateX(-75deg); -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; } .navbar-respond .nav-item .dropdown-menu.fade-up { top: 100%; } .navbar-respond .nav-item .dropdown-menu a { padding: 5px 0px; background: none; -webkit-transition: 0.5s; transition: 0.5s; position: relative; font-weight: 500; font-size: 14px; border: 0; color: hsl(var(--gray3)); } .navbar-respond .nav-item .dropdown-menu a::before { content: ""; position: absolute; left: -10px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 2px; width: 10px; z-index: 99; background: hsl(var(--primary)); opacity: 0; border-radius: unset; -webkit-transition: 0.5s; transition: 0.5s; } .navbar-respond .nav-item .dropdown-menu a.active, .navbar-respond .nav-item .dropdown-menu a:hover { padding-left: 5px; color: hsl(var(--primary)); } .navbar-respond .nav-item .dropdown-menu a.active::before, .navbar-respond .nav-item .dropdown-menu a:hover::before { opacity: 1; left: -15px; } @media screen and (max-width: 424px) { .navbar-respond .offcanvas-title { width: 120px; } } /* ============================ 03.03 banner css =============================== */ .home-two-banner { background-image: url("../images/home-two/banner-bg.png"); background-position: center top; background-repeat: no-repeat; background-size: cover; background-color: hsl(var(--two-section)); padding-top: 200px; } @media (max-width: 991.98px) { .home-two-banner { padding-top: 0; } } @media (max-width: 991.98px) { .home-two-banner .content { padding: 170px 0 100px; } } @media (max-width: 767.98px) { .home-two-banner .content { max-width: 400px; } } .home-two-banner .content h1 { color: hsl(var(--white)); font-size: 75px; font-weight: 700; line-height: 1.1; } @media (max-width: 1399.98px) { .home-two-banner .content h1 { font-size: 55px; } } @media (max-width: 767.98px) { .home-two-banner .content h1 { font-size: 40px; } } .home-two-banner .content p { color: #E8E8E9; padding: 15px 0 35px; } .home-two-banner .content .banner-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 50px; } .home-two-banner .content .get-started-btn { color: hsl(var(--white)); text-align: center; font-family: "inter"; font-size: 16px; font-weight: 600; text-transform: uppercase; padding: 16px 24px; border: none; border-radius: 4px; cursor: pointer; -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; background: rgba(255, 255, 255, 0.1); position: relative; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: 1; overflow: hidden; background: hsl(var(--primary)); } @media screen and (max-width: 424px) { .home-two-banner .content .get-started-btn { font-size: 14px; padding: 12px 20px; } } .home-two-banner .content .get-started-btn::before { content: ""; background: hsl(var(--secondary)); width: 0; height: 100%; opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); position: absolute; top: 50%; left: 50%; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; z-index: -1; border: 1px solid transparent; } .home-two-banner .content .get-started-btn:hover { -webkit-box-shadow: 0px 6px 15px rgba(255, 255, 255, 0.1); box-shadow: 0px 6px 15px rgba(255, 255, 255, 0.1); -webkit-transform: translateY(-5px); transform: translateY(-5px); } .home-two-banner .content .get-started-btn:hover::before { width: 100%; opacity: 1; } .home-two-banner .banner-right { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 70px 0; } @media (max-width: 991.98px) { .home-two-banner .banner-right { display: none; } } .home-two-banner .banner-right .banner-img-item { gap: 24px; } .home-two-banner .banner-right .banner-img-item img { width: 100%; height: auto; border-radius: 10px; } .home-two-banner .banner-right .banner-img-item img:nth-child(2) { margin-top: 24px; } .home-two-banner .banner-right .banner-img-item .alltuchtopdown-shape { -webkit-animation: alltuchtopdown 3500ms ease-out infinite; animation: alltuchtopdown 3500ms ease-out infinite; margin-left: -20px; margin-top: 40px; } .home-two-banner .banner-right .banner-img-item .round-shape { -webkit-animation: rotatedHalf 4500ms ease-out infinite; animation: rotatedHalf 4500ms ease-out infinite; margin-left: -20px; } .home-two-banner .banner-right .banner-img-item .image-effect { border-radius: 0; } .home-two-banner .banner-right .banner-img-item .image-effect:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } .home-two-banner .banner-right .banner-img-item:nth-child(1) { margin-top: 60px; } .home-two-banner .banner-right .banner-img-item:nth-child(1) .image-effect { border-radius: 0px 0px 200px 200px; } .home-two-banner .banner-right .banner-img-item:nth-child(2) { margin-top: 30px; } .home-two-banner .banner-right .banner-img-item:nth-child(2) .image-effect { border-radius: 200px 200px 0px 0px; } .home-two-banner .banner-right .banner-img-item:nth-child(2) .image-effect:last-child { border-radius: 0px 0px 200px 200px; -webkit-transform: translateX(-10px); transform: translateX(-10px); margin-top: 24px; } .home-two-banner .banner-right .banner-img-item:nth-child(3) .image-effect { border-radius: 0px 0px 200px 200px; } .home-two-banner .banner__shape svg { position: absolute; } .home-two-banner .banner__shape svg:nth-child(1) { top: 50px; fill: hsl(var(--two-section)); -webkit-animation: pulse-border 1500ms ease-out infinite; animation: pulse-border 1500ms ease-out infinite; } .home-two-banner .banner__shape svg:nth-child(2) { top: 60px; left: 208px; fill: hsl(var(--white)); -webkit-animation: rotatedHalf 4500ms ease-out infinite; animation: rotatedHalf 4500ms ease-out infinite; } .video-play-btn { z-index: 10; -webkit-box-sizing: content-box; box-sizing: content-box; display: block; -webkit-transition: 0.5s; transition: 0.5s; position: relative; } .video-play-btn::before, .video-play-btn::after { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); display: block; width: 50px; height: 50px; background: hsl(var(--primary)); border-radius: 50%; } .video-play-btn::before { z-index: 0; -webkit-animation: pulse-border 1500ms ease-out infinite; animation: pulse-border 1500ms ease-out infinite; } .video-play-btn:after { z-index: 1; -webkit-transition: all 200ms; transition: all 200ms; } .video-play-btn i { display: block; position: relative; z-index: 3; color: hsl(var(--white)); } /* ============================ 03.04 who-we css =============================== */ .home-two-who-we-area { overflow: hidden; } .home-two-who-we-area .who-we-img { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .home-two-who-we-area .who-we-img img { width: 100%; height: auto; } .home-two-who-we-area .who-we-img .img-item { text-align: center; } .home-two-who-we-area .who-we-img .img-item .who-image { overflow: hidden; } .home-two-who-we-area .who-we-img .img-item .who-image img { -webkit-transition: all 0.3s; transition: all 0.3s; } .home-two-who-we-area .who-we-img .img-item .who-image img:hover { -webkit-transform: scale(1.05); transform: scale(1.05); } .home-two-who-we-area .who-we-img .img-item:nth-child(1) .who-image:nth-child(1) { border-radius: 600px 600px 0px 0px; } .home-two-who-we-area .who-we-img .img-item:nth-child(1) .who-image:nth-child(2) { width: auto; margin: 40px auto 0; -webkit-animation: alltuchtopdown 3500ms ease-out infinite; animation: alltuchtopdown 3500ms ease-out infinite; } .home-two-who-we-area .who-we-img .img-item:nth-child(1) .who-image:nth-child(2) img { width: 70%; } .home-two-who-we-area .who-we-img .img-item:nth-child(2) { margin-top: 40px; text-align: left; } .home-two-who-we-area .who-we-img .img-item:nth-child(2) .who-image:nth-child(1) { border-radius: 600px; max-width: 218px; max-height: 219px; } .home-two-who-we-area .who-we-img .img-item:nth-child(2) .who-image:nth-child(2) { border-radius: 0px 0px 600px 600px; margin-top: 24px; } .home-two-who-we-area .content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 23px; } @media (max-width: 575.98px) { .home-two-who-we-area .content { grid-template-columns: 1fr; } } .home-two-who-we-area .content .content-item { background: hsl(var(--white)); padding: 0px 30px 30px; border-radius: 8px; margin-top: 15px; } .home-two-who-we-area .content .content-item .icon { background: hsl(var(--primary)); display: inline-block; border-radius: 0px 0px 100px 100px; width: 60px; height: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: -15px; position: relative; z-index: 1; } .home-two-who-we-area .content .content-item .icon::before { content: ""; position: absolute; top: 0; right: -11px; width: 11px; height: 17px; background: #1153C9; -webkit-clip-path: polygon(0 1%, 100% 100%, 0% 100%); clip-path: polygon(0 1%, 100% 100%, 0% 100%); } .home-two-who-we-area .content .content-item .content-text h4 { padding: 10px 0; } .home-two-who-we-area .content .who-list { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 575.98px) { .home-two-who-we-area .content .who-list { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 374px) { .home-two-who-we-area .content .who-list { grid-template-columns: 1fr; } } .home-two-who-we-area .content .who-list li { color: hsl(var(--secondary)); } .home-two-who-we-area .content .who-list li i { color: hsl(var(--primary)); } /* ============================ 03.05 services css =============================== */ .home-two-services-area { background: hsl(var(--two-section)); position: relative; z-index: 1; } .home-two-services-area::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 230px; background-color: var(--background-color); z-index: -1; } .home-two-services-area .services-title-shape { white-space: nowrap; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.0625rem; font-family: Arial, Helvetica, sans-serif; font-size: 9.0625rem; font-style: normal; font-weight: 800; position: absolute; top: 0%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: rgba(255, 255, 255, 0.1); } .home-two-services-area.services-pages-area { background: none; } .home-two-services-area .section-title-two p { color: hsl(var(--gray5)); } .home-two-services-area .services-item { border-radius: 0px 0px 12px 12px; background: hsl(var(--white)); -webkit-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.1); -webkit-transition: all 0.3s; transition: all 0.3s; } .home-two-services-area .services-item:hover { -webkit-transform: translateY(-10px); transform: translateY(-10px); } .home-two-services-area .services-item:hover .img { border-radius: 0; } .home-two-services-area .services-item:hover .img img { -webkit-transform: scale(1.05); transform: scale(1.05); } .home-two-services-area .services-item .img { border-radius: 0px 0px 600px 600px; overflow: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } .home-two-services-area .services-item .img img { -webkit-transition: all 0.3s; transition: all 0.3s; width: 100%; } .home-two-services-area .services-item .content { text-align: center; padding: 0 30px 30px; } .home-two-services-area .services-item .content .icon { width: 87px; height: 87px; border-radius: 100%; border: 5px solid hsl(var(--white)); background: hsl(var(--primary)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 auto; margin-top: -41px; z-index: 1; position: relative; } .home-two-services-area .services-item .content h4 { font-family: "Inter"; padding: 15px 0; } /* ============================ 03.06 your-business css =============================== */ .home-two-your-business-area .business-category { margin-top: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 65px; } @media (max-width: 991.98px) { .home-two-your-business-area .business-category { gap: 24px; } } @media (max-width: 575.98px) { .home-two-your-business-area .business-category { display: grid; } } .home-two-your-business-area .business-category .border-tt { width: 4px; height: 132px; background: hsl(var(--primary)); } @media (max-width: 575.98px) { .home-two-your-business-area .business-category .border-tt { display: none; } } .home-two-your-business-area .business-category .nav { display: grid; gap: 20px; } .home-two-your-business-area .business-category .business-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: left; background: hsl(var(--white)); border-radius: 100px 0px 0px 100px; padding: 0; -webkit-transition: all 0.4s; transition: all 0.4s; position: relative; z-index: 1; } .home-two-your-business-area .business-category .business-btn::after { content: ""; position: absolute; top: 0; width: 4px; height: 0%; background: hsl(var(--primary)); right: -33px; opacity: 0; -webkit-transition: all 0.4s; transition: all 0.4s; } .home-two-your-business-area .business-category .business-btn.active, .home-two-your-business-area .business-category .business-btn:hover { background: hsl(var(--primary)); border-radius: 0px 100px 100px 0px; } .home-two-your-business-area .business-category .business-btn.active::after, .home-two-your-business-area .business-category .business-btn:hover::after { opacity: 1; height: 100%; } .home-two-your-business-area .business-category .business-btn.active .icon, .home-two-your-business-area .business-category .business-btn:hover .icon { border-right: 2px dashed rgba(0, 0, 0, 0.2); } .home-two-your-business-area .business-category .business-btn.active .icon img, .home-two-your-business-area .business-category .business-btn:hover .icon img { -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(129deg) brightness(160%) contrast(103%); filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(129deg) brightness(160%) contrast(103%); } .home-two-your-business-area .business-category .business-btn.active .text .fs-20, .home-two-your-business-area .business-category .business-btn:hover .text .fs-20 { color: hsl(var(--white)); } .home-two-your-business-area .business-category .business-btn.active .text p, .home-two-your-business-area .business-category .business-btn:hover .text p { color: hsl(var(--white)); } .home-two-your-business-area .business-category .business-btn .icon { border-right: 2px dashed rgba(0, 0, 0, 0.1); width: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .home-two-your-business-area .business-category .business-btn .icon img { height: 34px; -webkit-transition: all 0.3s; transition: all 0.3s; } .home-two-your-business-area .business-category .business-btn .text { padding: 15px 24px; } .home-two-your-business-area .business-category .business-btn .text .fs-20 { font-size: 18px; font-weight: 600; color: hsl(var(--secondary)); -webkit-transition: all 0.3s; transition: all 0.3s; } .home-two-your-business-area .business-category .business-btn .text p { color: hsl(var(--gray3)); font-size: 14px; -webkit-transition: all 0.3s; transition: all 0.3s; } @media (max-width: 575.98px) { .home-two-your-business-area .business-category .business-category-content { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media screen and (max-width: 374px) { .home-two-your-business-area .business-category .business-category-content { display: grid; gap: 30px; text-align: center; } } .home-two-your-business-area .business-category .business-category-content ul { display: grid; gap: 10px; } .home-two-your-business-area .business-category .business-category-content ul li { font-size: 16px; font-weight: 600; color: hsl(var(--secondary)); } .home-two-your-business-area .business-category .business-category-content ul li i { color: hsl(var(--primary)); } .home-two-your-business-area .business-category .business-category-content .yeas-title { border: 5px solid hsl(var(--primary)); font-size: 75px; display: grid; font-family: "Fraunces"; color: hsl(var(--black)); font-weight: 700; max-width: 172px; margin-top: 15px; padding: 20px; line-height: 56px; } @media (max-width: 575.98px) { .home-two-your-business-area .business-category .business-category-content .yeas-title { margin: 0 auto; padding: 10px 15px; } } @media screen and (max-width: 374px) { .home-two-your-business-area .business-category .business-category-content .yeas-title { margin-right: auto; } } .home-two-your-business-area .business-category .business-category-content .yeas-title span { font-family: "Inter"; font-size: 20px; font-weight: 600; color: hsl(var(--secondary)); line-height: 1.3; padding-top: 10px; } .home-two-your-business-area .business-right { position: relative; margin-left: 60px; } .home-two-your-business-area .business-right::before { content: ""; position: absolute; top: 43%; left: -60px; width: 15px; height: 243px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='243' viewBox='0 0 15 243' fill='none'%3E%3Crect x='11' width='4' height='243' fill='%23266FF2'/%3E%3Crect width='4' height='132' fill='%23266FF2'/%3E%3C/svg%3E"); background-repeat: no-repeat; display: none; } .home-two-your-business-area .business-right .business-video { position: absolute; top: 60px; left: -60px; border: 10px solid hsl(var(--white)); border-radius: 100px; overflow: hidden; z-index: 2; } @media (max-width: 575.98px) { .home-two-your-business-area .business-right .business-video img { width: 100px; } } .home-two-your-business-area .business-right .business-video::before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(38, 111, 242, 0.67); } .home-two-your-business-area .business-right .business-video .video-play-btn { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50px; height: 50px; border-radius: 50%; background: hsl(var(--primary)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 30px; color: hsl(var(--white)); cursor: pointer; } .home-two-your-business-area .business-right .business-video .video-play-btn i { font-size: 16px; } .home-two-your-business-area .business-right .business-info { position: relative; z-index: 1; border-radius: 600px 600px 0px 0px; overflow: hidden; } .home-two-your-business-area .business-right .business-info:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } .home-two-your-business-area .business-right .business-info::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, left bottom, color-stop(29.71%, rgba(255, 255, 255, 0)), color-stop(72.44%, rgba(0, 15, 92, 0.77))); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 29.71%, rgba(0, 15, 92, 0.77) 72.44%); z-index: 1; } .home-two-your-business-area .business-right .business-info img { width: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; } .home-two-your-business-area .business-right .business-info .info-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24px; padding: 40px; position: absolute; bottom: 0; left: 0; z-index: 1; } @media (max-width: 575.98px) { .home-two-your-business-area .business-right .business-info .info-text { padding: 20px; } } .home-two-your-business-area .business-right .business-info .info-text img { width: 75px; height: 75px; } /* ============================ 03.07 project css =============================== */ .home-two-project-area { background: hsl(var(--two-section)); position: relative; z-index: 1; } .home-two-project-area::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-image: url("../images/home-two/project-shape.png"); z-index: -1; } .home-two-project-area .btn-project { position: relative; display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.1em; text-align: center; text-transform: capitalize; border-radius: 4px; padding: 18px 25px; border: none; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; overflow: hidden; z-index: 1; background: rgba(255, 255, 255, 0.1); color: hsl(var(--white)); background: hsl(var(--primary)); } .home-two-project-area .btn-project:hover { background-color: transparent; color: hsl(var(--white)); } .home-two-project-area .btn-project:hover::before { width: 100%; left: 0; right: auto; } .home-two-project-area .btn-project::before { content: ""; display: block; position: absolute; top: 0; left: auto; right: 0; bottom: 0; width: 0; height: 100%; background: hsl(var(--secondary)); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: -1; } .home-two-project-area .project-item { border-radius: 15px; overflow: hidden; position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; } .home-two-project-area .project-item:hover .content { bottom: 40px; } .home-two-project-area .project-item:hover .content { -webkit-transform: translateY(0%); transform: translateY(0%); } .home-two-project-area .project-item .image { height: 100%; } .home-two-project-area .project-item .image .image-effect { height: 430px; } .home-two-project-area .project-item .image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .home-two-project-area .project-item .content { position: absolute; bottom: -100%; left: 0; right: 0; text-align: center; padding: 20px 30px; -webkit-transition: all 0.3s; transition: all 0.3s; background: none; background: hsl(var(--secondary)/0.7); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); width: 80%; margin: 0 auto; border-radius: 10px; } .home-two-project-area .project-item .content::before { display: none; } .home-two-project-area .project-item .content button { position: relative; display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.1em; text-align: center; text-transform: capitalize; border-radius: 4px; padding: 18px 25px; border: none; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; overflow: hidden; z-index: 1; background: rgba(255, 255, 255, 0.1); color: hsl(var(--white)); padding: 5px 10px; background: hsl(var(--primary)); border-radius: 5px; margin-bottom: 10px; font-size: 14px; } .home-two-project-area .project-item .content button:hover { background-color: transparent; color: hsl(var(--white)); } .home-two-project-area .project-item .content button:hover::before { width: 100%; left: 0; right: auto; } .home-two-project-area .project-item .content button::before { content: ""; display: block; position: absolute; top: 0; left: auto; right: 0; bottom: 0; width: 0; height: 100%; background: hsl(var(--secondary)); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: -1; } .home-two-project-area .project-item .content h6 { font-size: 20px; color: hsl(var(--white)); font-family: "Inter"; line-height: 26px; font-weight: 500; } /* ============================ 03.08 pricing css =============================== */ .home-two-pricing-area .project-nav { display: -webkit-box; display: -ms-flexbox; display: flex; border-radius: 30px; background: #F8FBFF; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 276px; margin: 50px auto; padding: 7px; } .home-two-pricing-area .project-nav button { font-size: 20px; color: hsl(var(--gray3)); font-weight: 500; border-radius: 32.912px; padding-left: 30px; padding-right: 30px; } .home-two-pricing-area .project-nav button.active { background: hsl(var(--white)); -webkit-box-shadow: 0px 6.582px 26.33px 0px rgba(18, 2, 47, 0.1); box-shadow: 0px 6.582px 26.33px 0px rgba(18, 2, 47, 0.1); color: hsl(var(--secondary)); } .home-two-pricing-area .pricing__row .col-lg-4:nth-child(2) .pricing-item { background: hsl(var(--primary)); } .home-two-pricing-area .pricing__row .col-lg-4:nth-child(2) .pricing-item .pricing__head__btn { color: hsl(var(--white)); } .home-two-pricing-area .pricing__row .col-lg-4:nth-child(2) .pricing-item .pricing__content .pricing-number { color: hsl(var(--white)); } .home-two-pricing-area .pricing__row .col-lg-4:nth-child(2) .pricing-item .pricing__content p { color: hsl(var(--gray5)); } .home-two-pricing-area .pricing__row .col-lg-4:nth-child(2) .pricing-item .pricing__content ul li { color: hsl(var(--white)); } .home-two-pricing-area .pricing__row .col-lg-4:nth-child(2) .pricing-item .pricing__content ul li:nth-child(odd) { background: hsl(var(--white)/0.04); } .home-two-pricing-area .pricing__row .col-lg-4:nth-child(2) .pricing-item .pricing-btn { color: hsl(var(--white)); } .home-two-pricing-area .pricing-item { background: hsl(var(--white)/0.1); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border-radius: 10px; border: 1px solid hsl(var(--border-color)); position: relative; z-index: 1; padding: 40px 40px 50px; -webkit-transition: all 0.3s; transition: all 0.3s; } @media screen and (max-width: 1199px) { .home-two-pricing-area .pricing-item { padding: 30px 25px 40px; } } @media (max-width: 767.98px) { .home-two-pricing-area .pricing-item { padding: 30px 20px 40px; } } .home-two-pricing-area .pricing-item .pricing__head__btn { font-size: 30px; font-weight: 700; color: hsl(var(--secondary)); margin-bottom: 10px; } @media screen and (max-width: 767px) { .home-two-pricing-area .pricing-item .pricing__head__btn { font-size: 1.25rem; } } .home-two-pricing-area .pricing-item .pricing__content .pricing-number { font-family: "Fraunces"; font-size: 50px; color: hsl(var(--primary)); font-weight: 700; line-height: 1.3; } @media screen and (max-width: 767px) { .home-two-pricing-area .pricing-item .pricing__content .pricing-number { font-size: 1.875rem; } } .home-two-pricing-area .pricing-item .pricing__content .pricing-number sup { font-size: 35px; } @media screen and (max-width: 767px) { .home-two-pricing-area .pricing-item .pricing__content .pricing-number sup { font-size: 1.25rem; } } .home-two-pricing-area .pricing-item .pricing__content p { color: hsl(var(--secondary)); font-size: 16px; display: inline-block; font-family: var(--body-font); } .home-two-pricing-area .pricing-item .pricing__content ul { text-align: left; display: grid; gap: 5px; margin: 30px 0; } .home-two-pricing-area .pricing-item .pricing__content ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; font-size: 1.125rem; gap: 5px; color: hsl(var(--gray3)); padding: 10px; border-radius: 10px; } @media screen and (max-width: 1199px) { .home-two-pricing-area .pricing-item .pricing__content ul li { font-size: 1rem; } } @media screen and (max-width: 767px) { .home-two-pricing-area .pricing-item .pricing__content ul li { font-size: 1rem; } } .home-two-pricing-area .pricing-item .pricing__content ul li:nth-child(odd) { background: hsl(var(--primary)/0.03); } .home-two-pricing-area .pricing-item .pricing__content ul li .las { background: hsl(var(--white)/0.9); padding: 3px; border-radius: 5px; margin-right: 5px; } .home-two-pricing-area .pricing-item .pricing__content ul li .la-check { color: hsl(var(--success)); } .home-two-pricing-area .pricing-item .pricing__content ul li .la-times { color: hsl(var(--danger)); } .home-two-pricing-area .pricing-item .pricing-btn { position: relative; display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.1em; text-align: center; text-transform: capitalize; border-radius: 4px; padding: 18px 25px; border: none; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; overflow: hidden; z-index: 1; background: rgba(255, 255, 255, 0.1); color: hsl(var(--white)); background: hsl(var(--white)/0.1); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-box-shadow: 0px 6.582px 26.33px 0px rgba(18, 2, 47, 0.05); box-shadow: 0px 6.582px 26.33px 0px rgba(18, 2, 47, 0.05); width: 100%; position: relative; text-align: center; font-size: 18px; border-radius: 10px; color: hsl(var(--secondary)); padding: 15px 10px; } .home-two-pricing-area .pricing-item .pricing-btn:hover { background-color: transparent; color: hsl(var(--white)); } .home-two-pricing-area .pricing-item .pricing-btn:hover::before { width: 100%; left: 0; right: auto; } .home-two-pricing-area .pricing-item .pricing-btn::before { content: ""; display: block; position: absolute; top: 0; left: auto; right: 0; bottom: 0; width: 0; height: 100%; background: hsl(var(--secondary)); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: -1; } /* ============================ 03.09 consulting-services css =============================== */ .home-two-consulting-services-area { position: relative; z-index: 1; background-image: url(../images/home-one/services-bg.png); background-position: center top; background-repeat: no-repeat; background-size: cover; } .home-two-consulting-services-area .consulting-services-img { position: relative; } .home-two-consulting-services-area .consulting-services-img .image { position: relative; z-index: 1; padding-left: 30px; padding-right: 30px; } .home-two-consulting-services-area .consulting-services-img .image::before { content: ""; position: absolute; bottom: 0; left: 0; z-index: -1; width: 100%; height: 80%; border-radius: 600px 600px 0px 0px; background-color: hsl(var(--primary)); background-image: url("../images/home-two/csbg.png"); } .home-two-consulting-services-area .consulting-services-img .image img { width: 100%; height: auto; } .home-two-consulting-services-area .consulting-services-img .logo-circle { position: absolute; bottom: -45px; left: -45px; z-index: 1; } @media screen and (max-width: 424px) { .home-two-consulting-services-area .consulting-services-img .logo-circle { bottom: -65px; left: -60px; -webkit-transform: scale(0.6); transform: scale(0.6); } } .home-two-consulting-services-area .who-we-img { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .home-two-consulting-services-area .who-we-img img { width: 100%; height: auto; } .home-two-consulting-services-area .who-we-img .img-item { text-align: center; } .home-two-consulting-services-area .who-we-img .img-item:nth-child(1) img:nth-child(1) { border-radius: 600px 600px 0px 0px; } .home-two-consulting-services-area .who-we-img .img-item:nth-child(1) img:nth-child(2) { width: auto; margin: 40px auto 0; -webkit-animation: alltuchtopdown 3500ms ease-out infinite; animation: alltuchtopdown 3500ms ease-out infinite; } .home-two-consulting-services-area .who-we-img .img-item:nth-child(2) { margin-top: 40px; text-align: left; } .home-two-consulting-services-area .who-we-img .img-item:nth-child(2) img:nth-child(1) { border-radius: 600px; max-width: 218px; max-height: 219px; } .home-two-consulting-services-area .who-we-img .img-item:nth-child(2) img:nth-child(2) { border-radius: 0px 0px 600px 600px; margin-top: 24px; } .home-two-consulting-services-area .content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; max-width: 500px; } @media (max-width: 425.98px) { .home-two-consulting-services-area .content { grid-template-columns: 1fr; } } .home-two-consulting-services-area .content .progress-circle-content { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 425.98px) { .home-two-consulting-services-area .content .progress-circle-content { display: grid; grid-template-columns: 100px 1fr; } } .home-two-consulting-services-area .content .progress-circle-content .fs-20 { color: hsl(var(--secondary)); font-weight: bold; } .home-two-consulting-services-area .content .circle-proge { position: relative; width: 100px; height: 100px; border-radius: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 1; } .home-two-consulting-services-area .content .circle-proge__inner { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 50%; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84' fill='none'%3E%3Cpath d='M42.4483 4.23762C42.4803 1.91014 44.3981 0.0271184 46.7103 0.294769C54.0427 1.14351 61.0438 3.93619 66.9722 8.41836C74.0254 13.7509 79.1916 21.1963 81.7182 29.6698C84.2448 38.1433 83.9997 47.2021 81.0188 55.5266C78.0379 63.8511 72.4767 71.0064 65.1456 75.9499C57.8145 80.8934 49.0965 83.3669 40.2615 83.0101C31.4266 82.6532 22.9364 79.4847 16.0278 73.9661C9.11926 68.4475 4.1533 60.8671 1.8534 52.3293C-0.0797348 45.153 -0.0444326 37.6155 1.91723 30.4997C2.53583 28.2557 5.00045 27.1835 7.17019 28.0264C9.33994 28.8692 10.3871 31.3085 9.82671 33.5677C8.4811 38.9931 8.52676 44.6952 9.9926 50.1367C11.8255 56.9409 15.7831 62.982 21.2888 67.3801C26.7945 71.7781 33.5607 74.3032 40.6017 74.5876C47.6426 74.872 54.5904 72.9007 60.4329 68.961C66.2754 65.0213 70.7073 59.319 73.0829 52.6849C75.4586 46.0507 75.6538 38.8313 73.6403 32.0784C71.6267 25.3255 67.5096 19.392 61.8886 15.1422C57.3933 11.7436 52.1241 9.56379 46.5899 8.7776C44.2853 8.45022 42.4164 6.56509 42.4483 4.23762Z' fill='%23266FF2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-color: #E3EDFF; z-index: -1; } .home-two-consulting-services-area .content .circle-proge__text p { font-size: 20px; color: hsl(var(--secondary)); font-weight: 700; } .home-two-consulting-services-area .content .content-item { background: hsl(var(--white)); padding: 0px 30px 30px; border-radius: 8px; margin-top: 15px; } .home-two-consulting-services-area .content .content-item .icon { background: hsl(var(--primary)); display: inline-block; border-radius: 0px 0px 100px 100px; width: 60px; height: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: -15px; position: relative; z-index: 1; } .home-two-consulting-services-area .content .content-item .icon::before { content: ""; position: absolute; top: 0; right: -11px; width: 11px; height: 17px; background: #1153C9; -webkit-clip-path: polygon(0 1%, 100% 100%, 0% 100%); clip-path: polygon(0 1%, 100% 100%, 0% 100%); } .home-two-consulting-services-area .content .who-list { grid-column: 1/-1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (max-width: 425.98px) { .home-two-consulting-services-area .content .who-list { grid-template-columns: 1fr; } } .home-two-consulting-services-area .content .who-list li { color: hsl(var(--secondary)); } .home-two-consulting-services-area .content .who-list li i { color: hsl(var(--primary)); } .consulting-call-btn { margin-top: 50px; } .consulting-call-btn .call-btn { background: #E3EDFF; border: 2px solid hsl(var(--primary)); border-radius: 100px; padding: 10px 20px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px; font-family: "Fraunces"; font-size: 32px; font-weight: 700; color: hsl(var(--primary)); } @media screen and (max-width: 1499px) { .consulting-call-btn .call-btn { font-size: 24px; } } /* ============================ 03.10 team css =============================== */ .home-two-team-area .section-title-two p { margin: 0 auto; } .team-two-item { border: 1px solid hsl(var(--border-color)); border-radius: 12px; padding: 30px; position: relative; z-index: 1; overflow: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } .team-two-item:hover { background: hsl(var(--primary)); } .team-two-item:hover::before, .team-two-item:hover::after { width: 150px; height: 650px; } .team-two-item:hover .desecration-title { background: hsl(var(--white)); } .team-two-item:hover .content p, .team-two-item:hover .content .fs-20 { color: hsl(var(--white)); } .team-two-item:hover .social-links li { list-style: none; } .team-two-item:hover .social-links a { background: hsl(var(--white)); color: hsl(var(--primary)); } .team-two-item::before, .team-two-item::after { content: ""; position: absolute; top: -100px; left: 30%; width: 0; height: 0; -webkit-transform: rotate(32.015deg); transform: rotate(32.015deg); background: rgba(0, 0, 0, 0.04); z-index: -1; -webkit-transition: all 0.4s; transition: all 0.4s; } .team-two-item::after { -webkit-transform: rotate(-32.015deg); transform: rotate(-32.015deg); } .team-two-item .image { width: 120px; height: 120px; overflow: hidden; border-radius: 100%; background: hsl(var(--gray5)); } .team-two-item .image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .team-two-item .desecration-title { background: hsl(var(--gray5)/0.6); border-radius: 100px; color: hsl(var(--secondary)); padding: 8px 15px; font-size: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; font-weight: 500; } @media screen and (max-width: 1199px) { .team-two-item .desecration-title { font-size: 11px; padding: 7px 10px; } } .team-two-item .desecration-title i { font-size: 16px; } .team-two-item .content { margin: 20px 0 30px; } .team-two-item .content .fs-20 { color: hsl(var(--secondary)); } .team-two-item .content p { color: hsl(var(--gray3)); font-size: 16px; padding-top: 5px; } .team-two-item .social-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; } .team-two-item .social-links a { width: 40px; height: 40px; color: hsl(var(--gray3)); background: hsl(var(--gray5)/0.6); border-radius: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .team-two-item .social-links a:hover { background: hsl(var(--secondary)); color: hsl(var(--white)); } /* ============================ 03.11 client-feedback css =============================== */ .home-two-client-feedback-area { background-image: url("../images/home-one/feedback-bg.jpg"); background-position: center top; background-repeat: no-repeat; background-size: cover; overflow-x: hidden; background-color: hsl(var(--two-section)); } .home-two-client-feedback-area .owl-carousel .owl-stage-outer { margin-right: -2000px; } .home-two-client-feedback-area .feedback-content .section-title p { color: hsl(var(--gray4)); max-width: 389px; margin-top: 15px; } .home-two-client-feedback-area .feedback-content .client-review { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; } .home-two-client-feedback-area .feedback-content .client-review .client-img { padding-left: 10px; padding-right: 10px; } .home-two-client-feedback-area .feedback-content .client-review .client-img button, .home-two-client-feedback-area .feedback-content .client-review .client-img img { width: 50px; height: 50px; border-radius: 100px; border: 2px solid #2F3235; margin: 0 -10px; } .home-two-client-feedback-area .feedback-content .client-review .client-img button { background: #373C3F; color: hsl(var(--white)); } .home-two-client-feedback-area .feedback-item { border-radius: 20px; border: 2px solid rgba(255, 255, 255, 0.1); background: #203644; padding: 0 40px 60px; text-align: center; margin-top: 50px; } @media (max-width: 1399.98px) { .home-two-client-feedback-area .feedback-item { padding: 0 20px 50px; } } .home-two-client-feedback-area .feedback-item img, .home-two-client-feedback-area .feedback-item svg { margin-top: -50px; } .home-two-client-feedback-area .feedback-item p { color: var(--gray4); font-family: "Fraunces"; font-size: 26px; font-weight: 400; margin: 30px 0; font-weight: 400; line-height: 1.4; } @media (max-width: 1399.98px) { .home-two-client-feedback-area .feedback-item p { font-size: 20px; } } .home-two-client-feedback-area .feedback-item .feedback-admin { position: relative; } .home-two-client-feedback-area .feedback-item .feedback-admin .feedback-name { font-size: 20px; font-weight: 600; color: hsl(var(--white)); } .home-two-client-feedback-area .feedback-item .feedback-admin .feedback-company { font-size: 16px; color: hsl(var(--gray4)); } .home-two-client-feedback-area .arrow-btn-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; margin: 40px 0; } @media (max-width: 1399.98px) { .home-two-client-feedback-area .arrow-btn-group { margin: 30px 0; } } .home-two-client-feedback-area .arrow-btn-group button { width: 56px; height: 56px; color: var(--gray3); background: #203644; border-radius: 5px; font-size: 25px; } /* ============================ 03.12 blog css =============================== */ .home-two-blog-area.blog-single-area .blog-item .blog-img .image-effect { height: 360px; border-radius: 10px; } .home-two-blog-area .blog-content { display: grid; } .home-two-blog-area .blog-content ul { list-style: none; margin-bottom: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; } .home-two-blog-area .blog-content ul li { border-radius: 10px; text-decoration: none; font-size: 14px; color: hsl(var(--secondary)/0.7); } .home-two-blog-area .blog-content ul li:hover { color: hsl(var(--primary)); } .home-two-blog-area .blog-content h4 { -webkit-transition: all 0.3s; transition: all 0.3s; } .home-two-blog-area .blog-content h4:hover { color: hsl(var(--primary)); } .home-two-blog-area .section-title { padding-bottom: 0px; } .home-two-blog-area .section-title p { color: hsl(var(--gray3)); padding: 10px 0 20px; } .home-two-blog-area .section-title .btn-blog-post { color: hsl(var(--white)); text-align: center; font-family: "inter"; font-size: 16px; font-weight: 600; text-transform: uppercase; padding: 16px 24px; border: none; border-radius: 4px; cursor: pointer; -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; background: rgba(255, 255, 255, 0.1); position: relative; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: 1; overflow: hidden; display: inline-block; background: hsl(var(--primary)); } @media screen and (max-width: 424px) { .home-two-blog-area .section-title .btn-blog-post { font-size: 14px; padding: 12px 20px; } } .home-two-blog-area .section-title .btn-blog-post::before { content: ""; background: hsl(var(--secondary)); width: 0; height: 100%; opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); position: absolute; top: 50%; left: 50%; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; z-index: -1; border: 1px solid transparent; } .home-two-blog-area .section-title .btn-blog-post:hover { -webkit-box-shadow: 0px 6px 15px rgba(255, 255, 255, 0.1); box-shadow: 0px 6px 15px rgba(255, 255, 255, 0.1); -webkit-transform: translateY(-5px); transform: translateY(-5px); } .home-two-blog-area .section-title .btn-blog-post:hover::before { width: 100%; opacity: 1; } .home-two-blog-area .blog-item { border-radius: 16px; background: -webkit-gradient(linear, left bottom, left top, from(#FFF), to(#FFF)), -webkit-gradient(linear, left bottom, left top, from(#FFF), to(#FFF)), -webkit-gradient(linear, left bottom, left top, from(#FFF), to(#FFF)), #FFF; background: linear-gradient(0deg, #FFF 0%, #FFF 100%), linear-gradient(0deg, #FFF 0%, #FFF 100%), linear-gradient(0deg, #FFF 0%, #FFF 100%), #FFF; padding: 15px; } .home-two-blog-area .blog-item:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } .home-two-blog-area .blog-item .blog-img { position: relative; border-radius: 16px; } .home-two-blog-area .blog-item .blog-img .image-effect { height: 270px; border-radius: 10px; } .home-two-blog-area .blog-item .blog-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: all 0.3s; transition: all 0.3s; } .home-two-blog-area .blog-item .blog-content { margin-top: 20px; display: inline-block; } @media screen and (max-width: 991px) { .home-two-blog-area .blog-item .blog-content { display: grid; } } @media screen and (max-width: 575px) { .home-two-blog-area .blog-item .blog-content { margin-top: 30px; } } .home-two-blog-area .blog-item .blog-content .business-btn { position: relative; display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.1em; text-align: center; text-transform: capitalize; border-radius: 4px; padding: 18px 25px; border: none; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; overflow: hidden; z-index: 1; background: rgba(255, 255, 255, 0.1); color: hsl(var(--white)); background: hsl(var(--primary)); color: hsl(var(--white)); padding: 10px 20px; display: inline-block; margin-top: 15px; } .home-two-blog-area .blog-item .blog-content .business-btn:hover { background-color: transparent; color: hsl(var(--white)); } .home-two-blog-area .blog-item .blog-content .business-btn:hover::before { width: 100%; left: 0; right: auto; } .home-two-blog-area .blog-item .blog-content .business-btn::before { content: ""; display: block; position: absolute; top: 0; left: auto; right: 0; bottom: 0; width: 0; height: 100%; background: hsl(var(--secondary)); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: -1; } @media screen and (max-width: 575px) { .home-two-blog-area .blog-item .blog-content .business-btn { margin-top: 0px; } } .home-two-blog-area .blog-item .blog-content h5 { font-weight: 700; font-family: "Inter"; color: hsl(var(--secondary)); margin-top: 6px; } .home-two-blog-area .blog-item .blog-content h5:hover { color: hsl(var(--primary)); } @media screen and (max-width: 991px) { .home-two-blog-area .blog-item .blog-content h5 { padding: 0; } } .add-dt { text-align: center; background: hsl(var(--primary)); position: absolute; bottom: -27px; right: 20px; width: 60px; border-radius: 10px; overflow: hidden; } @media screen and (max-width: 1199px) { .add-dt { bottom: 0px; right: 0px; } } .add-dt .day { color: hsl(var(--white)); font-family: "Fraunces"; font-size: 32px; font-weight: 700; } .add-dt .month { background: hsl(var(--secondary)); display: block; color: hsl(var(--white)); font-size: 14px; font-weight: 600; line-height: 27px; } /* ============================ 02.14 company logo css =============================== */ .home-two-company-logo-area .company-logo-content { display: grid; grid-template-columns: repeat(6, 2fr); background: hsl(var(--white)); border-left: 1px solid rgba(14, 0, 0, 0.1); border-top: 1px solid rgba(14, 0, 0, 0.1); } @media (max-width: 991.98px) { .home-two-company-logo-area .company-logo-content { grid-template-columns: repeat(4, 2fr); } } @media (max-width: 575.98px) { .home-two-company-logo-area .company-logo-content { grid-template-columns: repeat(3, 2fr); } } .home-two-company-logo-area .company-logo-content .com-logo { width: 100%; height: 130px; background: var(--white); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-right: 1px solid rgba(14, 0, 0, 0.1); border-bottom: 1px solid rgba(14, 0, 0, 0.1); -webkit-transition: all 0.3s; transition: all 0.3s; padding: 0 30px; } @media (max-width: 991.98px) { .home-two-company-logo-area .company-logo-content .com-logo { padding: 0 10px; } } @media screen and (max-width: 575px) { .home-two-company-logo-area .company-logo-content .com-logo { height: 100px; } } .home-two-company-logo-area .company-logo-content .com-logo:hover { background: hsl(var(--primary)); } .home-two-company-logo-area .company-logo-content .com-logo:hover img { -webkit-filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(49deg) brightness(8) contrast(104%); filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(49deg) brightness(8) contrast(104%); } .home-two-company-logo-area .company-logo-content .com-logo img { aspect-ratio: 3/2.3; -o-object-fit: contain; object-fit: contain; -webkit-transition: all 0.3s; transition: all 0.3s; } @media (max-width: 991.98px) { .home-two-company-logo-area .company-logo-content .com-logo img { aspect-ratio: 3/2; } } /* ============================ 03.15 footer css =============================== */ .home-two-footer-area { background-color: hsl(var(--two-section)); } .home-two-footer-area .footer-call-to-address { padding: 40px 0; } .home-two-footer-area .footer-call-to-address .text .fs-18 { color: hsl(var(--white)); } .home-two-footer-area .footer-call-to-address .text a { font-family: "Fraunces"; font-size: 32px; font-weight: 700; } .home-two-footer-area .footer-call-to-address .content { display: grid; grid-template-columns: repeat(3, 1fr); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 15px; } @media (max-width: 767.98px) { .home-two-footer-area .footer-call-to-address .content { grid-template-columns: 1fr; } } .home-two-footer-area .footer-call-to-address .adders-item { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 15px; } .home-two-footer-area .footer-call-to-address .adders-item:hover .adders-icon { background: hsl(var(--primary)); } .home-two-footer-area .footer-call-to-address .adders-item .adders-icon { min-width: 60px; height: 60px; border: 1px solid rgba(255, 255, 255, 0.17); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 100px; font-size: 24px; -webkit-transition: all 0.3s; transition: all 0.3s; } @media (max-width: 991.98px) { .home-two-footer-area .footer-call-to-address .adders-item .adders-icon { min-width: 50px; height: 50px; } } .home-two-footer-area .footer-call-to-address .adders-item .adders-text .fs-18 { color: hsl(var(--white)); } .home-two-footer-area .footer-call-to-address .adders-item .adders-text a, .home-two-footer-area .footer-call-to-address .adders-item .adders-text p { color: hsl(var(--gray4)); } @media (max-width: 991.98px) { .home-two-footer-area .footer-call-to-address .adders-item .adders-text a, .home-two-footer-area .footer-call-to-address .adders-item .adders-text p { font-size: 14px; } } .home-two-footer-area .footer-wedget-area { background-image: url("../images/home-two/footer-bg.png"); background-position: center top; background-repeat: no-repeat; background-size: cover; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 70px 0 70px; } .home-two-footer-area .footer-wedget-area .addres-text p { color: hsl(var(--gary4)); padding: 20px 0; } .home-two-footer-area .footer-wedget-area .addres-text .social-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 350px; } .home-two-footer-area .footer-wedget-area .addres-text .social-list a { color: hsl(var(--white)); font-size: 16px; -webkit-transition: all 0.3s; transition: all 0.3s; } .home-two-footer-area .footer-wedget-area .addres-text .social-list a:hover { color: hsl(var(--primary)); } .home-two-footer-area .footer-wedget-area .wedget-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } .home-two-footer-area .footer-wedget-area .wedget-content .wedget-item .wedget-title { color: hsl(var(--white)); font-family: "Inter"; font-size: 20px; font-weight: 700; margin-bottom: 15px; } .home-two-footer-area .footer-wedget-area .wedget-content .wedget-item .wedget-list { display: grid; gap: 15px; } .home-two-footer-area .footer-wedget-area .wedget-content .wedget-item .wedget-list a { position: relative; font-size: 16px; font-family: "Inter"; color: hsl(var(--gray5)); padding-left: 20px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .home-two-footer-area .footer-wedget-area .wedget-content .wedget-item .wedget-list a:hover { color: hsl(var(--primary)); } .home-two-footer-area .footer-wedget-area .wedget-content .wedget-item .wedget-list a:hover:before { width: 15px; } .home-two-footer-area .footer-wedget-area .wedget-content .wedget-item .wedget-list a::before { content: ""; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 5px; height: 5px; background: hsl(var(--primary)); border-radius: 50px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .home-two-footer-area .footer-wedget-area .wedget-content .wedget-item .newsletter p { color: hsl(var(--gray4)); } .home-two-footer-area .footer-wedget-area .wedget-content .wedget-item .newsletter p span { color: hsl(var(--primary)); } .home-two-footer-area .footer-wedget-area .wedget-content .wedget-item .newsletter form { position: relative; margin-top: 20px; } .home-two-footer-area .footer-wedget-area .wedget-content .wedget-item .newsletter form input { border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); background: none; -webkit-box-shadow: none; box-shadow: none; height: 50px; width: 100%; padding: 10px 50px 10px 15px; color: hsl(var(--white)); } .home-two-footer-area .footer-wedget-area .wedget-content .wedget-item .newsletter form button { color: hsl(var(--white)); position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .home-two-footer-area .copyright { border: none; background: none; font-size: 16px; text-align: center; padding: 24px 0; } .home-two-footer-area .copyright p { color: hsl(var(--gray5)); } /* ============================ Breadcrumb css =============================== */ .breadcrumb-area { background-image: url("../images/breadcrumb.jpg"); background-position: center top; background-repeat: no-repeat; background-size: cover; background-color: hsl(var(--two-section)); padding: 230px 0 80px; position: relative; z-index: 1; } @media screen and (max-width: 991px) { .breadcrumb-area { padding: 140px 0 80px; } } .breadcrumb-area:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(8, 35, 52, 0.849); z-index: -1; } .breadcrumb-area .breadcrumb__wrapper { text-align: center; } .breadcrumb-area .breadcrumb__title { margin-bottom: 10px; color: hsl(var(--white)); font-size: 3rem; } @media screen and (max-width: 991px) { .breadcrumb-area .breadcrumb__title { font-size: 2.25rem; } } @media screen and (max-width: 767px) { .breadcrumb-area .breadcrumb__title { font-size: 1.875rem; } } .breadcrumb-area .breadcrumb__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px; font-size: 18px; font-weight: 500; } .breadcrumb-area .breadcrumb__list a { color: hsl(var(--white)); } .breadcrumb-area .breadcrumb__list span { color: hsl(var(--primary)); } /* ============================ Services Details css =============================== */ .services-details-area .services-details__category { display: grid; gap: 24px; } .services-details-area .services-details__category .image-effect { border-radius: 15px; overflow: hidden; height: 100%; } .services-details-area .services-details__category p { text-align: justify; } .services-details-area .services-details__category .services-details__content { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 24px; } @media (max-width: 575.98px) { .services-details-area .services-details__category .services-details__content { grid-template-columns: 1fr; } } .services-details-area .services-details__category .services-details__content h4, .services-details-area .services-details__category .services-details__content .h4 { font-family: "Inter"; margin-bottom: 15px; } .services-details-area .services-details__category .services-details__content ul { display: grid; gap: 10px; } .services-details-area .services-details__category .services-details__content ul li { color: hsl(var(--gray3)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .services-details-area .services-details__category .services-details__content .progress-card { background: hsl(var(--white)); border-radius: 12px; display: grid; grid-template-columns: 90px 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; padding: 30px; } @media (max-width: 575.98px) { .services-details-area .services-details__category .services-details__content .progress-card { grid-template-columns: 1fr; text-align: center; } } .services-details-area .services-details__category .services-details__content .progress-card .progress-description { color: hsl(var(--gray3)); } .services-details-area .services-details__category .services-details__content .progress-card .progress-container { min-width: 80px; height: 80px; margin: 0 auto; } .services-details-area .services-details__category .services-details__content .progress-card .progress-container .progress-canvas { width: 80px; } .sidebar-content { display: grid; gap: 24px; } .sidebar-content .search-box { position: relative; } .sidebar-content .search-box input { padding: 12px 30px; padding-right: 50px; border: 0; outline: none; border-radius: 10px; background: hsl(var(--white)); width: 100%; height: 65px; border-radius: 1px solid #E8E8E8; } .sidebar-content .search-box input::-webkit-input-placeholder { color: hsl(var(--gray3)); } .sidebar-content .search-box input::-moz-placeholder { color: hsl(var(--gray3)); } .sidebar-content .search-box input:-ms-input-placeholder { color: hsl(var(--gray3)); } .sidebar-content .search-box input::-ms-input-placeholder { color: hsl(var(--gray3)); } .sidebar-content .search-box input::placeholder { color: hsl(var(--gray3)); } .sidebar-content .search-box button { color: #4a4a4a42; position: absolute; right: 0px; padding: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .sidebar-content .services-details__sidebar { background: hsl(var(--white)); border-radius: 10px; padding: 30px; } .sidebar-content .services-details__sidebar .sidebar__title { font-family: "Inter"; color: hsl(var(--secondary)); } .sidebar-content .services-details__sidebar .sidebar__list { display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 10px; } .sidebar-content .services-details__sidebar .sidebar__list li { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .sidebar-content .services-details__sidebar .sidebar__list li:last-child { border: 0; } .sidebar-content .services-details__sidebar .sidebar__list li a { color: hsl(var(--secondary)); font-size: 16px; padding: 10px 0; -webkit-transition: all 0.3s; transition: all 0.3s; display: block; } .sidebar-content .services-details__sidebar .sidebar__list li a:hover { color: hsl(var(--primary)); } .sidebar-content .services-details__sidebar.details-tags .sidebar__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 20px; } .sidebar-content .services-details__sidebar.details-tags .sidebar__list li { border: 0; } .sidebar-content .services-details__sidebar.details-tags .sidebar__list a { border-radius: 4px; border: 1px solid hsl(var(--border-color)); background: hsl(var(--white)); padding: 5px 10px; } .sidebar-content .services-details__sidebar.details-tags .sidebar__list a:hover { color: hsl(var(--white)); background: hsl(var(--primary)); border-color: hsl(var(--primary)); } .sidebar-content .project-info-sidebar { border-radius: 10px; background: hsl(var(--white)); padding: 40px 30px; } .sidebar-content .project-info-sidebar .sidebar__title { font-family: "Inter"; color: hsl(var(--secondary)); } .sidebar-content .project-info-sidebar .sidebar__list { display: grid; gap: 18px; margin-top: 20px; } .sidebar-content .project-info-sidebar .fs-20 { color: hsl(var(--secondary)); font-weight: 600; } .sidebar-content .project-info-sidebar .fs-16 { color: hsl(var(--gray3)); } .sidebar-content .call-info-box { background-color: hsl(var(--primary)); border-radius: 10px; text-align: center; padding: 50px 30px 45px; color: hsl(var(--white)); -webkit-transition: all 0.3s; transition: all 0.3s; } .sidebar-content .call-info-box:hover { background: hsl(var(--secondary)); } .sidebar-content .call-info-box h3 { color: hsl(var(--white)); margin-top: 5px; } .sidebar-content .download-btn a { color: hsl(var(--white)); background: hsl(var(--secondary)); border-radius: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 20px; gap: 10px; -webkit-transition: all 0.3s; transition: all 0.3s; } .sidebar-content .download-btn a:hover { background: hsl(var(--primary)); } .progress-container { position: relative; min-width: 100px; height: 100px; } .progress-canvas { position: absolute; top: 0; left: 0; } .pagination-content { gap: 10px; } .pagination-content .page-link { border: 1px solid hsl(var(--border-color)); background: no-repeat; border-radius: 100px !important; width: 40px; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: hsl(var(--gray3)); font-size: 18px; } .pagination-content .page-link.active, .pagination-content .page-link:hover { color: hsl(var(--white)); background: hsl(var(--primary)); } /* ============================ all project css =============================== */ .all-project-area { background: none; } .all-project-area::after { display: none; } .all-project-two { background: none; } .all-project-two .col-xl-3 { display: grid; gap: 24px; } .all-project-two .col-xl-3:nth-child(even) { margin-top: 50px; } /* ============================ blog details css =============================== */ .blog-details-area .blog-item { background: hsl(var(--white)); border-radius: 10px; overflow: hidden; position: relative; } .blog-details-area .blog-item .blog-img img { width: 100%; } .blog-details-area .blog-content { padding: 30px; display: grid; gap: 20px; } .blog-details-area .blog-content p { text-align: justify; } .blog-details-area .blog-content .business-btn { background: hsl(var(--primary)); border-radius: 5px; color: hsl(var(--white)); padding: 0px 8px; display: inline-block; } .blog-details-area .blog-content img { border-radius: 10px; } .blog-details-area .blog-content .category-list { display: grid; gap: 10px; margin-top: 20px; } .blog-details-area .blog-content .category-list li { font-size: 18px; color: hsl(var(--secondary)); font-weight: 500; } .blog-details-area .blog-content .post-tags span { padding-right: 10px; } .blog-details-area .blog-content .post-tags a { color: hsl(var(--primary)); font-weight: 500; font-size: 16px; margin-right: 10px; } .blog-details-area .blog-content .post-social-share { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .blog-details-area .blog-content .post-social-share a { border: 1px solid hsl(var(--border-color)); font-style: 14px; color: hsl(var(--gary4)); width: 38px; height: 38px; border-radius: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .blog-details-area .blog-content .post-social-share a:hover { background: hsl(var(--primary)); color: hsl(var(--white)); } .blog-details-area .comments__area { background: hsl(var(--white)); border-radius: 10px; padding: 30px; } .blog-details-area .comments__area .comments-list { margin-top: 30px; display: grid; gap: 20px; } .blog-details-area .comments__area .comment { display: grid; grid-template-columns: 60px 1fr; gap: 20px; border-bottom: 1px solid #EAEAEA; padding-bottom: 20px; } .blog-details-area .comments__area .comment:last-child { border-bottom: 0; padding-bottom: 0; } .blog-details-area .comments__area .comment .comment-img img { width: 60px; height: 60px; border-radius: 100px; } .blog-details-area .comments__area .comment .comment-content { display: grid; gap: 6px; } .blog-details-area .comments__area .comment .comment-content h5 { color: hsl(var(--secondary)); margin-bottom: 0; } .blog-details-area .comments__area .comment .comment-content span { color: hsl(var(--paragraph)); } .blog-details-area .comments__area .comment .comment-content p { color: hsl(var(--paragraph)); } .blog-details-area .leave__comment { background: hsl(var(--white)); border-radius: 10px; padding: 30px; } .blog-details-area .leave__comment .commentForm { margin-top: 30px; } .blog-details-area .leave__comment .commentForm label { color: hsl(var(--gray3)); font-weight: 500; margin-bottom: 10px; } .blog-details-area .leave__comment .commentForm input, .blog-details-area .leave__comment .commentForm textarea { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid hsl(var(--border-color)); margin-bottom: 20px; } .blog-details-area .leave__comment .commentForm input:focus-visible, .blog-details-area .leave__comment .commentForm input:focus, .blog-details-area .leave__comment .commentForm textarea:focus-visible, .blog-details-area .leave__comment .commentForm textarea:focus { outline: none; -webkit-box-shadow: 0px 0px 7px 1px hsl(var(--primary)/0.3); box-shadow: 0px 0px 7px 1px hsl(var(--primary)/0.3); } .blog-details-area .leave__comment .commentForm button { position: relative; display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.1em; text-align: center; text-transform: capitalize; border-radius: 4px; padding: 18px 25px; border: none; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; overflow: hidden; z-index: 1; background: rgba(255, 255, 255, 0.1); color: hsl(var(--white)); width: 100%; background: hsl(var(--primary)); color: hsl(var(--white)); height: 52px; } .blog-details-area .leave__comment .commentForm button:hover { background-color: transparent; color: hsl(var(--white)); } .blog-details-area .leave__comment .commentForm button:hover::before { width: 100%; left: 0; right: auto; } .blog-details-area .leave__comment .commentForm button::before { content: ""; display: block; position: absolute; top: 0; left: auto; right: 0; bottom: 0; width: 0; height: 100%; background: hsl(var(--secondary)); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: -1; } /* ============================ contact-us css =============================== */ .contact-us-area .contact-us__content { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 40px; } .contact-us-area .contact-us__content .contact-us__item { background: hsl(var(--white)); display: -webkit-box; display: -ms-flexbox; display: flex; padding: 24px; border-radius: 10px; gap: 15px; -webkit-transition: all 0.3s; transition: all 0.3s; } .contact-us-area .contact-us__content .contact-us__item:hover { -webkit-transform: translateY(-10px); transform: translateY(-10px); background: hsl(var(--primary)); } .contact-us-area .contact-us__content .contact-us__item:hover .icon { background: #E3EDFF; } .contact-us-area .contact-us__content .contact-us__item:hover .text p, .contact-us-area .contact-us__content .contact-us__item:hover .text .fs-20 { color: hsl(var(--white)); } .contact-us-area .contact-us__content .contact-us__item .icon { min-width: 60px; height: 60px; border-radius: 100px; border: 1px solid #E3EDFF; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.3s; transition: all 0.3s; } .contact-us-area .contact-us__content .contact-us__item .text .fs-20 { color: hsl(var(--secondary)); -webkit-transition: all 0.3s; transition: all 0.3s; } .contact-us-area .contact-us__content .contact-us__item .text p { color: hsl(var(--gray3)); -webkit-transition: all 0.3s; transition: all 0.3s; } .contact-us-area .consulting-services-img { position: relative; } .contact-us-area .consulting-services-img .image { position: relative; z-index: 1; padding-left: 30px; padding-right: 30px; } .contact-us-area .consulting-services-img .image::before { content: ""; position: absolute; bottom: 0; left: 0; z-index: -1; width: 100%; height: 80%; border-radius: 600px 600px 0px 0px; background-color: hsl(var(--primary)); background-image: url("../images/home-two/csbg.png"); } .contact-us-area .consulting-services-img .image img { width: 100%; height: auto; } #responseMessage { margin-top: 15px; padding: 10px; border-radius: 5px; font-size: 14px; display: none; } #responseMessage.success { color: hsl(var(--white)); background-color: hsl(var(--success)); } #responseMessage.error { color: hsl(var(--white)); background-color: hsl(var(--error)); } /*# sourceMappingURL=main.css.map */